見出し画像

Material Design 3 要点まとめ #2 Adaptive design

パジェロ｜COMPASS

Material Design 3 ガイドラインの要点をまとめたものです。
第2回はAdaptive designの章。Material Designの基本的なレイアウトの考え方やバリエーションについてのガイドラインです。折りたたみ式ディスプレイについて大きく取り上げられているところにAndroidっぽさを感じます。

Overview

M2からの更新ポイント

・折りたたみ式デバイスガイドラインを追加
・大画面に対応したレイアウトのガイドラインを追加
・タイプスケールを更新

折りたたみ式デバイスガイドラインを追加

  • ディスプレイが真ん中で二つに折れる端末向けのガイドラインが手厚く書かれています。Foldable devicesのセクションです。

大画面に対応したレイアウトのガイドラインを追加

  • PCや大型タブレットのレイアウトやコンポーネントの適用方法について、モバイルの場合と対比させながら説明されています。Design for large screensにて詳細。

タイプスケールを更新

  • M3からテキストスタイルの指定方法が変わり、少ないスタイルで色んな端末に最適化させやすくなりました。

  • こちらはTypographyの章で詳しく説明されているので、今回は詳しく説明されません。

Design for large screens

要点

・大画面のレイアウト領域はナビゲーションとボディに分けられる
・レイアウトの基本はカラム、ガター、マージン
・ブレイクポイントでカラムや最小マージンを切り替える
・画面サイズに応じて似た役割のコンポーネントを切り替える
・小さな画面で隠していた情報を、大きな画面では一度に表示できる

大画面のレイアウト領域はナビゲーションとボディに分けられる

  • ナビゲーションエリア

    • 大抵、画面の左端にある。ナビゲーションドロワー（「サイドメニュー」とか呼ばれるやつ）やナビゲーションレール（ボトムナビバー（iOSでいうとタブバー）が縦になったみたいなやつ）がある場所。

    • アプリ内の目的地間を移動したり、重要なアクションにアクセスしたりするのに使う。

  • ボディエリア

    • 画面中央に広く取る。大部分のコンテンツが表示されるエリア。

レイアウトの基本はカラム、ガター、マージン

  • 画面全体（正確にはボディエリア全体）を複数のカラム（列）に分けてレイアウトのガイドにする。

  • カラムとカラムの間にはガター（溝）がある。

  • 画面の両端にはマージン（余白）がある。

昔ながらのMaterial Designレイアウトの基本。厳密なルールってわけでもなく、レイアウトを整理するときに役立つ便利な考え方。

ブレイクポイントでカラムや最小マージンを切り替える

  • 画面幅の範囲を指定して、範囲ごとにレイアウトを切り替えて最適化することができる。この範囲指定のことをブレイクポイントと呼ぶ。

  • Material Designのデフォルトでは、ブレイクポイントに応じてカラムの数や画面左右端のマージンの最小サイズを切り替わるようになっている。

  • Material Designのデフォルトでは、3つのブレイクポイントが設けられている。

    • 小：携帯電話など

    • 中：小型タブレットや折りたたみデバイスなど

    • 大：大型タブレットやPCなど

このあとも折りたたみデバイスのことが各所で言及される。折りたたみデバイス向けのデザインガイドラインを提供することがM3のひとつのテーマになっている印象。

画面サイズに応じて似た役割のコンポーネントを切り替える

小さな画面で隠していた情報を、大きな画面では一度に表示できる

  • 小さい画面では表示できる情報が限られるが、画面が大きくなれば一度にたくさんの情報を表示できるようになる。

  • 例えば、携帯端末ではボタンを押してメニューを表示するUIを、PCではナビゲーションエリアに常にメニューが表示されているようにする、など。

Canonical layouts

要点

・代表的な3種類のUIパターンを紹介
・リスト&ディテール：一覧と詳細による構成
・サポートパネル：メイン情報の横にサブ情報を表示
・フィード：ニュースやSNSに最適

代表的な3種類のUIパターンを紹介

  • カノニカルは「正統な」とか「基準となる」みたいな意味。

  • 使い勝手の良い、代表的なUIパターン3種類の紹介。

  • 情報を構成するときの取っ掛かりとして活用できる。

  • すべてモバイルからPCまでレスポンシブパターンに対応。

リスト&ディテール：一覧と詳細による構成

  • リスト（一覧）とディテール（詳細）の組み合わせで構成するパターン。

  • 大画面の場合は、画面の左側にリストを表示し、右側にディテールを表示する。画面が小さい場合は、リストとディテールでページを分割する。

  • コンテンツを閲覧し、詳細を素早く確認するのに適している。

サポートパネル：メイン情報の横にサブ情報を表示

  • メインコンテンツの横に、補助的な情報を表示する。

  • 例えば…

    • メイン：ドキュメント編集／サブ：コメント

    • メイン：ニュース詳細／サブ：関連ニュース

  • PCや大型タブレットだけじゃなく、折りたたみデバイスにも向いてる

  • 折りたたみじゃない携帯端末での利用はNGまたは非推奨

  • 画面が小さめの場合はサポートパネルをメインコンテンツの下に配置することもできる。

フィード：ニュースやSNSに最適

  • 小さい画面ではコンテンツを縦に並べる。大きい画面ではグリッドレイアウトを利用して複数の列に分割配置できる。

  • コンテンツの重要性に応じて大きさを自由に変化させることができる。その場合、グリッドレイアウトに沿って配置を整理する。

  • 1つのコンテンツを、複数の列をまたぐサイズで配置することもできる。

  • すべての画面サイズで推奨。

Foldable devices

要点

・折りたたみディスプレイ端末の話
・折りたたみ時と展開時に加えて「テーブルトップ」状態がある
・画面の上部や左右中央部は指が届きにくい
・展開時のポートレートとランドスケープそれぞれに適したレイアウト
・遷移の種類に応じてトランジションを使い分ける

折りたたみディスプレイ端末の話

  • 折りたたんだ状態で細長い画面でも使えるし、開けば正方形くらいの大きな画面としても使える端末のこと。Galaxyとか。

折りたたみ時と展開時に加えて「テーブルトップ」状態がある

  • 折りたたみ端末には3つの状態がある。

    • 折りたたんで画面が半分になった状態

    • 完全に開いて大画面になった状態

    • 2枚の画面が90°くらいになっている状態（テーブルトップ）

画面の上部や左右中央部は指が届きにくい

  • 展開時の話。

  • 画面の上部25%はほとんどの人にとって手が届かない。

  • 画面左下、右下から少し離れたエリアが一番アクセスしやすい場所で、そこから扇状にアクセスしづらくなっていく。画面上部中央が一番アクセスしづらい。

  • 上部だけでなく、画面左下、右下の端もアクセスしづらいので注意。

展開時のランドスケープとポートレートそれぞれに適したレイアウト

  • 画面・ヒンジ・画面が左右に並んでいる状態を展開時のランドスケープと呼ぶ。上下に並んでいる状態がポートレート。

  • ランドスケープの場合はコンテンツを左と右の2列に分ける。

  • ポートレートの場合は幅が狭いので1カラムになる。小型タブレットのポートレートと同じ。

遷移の種類に応じてトランジションを使い分ける

  • 折りたたみ端末に限らず参考にできる画面遷移時のトランジションについてだけまとめます。

  • リスト&ディテール表示のとき、リストのフォーカスを上下に切り替えると、ディテールは同じ上下方向にスライドしながら切り替わる。

  • コンテンツの親子関係が切り替わるとき、親→子の場合はコンテンツが右から左にスライド、子→親の場合は左から右にスライドしながら切り替わる。

  • カードUIから詳細に遷移するときは、カードが拡大して画面全体を覆うようなトランジションを行う。

  • ダイアログは上から下へコンテンツが順番に出現する（ワイプモーションみたいな感じ）。

リスト&ディテール、親子関係、カードのトランジションは見慣れた感じ。ちゃんと対応できていると何が起こっているかユーザーに伝わりやすいし、手触りが気持ちいいですよね。ダイアログがワイプみたいに出現するやつはずいぶん新鮮な印象。

この記事が気に入ったらサポートをしてみませんか？