様々な画面サイズに対応するアプリのレイアウトをデザインして、優れたユーザーエクスペリエンスを実現します。デザイナーのCynthia Fong氏が、Adobe XDを使ってアプリのデザインで使われるサイズを変更する様子をご覧ください。

Adobe StudioチームのデザイナーであるCynthia Fong氏は、あらゆるクリエイティブプロジェクトに情熱を注ぎ、人々を刺激する制作に取り組んでいます。

コピーを作成する

Fongは、webサイトのレイアウトを示すサイトデザインを完成させた後、Ctrl + D(Windows)またはcommand + D(macOS)を使ってアートボードを複製しました。新しいアートボードの名前をダブルクリックして、名前を変更しました。新しいアートボードを選択し、右中央のハンドルをドラッグしてアートボードの幅を狭くしました。レスポンシブサイズ変更機能はデフォルトではオフになっているため、要素のサイズは変更されません。Fongは、Ctrl+Zまたはcommand+Zキーを押して、アートボードを元のサイズにリセットしました。

同じPhotowalkのwebデザインアセットを示している2つのアートボード。1つ目のアートボードにはdesktop、2つ目のアートボードにはmobileという名前が付いている

何が起こるかを観察する

次にFongは、プロパティインスペクターのスイッチを切り替えることでレスポンシブサイズ変更を有効にしました。ドラッグしてアートボードをモバイル幅にすると、要素もサイズ変更されました。しかし、おすすめの画像が思ったようにサイズ変更されなかったため、変更を元に戻すことを選択しました。

左側のアートボードはレスポンシブサイズ変更が無効であり、デザインが切断されている。右側のアートボードはレスポンシブサイズ変更が有効であり、デザイン要素のサイズが変更されている

整理する

レスポンシブサイズ変更機能は、デザイン要素が整理されているときに最も効果を発揮します。Fongは、デザインフェーズ中に、メニューアイコンなどの要素をグループ化しておきました。XDではそれに従ってサイズ変更と再配置がおこなわれます。下のスクリーンショットで、メニューアイコンがグループ化されている場合とそうでない場合の再配置の違いに注目してください。

Adobe XDのレイヤーパネルとアイコンがグループ化されている場合とそうでない場合のヘッダーデザインの違いを示している2つのグラフィック

制約を確認する

レスポンシブサイズ変更機能による要素のサイズ変更と配置は、新しいレイアウトにサイズ変更するときに最も効果を発揮します。Fongは、自動設定を無効にしたほうがいい場合があるのではないかと思いました。例えば、Shiftキーを押しながら2つのおすすめ画像をクリックして選択した後、レスポンシブサイズ変更の「手動」オプションをクリックしました。「幅を固定」の選択を解除し、アートボードのサイズをもう一度変更しました。今回は、望んでいたものに近い感じに画像のサイズが変更されました。

Mobileアートボードでおすすめの画像が選択され、レスポンシブサイズ変更パネルで「手動」が選択され、「幅を固定」の選択が解除されている

表示を広げる

Fongは、2つのおすすめの画像を選択し、AltまたはOptionキーを押したままハンドルをドラッグして、画像とアートボードの縁の間のパディングを調整しました。

Mobileアートボードのサイズがモバイル幅に変更され、それに伴っておすすめの画像のサイズが変更される。レスポンシブサイズ変更パネルが右側に表示されている。

ギャラリーを開く

メイン画像の下のギャラリーは、リピートグリッドに配置されています。ギャラリーを左に移動します。サイズをモバイル幅に変更すると、ギャラリー画像が1枚だけ表示されました。これを修正するために、レイヤーパネルでリピートグリッドを選択し、すべての画像が表示されるようにハンドルをアートボードの外側にドラッグしました。

リピートグリッドにギャラリー画像が表示されているwebサイトのデザインデモアセット。ギャラリーを広げるために右側の緑色のハンドルが選択されている

最後の仕上げをする

この時点で、モバイル用のデザインはほぼ満足のいくものになりました。Fongは、デザインを仕上げるためにヘッダー要素を手動で調整しました。その後、レイヤーパネルでHeroレイヤーを選択し、レイアウト全体が思い通りのものになるまで、メイン画像、ヘッダーアイコン、タイトル、タグラインのサイズと位置を変更しました。

操作前後のモバイル用のwebデザインの状態。左側はヘッダー要素のサイズが変更されていない。右側は幅に収まるようにサイズが調整されている

スピーディーにデザインする

様々な画面サイズに対応するようにアプリのレイアウトをカスタマイズするときに、レスポンシブサイズ変更機能を使ってデザインワークフローをスピードアップできます。

デスクトップコンピューターとモバイルフォンの画面に表示されている完成したwebデザインのモックアップ

注意:このチュートリアルに付属のプロジェクトファイルは練習目的でのみご利用ください。

03/16/2020

アーティスト:Cynthia Fong

Adobe Stock提供元:PERIGTEMPLATE

このページは役に立ちましたか。