XD Rapid Prototyping Workshop

速習Adobe XD 最新プロトタイピング実践

• 日時：2019年6月6日（木） 19:00 - 21:00
• 会場：Bitsmith株式会社 セミナールーム

講師：境祐司（Adobe Community Evangelist）

ワークショップ参加者のためのページです

• ハンズオンで参加される方は、ダウンロードしてください
• 上のボタンをクリックするとダウンロードできます（データサイズ：40.6MB）
• ダウンロードデータはZIP 圧縮されていますので解凍してください
• ※Windows の場合、ダブルクリックせず、右クリックして「すべて展開」を選択してください

INDEX

• レッスン内容
• XD基本習得のカリキュラム［標準］
• XD関連リソース
• 参考資料

１９：００　開始（講座の流れを説明）

　　↓　　　XDとは？［デザイン・プロトタイプ・共有］

　　↓　　　素材データの読み込み／プロトタイプ画面の書き出し

　　↓　　　描画機能

　　↓　　　インタラクション

　　↓

２０：００　休憩

　　↓　　　コンポーネントの効率的な活用方法

　　↓　　　アセットの管理機能

　　↓　　　プロトタイプを公開／共有する機能

　　↓　　　プラグインの活用方法

　　：５０　質疑応答

２１：００　終了

［INDEXに戻る］

レッスン内容

基礎知識

ログインが必要なAdobeのクラウドサービス

• Adobe Creative Cloud デスクトップアプリケーション
  ※XDの共有で必要
• Adobe Creative Cloud アセット
• Adobe Stock
• Adobe Fonts

macOSとWindowsの違い

• Windows版にはメニューバーがない
  左上にあるハンバーガーアイコンでメニューを表示する
• Windows版にはオブジェクトメニューに相当するコマンドがない
  右クリックしてコンテキストメニューから選択できる

インポート可能なデータ形式

• ラスター画像：PSD・JPG・GIF・PNG・TIFF・BMP
• ベクター画像：Ai・SVG
• Sketch
• TXT

サポートしていないSVGの機能：

フィルター・パターン・サポート対象外のストローク機能（linecap、dasharray）・（ビットマップ）マスク・スケール変換（一部サポート対象）・スキュー変換・switch要素およびforeignObject要素・ブレンドモード・グラデーション変換・テキストアンカー・ネストされた SVG

エクスポートするときの注意

• ラスター画像のサイズ制限：16,000 x 16,000 ピクセル（256万画素）
• ベクター画像のサイズ制限：100MB（埋め込み画像は9MB以下）

Step-01 非破壊編集を理解する

ワークスペースの基本操作

• アートボードの選択：アートボード名をクリック
• アートボードの複製：アートボード名をoption（Alt）+ ドラッグ
• アートボード名の変更：ダブルクリック
• カンバスの移動：スペースバーを押しながらドラッグ

• オブジェクトの複製：option（Alt）+ ドラッグ
• オブジェクトのロック：
• macOS：command + L ／Windows：右クリックで「ロック」を選択
• スナップの一時的な無効化：command（Ctrl）キーを押し続ける
• オブジェクトのピクセル単位の移動：カーソルキー（↑↓←→）
• オブジェクトの10ピクセル単位の移動：shiftキーを押しながらカーソルキー（↑↓←→）

シェイプの描画

• 中央から描画：option（Alt）キーを押しながら描画
• 縦横比を固定：shiftキーを押しながら描画
• 長方形の角丸の半径を個別に調整：option（Alt）キーを押しながらポイントをドラッグ

• 選択状態のオブジェクトの不透明度：1=10%／2=20%／0=100%

• ネスト化されたオブジェクトの選択：ダブルクリック
• ネスト化されたオブジェクトのダイレクト選択：command（Ctrl）+ クリック

• オブジェクトの連続パターン：リピートグリッド
• 非破壊編集：合体・全面オブジェクトで型抜き・交差・重なる部分を中マド

Step-02 一括ペーストで配置作業を効率化する

Step-03 画像を開く・読み込み・

　　　　  コピー&ペースト・ドラッグ

PNG・JPEG・GIF・TIFF・SVGの読み込み

A.

• 画像ファイルをドラッグ&ドロップ

B.

• macOS：Finderで画像ファイルをコピーしてXDでペースト
• Windows：エクスプローラーで画像ファイルをコピーしてXDでペースト

C.

• macOS：ファイルメニューから「読み込み」
• Windows：ハンバーガーメニューから「読み込み」

画像を配置する前のマスキング：

• 画像ファイルを描画したシェイプにドラッグ&ドロップ

画像を配置した後のマスキング：

• 画像の上にシェイプを描いて（両方を選択状態にして）、macOS：オブジェクトメニューから「シェイプでマスク」／Windows：右クリックして「シェイプでマスク」

• オブジェクトのパス編集モード：ダブルクリック
• 折れ線と曲線の切り替え：アンカーポイントをダブルクリック

Step-04 コンポーネントについて理解する

Step-05 インタラクションの設定方法

Step-06 プラグインの活用

Step-07 レスポンシブリサイズを理解する

Step-08 リピートグリッドの活用方法

Step-09 モーションデザインの考え方を学習する

Step-10 高度なインタラクション

［INDEXに戻る］

XD基本習得のカリキュラム［標準］

Adobe XDの基本操作を習得するための講座アーカイブです。総再生時間は3時間39分ありますが、実際の講座は5〜6時間になります。

速習コースは厳選したしたカリキュラムで2時間程度に短縮されます。

Adobe XD 基本講座［Step-1〜18：3時間39分］

［INDEXに戻る］

XD関連リソース

• Adobe XD公式ページ
• Adobe XDの新機能
• Adobe XD - ジャパンフォーラム
• Adobe Status（メンテナンス・障害情報）
• Adobe XD - Adobe Blogs（記事）
• ヒントとコツ
• よくある質問
• ショートカットキー
• Adobe XD公式マニュアル（PDF）※古い
• Adobe XD User Group Japan
  Adobe XDのユーザーコミュニティが日本各地で立ち上がっており、Facebookなどでユーザー同士の交流も活発におこなわれています。2019年6月現在、札幌、秋田、仙台、東京、名古屋、京都、大阪、広島、福岡にユーザーグループがあります。

［INDEXに戻る］

参考資料

ワークショップの参考資料です。Adobe XD 速習簡易マニュアルは、最低限必要な機能に絞って解説しています。今回のワークショップでは使用しません（ワークショップ後の復習などにご利用ください）。

• ［A］Adobe XD 速習簡易マニュアル（PDF／10ページ）
• ［B］Adobe XD アップデートタイムライン（PDF／1ページ）
• ［C］Adobe XD 読み込み／書き出し機能一覧（PDF／1ページ）
• ［D］プロトタイプの忠実度と4つのレベル（PDF／1ページ）

更新日：2019年6月6日（木）