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