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