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

この講座は、主に未経験からプロのWebデザイナーを目指している方を対象に作られた講座です。

色や写真、レイアウトなど、デザインについての基本的なことから、Adobe XDの機能や使い方、架空のクライアントを想定してコンセプトを設定し、デザイン制作に着手していく過程までを詳しく説明しています。全10時間、隙間時間を活用して、実際に手を動かしながらスキルの習得を目指しましょう。

なぜAdobe XDなのか

PhotoshopやIllustratorでWebデザイン制作を行うデザイナーは多いですが、Adobe XDでは平面でのデザインだけでなく、挙動（動き）の確認も行うことができます。

• リンク先は正しいか

• 画像切り替えの設定時間は、心地よく感じるか

• ボタンホバー時の色の濃度差は適切か

など、従来ならコーディングしてモックサイト上でしか確認できなかったことも、デザイン段階でクライアントや制作チームと共有できるようになるのです。Adobe XDは日々機能がアップデートされるアプリなので、頻繁にUIが変わります。つまり、それだけ技術が発展途中で、伸びしろのある分野だと言えるでしょう。

類似アプリケーションとしてFigmaもありますが、Adobe XDは機能がシンプルな分、Figmaほど習得に時間がかからないのと、デザイナーの必須ツールとも言えるAdobe CCのパッケージに含まれているため、本講座ではAdobe XDをメインツールに設定しています。

現役Webデザイナーによる監修

この講座では、ナビゲーター「トキ」と、3羽の生徒「めじろ・ひよこ・文鳥」の対話式で講義が進みます。上級編までデザインを作り切れれば、XDの操作はかなり慣れると思いますが、Webデザイナーとして独り立ちするにはたくさんの経験が必要です。めじろ・ひよこ・文鳥と一緒にコツコツがんばりましょう！

• ナビゲーター「トキ」：デザイン歴10年以上。Webデザイナーとして企業のWebサイトをデザインしたり、UI改善を行いながら、日々優れたデザインを追求して巣に引きこもっている。

• 3羽の生徒「めじろ・ひよこ・文鳥」：Webデザイナーとして活躍することを目指し、知識ゼロから勉強をスタート。三人寄れば文殊の知恵、になるのか…？

講座の構成

・入門編：これからデザインを学ぶ人向けの、デザイン入門の座学

・XDの使い方：XDの画面や機能、使い方をレクチャー

・初級編 実践：まずは1ページだけ、居酒屋「うめえっちゃ」のWebサイトをデザイン

・中級編 実践：次は全部で4ページ、旅館「たらい舟」のWebサイトをデザイン

・上級編 実践：総仕上げ！XDの機能を駆使して全8ページ、建築会社のコーポレートサイトをデザイン

1. 【はじめに】
2. この講座の目的・視聴方法のポイント
3. 【入門編】
4. Webデザイナーになるには
5. 色（RGBとCMYK）
6. Webサイトで使うフォント
7. 写真
8. イラスト
9. レイアウト
10. MacかWindowsか
11. XD・Photoshop・Illustratorの使い分け（1）
12. XD・Photoshop・Illustratorの使い分け（2）
13. 画像解像度とファイル形式
14. レスポンシブデザインとは
15. ワイヤーフレームとUI/UX
16. 【XDの使い方】 　データのダウンロード
17. 【XDの使い方】　配布素材
18. 【XDの使い方】　完成デザイン
19. 【XDの使い方】
20. 基本操作の流れ
21. ワークスペースの画面構成と名称
22. ボタンのデザインを作成
23. ボタンをコンポーネント化する
24. コンテンツを作成する
25. コンテンツを複製
26. ページ遷移の設定
27. 作成したデザインを共有する
28. 【初級編　実践】データのダウンロード
29. 【初級編　実践】配布素材
30. 【初級編　実践】完成デザイン
31. 【初級編 実践】
32. 初級編のポイント
33. ファイルの新規作成と保存
34. ヘッダーを作る
35. キービジュアルを作成する
36. ご挨拶文を入れる
37. 料理写真を組む
38. 店主紹介を入れる
39. 店舗情報とSNSボタンを作る
40. アクセスを作る
41. ご予約情報を入れる
42. アンカーリンクを設定する
43. フッターを作る
44. スマートフォンページを作る（1）
45. スマートフォンページを作る（2）
46. 【中級編 実践】 データのダウンロード
47. 【中級編 実践】配布素材
48. 【中級編　実践】完成デザイン
49. 【中級編 実践】
50. 中級編のポイント
51. キービジュアルを作る（1）
52. キービジュアルを作る（2）
53. ハンバーガーメニューのヘッダーを作る
54. 導入を作る
55. Newsを作る
56. 下層ページへのリンクバナーを作る
57. AccessとReservationを作る
58. フッターを作る
59. 下層ページを作る
60. プロトタイプで動きをつける（ページ遷移を設定する）
61. キービジュアルにアニメーションを加える
62. スマートフォンページを作る（1）
63. スマートフォンページを作る（2）
64. スマートフォンページを作る（3）
65. 【上級編 実践】 データのダウンロード
66. 【上級編 実践】配布素材
67. 【上級編　実践】完成デザイン
68. 【上級編 実践】
69. 上級編のポイント
70. デザインシステムの構築
71. ヘッダーを作る
72. キービジュアルを作る
73. ABOUT USを作る
74. WORKSを作る
75. MEMBERを作る
76. フッターを作る
77. ABOUT US ページを作る
78. WORKS 一覧ページを作る（1）
79. WORKS 一覧ページを作る（2）
80. WORKS 詳細ページを作る
81. MEMBER ページを作る
82. NEWS ページを作る
83. NEWS 詳細ページを作る
84. CONTACTページを作る
85. プロトタイプで動きをつける（ページ遷移を設定する）
86. スマートフォンページを作る（1）ナビゲーションとキービジュアル
87. スマートフォンページを作る（2）トップページ
88. スマートフォンページを作る（3）ABOUT US
89. スマートフォンページを作る（4）WORKS 一覧
90. スマートフォンページを作る（5）WORKS 詳細
91. スマートフォンページを作る（6）MEMBER
92. スマートフォンページを作る（7）NEWS 一覧・詳細
93. スマートフォンページを作る（8）CONTACT

このコースは最新の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コード書き出し

■■■■■

【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. プロトタイプモードでリンク付けしてみよう

ご挨拶

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

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

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

本講座で学べること

本講座では今最も需要がある最新デザインツールAdobeXDの基礎を学んだあと、

実践同様のプロトタイプをくむ方法をお教えします。

また、実際にUI（ユーザーインターフェース）デザイナーのヤスダ先生の仕事の内容やアプリデザインの作成について学べます！

未経験からデザイナーになりたい方や、デザイナーとして自分の価値を上げたい方にオススメです！

今この講座に出会えたあなた、本当にラッキーです！

皆さん、プロトタイプってご存知ですか?

プロトタイプとは「試作品」の意味です。

実物同様にのものを「試作品」としてお客さんにお見せできるのです。

皆さん、こんな経験ありませんか？

・デザインと実物「全然ちがうやん！！」と思った方...

・WEBサイトを作成したけど、エンジニアさんに依頼したら全く違うものが出来上がった....

・デザイナーさんの意図を上手くエンジニアさんに伝えられないと悩んでいるディレクターの方...

これは、すべて「プロトタイプ」で解決できます！

今や、デザイナーも実装同様に遷移画面を表現したりアニメーションを表現したりしないといけないのです。

むしろ、今の時代プロトタイプの技術を持っていないデザイナー/ディレクターはどんどん淘汰されていく時代です。

この機会にぜひ、プロトタイプの技術を学んで

自分の単価を上げていきましょう！

皆さん、AdobeXDってご存知ですか?

あの有名なウーバーイーツのアプリだってAdobeXDで作成できてしまいます！

アプリデザインを手掛けるってめちゃくちゃカッコよくないですか？

でも、実際はWEBデザインよりも圧倒的に簡単なんです。

私はUIデザイナーとして今まで多くの誰もが知るアプリデザインに携わってきました。

WEBデザイナーとしてコーディングが上手く書けない毎日..

デザイナーとして単価が下がっていく毎日..

もううんざり！って思った時に出会ったのが「UIデザイナー」でした。

UIデザイナーになってから単価が3倍にも跳ね上がったのです！

皆さんにもぜひ、最高のプロトタイプの技術を身に着けてほしい！

本当に楽しいし、天職だと思っています。

アプリデザインにはAdobeXDを使用します。   

AdobeXDは近年もっとも注目されているデザインツールです。

今AdobeXDを学ぼうと思っている方、本当にラッキーです。

何故なら「AdobeXDa」はPhotoshopやillustratorを全く触ったことない人でも簡単にプロ並みの本格アプリデザインが作れるようになります。

私もAdobeXDを使うようになってからAdobeXDの虜になり、

今では、バナー、WEBサイトやスマホアプリなどほとんどAdobeXDを使用しています。

最新デザインツールで難しそう..と思っているそこのあなた！全く心配いりません。

AdobeXDはめちゃくちゃ簡単なんです。

私の現場の話や想い、ためになる話をいっぱい詰め込んでいます！

ぜひ、このチャンスを逃さずこの講座でお会いできること楽しみにしております！

※セクション2～６のAdobeXD基礎・応用は他講座と同様の内容がございます。

1. 本講座で学べる事＆ヤスダ先生の自己紹介
2. 本講座でできることを実際に覗いてみよう！
3. 本講座で学べること
4. あなたがこれらに当てはまったら絶対見るべし！
5. ヤスダ先生の自己紹介。どうやってプロのデザイナーになったのか経緯をお話します。
6. AdobeXDの凄いところ
7. ヤスダ先生がAdobeXDに出会って人生が変わった話。（illustratorやPhotoshopが苦手だった私がなぜプロになれたのか）
8. AdobeXDのできることを知ってワクワクしよう01（ワイヤーフレームやWEBサイト）
9. AdobeXDのできることを知ってワクワクしよう02（プロトタイプってこんなに凄い機能）
10. AdobeXDのできることを知ってワクワクしよう03（今まで面倒だったお客さんへの共有がとても楽になる）
11. AdobeXDを準備しよう！
12. AdobeXDのダウンロード方法
13. 初期画面①アートボードのサイズについて（iPhoneやPCなど様々な種類）
14. 初期画面②左メニューの説明
15. XDの基本操作を学ぼう①（0から1を生み出す左側のツール）
16. クラウドファイルとローカルファイルの違いと保存の仕方
17. 長方形、楕円形、線、アートボードなどの図形を描いてみよう
18. 拡大縮小、手のひらツールでの画面を操作する方法
19. 図形を上揃え・下揃えに一気にする方法
20. XDの基本操作を学ぼう②（装飾したり、よりデザインを行うツール）
21. XDにしかない操作。リピードグリッドを学ぼう
22. 文字のフォントサイズや種類を調整
23. カラーピッカー＆グラデーションの設定方法
24. ドロップシャドウやぼかしの方法
25. 書き出し方法＆基礎講座お疲れ様でした！
26. 現場で使える応用操作を学ぼう
27. 便利なカラーパレットでデザイン工数を削減しよう
28. こんなに凄い！プロトタイプを設定すると実際の遷移が分かる！
29. リンクの発行方法（お客さんへ簡単に共有する方法）
30. 実際にアプリデザインを使ってプロトタイプを設定してみよう！
31. プロトタイプって何？改めて実際のプロトタイプイメージを確認してみよう！
32. デザインタブとプロトタイプタブについて
33. 実際にタブから画面へ遷移を繋いでみよう
34. 様々なトリガーで高度なプロトタイプ設定をしてみよう
35. トリガーのドラッグを設定してみる
36. キーとゲームパットの設定をしてみる
37. 音声で遷移させる（視覚障害の方向けのアプリデザインができる画期的な機能）
38. 様々なアクションの設定をしてみよう
39. トランジションの細かい動きを見てみよう
40. スクロール先に移動する設定
41. タップしたらオーディオが再生される設定ができる！？
42. 実務現場で使える実践的なこと
43. AdobeXDはホームをいくつも設定できる！
44. 要素を常にスクロールしても位置を固定する
45. ファーストビューの高さを設定する方法
46. 自分でプロトタイプ（遷移）の設定方法を練習する方法
47. まずは単純化してプロトタイプを練習してみよう
48. 最後の挨拶（応援メッセージ）
49. ボーナスレクチャー：MYBOOKの無料プレゼント！

ご挨拶

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

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

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

株式会社マイウェブが提供するマイウェブスクールの口コミや評判を調べるならまずは、この動画をご覧ください！

受講生さんのリアルな体験や感想など、様々な口コミや評判を知ることが出来ます。

マイウェブスクールの口コミや評判だけじゃわからない方は、ぜひ参考にこの講座を受けてみてくださいね。

本講座で学べること

本講座では今はやりのAdobeXDという最新デザインツールの基礎を学んだあと、

誰もが知る「クックパッド」のアプリデザインを一緒にてを動かしながら作っていきます。

また、実際にUIデザイナーのヤスダ先生の仕事の内容やアプリデザインの作成について学べます。

今この講座に出会えたあなた、本当にラッキーです！

皆さん、UIデザイナー/UXデザイナーってご存知ですか?

あの有名なウーバーイーツのアプリだってUIデザイナーが作ったんです。

アプリデザインを手掛けるってめちゃくちゃカッコよくないですか？

でも、実際は他のデザインよりも圧倒的に簡単なんです。

私はUIデザイナーとして今まで多くの誰もが知るアプリデザインに携わってきました。

WEBデザイナーとしてコーディングが上手く書けない毎日..

デザイナーとして単価が下がっていく毎日..

もううんざり！って思った時に出会ったのがアプリデザインを手掛ける「UI（ユーザーインターフェース）デザイナー」でした。

UIデザイナーになってから単価が3倍にも跳ね上がったのです！

皆さんにもぜひ、UIデザイナー/UXデザイナーという素晴らしい職種に出会ってほしい！

本当に楽しいし、天職だと思っています。

アプリデザインにはAdobeXDを使用します。   

AdobeXDは近年もっとも注目されているデザインツールです。

今AdobeXDを学ぼうと思っている方、本当にラッキーです。

何故なら「AdobeXDa」はPhotoshopやillustratorを全く触ったことない人でも簡単にプロ並みの本格アプリデザインが作れるようになります。

私もAdobeXDを使うようになってからAdobeXDの虜になり、

今では、バナー、WEBサイトやスマホアプリなどほとんどAdobeXDを使用しています。

最新デザインツールで難しそう..と思っているそこのあなた！全く心配いりません。

AdobeXDはめちゃくちゃ簡単なんです。

私の現場の話や想い、ためになる話をいっぱい詰め込んでいます！

ぜひ、このチャンスを逃さずこの講座でお会いできること楽しみにしております！

※セクション2～６のAdobe基礎・応用は他講座と同様の内容がございます。

1. はじめに（本講座で学べる事＆ヤスダ先生の自己紹介）
2. クックパッドアプリデザインの完成イメージを見てみよう！
3. 本講座で学べること（アプリデザインの作成方法、アプリデザイナーになるための方法、AdobeXDの操作方法）
4. 本講座を見るべき人はこんな人！
5. ヤスダ先生の自己紹介
6. AdobeXDの凄いところ
7. ヤスダ先生がAdobeXDに出会って人生が変わった話。（illustratorやPhotoshopが苦手だった私がなぜプロになれたのか）
8. AdobeXDのできることを知ってワクワクしよう01（ワイヤーフレームやWEBサイト）
9. AdobeXDのできることを知ってワクワクしよう02（プロトタイプってこんなに凄い機能）
10. AdobeXDのできることを知ってワクワクしよう03（今まで面倒だったお客さんへの共有がとても楽になる）
11. AdobeXDを準備しよう
12. AdobeXDのダウンロード方法
13. 初期画面①アートボードのサイズについて（iPhoneやPCなど様々な種類）
14. 初期画面②左メニューの説明
15. XDの基本操作を学ぼう①（0から1を生み出す左側のツール）
16. クラウドファイルとローカルファイルの違いと保存の仕方
17. 長方形、楕円形、線、アートボードなどの図形を描いてみよう
18. 拡大縮小、手のひらツールでの画面を操作する方法
19. 図形を上揃え・下揃えに一気にする方法
20. XDの基本操作を学ぼう②（装飾したり、よりデザインを行うツール）
21. XDにしかない操作。リピードグリッドを学ぼう
22. 文字のフォントサイズや種類を調整
23. カラーピッカー＆グラデーションの設定方法
24. ドロップシャドウやぼかしの方法
25. 書き出し方法＆基礎講座お疲れ様でした！
26. 現場で使える応用操作を学ぼう
27. 便利なカラーパレットでデザイン工数を削減しよう
28. こんなに凄い！プロトタイプを設定すると実際の遷移が分かる！
29. リンクの発行方法（お客さんへ簡単に共有する方法）
30. 一緒にクックパッドアプリを作ってみよう！
31. ヤスダ先生がクックパッドアプリをデザインしてみた経緯
32. プロのデザイナーとして気を付けるポイント著作権について
33. アプリヘッダーを作っていこう！素材の配置方法、タブ切り替えデザイン
34. 検索フォームをデザインしてみよう！
35. リピードグリッドで一気に写真を挿入してみよう
36. クックパッドアプリを裏ワザを使って仕上げよう
37. アプリのフッターメニューを簡単に作ってみよう！
38. クックパッドメニューを作ろう！
39. リピードグリッドで一気にメニューを作成してみよう！
40. ビューポートで見る時の方法。スクロール時に位置を固定する方法
41. さいごの挨拶
42. 最後まで本当にお疲れ様でした！アプリデザイナーの未来についてお話します。モチベーションアップできますよ♪
43. ボーナスレクチャー