Adobe XD プロトタイピング実践ガイド

レッスンデータ

サンプルファイル（レッスンデータ）は、技術評論社の書籍ページでダウンロードしてください（書籍の6ページにダウンロードの方法が記載されています）。

05 ［実習］フキダシのバリエーションを作る

Before :

no folder

After :

3-05F

• 3-05F.xd（実習の完成データ）
  01 楕円形を複製して組み合わせてフキダシを作る
  02 フキダシのしっぽを追加する
  03 線のタッチやフキダシの形状を変更する
• 3-05-Point.xd（Pointのサンプルデータ）

06 ［実習］ページが角がめくれる形状を作る

Before :

no folder

After :

3-06F

• 3-06F.xd（実習の完成データ）
  01 長方形の組み合わせでページの角が折れた表現をする
  02 グラデーションとパスの編集で折れた角の丸みを表現する
  03 テキストの配置と陰影を調整する

07 ［実習］バナー広告のバリエーションを作成する

Before :

3-07

• Banner-Material
  ・300x250.xd（実習のレッスンデータ）
  ・Photo-A1.jpg（素材写真）
  ・Photo-A2.png（素材写真）

After :

3-07F

• 300x250F.xd（実習の完成データ）
  01 アートボードにレイアウト用のシェイプを配置する
  02 写真を素早くレイアウトする
  03 構成要素を配置して写真のサイズを調整する

01 プロトタイプモードで簡単なインタラクションを設定する

Before :

no folder

After :

4-01F

• 4-01F.xd（実習の完成データ）
  01 ボタンを作成して配置する
  02 アートボードを複製する
  03 簡単なインタラクションを設定する
  04 トランジションの設定を変更する

02 ドラッグジェスチャーと自動アニメーションの基本操作

Before :

no folder

After :

4-02F

• 4-02F.xd（実習の完成データ）
  01 アートボードに引き出しパネルを配置する
  02 アートボードを複製してパネルのサイズを変更する
  03 ドラッグジェスチャーを設定する

03 ドラッグ操作で動くカルーセルを作成する

Before :

4-03

• manga-bg-1.jpg（素材画像）
• manga-bg-2.jpg（素材画像）
• manga-bg-3.jpg（素材画像）

After :

4-03F

• 4-3-step01.xd（実習01の完成データ）
  01 サムネイルとキャプションの基本デザインを作成する
• 4-3-step02.xd（実習02の完成データ）
  02 サムネイルに画像を挿入してアートボードを複製する
• 4-3-step03.xd（実習03の完成データ）
  03 ドラッグジェスチャーと自動アニメーションを設定する

04 カルーセルに奥行き感とクリック(タップ)操作を追加する

Before :

4-04

• 4-4-step-01.xd（実習のレッスンデータ）

After :

4-04F

• 4-4-step02.xd（実習01の完成データ）
  01 アートボードの名前を変更する
• 4-4-step03.xd（実習02の完成データ）
  02 サムネイルのサイズを変更する
• 4-4-step04.xd（実習03〜04の完成データ）
  03 アートボードに透明な長方形を配置する
  04 クリック（タップ）して動かす仕組みを追加する
• 4-4-step05.xd（実習05の完成データ）
  05 キャプションの内容とカラーを変更する

05 マイクロインタラクションを作成する

Before :

4-05

• 4-5-1.xd（実習02のレッスンデータ）

After :

4-05F

• 4-05F-1.xd（実習01の完成データ）
  01 スライダーバーを作成する
• 4-5-1-step01.xd（実習02のステップ01の完成データ）
  02 お気に入りのインタラクション／01 アイコンを設定する
• 4-5-1-step02.xd（実習02のステップ02の完成データ）
  02 お気に入りのインタラクション／02 アイコン表示を追加する

01 ランディングページのプロトタイプを作成する

Before :

no folder

After :

5-01F

• 5-01F.xd（実習の完成データ）
  01 ページスクロールのプロトタイプを作成する
  　- 01 ランディングページの6つのセクションを作成する
  　- 02 タイトルを追加／レイヤー名とアートボード名を変更する
  　- 03 アートボード上のセクションの位置を変更する
  　- 04 クリック（タップ）してセクション画面を切り替える
  02 ランディングページのドラッグジェスチャーとボタンを設定する
  　- 01 セクション画面を切り替えるドラッグチェスチャーを設定する
  　- 02 セクション画面を切り替えるボタンを作成する
  　- 03 ボタンにアクションを設定する

02 ファーストビューを「高忠実度のプロトタイプ」で作成する

Before :

5-02

• Landing-Page-Data
  01-First-View
  ・PC-FirstView-Background.jpg
  （デスクトップ用背景写真）
  ・SP-FirstView-Background.jpg
  （スマートフォン用背景写真）
  ・FirstView-Text.txt
  （ファーストビュー用テキストファイル）
  ・Footer-Text.txt
  （フッター用テキストファイル）

After :

5-02F

• 5-1.xd（実習01〜04の完成データ）
  01 複数の画像を配置する
  02 サブキャッチコピーを配置する
  03 リード文を配置する
  04 コンバーションボタンを作成して配置する
• 5-2.xd（実習05〜06の完成データ）
  05 ラベルを作成して配置する
  06 レイヤー名をわかりやすい名前に変更する

03 OS環境に依存しないクラウドフォントを活用する

Before :

5-03

• 5-3.xd（実習のレッスンデータ）

After :

5-03F

• 5-3F.xd（実習01〜02の完成データ）
  01 Adobe Fontsのフォントを使用する
  　 - 01 Adobe Fontsでフォントをアクティベートする
  　 - 02 XDでアクティベートしたフォントを使用する
  02 Adobe Fontsで指定したフォントを置き換える

01 読み込み機能と書き出し機能を理解する

Before :

6-01

• 5Illustrator-Objects.ai（Illustratorで作成したグラフィック画）
• Photoshop-Visual-Images.psd（Photoshopで作成したグラフィック画）

After :

no folder

02 プロトタイプとデザインスペックを公開する

Before :

6-02

• Basic-Layer-Structure.xd（サンプルデータ）
  01 公開リンクを作成する
  　- 作成したプロトタイプを公開する
  02 非公開リンクを作成する
  03 プロトタイプ公開画面のコメント機能について
  04 デザインスペックを公開・共有する
  　- 01 公開リンクを作成後にプロトタイプを修正した場合の対処
  　- 02 対象のオブジェクトにバッチ書き出しマークを付けて書き出す
  　- 03 バッチ書き出しマークを付け直して更新する
  　- 04［ デザインスペック］画面で確認する
  05 発行した公開リンクを管理する
  06 プロトタイプの操作をビデオ録画する

After :

no folder