このレッスンでは、XDのレイアウト機能とリピートグリッドを使って、モバイル画面のUIをデザインし、それをPC用の画面に効率よく展開する手順を学びます。
アートボードを縦に伸ばしてスクロール領域をつくる
まず、モバイル用アートボードを縦に広げてスクロール領域をつくります。その際、右側のプロパティインスペクターでレイアウトのレスポンシブサイズ変更をオンにしておきます。これでフッター部分が自動的に追従していきます。
ビューポートの設定は、右側のプロパティインスペクターパネルで行います。
スクロール領域のプルダウンメニューから、「垂直方向」を選び、「ビューボートの高さ」を800 と設定します。アートボード上の点線は、ビューポートの高さを示します。 アートボード左にあるインジケーターを上下にドラッグすることでもビューポートの変更は可能です。
要素の位置を固定する
ヘッダーフッターなどをスクロール時に画面に常に表示するために、位置を固定します。固定したいオブジェクトを選択し、プロパティインスペクターパネルの「スクロール時に位置を固定」にチェックを入れます。これで、オブジェクトの位置が固定されます。
リピートグリッドを作成する
伸ばした領域に複数のテキストや画像をレイアウトする場合、リピートグリッドが便利です。テキストと画像配置枠を選択し、リピートグリッドに変換したら、アートボードの長さに合わせて下に延ばします。
プラグインを利用してデータを読み込む
Adobe XD では、プラグインを利用することで、作業をより効率化することができます。今回はGoogle スプレッドシートからテキストや画像などを配置することができるプラブインを利用して、リピートグリッドにデータを読み込みます。
まず、プラグインメニューから「プラグインを見つける」を選択します。Google sheets を検索し、見つけたら「インストール」をクリックして、XD にインストールします。
リピートグリッドを選択し、「プラグイン」メニューから「Google sheets」を起動します。続いて、用意済みのGoogle スプレッドシートのURL、あるいはローカルのCSVファイルを読み込みます。これで情報が流し込まれ、モバイル用のサイトデザインができます。
読み込んだ画像は必要に応じて外観を調整します。画像を選択してダブルクリックすると、表示位置や大きさを変更できます。
PC画面にデザインを展開する
Web 用の2 つのアートボードに、モバイル用アートボード内の要素をコピーします。モバイル用アートボード内の要素をすべて選択してコピーし、真ん中のアートボードを選択してペーストします。
さらに、Web 用アートボード内の要素を、レスポンシブサイズ変更の機能を使って再配置します。Web-1024 アートボードのヘッダーと背景の画像を選択し、右に伸ばします。XD では自動的に画像やテキストなどに対して、「レスポンシブサイズ変更」のオプションが設定されています。そのため、特に設定しなくても適切にリサイズされます。
リピートグリッド部分は2 カラムとしたいためリピートグリッド内の画像とテキストをそれぞれダブルクリックして、サイズの調整を行ってから、リピートグリッドを右に伸ばします。
続いて、このアートボード内の要素をコピーし、もう一つのアートボード、Web – 1920 にペーストします。こちらも同様に、サイズを伸ばして調整します。
Adobe XD なら画角の違うWeb サイトのデザインも簡単に行うことができます。ぜひ活用してください。