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

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

学習内容
７つのセクション、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は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を持っていないエンジニア・クライアントにもデータを共有しよう

このコースは、

• 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月更新】

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

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

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

　└ 最新バージョンに合わせた「アートボード内の基本操作」「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. プロトタイプモードでリンク付けしてみよう

本講座では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. ボーナスレクチャー