Outlecture
Home
About
Technology
Design
Video
Contact
Official
Outlecture
Home
About
Technology
Design
Video
Contact
Twitter Official
  • Home
  • Design

XD のおすすめの教材8選! 【 2023年3月 最新版】

更新日:2023年3月11日

こちらは、独学で XD を学ぼうとしている初学者の方に最適な学習講座を紹介するページです。

目次

1. 本ページの説明

1. 本ページの説明

XD を独学で学ぶ上でおすすめの講座を動画プラットフォームから合計8選紹介します。

XD とは

Adobe XD (エックスディー)は、アメリカのAdobe社が提供しているソフトウェアで、webサイトやアプリのUI/UXデザインができます。ワイヤーフレームの作成から動作確認をするためのプロトタイプの作成まで一環として行うことができます。また、共同編集やコメントも残せる機能があるので初期段階からUI/UXを初めとする各種検証も可能となっております。ここまで豊富な機能があるので学習コストもかかるのではと考えますが、操作も直感的に行うことができるため学習コストの低いことも特長にあげられます。

本サイト「Outlecture(アウトレクチャー)」は講座の評価、情報の鮮度、購入者や視聴者数、直近の数値上昇率などを全てバランスよく採点し、ユーザーにとって最適な講座のみ抜粋できるよう独自のアルゴリズムで評価を行っています。

また、各動画プラットフォームもそれぞれ特徴があり、「こういう状況の方にはこちらの方が良い」というユースケースも合わせて説明していきます。

XDをこれから学ぼうとしているみなさまのご参考にしていただければ幸いです。

2. Udemy おすすめ講座5選

Outlectureで厳選したおすすめのUdemy講座5選はこちらです。

コース名 平均評価 総購入者数 先月の購入者数
(2023年2月)
コースレベル コース時間 作成日 更新日 料金

【2022年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。UI/UXデザイナーを目指す完全ガイ

thumbnail
4.21 12,003 162 初級〜上級 11 時間 28 分 2019年9月18日 2021年11月1日 ¥21,800

ちゃんと学ぶ、Figma & Adobe XD

thumbnail
4.76 1,279 112 初級 6 時間 9 分 2022年2月28日 2023年2月5日 ¥10,000

【2022年最新版】ゼロからのAdobe XDの使い方プログラム

thumbnail
4.45 249 7 初級 4 時間 8 分 2021年11月14日 2021年11月22日 ¥2,400

【2019年7月更新】誰でもかんたんに学べるAdobe XD入門講座|実戦で使えるXDの基本機能を完全にマスターできる!

thumbnail
4.17 4,734 17 初級 5 時間 15 分 2017年9月23日 2022年11月21日 ¥11,800

【2021年最新】応用編:XDで本格エステサロンのWEBサイトをつくろう!現場のプロが教える実務で使えるデザイン知識♪

thumbnail
3.8 413 - 初級〜上級 1 時間 7 分 2021年9月15日 2021年11月3日 ¥27,800

Udemy(ユーデミー)は、アメリカ・シリコンバレー発祥のユニコーン企業で、世界最大級のオンライン学習プラットフォームを運営しています。

Udemyの特徴は、

  • 15.5万以上(※海外講座含む)の豊富な講座を提供している
  • 講師陣の多くが世界最先端の現場で活躍されている
  • 1講座あたり数千~数万円で、キャンペーン時は70~90%OFFとなる良心的な値段
  • 講座は1度購入すれば視聴期限なく受講でき、30日返金保証もついている
  • 講座は0.5~2倍の変速機能を備え、自分のペースで学習することができ、専用アプリを使えばスマホからでもオフライン環境で受講可能
  • 講師に直接掲示板から質問ができるため、疑問を解決し自学自習をサポートしてくれる

等があげられます。

Outlectureの管理メンバーは、ソフトウェアエンジニアやクリエイター、webデザイナーが現役で活躍しています。私たちは初めて触るプログラミング言語やプロダクトの多くはUdemyの受講からキャッチアップをはじめています。
私たちの体験談として、Udemyの講座の質は非常に高いと感じています。講師陣が世界最先端で活躍している方々ばかりで、最先端の知識や現場でのノウハウを丁寧にわかりやすく教えてくれます。試験で使う知識ではなく、実際の現場・案件で使う知識と技術を習得することができます。

Udemyの講座は、実際の現場で活用したい方や自己学習を始めたい方に特におすすめです。一度購入すれば、視聴期限がなく、30日間の返金保証もあるため、安心して学びを始めることができます。

こんな方におすすめ

  • 実案件でXDを使用する
  • 現役の(世界)トップ戦線で活躍している方のノウハウを学びたい
  • サブスクリプションの加入に抵抗のある

各講座の詳細は以下に記載します。


【2022年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。UI/UXデザイナーを目指す完全ガイ

WEBデザイナーからUI/UXデザイナーへ。Adobe XDを使ってUI/UXプロトタイピングのスキルを身につける実践的なコース。

thumbnail
平均評価
4.21
総購入者数
12,003
先月の購入者数
(2023年2月)
162
コースレベル
初級〜上級
コース時間
11 時間 28 分
作成日
2019年9月18日
更新日
2021年11月1日
料金
¥21,800

このコースは最新のAdobe XDのすべてを基礎から完全にマスターし、WEBデザイナーがUI/UXデザイナーへレベルアップすることを目的に作られた講座です。XDははじめてという初心者の方から、中級以上の方の学び直しやトレーニングにも役立つよう、ひとつひとつの機能について詳しく、丁寧に説明しています。

このコースはNEC、SONY、トヨタ、三菱商事など多くの日本のトップ企業に採用されている実績のある講座です。

機能の紹介や単なる操作方法の説明に終わらせず、実践的な作品制作をしながら機能の完全理解と応用力を育てることに重点をおきました。簡単な紹介程度の使い方だけでなく詳細なテクニックやTipsまで解説した日本でははじめて実用に足るXDの講座です。


このコースを終了するとUI/UXデザイナーとしてスタートできる最先端の知見を最短で確実に身につけられます。

UI/UXデザインはこれからのWEBサイト開発で間違いなく主流になる重要な技術です。そしてAdobe XDはUI/UXデザインを推し進める実践的なツールとして今や欠かせない存在です。Adobe XDをマスターすることはUI/UXデザイナーへレベルアップする最短のルートです。


Adobe XDのすべてが確実に学べる

  • Adobe XDのほぼすべての機能を詳しく、分かりやすく解説しています。

  • ありきたりの解説書とちがい、実際の作品制作を通して実践的なスキルを身につけられます。

  • 初心者の方にも分かる、誤解のない説明

  • XDは使えるけれど、きちんと基礎から体系的に学びなおしたい方にも最適です。

  • すべての制作作品には練習素材が添付されているのですぐにはじめられます。


最新のXDが学べる講座

Adobe XDは現在同社の中でも急ピッチで改良が進められているソフトウェアです。ひんぱんにバージョンアップが繰り返され、変化の激しいソフトですがこのコースでは最新の技術を学ぶことができます。


学習内容
7つのセクション、90本のレクチャーを合計11時間半のビデオで解説しています。

最初は簡単なテクニックから徐々に高度なテクニックを使えるようにステップを踏んで進めます

リピートグリッドやレスポンシブリサイズなどXDに特有で重要な機能にはより詳しい作品制作が演習として用意されています。

XDの最新の機能を使って、新しいテクニックで早く制作できる方法を学べます。

XDを単なるワイヤーフレーム作成のためののソフトではなく、WEBサイト開発のキーになるパワフルなツールにします。

  1. Adobe XDとは
  2. プロトタイピング
  3. 情報共有の方法
  4. 工程の説明
  5. Adobe XDのインターフェイス
  6. シェイプの描き方
  7. 文字とカラー
  8. グループ化
  9. ラフなwireframeの作成
  10. 学習の準備
  11. アートボードの準備
  12. メインビジュアルの配置
  13. リピートグリッド
  14. タイル状の画像配置(1)
  15. タイル状の画像配置(2)
  16. テキストエリア(1)
  17. テキストエリア(2)
  18. 写真入りの記事(1)
  19. 写真入りの記事(2)
  20. SNSリンクボタンの配置
  21. フッターの配置
  22. このセクションの復習(1)
  23. このセクションの復習(2)
  24. プロトタイプの制作
  25. 共有の設定
  26. WEBフォント
  27. 完成品の検討
  28. UIキットの取得
  29. WindowsでのUIキットの入手
  30. Status barの配置
  31. タイトルと文字列の配置
  32. Nav Barの配置
  33. 画像プレースフォルダの配置
  34. 画像の一括挿入
  35. ガイドを使った整列
  36. 野鳥図鑑の仕上げ
  37. 最新の目撃情報
  38. 観察会のご案内
  39. 観察会記録
  40. サブページのプロトタイプ制作
  41. このセクションのターゲット
  42. シンボル(コンポーネント)化
  43. 送信フォーム(1)
  44. 送信フォーム(2)
  45. メジロのページ(1)
  46. メジロのページ(2)
  47. 観察会のお知らせ
  48. インタラクション(1)
  49. インタラクション(2)
  50. マイクロインタラクション
  51. 復習(1)
  52. 復習(2)
  53. iPadProのプロトタイプ
  54. セクションの内容
  55. リサイズの基本
  56. Nav barの制作
  57. 野鳥図鑑の制作
  58. グリッドレイアウト
  59. 文字スタイル
  60. 観察会案内(1)
  61. 観察会案内(2)
  62. 文字スタイルの登録
  63. カラーの登録
  64. 観察会記録の制作
  65. SNSとフッター
  66. レスポンシブリサイズ(1)
  67. レスポンシブリサイズ(2)
  68. レスポンシブリサイズ(3)
  69. iPadPro サブページの制作
  70. 送信フォームページ
  71. メジロのページ制作(1)
  72. メジロのページ制作(2)
  73. 観察会案内ページ
  74. iPadProプロトタイプ完成
  75. アセットパネル(カラー)
  76. アセットパネル(文字スタイル)
  77. コンポーネントの登録
  78. レイアウトグリッド
  79. WEBメインページの制作
  80. WEBヘッダーの制作
  81. WEB Nav barの制作
  82. WEB 野鳥大図鑑の制作
  83. WEB最新の目撃情報
  84. WEB 観察会記録
  85. WEB Contactページ
  86. WEBメジロのページ
  87. WEB観察会案内ページ
  88. 仕上げ
  89. 画像の書き出し
  90. CSSコード書き出し
ちゃんと学ぶ、Figma & Adobe XD

FigmaおよびAdobe XDで作るボタンデザイン、バナーデザインとアプリ設計

thumbnail
平均評価
4.76
総購入者数
1,279
先月の購入者数
(2023年2月)
112
コースレベル
初級
コース時間
6 時間 9 分
作成日
2022年2月28日
更新日
2023年2月5日
料金
¥10,000

Figmaは2022年にAdobe社が買収したデザインスイートです。画像パーツや画面デザイン、またプロトタイプデザインや画面設計などをWebブラウザ上で行える、高度なデザインツールです。また、Adobe XDは AdobeのデザインスイートであるCreative Cloudの1つとして、同じく設計やデザインなどを行えるツールとして開発されていました。

この講座では、ディレクターとしてWebデザインなどを行う講師のたにぐちと、デザイナーのanygraphicaにより、Figmaおよび、XDをデザインツールとしての側面と設計ツールの側面を両方紹介します。

Figma / Adobe XDをこれから使っていきたいという方はもちろん、すべての機能を使いこなせていないという方の復習にも活用頂ければ幸いです。

  1. 紹介
  2. Udemyでの受講にあたって
  3. Figma編: Figmaの基本操作を学んでボタンを作ろう
  4. Figmaのアカウントを作成してログインしよう
  5. 長方形や楕円などのシェイプを描こう
  6. デザインパネルで細かな調整を行おう
  7. ボタンパーツを作成しよう
  8. テキストツールでボタンのラベルを作ろう
  9. テキストツールの細かい調整をしよう
  10. ペンツールでパス編集とベジェ曲線を描こう
  11. ペンツールでボタンの矢印を描こう
  12. パス編集をして、シェイプを自由に編集しよう
  13. 位置揃えツールで、シェイプの位置揃えを調整しよう
  14. グループ化で、複数のシェイプをグループにしよう
  15. レイヤーでシェイプの前後関係を調整しよう
  16. 合成とグループ化の違いについて知ろう
  17. コンポーネント化して再利用可能なパーツにしよう
  18. Figma編:バナー画像を作成しよう
  19. 写真素材を挿入しよう
  20. プラグインを使って写真の挿入を簡単にしよう
  21. マスクを使って、写真を一部分だけ切り抜いて利用しよう
  22. Adobe Illustratorのデータを挿入しよう
  23. フィルターを利用して写真を加工しよう
  24. ロックをして不意の変更ができないようにしよう
  25. 文字要素を配置してバナーを仕上げよう
  26. エクスポート機能を利用して画像を書きだそう
  27. Figma編:プロトタイプモードでスマホアプリの設計をしよう
  28. Figmaコミュニティから、テンプレートを利用しよう
  29. 画像パーツをコピーしよう
  30. レイアウトグリッドを表示して、画面のレイアウトを調整しやすくしよう
  31. 制約を設定して、画面サイズが変化したときのレイアウトを設計しよう
  32. 子フレームを使ってレイアウトしやすくしよう
  33. オートレイアウト機能を使って、複数のパーツを配置しよう
  34. オートレイアウトについてさらに詳しく知ろう
  35. オートレイアウトを使って、柔軟なボタンを作成しよう
  36. プレゼンテーションモードを使って作った設計をプレビューしよう
  37. 詳細画面を制作しよう
  38. インタラクションを設定して画面を遷移できるようにしよう
  39. プロパティを利用してタップで状況の変わるボタンを作ろう
  40. プロパティを使って、ボタンのテキストも変更できるようにしよう
  41. インタラクションを使って、ローディングアニメーションを作成しよう
  42. 共有機能でデザイナーやプログラマーと共有しよう
  43. Adobe XD編:Adobe XDの基本操作を学び、ボタンをデザインしよう
  44. 新規ドキュメントの制作とアートボード
  45. 描画ツールを使って、長方形や円を描こう
  46. ベクターオブジェクトを編集しよう
  47. プロパティパネルで細かな調整をしよう
  48. ペンツールでベジェ曲線を描こう
  49. パスツールを使って、細かい調整を行おう
  50. グラデーションツールでボタンの色を塗ろう
  51. 文字ツールでボタンのラベルを作成しよう
  52. グループツールで複数のオブジェクトをグループにしよう
  53. レイヤーパネルでのグループの管理方法を知ろう
  54. コンポーネントを利用して、再利用可能なパーツを作ろう
  55. Adobe XD編:Photoshop/IllustratorやAdobe Stockと組み合わせてバナー画像を作成しよう
  56. Adobe Photoshop/Illustratorとの連携を知ろう
  57. Creative Cloudライブラリ(CCライブラリ)で素材を受け渡そう
  58. レイヤーパネルで前後関係を調整しよう
  59. Adobe Stockで無料で使える写真素材を手に入れよう
  60. マスクを使って、写真を切り抜こう
  61. ロック機能でオブジェクトの編集をロックしよう
  62. バナー画像を作ろう①
  63. バナー画像を作ろう②
  64. エクスポート機能で作ったバナー画像を書きだそう
  65. Adobe XD編:プロトタイプ機能でアプリの設計を作成しよう
  66. [補足] UIキットの入手方法の変更について
  67. UIキットで設計に使えるパーツを入手しよう
  68. ステートを設定して、複数の見た目を定義しよう
  69. グリッドレイアウトで、画面レイアウトをやりやすくしよう
  70. リピートグリッド機能で、同じパーツを連続して配置しよう
  71. レスポンシブ機能で、複数の画面サイズのレイアウトを設計しよう
  72. スタックでボタン類をレイアウトしやすくしよう
  73. パディングを設定して、長さが自動で調整されるボタンを作ろう
  74. プロトタイプ機能で動きをシミュレーションしよう①
  75. プロトタイプ機能で動きをシミュレーションしよう②
  76. ステート機能でトグル時やホバー時のシミュレーションをしよう
  77. アニメーション機能でローディング時アニメーションを作成しよう
  78. 共有機能でXDを持っていないエンジニア・クライアントにもデータを共有しよう
【2022年最新版】ゼロからのAdobe XDの使い方プログラム

Adobe XD初心者の方向けに、ランディングページのデザインを作成するのに必要な知識・スキルをご紹介していくコースになります。クライアントに提案するときにパパッとデザインを作成したい方や基本的な使い方を学びたい方におすすめです。

thumbnail
平均評価
4.45
総購入者数
249
先月の購入者数
(2023年2月)
7
コースレベル
初級
コース時間
4 時間 8 分
作成日
2021年11月14日
更新日
2021年11月22日
料金
¥2,400

このコースは、

  • Adobe XDをこれから使っていく・使い始めて間もないという初心者の方

  • Adobe XDの基本的な使い方を学びたい方

  • サイトの制作をしていて、クライアントに提案するためのデザインをXDで作成しようと思っている方

など、Adobe XDをあまり使ったことがない初心者の方向けの講座です。

  • Adobe XDの基本的な使い方:基礎の基礎の部分。この機能を知らないと何も出来ないというレベルの基本的な使い方。

  • アニメーションやプロトタイプの作り方・設定:ホバーのアニメーションを設定したり、複数のページを連携したり。ちょっとだけ高いレベルの使い方。

  • 演習:基本的な使い方を学んだ後、アニメーション・プロトタイプの作り方や設定を学んだ後、それぞれ大きく2回の演習を設けている。

    基本的な使い方を学んだ後は、基本的な使い方を駆使すれば完成させられるような演習。アニメーション・プロトタイプを学んだ後は、全体の総復習となる演習。

といった内容になっています。Adobe XDを使ってランディングページのデザインを作成するための知識・スキルを身につけることができます。

※アプリ開発者やかなり高度で、複雑なプロトタイプを作成したいと考えている方には適していません。

  1. はじめに
  2. 【必ずご覧ください。】
  3. おすすめの画像素材
  4. Adobe XDの基本的な使い方
  5. イントロダクション
  6. ファイルを新規作成する
  7. 基本的な画面の見方
  8. 背景色を変更する
  9. 背景画像を追加する方法
  10. テキストの使い方:基本編
  11. テキストの使い方:応用編
  12. アートボードの大きさを変更したい場合と注意点
  13. 図形を追加する方法
  14. 図形に画像を追加する方法
  15. チェックアイコンを作成する方法
  16. チェックボックス・ボタンを作成する方法
  17. レイヤーの名前を変更する方法
  18. ボタンの作り方
  19. コンポーネントとグループの違い
  20. ボタンのパディングを調節する方法
  21. グリッドを作成する方
  22. カラースウォッチ(カラーパレット)の使い方
  23. ライブラリーとは?
  24. プラグインとは?
  25. Icons 4 Designを導入してアイコンを設置する
  26. Undrawプラグインの使い方:イラストをページに追加する方法
  27. 演習問題1
  28. イントロダクション
  29. 演習問題のLP画像はこちら
  30. 作成していくページの外観
  31. ヘッダーの作成
  32. ファーストビューを作成する パート1
  33. ファーストビューを作成する パート2
  34. ファーストビューを作成する パート3
  35. 悩みセクションの背景を追加する
  36. 悩みのコンテンツを作成する
  37. 強みセクションを作成する
  38. お客様のセクションを作成する
  39. お問い合わせクションを作成する パート1
  40. お問い合わせセクションを作成する パート2
  41. お問い合わせセクションを作成する パート3
  42. フッタークレジットを作成する
  43. アニメーションやプロトタイプの作り方・設定
  44. イントロダクション
  45. ナビゲーションメニューをホバー時に背景色とテキストカラーを切り替える方法
  46. ホバー時のアニメーションとデュレーションを調節する方法
  47. トグルステートの使い方:スイッチボタンの作り方
  48. レビューをスライダー形式で表示する方法 パート1
  49. クリックトゥースクロールの設定:ボタンをクリックして次のセクションまで移動する方法
  50. 複数のアートボードを作成する
  51. ボタンやリンクをクリックして別のページ(アートボード)に誘導する
  52. ドロップダウンメニューの作り方 パターン1
  53. ドロップダウンメニューの作り方 パターン2
  54. トグルメニューの作り方
  55. 演習問題2
  56. イントロダクション
  57. 演習問題のLP画像はこちら
  58. 作成するランディングページ・プロトタイプの外観
  59. ヘッダーを作成する
  60. ヘッダーにボタンを追加する
  61. メニュー のホバーの設定
  62. ファーストビューのヘッダー周りを作成する
  63. ファーストビューの画像を設定する
  64. 商品紹介のセクションを作成する
  65. 特徴のセクションを作成する
  66. 動画を追加する
  67. 選ばれる理由のセクションを作成する
  68. 使用ケースのセクションを作成する
  69. レビューのセクションを作成する
  70. レビューのデザインを設定する
  71. よくある質問を作成する
  72. フッターセクションを作成する
  73. フッターCTAを作成する
  74. ドロップダウンメニューを作成する
  75. ドロップダウンメニューのプロトタイプ設定をする
  76. デモページの作成とヘッダーの追加
  77. デモページのコンテンツを作成する
  78. お問い合わせページの作成
  79. デモページとお問い合わせページのプロトタイプの設定
【2019年7月更新】誰でもかんたんに学べるAdobe XD入門講座|実戦で使えるXDの基本機能を完全にマスターできる!

アメリカに次いで日本が世界で2番目に使われているほど大注目されているAdobe XD。 この講座では、XDの基本操作から実践演習までを学習し、誰でもプロトタイプを作成できるようになります。 また、バージョンアップで追加された機能も随時更新!

thumbnail
平均評価
4.17
総購入者数
4,734
先月の購入者数
(2023年2月)
17
コースレベル
初級
コース時間
5 時間 15 分
作成日
2017年9月23日
更新日
2022年11月21日
料金
¥11,800

■■■■■

【2019年7月更新】

・基本機能の一部を最新バージョンに合わせて更新

 └ 多角形ツールの追加に伴い「描画ツールの使いかた」を更新

 └ アセット機能内の「シンボル」→「コンポーネント」変更に伴い「アセット機能の解説」を更新

 └ 最新バージョンに合わせた「アートボード内の基本操作」「CCライブラリ機能の解説」「プレビューの公開・共有方法について」 「プロトタイプの設定方法」を更新

 └ 「デザインスペックの確認・共有方法について」の解説を追加

・基本操作のおさらいとして「フォームや表を作成してみよう」のセクションを追加

・アニメーション機能などの基本的な解説「アプリのような動きや機能をつけてみよう」のセクションを追加

■■■■■

※注意

AdobeXDは随時バージョンを更新しており、一部機能やインターフェイスに若干の違いがあります。

一部ベータ版を使用しているレクチャーもありますが、基本的な操作に影響はありませんのでご安心ください。

■■■■■

皆さん初めまして、 デザイナーをしております株式会社IMAKEの濱野と申します。 

昨今、UI・UXデザインの重要性に注目されています。

なぜなら、ユーザビリティが高くないと利用者が使いづらいと感じてしまい、せっかく作ったサービスやサイトからユーザーが離れていってしまう可能性があるためです。

また、サイトやアプリが完成した後に、ユーザーやクライアントから使い勝手のレビューをもらって、ワイヤーフレームから作り直さなければいけないケースもあります。

最近の制作フローでは、プロトタイプツールを用いて開発前になるべくプロトタイプを作っておくことで、テストマーケティングをしたり、コミュニケーションコストなどを削減して、なるべくリスクを軽減していく動きが増えています。

しかし、今までWebデザイン・アプリデザインの動的なアプローチを相手に伝えるためのプロトタイプを作るには、大変な労力を必要としました。そこで開発されたのがAdobe XDです。

本コースでは、「Adobe XDの基本操作」から「Adobe XDを用いたプロトタイプの制作方法」は勿論のこと、「UI/UXの重要性」や「利用方法」、「用語の理解」、「ケーススタディを用いた実践」などを解説していきます。

なお、講師が使用するOSはWindows10です。

今回は”誰でも”と使えるいうところを踏まえ、Windowsユーザーでも使えるように解説をしていきたいと思います。 
Macユーザーでもわかるような説明をしておりますのでご安心ください。
ちなみに、一部Mac版にしかない機能もありますので、予めご了承下さい。


是非この機会に動画をご覧いただき、一緒にAdobe XDの基本を学んで実際の制作現場で使っていけるようにXDを使いこなしましょう!

  1. はじめに
  2. このカリキュラムではどんなことを行うのか?
  3. Adobe XDとは?
  4. Adobe XDの特徴
  5. 開発手法から見るXDのアップデート
  6. ワイヤーフレーム・デザインカンプ・プロトタイプ・モックアップなどの用語の違い
  7. プロトタイプの必要性
  8. 基本操作を学んでみよう
  9. インストール方法・スタート画面・新規作成方法について解説
  10. 操作画面(ワークスペース)の解説
  11. アートボード内の基本操作
  12. レイヤーの解説
  13. 描画ツールの使い方
  14. 配色・グラデーション・シャドウ・ぼかし効果の設定方法
  15. 2パターンのテキスト入力方法
  16. パスの操作方法
  17. 画像の配置とマスクの設定
  18. XDの真骨頂!リピートグリッド
  19. レイアウトを整えるための基本操作(グリッド・距離と位置の計測)
  20. アセット機能の解説
  21. CCライブラリ機能の解説
  22. プロトタイプの設定方法
  23. プレビューの公開・共有方法について
  24. デザインスペックの確認・共有方法について
  25. 保存・データ書き出し・録画機能について
  26. UIキットのご紹介
  27. チュートリアルをやってみよう -アプリデザインの作成-
  28. デザインプレビュー・スプラッシュスクリーンの作成・プロファイルの画像選択・ブログ投稿リストの作成
  29. 画面スクロール部分の作成・インタラクティブな動きの作成・作品の共有
  30. 基本操作を駆使してアイコンを作成してみよう
  31. マップのピンアイコンを作成してマップに配置してみよう
  32. ハートのアイコンを作成してイイねボタンを作ってみよう
  33. マイク・虫眼鏡・ユーザーアイコンを作成してみよう
  34. カレンダー・歯車のアイコンを作成してみよう
  35. フォームや表を作成してみよう
  36. 料金表を作ってみよう
  37. 入力フォームを作ってみよう
  38. 記事一覧・記事詳細ページを作ってみよう
  39. アプリのような動きや機能をつけてみよう
  40. アニメーション機能を使って表現してみよう
  41. レスポンシブに対応できるように調整しよう
  42. 【ケーススタディ】実際にプロトタイプ作ってみよう ~アプリUI編~
  43. 仕様設計を依頼者と交えてディスカッション
  44. TOPページを作成しよう ヘッダー編
  45. TOPページを作成しよう メニュー編
  46. TOPページを作成しよう メニュー選択・リンクメニュー編
  47. プロフィールページを作成しよう
  48. 予約ページを作成しよう ヘッダー・フッターメニュー編
  49. 予約ページを作成しよう 予約ボタン・複数ページ編
  50. 予約内容確認ページを作成しよう
  51. 予約完了ページを作成しよう
  52. プロトタイプモードでリンク付けしてみよう
【2021年最新】応用編:XDで本格エステサロンのWEBサイトをつくろう!現場のプロが教える実務で使えるデザイン知識♪

【ベストセラー講師ヤスダ先生】現場のWEBサイトを作る工程が全て分かります!ヤスダ先生が実際に納品したものと似たデザインですのでプロ並みのクオリティが出来上がります!一緒に手を動かしながらリアルなデザイン設計を学んでください!

thumbnail
平均評価
3.8
総購入者数
413
先月の購入者数
(2023年2月)
-
コースレベル
初級〜上級
コース時間
1 時間 7 分
作成日
2021年9月15日
更新日
2021年11月3日
料金
¥27,800

本講座ではXDのダウンロード方法や基本操作はお話しておりません。

基本を知りたい方は、まずは他講座もセットで受講いただくのがお勧めです。


本講座では、より本格的なデザインを作りたい方に向けた講座です。

実務や現場のお話もしていますので、仕事でどのようにデザインを意識しているかや

上達するにはどうするかなど今すぐ使える技術や話が盛りだくさんです!


ベストセラー講師 ヤスダ先生のご挨拶

皆さん初めまして、 8年間、WEBデザイナーをしておりますヤスダ先生と申します。

私は今まで100本以上の大手企業様・中小企業様のWEBサイト/スマホアプリ/バナー等のデザインに携わってきました。

自身でHP制作会社を運営している傍らWEBデザインスクールの立ち上げを行い、多くのWEBデザイナーを輩出してきました。


簡単すぎて驚く!実際にヤスダ先生がお仕事で納品したものそっくりの

本格的なのエステサロンのお洒落ウェブサイトデザインを一緒に作ってみよう!


本講座で学べること


XDを使ってWEBデザインが学べます。

ツールの使い方だけではない。私が実際に練習した実践方法もお教えします!!


実はXDって最新ツールで難しそうに見えて、illustratorよりもPhotoshopよりもちょー簡単なんです!

私もデザイン未経験からXDを触り始めて3カ月でお仕事を獲得できるようになりました。


XDを学べば一気にプロのデザイナーの道へ駆けあがれますよ!


ポイント

何か副業を始めたい方やWEBデザインを学んでみたい方にはぴったり!

XDの操作方法はびっくりするほど簡単で、しかも需要も沢山あります。

この講座では未経験でも、プロ並みのWEBサイトデザインをゼロから作ることができます。

Photoshopやillustratorを少し触ったことがあるが挫折してしまった方におすすめ

デザインへの苦手意識がある方でも大丈夫


受講における必要条件

  • 推奨条件 :AdobeXD(Adobe公式サイトよりXDを無料ダウンロードしておいてください)

  1. イントロダクション
  2. 本講座で学べること
  3. ヤスダ先生の自己紹介
  4. デザインをする準備をしよう!
  5. 完成形を見てテンションを上げていこう!(リソースあり)
  6. 本講座を進めるにあたりおすすめのフロー
  7. アートボードを作成しよう(画面サイズを決めるうえでのポイント)
  8. 便利なショートカットキーについて(素材をダウンロードしてください)
  9. お洒落なWEBサイトを実際に手を動かしながら作成してみよう!
  10. グリッドデザインについてのコツ
  11. ヘッダーをおしゃれにデザインしていこう
  12. ビジュアルデザインを簡単に画像を挿入してつくろう
  13. プロ並みのデザインに仕上げていこう!
  14. POINT部分をおしゃれにデザインしていこう
  15. リピードグリットでテーブルを一気に作成しよう。アートとデザインの違いも
  16. 背景をロックしたり要素をグルーピングしてフッターを簡単に作成しよう
  17. 出来上がった完成形を見てみよう!
  18. 出来上がったデザインをプレビューで見てみよう。デザインのコツも解説しちゃいます
  19. デザインを上達させるために一番必要なこととは
  20. 完成したデザインを書き出す方法
  21. ボーナスレクチャー

3. YouTubeおすすめ講座3選

Outlectureで厳選したおすすめのYouTube講座3選はこちらです。

動画名 総視聴数 先月の視聴数
(2023年2月)
いいね数 公開日

WebデザイナーのためのXDの使い方【基礎編】

thumbnail

チャンネル名:アキユキ / Web制作チャンネル

101,553 1,624 2,815 2020年7月18日

【Adobe XDの使い方】初心者・入門者向けの便利な機能 | 2020年11月版

thumbnail

チャンネル名:HIROCODE.ヒロコード

56,946 1,472 1,607 2020年11月22日

【Adobe XD】基本の操作を学ぶ 全4回(#1 ワイヤーフレームの作成)| Adobe XD Trail 部屋キャンプ 初級編 - アドビ公式

thumbnail

チャンネル名:AdobeCreativeStation

54,046 1,640 735 2020年8月5日

YouTubeは、広告がつくものの無料で視聴でき、日常生活でもお馴染みとなっています。
最近では、良質な教材も増えており、学びたいけどお金をかけるほどでもない方や、概要をさらっと理解したい方には、YouTubeで学ぶことをおすすめします。

こんな方におすすめ

  • お金をかけずに学びたい
  • XDの概要だけさらっと理解したい

各講座の詳細は以下に記載します。

WebデザイナーのためのXDの使い方【基礎編】

アキユキ / Web制作チャンネル

総視聴数
101,553
先月の視聴数
(2023年2月)
1,624
いいね数
2,815
公開日
2020年7月18日
Adobe XDの使い方の基礎編解説です。ビューポートやガイドの使い方からシェイプの様々な使い方、テキストエリアの概念などを解説しています(`・ω・´)ゞ

Adobe XDはPhotoshopやIllustratorと比較しても使い方は簡単で動作もとても軽量です。まずはXDの基礎をおさえて、柔軟に使えるようにしていきましょう!


=== 動画学習サービス「unazuki」

Web制作を学べる動画学習サービスを運営しています。
https://unazuki.online/

・WordPressコンプリートコース
 https://unazuki.online/wordpress
・JavaScriptコース
 https://unazuki.online/javascript
・HTML & CSSコース
 https://unazuki.online/html_css


=== SNS

■ Twitter:https://twitter.com/life_toshindai


=== 経歴

Webデザイナー・エンジニア

〜 2013 自動車メーカー系の企画職
2014 〜 フリーランスWebデザイナー
2016 〜 法人化

-------------------- 簡単な自己紹介

都内でWeb制作をやっています。

苦労した経験をもとに、
YouTubeでは過去の自分が欲しかった
知識・技術・マインドなどをスライドやデモ解説で発信しています💪


🏋️‍♂️活動
WordPressやWebデザイン講座など有益な情報を発信。
初心者向けの動画〜超実践向けの動画まで多数公開しています。
再生リストも作っているのでよろしければご覧ください。


✈️出身
福岡県

---------------------------

Webデザイナーとして活躍される方の
知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
(`・ω・´)ゞ

詳しくはチャンネル概要欄もご覧ください。

#ホームページ
#作り方
#アキユキ
【Adobe XDの使い方】初心者・入門者向けの便利な機能 | 2020年11月版

HIROCODE.ヒロコード

総視聴数
56,946
先月の視聴数
(2023年2月)
1,472
いいね数
1,607
公開日
2020年11月22日
今回は、AdobeXDの基本的な使い方について説明しました☺️全7項目に分けて解説しています❗️
0:00 オープニング
0:39 1.アートボード
2:13 2.CCライブラリ
3:56 3.プレビュー&プロトタイプ
6:14 4.コンポーネント
7:51 5.ステート
9:06 6.リピートグリッド
10:28 7.スタック&パディング
12:42 エンディング

Youtubeの字幕機能で字幕入力したので、必要な方は字幕をONにしてください🙇‍♂️

※3分59秒~ 誤→2.プレビュー&プロトタイプ  正→3.プレビュー&プロトタイプ


✅ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️

◆ チャンネル登録
http://www.youtube.com/hirocode?sub_confirmation=1

◆ Twitter. ツイッター
https://twitter.com/hirocodeweb

◆ Instagram. インスタグラム
https://www.instagram.com/hirocodeweb/

◆ ROOM. 楽天ルーム
https://room.rakuten.co.jp/hirocode/


🔋 僕が使っている、おすすめのデバイス 🔋
----- マウス -----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
https://amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "

----- キーボード -----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
https://amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "

----- パソコン -----
【 Apple Macbook Pro 16inch 】
https://amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "

----- 周辺機器 -----
【 Apple AirPods Pro 】
https://amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。

【 Apple iPad Pro 11インチ 】
https://amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "


📕 おすすめ書籍 📕
----- デザイン 基礎編 -----
【 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 】
https://amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "

【 なるほどデザイン 】
https://amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "

----- デザイン 思考編 -----
【 誰のためのデザイン? 】
https://amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "

【 IAシンキング Web制作者・担当者のためのIA思考術 】
https://amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "

----- 書籍デバイス -----
【 キンドルペーパーホワイト Kindle Paperwhite 】
https://amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。


----------------------------------------------------------------------------------------------------
🎧 BGM 🎧
Happy and Joyful Children
https://soundcloud.com/fm_freemusic/happy-and-joyful-children-positive-and-upbeat-instrumental-background-music-free-download
【Adobe XD】基本の操作を学ぶ 全4回(#1 ワイヤーフレームの作成)| Adobe XD Trail 部屋キャンプ 初級編 - アドビ公式

AdobeCreativeStation

総視聴数
54,046
先月の視聴数
(2023年2月)
1,640
いいね数
735
公開日
2020年8月5日
Adobe XDのワークショップ「基本の操作を学ぶ」のワイヤーフレーム作成の内容です。
番組内で使用しているワークショップキットは、Adobe XD TrailのウェブサイトからDLできます。

【Adobe XD Trail】
動画とサンプルファイルで学べるXDのコンテンツサイト
https://xdtrail.com

【Adobe XD 検定】
XDの理解度を自己診断できる無料のサービス
https://kentei.adobe.com

--------------------------------------------------

▼Adobe XD 公式ページ
https://www.adobe.com/jp/products/xd.html

▼Adobe XD 公式Facebook
https://www.facebook.com/AdobeXDJapan

▼アドビ公式Creative Cloudのブログ
https://blogs.adobe.com/japan/creativecloud/web/

最新の製品や使い方などを動画で紹介します。チャンネル登録はこちら↓(Subscribe)
https://goo.gl/LsLnnt

-------------------------------------------------

5. まとめ

XDのおすすめ講座を紹介しました。他の関連講座を学びたい方は、下記をご参考ください。

Photoshop
Canva
Wix
Photoshop
Canva
Wix

「自ら機会を創り出し、機会によって自らを変えよ」

株式会社リクルート創業者 江副浩正氏の有名な言葉です。自分の知識やスキルを高めることは、機会を作り出すことに役に立ちます。自らを変えようとしている方にとって、本ページの情報が少しでもお役に立てれば幸いです。

今回紹介したいずれかの講座を受講した後にさらに深掘りして学びたい方は、公式サイトやコミュニティサイトに行くことを、最新の情報をキャッチアップしていきたい方場合は、公式twitterアカウントをフォローすることをおすすめします。

一覧に戻る
Home About Share
Home
About
Privacy policy
Disclaimer
Contact
Official
© 2023 outlecture.com All Rights Reserved.