必要な情報
作業に入る前に、練習用のサンプルファイルをこちらからダウンロードしておきましょう。（練習用ファイルはkotohajime_practice.xd、別途完成品ファイル kotohajime_comp.xd はこちらからダウンロードいただけます）
ここでは、事前にIllustratorで作成しておいたロゴデータを、Creative Cloudライブラリを使って効率的にAdobe XDのアートボードに配置する方法を解説します。
使い方のポイント
Creative Cloudライブラリとは
写真、グラフィック、カラー、文字スタイルといったアセットをクラウド上で同期させ、Creative Cloudのアプリ間で簡単に共有できる機能です。例えば、Illustratorでロゴを作成し、ライブラリパネルにドラッグ&ドロップして登録すると、XDやPhotoshopなど、対応する全てのアプリのライブラリパネルにも自動的に追加されます。元のデータを変更すると、適用された全てのデザインに反映されます。
XDでライブラリパネルを開くには、「ファイル」→「CCライブラリを開く」を選択します。
フッターの情報など、プロジェクト内で共通して使用するオブジェクトは、シンボルに変換しておくと便利です。ここでは、フッターをシンボル化して各アートボードに配置し、一括してグラデーションを適用する方法を解説します。
使い方のポイント
シンボルとは
ロゴやアイコン、ヘッダーやフッターなど、各アードボードで共通して使用するオブジェクトをシンボルに変換し、そのコピーをドキュメント内で複数配置します。シンボルを変更すると、全てのコピーに反映されるため、修正作業の大幅な時間短縮になります。
シンボルを作成するには、以下の方法があります。
- オブジェクトを右クリックし、「シンボル作成」を選択
- オブジェクトを選択し、command + K キー（Mac）または Ctrl + K キー（Windows）を押します。
- 「オブジェクト」→「シンボルを作成」を選択します。（Macのみ）
- シンボルライブラリで「+」をクリックします。
Adobe XDのアセットパネルでは、プロジェクト内で使用しているカラー、文字スタイル、シンボルなど全てのアセットを管理できます。アセットを変更するとプロジェクト全体に自動的に反映されるため、デザインの更新作業が効率化します。
フッターとグローバルナビゲーションのデザインが仕上がったところで、ワークスペースをプロトタイプモードに切り替えて、画面遷移の設定を行っていきます。ここでは、グローバルナビゲーションからリンク先のページへ接続する方法を解説します。
ここからは、デザインをさらにブラッシュアップしていきます。配置された画像やオブジェクトに対して、IllustratorやPhotoshopでおなじみの、ぼかしやドロップシャドウといった様々な効果を適用する方法を解説します。
使い方のポイント
オブジェクトのぼかしと背景のぼかし
- オブジェクトのぼかし：選択したオブジェクト自体をぼかします
- 背景のぼかし：オブジェクトの背面にあるものすべてをぼかします。画像の上に文字をのせたい時などに便利です。
Illustratorで作成したアートワークをXDのデザイン上に追加し、仕上げていきます。ここでは、追加されたアートワークをIllustratorで編集してXDに反映させる方法と、XDで直接編集する方法を解説します。
XDで作成したデザインとプロトタイプを、iOSまたはAndroid用のXDモバイルアプリを使って、実際のデバイスで表示、検証することができます。ここでは、XDモバイルアプリのインストール方法と、デバイスプレビュー機能の使い方について解説します。
使い方のポイント
モバイルデバイスにAdobe XDモバイルアプリをインストールし、USBケーブルでPCと接続すると、デスクトップのXDで作業中のデザインがモバイルデバイスの画面に表示されます。デスクトップでデザインに変更を加えると、デバイスの画面にも即座に反映されます。
デザインとプロトタイプがひと通り完成したところで、デザイナーが開発者に渡すためのデザインスペック（仕様書）およびアセットを準備します。ここでは、デザインスペックを自動的に作成して公開する方法と、アセットの書き出しについて解説します。
使い方のポイント
デザインスペックとは
XDで作成したデザインの仕様をWebで公開し、開発者はそこでレイアウトの位置やサイズ、色および文字スタイルを検証し、それらをコピーできます。デザインスペックは自動で生成されるため、仕様書の作成に費やす時間を節約できます。