
Copy Link
Adobe XDの最新バージョンを基礎から学びましょう!
初心者の方だけでなく、ある程度XDの知識がある方の学び直しにもぴったりの動画となっています。
実際に制作を行いながら、基礎から応用まで実践的なプロトタイピングスキルを身に付けることができる講座です。
Adobe XDは頻繁にバージョンアップのある変化の激しいソフトですが、このコースでは最新のテクニックを網羅的に学ぶことができます。
他のソフトを必要とせず、プロジェクトの進行をXDで一元管理。この講座でWEBサイト開発のプロとしての第一歩を踏み出しましょう!
Section 1:Adobe XDとは | ||||
1 | プロトタイピング | Preview | 5:14 | |
2 | XDを使うメリット | 5:11 | ||
3 | 工程の説明 | 5:30 | ||
4 | Adobe XDのインターフェイス | 7:53 | ||
5 | シェイプの描き方 | 7:13 | ||
6 | 文字とカラー | 9:29 | ||
7 | グループ化 | 5:06 | ||
Section 2:ラフのwireframeの作成 | ||||
8 | ダウンロード資料 | 1:00 | ||
9 | 学習の準備 | 7:39 | ||
10 | アートボードの準備. | 8:57 | ||
11 | メインビジュアルの配置 | Preview | 9:25 | |
12 | リピートグリッド | 9:54 | ||
13 | タイル状の画像配置(1) | 7:24 | ||
14 | タイル状の画像配置(2) | 5:54 | ||
15 | テキストエリア(1) | 10:31 | ||
16 | テキストエリア(2) | 5:42 | ||
17 | 写真入りの記事(1) | 9:38 | ||
18 | 写真入りの記事(2) | 6:49 | ||
19 | SNSリンクボタンの配置 | 8:18 | ||
20 | フッターの配置 | 6:33 | ||
21 | このセクションの復習(1) | 8:50 | ||
22 | このセクションの復習(2) | 11:03 | ||
Section 3:プロトタイプの制作 | ||||
23 | ダウンロード資料 | 1:00 | ||
24 | 共有の設定 | 11:05 | ||
25 | WEBフォント | 8:39 | ||
26 | 完成品の検討 | 6:43 | ||
27 | UIキットの取得 | 11:04 | ||
28 | WIndowsでのUIキットの入手 | 4:25 | ||
29 | Status barの配置 | 9:45 | ||
30 | タイトルと文字列の配置 | 5:43 | ||
31 | Nav Barの配置 | 8:32 | ||
32 | 画像プレースフォルダの配置 | Preview | 9:20 | |
33 | 画像の一括挿入 | 9:33 | ||
34 | ガイドを使った整列 | 10:14 | ||
35 | 野鳥図鑑の仕上げ | 13:29 | ||
36 | 最新の目撃情報 | 12:46 | ||
37 | 観察会のご案内 | 11:19 | ||
38 | 観察会記録 | 11:11 | ||
Section 4:サブページのプロトタイプ制作 | ||||
39 | ダウンロード資料 | 1:00 | ||
40 | このセクションのターゲット | 4:04 | ||
41 | シンボル(コンポーネント)化 | 9:40 | ||
42 | 送信フォーム(1) | 9:08 | ||
43 | 送信フォーム(2) | 8:18 | ||
44 | メジロのページ(1) | 9:42 | ||
45 | メジロのページ(2) | 6:35 | ||
46 | 観察会のお知らせ | 15:14 | ||
47 | インタラクション(1) | Preview | 5:58 | |
48 | インタラクション(2) | 8:11 | ||
49 | マイクロインタラクション | 7:16 | ||
50 | 復習(1) | 8:06 | ||
51 | 復習(2) | 12:22 | ||
Section 5:iPadProのプロトタイプ | ||||
52 | ダウンロード資料 | 1:00 | ||
53 | セクションの内容 | 6:17 | ||
54 | リサイズの基本 | 6:17 | ||
55 | Nav barの制作 | 5:21 | ||
56 | 野鳥図鑑の制作 | 8:21 | ||
57 | グリッドレイアウト | 12:56 | ||
58 | 文字スタイル | 5:54 | ||
59 | 観察会案内(1) | 7:09 | ||
60 | 観察会案内(2) | 4:48 | ||
61 | 文字スタイルの登録 | 7:15 | ||
62 | カラーの登録 | 7:52 | ||
63 | 観察会記録の制作 | 9:10 | ||
64 | SNSとフッター | 5:13 | ||
65 | レスポンシブリサイズ(1) | 7:54 | ||
66 | レスポンシブリサイズ(2) | 9:04 | ||
67 | レスポンシブリサイズ(3) | 6:46 | ||
Section 6:iPadPro サブページの制作 | ||||
68 | ダウンロード資料 | 1:00 | ||
69 | 送信フォームページ | 12:39 | ||
70 | メジロのページ制作(1) | 6:48 | ||
71 | メジロのページ制作(2) | 5:48 | ||
72 | 観察会案内ページ | 8:47 | ||
73 | ipadProプロトタイプ完成 | 4:13 | ||
74 | アセットパネル(カラー) | 7:31 | ||
75 | アセットパネル(文字スタイル) | 5:18 | ||
76 | コンポーネントの登録 | 6:07 | ||
77 | レイアウトグリッド | 6:43 | ||
Section 7:WEBメインページの制作 | ||||
78 | ダウンロード資料 | 1:00 | ||
79 | WEBヘッダーの制作 | 10:09 | ||
80 | WEB Nav barの制作 | 8:46 | ||
81 | WEB 野鳥大図鑑の制作 | 12:40 | ||
82 | WEB 最新の目撃情報 | 8:06 | ||
83 | WEB 観察会記録 | 9:56 | ||
84 | WEB Contactページ | 5:04 | ||
85 | WEB メジロのページ | 5:04 | ||
86 | WEB 観察会案内ページ | 8:09 | ||
87 | 仕上げ | 14:10 | ||
88 | 画像の書き出し | 14:22 | ||
89 | CSSコード書き出し | 7:04 |