1. 始める前に
マテリアル デザイン レイアウトとアダプティブ デザインの原則を確認し、どんな画面サイズでも一貫した体験を実現できるようにしましょう。
アダプティブ デザインと何か、なぜ使うべきなのか
アダプティブ デザインとは、特定のブレークポイントとデバイスに適応させるためのレイアウト設計の手法です。通常、デバイスの幅によりレイアウトの変更点や適応点が決まります。
すべてのアプリをすべての画面サイズに適応させる必要はありませんが、このデザインを取り入れることで、人間工学、ユーザビリティ、アプリの質といった点でエクスペリエンスが向上し、ユーザーにとって自由度が高まります。
デザイナーとして、アプリの主要画面を大きなフォーマットに適応させることで、デベロッパーがアプリの残りの部分をコンテキストに変換しやすくなります。
学習内容
- 大きな画面をデザインするためにマテリアル デザインの新しいアダプティブ デザインの原則を使う方法を学びます。
- 主要画面のデザインをモバイルサイズから大きな画面サイズに利用する方法を学びます。
- 自分のデザインに適用するために使えるアダプティブ コンセプト。
- 新しい正規レイアウトのデザイン方法。
前提条件
このラボでは、基本的なデザイン コンセプトを構築します。
- 基本的なデザイン コンセプトに関する知識: グリッド、タイプスケール、マテリアル コンポーネント
- Figma に関する知識
必要なもの
2. 始める
セットアップ
次に、デザイン環境をセットアップする必要があります。
まず Adaptive Designlab Figma ファイルにアクセスする必要があります。このラボで必要なものはすべて Figma ファイル内にあります。ファイルをダウンロードしてインポートするか、Figma コミュニティからファイルを複製してください。
まず、Figma にログインするかアカウントを作成します。
Figma コミュニティからファイルを複製する
マテリアル デザインを使ったアダプティブ レイアウトのデザインに移動するか、Figma コミュニティでマテリアル デザインを使ったアダプティブ レイアウトのデザインを検索します。[Figma で開く] をクリックし、自身のファイルにコピーします。
ファイル レイアウト
ファイルを見てみると、それ自体で完結しており、導入から始まっていることがわかります。各セクションは、相互にリンクされたアートボードの行に分かれています。セクションにはいくつかの基本コンセプトが記載されていて、その後には演習があります。セクションと演習はセットになっているので、順番に終わらせるのがよいでしょう。
この Codelab では、コンセプトと演習を詳しく説明します。アダプティブやマテリアル デザインを初めて使用する場合は、Codelab に沿って読み進めることをおすすめします。
イントロ アートボードから始めましょう。アートボード同士を順番につなぐリンクボタンがあり、ボタンをクリックするとリンクにアクセスできます。
3. レイアウトについて
マテリアル 3 では、M2 のレスポンシブ グリッドの利用ではなく、正規レイアウトと間隔メソッドを使用して、異なるブレークポイントやウィンドウ サイズクラスへのアプリ レイアウトに適応させることが必要です。
レイアウトをそれぞれのブレークポイントで固定サイズにしないでください。あらゆるデバイスで安定したエクスペリエンスを保証するため、レイアウトはサイズクラス内であっても柔軟である必要があります。
ウィンドウ サイズクラス
ウィンドウ サイズクラスとは独自のブレークポイントであり、ウィンドウ サイズは使用可能なスペース、デバイスの慣例、人間工学に合わせてレイアウトを変更する必要があります。
すべてのデバイスは、マテリアル デザインの 3 つのウィンドウ サイズクラス（compact、medium、expanded）のいずれかに分類されます。
レイアウト領域
Android アプリの多くは、システムバー、ナビゲーション エリア、ボディと呼ばれる領域で構成されています。
システムバーはデバイス インターフェースの不可欠な要素です。アプリのレイアウトがシステム UI とどのように相互作用するのかを最適に表現し、正確に実装するため、あらゆるアプリのデザインに含めて、デバイス間で正しいコンテキストで表示する必要があります。
ナビゲーションは、ユーザーがアプリ内の移動、重要なアクションへのアクセス、Android プラットフォーム全体を移動するためのさまざまなアフォーダンスを表します。ナビゲーション領域には、ナビゲーション ドロワーやレール、バーなどのコンポーネントがあります。
ボディ領域には、アプリのコンテンツの大半が配置されます。ボディ コンテンツは追加グループ、レイアウト パラメータ、ペインで構成されます。ナビゲーションとシステムバーの領域の下に続く必要があります。
マージン
マージンとは、左右の端のスペースのことです。サイズ間で固定または調整されます。
4. ウィンドウ クラスサイズ
まず、用意されているモックアップのウィンドウ クラスサイズを medium ウィンドウ クラスサイズに調整しましょう。
- 「Exercise Layout 1」フレームを右に拡大し、Compact（モバイル）から Expanded（タブレット）用の 1440 dp にします。
- [グリッド スタイル] プルダウンで、スモールからラージ（ボディ領域オフ）に変更します。
- デバイスサイズとグリッド調整を使って、ボディ領域のコンテンツ マージンを必要に応じて調整します。
グリッドが大きな画面のデバイス用にセットアップされ、レイアウトを適応させる準備ができました。では、スケーリングに移り、コンテンツをどのようにして大きな画面サイズに合わせるかを見てみましょう。
5. 構成の適応についての概要
演習レイアウトに対して、コンテンツと要素がどのように調整されているのかを見てみましょう。幅に合わせるために引き延ばされています。大きな画面に合わせるために引き延ばすと、使いにくいレイアウトになります。たとえばこのレイアウトでは、行が長く読みにくくなっています。
ビジュアル グルーピングと包含の原則では、大きなスペースにおいてどのように要素の再調整を行うかを説明します。大きな画面では、視覚コンテンツを増やした結果、視覚的ノイズが増す場合があることに注意してください。読みやすさを考慮して、1 行に最大 60 文字までとしてください。
スペース
ユーザーにとって見やすいコンテンツにするために、似たようなアイテムを空白や目に見える分割を使ってグループ化することもできます。暗黙的包含では、空白を使った視覚的なグループ コンテンツでコンテナの境界線を作成します。一方、明示的包含では、分割ラインやカードを使ってグループ コンテンツをまとめます。マージンとは左右の端のスペースのことです。その他のスペース手法は次のとおりです。
ペインとは、ボディ領域内にあるグループのことです。
列は柔軟であり、ブレークポイントで量が変わります。
列グリッドではレイアウトの重要なパーツが保持されています。正規のレイアウト ペイン内で保持されているか、初期構造の構築をサポートするために保持されています。
スペーサーはガターと似ていますが、ペインを区切るものです。
パディングとは、コンポーネント内の小さなスペースのことです。
6. スケーリング
細かなレイアウトを大きな画面全体に引き延ばすだけでは、大きな画面サイズに適したレイアウトにはなりません。列グリッド上で視覚的グループ化を使うと、要素を適した形で配置できます。列グリッドはレイアウト用に設定されています。
- 列グリッドに合わせてコンテンツを配置、整理します。
- 大きなデバイスをサポートするために、コンテンツの大きさを変更する必要があります。大きな画面で読みやすいように文字の大きさを調整します。タイトルを Display large に、本文を 24 sp に、それ以外のテキストを Body large に変更します。
- 新しいレイアウトでは説明アイコンが小さく見えるので、スペースを 40 x 40 dp に変更します。
7. グループ化と包含
構成のサイズを変更し、列グリッドに合わせて調整したため、レイアウトは読みやすくなりました。しかし、グループ化と包含を使えば、画面サイズを活用できます。
- 画像を左揃えで 6 列分に縮小します。
- タイトルと注意事項をグループ化し、画像の右側の 5 列に配置します。グリッドの配置はそろえたままです。ヘッダー グループの下に 24 DP のスペースを残し、暗黙的な境界を作成します。
- 説明コンテンツには、行あたり 60 文字の長さを使い、列のスパンを 11 列に定めます。先頭行には 1 列分の空白を配置します。サーフェス コンテナの色の役割を使って、視覚的コンテナを作成します。
8. コンポーネントの動作についての概要
コンポーネントはさまざまブレークポイントによって異なる動作をする可能性があります。幅、可視性、イベント切り替えコンポーネントを調整します。
ボタンなどの一部のコンポーネントは、12 列スペースのレイアウトを扱えないことがあります。読みやすさと使いやすさを維持するために、幅を固定するか、切り替える必要があるかもしれません。たとえば、ボタンを流動的に適応させるのではなく、大きな画面サイズに対しても一定の幅に固定する必要が生じます。
レスポンシブ パターンとは、コンポーネントをスペースに適応させるために役立つ一般的な方法です。
再配置とは、追加の画面スペースを利用するために画面上で要素を再配置するパターンの 1 つです。
カードを縦向きからリフローする、FAB をナビゲーション レールに移動する、タブコンテンツを 1 つのスペースに分割するなどは、すべて再配置の例です。
コンポーネントは、大きな画面に適した同等の機能を持つコンポーネントに切り替えることで適応させられます。
モバイルで動作するナビゲーション コンポーネントは、大きなフォーマットでは人間工学的な問題を引き起こします。
正規レイアウト
正規レイアウトとは、あらゆるウィンドウ サイズクラスの共通の画面レイアウト設計のことです。正規レイアウトの例としては、フィード、リストの詳細、サポートペインがあります。こうしたレイアウトは、すべてのウィンドウ クラスサイズにわたって理想的なスタート地点となります。
9. レスポンシブ パターン
コンポーネントは、スペースを埋めるために動的に引き延ばされています。再配置パターンとグループ化を使って、コンテンツを大きなスペースに適応させます。水平方向のスペースを活かすため、Today 画面にあるカードを再配置します。
- 注意事項カードをタスクとウィッシュリストの上に移動します。
- タスクとウィッシュリストを異なる配分で垂直方向にどのように配置するかを考え、水平方向では 6 列と 5 列になるように適応させることで、スペースを有効活用できます。ウィッシュリストはすでにペイン内で視覚的に包含されています。
10. アダプティブ ナビゲーション
デザインではボトム ナビゲーションを利用しているので、このデザインラボでもナビゲーション モデルを維持し、ナビゲーション レールを導入します。
- ボトム ナビゲーション バーを削除します
- [アセット] パネルでナビゲーション レール コンポーネントを探し、ナビゲーション スペースに配置します。
- ボトム ナビゲーションに合わせてラベルとアイコンを更新します。
- レイアウトの他の部分に合わせてスタイルを指定します。
11. 正規レイアウト フィード
横に柔軟に配置される 1 つのリストのレイアウトがあります。水平方向にスペースがあるので、より興味を引く正規レイアウト フィードを利用します。
- ナビゲーションとトップバーはすでにミディアム サイズに適応しているので、ボディ コンテンツに焦点を当てましょう。フィード レイアウトにはグリッド構成が使用されています。リストアイテムを Stacked Cards に更新します。
- フィード内のカードは均一である必要はありません。最初のカードを注目カードとして扱うため、11 列に拡大します。残りのカードは 24 dp 間隔で、5 列に縮小します（自動レイアウト折り返しを使うと便利です）。
12. 正規リスト / 詳細
レイアウトは大きなデバイスに表示されているため、拡大されたレイアウトが表示されるたびに、植物の 1 つを詳細表示するためのスペースができました。
- 詳細を表示するためのペインを作成します。マージン内に 5 列のコンテナを作成します。サーフェス コンテナ以上に配置します。
- スケーリング演習からフィロデンドロンのコンテンツをコピーし、ペイン内の上部に貼り付けます。ペインに 16 dp のパディングを追加します。
- 植物のタイトルを Display Small に、残りを Body Medium か Body Large のどちらかに変更します。
- コンテンツが垂直方向に広がり、写真で水平方向のスペースが埋められます。
13. 完了
マテリアル デザイン アダプティブの原則を使って、小さな画面から大きな画面へとデザインを適応させることができました。
不明な点がある場合は、Twitter の @MaterialDesign までいつでもお気軽にお問い合わせください。
その他のデザインに関するコンテンツやチュートリアルについては、youtube.com/MaterialDesign をご覧ください。