UIデザイナーは要チェック！ 新しくなったMaterial Design 3は可変フォントやアイコン、アクセシブルで使いやすいカラーに
Post on:2022年5月17日
sponsors
5/11,12に開催されたGoogle I/O 2022に伴い、Material Design 3のガイドラインが大幅アップデートされたので紹介します。
注目すべきキーワードは、アクセシビリティとパーソナライズ。
アクセシブルなコントラストを備えたダイナミックカラー、可変フォントRoboto FlexとRoboto Serif、可変アイコンフォントを使用したマテリアルシンボル、スイッチをはじめUI要素のデザインも変更されています。
Material Design 3の大きな特徴は、表現力豊かなパーソナライズ機能とアクセシビリティ機能です。ダイナミックカラーのサポートに加えて、いくつかのマテリアルコンポーネントもアップデートされました。新機能は、オンラインやFigmaやGoogle Fontsなどで提供されており、すぐに利用できます。
Material Design 3のダイナミックカラーはユーザーの色設定と好みを反映するカラーシステムの機能です。16進値や色相ではなく、色調に基づいて色を組み合わせることができ、アクセシビリティ基準を満たすように設計されています。このカラーシステムはMaterial Designのコンポーネントだけでなく、カスタムコンポーネントでも機能します。
Material Theme Builder（オンライン版、Figma版）を使用すると、これらのダイナミックな色を簡単に視覚化でき、新しいカラーシステムを利用できます。
アクセシビリティに関するガイドラインも充実しています。Material Design 3では、背景に対して3:1のコントラスト比を推奨しています。これはテキストと背景、テキストとボタンだけでなく、グループ化された要素などにも適用されます。
Material Design 3では可変のアイコンフォントが採用され、ウェイト・塗りつぶし・サイズ・グレードをプロジェクトに合わせて微調整できます。2,500種類以上のアイコンが1つのフォントファイルに統合されており、シンボルは3つのスタイル（アウトライン・角丸・シャープ）と4つの可変フォントスタイルで提供されています。
ウェイト・塗りつぶし・サイズ・グレードの可変がどうなるかは、下記のGoogle Fontsでお試しください。
シェイプはコンテナの角のスタイルを定義するもので、四角から完全な円形までさまざまな丸みを提供します。サイズに応じて、7つのスタイルで構成されています。スタイルは丸みや角の削り具合によって部品に割り振られており、角丸の場合、四角いものは「none」、少し丸いものは「extra-small」、全体的に丸いものは「full」です。Material Design 3のシェイプシステムはよりタイプスケールに近いもので、UI全体で表現力豊かなシェイプを可能にします。
Material Design 3ではタイポグラフィのスタイルは単純化されました。表示・見出し・タイトル・本文・ラベルの5つのスタイルそれぞれに3つの分類（Small, Medium, Large）があり、より規則的で少ない数のバリエーションが存在します。
また、Roboto FlexとRoboto Serifの可変フォントが採用され、サイズ・幅・グレードをプロジェクトに合わせて微調整できます。
Material Design 3では新しいカラーマッピングとダイナミックカラーとの互換性により、ボタンのアイコンとラベルが同じ色を共有できるようになりました。3つの新しいボタン（高架ボタン・塗りつぶしボタン・塗りつぶしトーンボタン）も加わり、アクションの重要性に基づいてボタンのタイプを選択できます。ボタンの高さは40dpで、角は完全に丸みを帯びています。
カードも新しいカラーマッピングとダイナミックカラーとの互換性があり、デフォルトでは標高が低く、シャドウはありません。単一のユニットとして識別でき、画像・見出し・テキスト・ボタン・リスト・その他のコンポーネントまであらゆるものを収納できます。3つのタイプ（elevated, filled, outlined）が用意されており、カスタマイズもできます。
スイッチは、アイテムの状態をオンまたはオフに切り替えます。よりアクセシブルなビジュアル表現になり、スイッチの状態は一目でわかるようになりました。選択された項目は選択されていない項目よりも視覚的に目立つようになり、利用可能な選択肢を容易に比較できるようになりました。形状ははより高く、より広くなり、操作も非常に容易です。
ダイアログは、コンテンツが確実にアドレス指定されるようにユーザーの注意を集中させます。新しいカラーマッピングとダイナミックカラーとの互換性があり、レイアウトは角丸とタイトルサイズの増加に対応するためパディングが拡大されています。またダイアログに使用する見出しは、より大きくてダークになりました。
Material Design 3のナビゲーションバーではシャドウがなくなり、代わりにカラーフィルがコンテンツからの分離を作成します。コンテナの高さは高くなりました。アクティブな状態は塗りつぶされたアイコンとピル型のアクティブなインジケーターで表され、非アクティブな状態は輪郭が描かれたアイコンで表されます。ナビゲーションバーは下部に配置すると、スマホで簡単にアクセスできます。
ナビゲーションドロワーは、アプリ内の目的地への人間工学的アクセスを提供します。Material Design 3ではドロワーの端の角丸になり、選択状態を示す色と形状が変更されました。ナビゲーションドロワーは、さまざまなアプリのレイアウトに対応するため、デフォルトで開閉できます。
テキストフィールドは通常、フォームとダイアログに使用されます。Material Design 3の新しいカラーマッピングとダイナミックカラーとの互換性により、テキストフィールドは目立ち、ユーザーが情報を入力できることを示す必要があります。
上部のアプリバーは、スクリーンの上部に情報とアクションが表示されます。Material Design 3ではシャドウがなくなり、代わりにカラーフィルがコンテンツからの分離を作成します。デフォルトテキストはより大きくなり、デフォルトの高さも高くなりました。幅は、ビューまたはデバイスの幅と同じです。上部のアプリバーには、center-aligned, small, medium, largeの4つのタイプがあります。
sponsors
