Adobe XDは、WebサイトやアプリのUIデザインだけでなく、ユーザー体験を検証するためのプロトタイプも1つのアプリケーション内で効率的に作成することができます。このチュートリアルでは、XDの代表的な機能であるリピートグリッドやシンボルを使ってすばやく画面のデザインを完成させ、さらに画面遷移のリンクを指定してインタラクティブなプロトタイプを作成、プレビューする方法を解説します。まずは、下の1分動画で制作工程を確認しましょう。
必要な情報
本チュートリアル内で使用する主な機能
リピートグリッド、シンボル、インタラクション設定（画面遷移のリンク）、プレビュー
手順1/6
ファイルを開き、リピートグリッドを設定する
Adobe XDを起動し、「ファイル」→「開く」から練習用サンプルファイル「prototype.xd」を選択して「開く」をクリックします。ファイルが開くと、モバイルページのワイヤーフレームが表示されます。
まず、リピードグリッドを使用して、オブジェクトのコピーを作成してみましょう。アートボード上に配置されたグレーの長方形オブジェクトを選択し、画面右のプロパティインスペクターで「リピートグリッド」ボタンをクリックします。
長方形が緑の破線で囲まれ、右横のハンドルを水平/右方向にドラッグすると、長方形のコピーが連続して作成されます。ここでは3つの長方形を作成します。
リピートグリッドは、グリッド内の要素に変更を加えると、コピーされたすべての要素に変更が反映されます。例えば、1つのオブジェクトのサイズを縮小すると、残りのオブジェクトも同時に縮小されます。
手順2/6
リピートグリッド内に複数の画像を配置する
3つのリピートグリッドに画像を配置します。練習用サンプルファイルの「knots_details」フォルダーの中の3つの画像をすべて選択し、一番左の長方形にドラッグ&ドロップします。3つの画像が左から順番に配置されます。
画像を配置したら、リピートグリッド全体を選択し、Shiftキーを押しながらアートボードの枠外（下方向）にドラッグして移動します。ここはペーストボードと呼ばれるエリアで、バリエーションや予備のアイテムを置いておくのに便利です。
手順3/6
アートボードを追加し、別ページを作成する
別のページを作成するために、アートボードを追加してみましょう。アートボードの追加はツールパネルの「アートボードツール」を使用しますが、今あるアートボードの要素を流用するため、ここでは「複製」を使います。アートボード名「Knots floor cushions」をクリックしてアートボード全体を選択し、「編集」→「複製」を選択します。右側にアートボードが1つ複製されるので、同様の操作を繰り返して2つのアートボードを追加します。
左のアートボードの上部をクリックし、グレーのグラデーションが適用された長方形を選択します。「編集」→「コピー」を選択し、続けて「編集」→「ペースト」を選択すると、長方形が同じ位置にコピーされます。
次に、プロパティインスペクターで「リピートグリッド」ボタンをクリックし、右側のハンドルを水平/右方向に、長方形が3つ作成されるまでドラッグします。
リピートグリッド内でオブジェクトの間の列スペースにカーソルを当てると、ピンク色にハイライトされるので、クリック&ドラッグして70まで間隔を広げます。同時にリピートグリッド内のすべての間隔が70に調整されます。
練習用サンプルファイルの「knots_full」フォルダーの中の3つの画像をすべて選択し、リピートグリッド内にドラッグ&ドロップして配置します。続いて、リピートグリッド全体が選択された状態で、プロパティインスペクターで「グリッドをグループ解除」ボタンをクリックし、グループを解除します。3つの画像を選択し、今度は「オブジェクト」→「重ね順」→「最背面へ」を選択します。画像が最背面に移動し、下にあったナビゲーションバーとグレーのグラデーションが表示されます。
ヒント： アートボード上に追加した要素は個別のレイヤーとして管理されます。レイヤー構造を確認するには、ツールーパネル下部にある「レイヤー」ボタンをクリックし、レイヤーパネルに切り替えます。レイヤーの重ね順は、レイヤーパネル内でも変更できます。
手順4/6
シンボルのテキストを編集する
ページ下にある「Product name」というテキストを編集してみましょう。このテキストは既にシンボルに変換されています。シンボルは、プロジェクト内で同じ要素を繰り返し使用する場合に便利な機能で、1つのシンボルを変更するとコピーされたすべてのシンボルに変更が反映されます。Adobe XDでは、シンボルの上書きをサポートしており、シンボルの関係性を維持したまま、テキストと画像を個別に編集することも可能です。
「Product name」のテキストを「Ctrl + クリック」（Windows）または「Command + クリック」（Mac）して、テキストボックスを選択します。さらにダブルクリックしてテキストを選択し、「Mastard floor cushion」と打ち替えます。これは上書きによる変更のため、他のテキストに変更が反映されません。
「選択範囲」ツールに切り替えて、テキストボックスが選択された状態で右クリック（Windows）または「Control +クリック」（Mac）し、コンテキストメニューから「すべてのシンボルを変更」を選択します。これで、すべてのシンボルにテキストの変更が反映されました。それぞれのクッションの色に応じた商品名を個別に打ち替えます。
手順5/6
プロトタイプのインタラクションを設定する
ここからはプロトタイプの作成に入ります。コネクターでオブジェクトとアートボードを接続し、リンクによる画面遷移のインタラクションを設定します。
画面上部の「プロトタイプ」をクリックして、プロトタイプモードに切り替えます。ペーストボードにあるリピートグリッド内の左の画像を「Ctrl + クリック」（Windows）または「Command + クリック」（Mac）して選択します。右側の青い矢印のハンドルをクリック&ドラッグするとワイヤーが表示されるので、左のアートボード上でマウスを放します。
これで画像とアートボードが接続（リンク）されました。表示されるポップアップウィンドウで、トランジションのオプションと継続時間を指定します。同様に他の画像もそれぞれのターゲットのアートボードと接続します。
リンクが設定できたら、ペーストボードのリピートグリッドを選択し、「編集」→「カット」でいったん消去します。次に、左の「「Knots floor cushions」をクリックしてアートボード全体を選択し、「編集」→「ペースト」でリピートグリッドをアートボード上にペーストします。
同様に他の2つのアートボードを順番に選択し、同じ位置にリピートグリッドをペーストしていきます。配置ができたら3つのリピートグリッドをすべて選択し、Shiftキーを押しながら下にドラッグして位置を調整します。
手順6/6
プロトタイプをプレビューする
作成したプロトタイプがどのように表示され、動作するのかをプレビューしてみましょう。画面右上の「デスクトッププレビュー」アイコンをクリックします。プレビューウィンドウが開き、アートボードがフォーカスされた状態で表示されます。インタラクションを設定した3つの画像をクリックすると、それぞれの接続先のアートボードが表示されます。
Adobe XDでは、プレビューウィンドウを表示したまま、プロトタイプのデザインとインタラクションを編集することが可能です。変更は即座にプレビューに反映されます。
Adobe XDモバイルアプリを使用すると、実際のiOSまたはAndroidデバイスでプロトタイプの仕上がりを確認することができます。詳しくは、「インタラクティブなプロトタイプの作成とプレビュー」をご覧ください。
