Adobe XDを使いこなそう 手を動かして覚えるプロトタイピング
Adobe XDを使いこなそう 手を動かして覚えるプロトタイピング

講座の内容
- セクション1 Adobe XDとは
- プロトタイピング 5:13
- 情報共有の方法 5:11
- 工程の説明 5:30
- Adobe XDのインターフェイス 7:53
- シェイプの描き方.7:13
- 文字とカラー 9:29
- グループ化 5:06
- セクション2 ラフなwireframeの作成
- 学習の準備 7:39
- アートボードの準備 8:56
- メインビジュアルの配置 9:25
- リピートグリッド 9:53
- タイル状の画像配置(1) 7:24
- タイル状の画像配置(2) 5:53
- テキストエリア(1) 10:30
- テキストエリア(2) 5:41
- 写真入りの記事(1) 9:38
- 写真入りの記事(2) 6:49
- SNSリンクボタンの配置 8:18
- フッターの配置 6:33
- このセクションの復習(1) 8:50
- このセクションの復習(2) 11:03
- セクション3 プロトタイプの制作
- 共有の設定 11:05
- WEBフォント 8:39
- 完成品の検討 6:42
- UIキットの取得 11:03
- WindowsでのUIキットの入手 4:25
- Status baの配置 9:45
- タイトルと文字列の配置 5:43
- Nav Barの配置 8:31
- 画像プレースフォルダの配置 9:20
- 画像の一括挿入 9:32
- ガイドを使った整列 10:14
- 野鳥図鑑の仕上げ 13:29
- 最新の目撃情報 12:46
- 観察会のご案内 11:19
- 観察会記録 11:10
- セクション4 サブページのプロトタイプ制作
- このセクションの目標 4:03
- シンボル(コンポーネント)化 9:39
- 送信フォーム(1) 9:08
- 送信フォーム(2) 8:17
- メジロのページ(1) 9:41
- メジロのページ(2) 6:35
- 観察会のお知らせ 15:14
- インタラクション(1) 5:57
- インタラクション(2) 8:10
- マイクロインタラクション 7:16
- 復習(1) 8:05
- 復習(2) 12:22
- セクション5 iPadProのプロトタイプ
- セクションの内容 6:17
- リサイズの基本 6:17
- Nav barの制作 5:21
- 野鳥図鑑の制作 8:20
- グリッドレイアウト 12:56
- 文字スタイル 5:54
- 観察会案内(1) 7:08
- 観察会案内(2) 4:47
- 文字スタイルの登録 7:15
- カラーの登録 7:52
- 観察会記録の制作 9:09
- SNSとフッター 5:13
- レスポンシブリサイズ(1) 7:54
- レスポンシブリサイズ(2) 9:04
- レスポンシブリサイズ(3) 6:46
- セクション6 iPadProサブページの制作
- 送信フォームページ 12:38
- メジロのページ制作(1) 6:47
- メジロのページ制作(2) 5:48
- 観察会案内ページ 8:46
- iPadProプロトタイプ完成 4:12
- アセットパネル(カラー) 7:31
- アセットパネル(文字スタイル) 5:17
- コンポーネントの登録 6:07
- レイアウトグリッド 6:43
- セクション7 WEBメインページの制作
- WEBヘッダーの制作 10:09
- WEB Nav barの制作 8:46
- WEB 野鳥大図鑑の制作 12:39
- WEB 最新の目撃情報 8:06
- WEB 観察会記録 9:56
- WEB Contactページ 5:03
- WEB メジロのページ 5:03
- WEB 観察会案内ページ 8:09
- 仕上げ 14:09
- 画像の書き出し 14:21
- CSSコード書き出し 7:03
WEBデザイナーからUI/UXデザイナーへ。
こんな方にオススメ
- 最新のAdobe XDを最短でマスターしたい方
- Wireframeからプロトタイプ制作までの工程を劇的に効率化したい方
- クライアントや開発チームメンバーと常に製品スペックを共有出来る簡便なツールを捜している方
- WEBサイトの開発をこれから学ぶ方
習得できるスキル
- 最新のAdobe XDを使ってWEBサイトの開発スピードを従来の半分以下にできます。
- メモ帳→PhotoshopというWireframe制作工程をAdobe XD一本に置き換えられます。
- クライアントや開発チームメンバーと常にスペックを共有し、開発を一元管理できます。
- XDを使った最新のWEBサイト開発の理論と技術を最短で身につけられます。
講座内容
このコースは最新の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サイト開発のキーになるパワフルなツールにします。
講座提供者

大手半導体メーカー販促部門で勤務後、WEBサイトの開発を行うデザイン会社を設立。第一線を離れた後、社内の技術教育に携わる。
退職後、2015年にUdemyでオンライン講座講師としてPhotoshop、Illustratorなどデザイン系のアプリケーションと、HTML、CSS、Javascript、Python/Djangoなどフロントエンドからサーバーサイドまで、フルスタックのプログラミングを解説しています。
これまでにUdemyほかでのコースを公開、Udemyでは90,000人を超える受講生の学びをサポートしています公開、Udemyでは90,000人を超える受講生の学びをサポートしています。
受講要件
- Adobe XDがインストールされていること。XDは体験版でも受講できます。
- パソコン操作について特に習熟している必要はありませんが、インターネットを利用しメールを送受信する程度の知識は必要です。
- MacでもWindowsでも大丈夫です。コースはmac画面で制作されています。
- 写真や文章などの素材は用意されているので必要ありません。
