このレッスンでは、Adobe XDのレスポンシブサイズ変更の機能を使って、素早くモバイル用の画面デザインからPC用の画面をつくる方法を解説します。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
レスポンシブサイズ変更
XDには、レスポンシブデザインを支援する「レスポンシブサイズ変更」という機能があります。この機能は、グループの大きさが変更されたとき、グループ内の要素の配置やサイズを自動的に調整してくれます。
グループに対しては、作成時にレスポンシブサイズ変更がデフォルトでオンになっています。アートボードはデフォルトがオフのため、アートボードの幅を変更したい場合は、アートボードを選択した状態でプロパティインスペクタの「レイアウト」欄のレスポンシブサイズ変更をチェックしてから行います。
レスポンシブサイズ変更を有効にすると、モバイル用のアートボードをドラッグして広げるだけで、パディングやボタンの角丸の形状などをキープしたタブレットなど幅の広い画面用のレイアウトが作成されます。残された調整だけ行えば、異なる画面サイズに対応したデザインを素早くつくり上げることができます。
スタックの活用
Webページでは「PCでは横方向」「幅の狭いモバイルでは縦方向」といった配置がよく見られます。そうした場合、グループのスタックを有効にしておくと、アイコンをクリックするだけで要素が並ぶ方向を変更できます。