今更？いや今から！Googleマテリアルデザインを読み解く#3
おはようございます！
今日も読み解きやっていきます🙌
最近寒暖差と乾燥が凄いですね…暖かくしてお過ごしください！
こんな人におすすめ
Googleのマテリアルデザインを読み直したい
マテリアルデザインの他の見解をしりたい
デザイナーの卵を応援したい(頑張ります！)
目次はこちら
カスタマイズとは
マテリアルデザインでは、おなじみのパターンと使いやすい操作に、独自のブランド要素を加えることができるので、その事。
カスタマイズ方法
ダイナミックカラーで個性を演出
ブランドカラーと個人の好みに合わせたカラー設定を融合し、唯一無二のデザイン体験を実現できます。
アプリのデザインに合わせたカラーパレットだけでなく、個人の設定も尊重できるようになっています。
ブランドカラーシステム
ダイナミックカラーとM3カラースキームによって、アプリのカラーはユーザー設定に合わせて自動的に調整・統合されます。M3は、カスタムパラメータの体系的な適用に対応しており、ブランドを伝えるスタイルの定義と維持を支援します。
カラーシステムは、アクセシビリティのための色のコントラスト、読みやすさ、インタラクション状態、コンポーネント構造などの重要な調整を自動的に処理する。
ダイナミックカラーは、カスタム（非マテリアル）コンポーネントでも機能する。
カラーシステムの作り方
マテリアルデザインから始めて、プロジェクトのために新しい完全なカラーシステムを作成することもできます。
ダイナミックカラーチュートリアル
ダイナミックカラーコードラボは、デザインとブランドカラーがダイナミックカラーとどのように相互作用するかを視覚化するための実践的なガイドです。これは、Figma用のMaterial Theme Builderプラグインを使ってデザインに色を適用する次のステップに進むための助けになります。
Material Theme Builder
コードエクスポート機能を内蔵したMaterial Theme Builder Figmaプラグインは、デザインの視覚化、M3カラーシステムへの移行、ダイナミックカラーの活用を簡単に行うことができます。
Material Theme Builder Figmaプラグインは、カスタムカラースキームを作成し、複数のコード形式にエクスポートするのに役立ちます。
カスタムカラースキーム
Material Theme Builderは、確立されたブランドパラメータを使用している場合でも、アプリのカラーをまだ定義していない場合でも、カスタムカラー体験を作成するのに役立ちます。
Material Theme Builderでは、1色以上の色を特定して入力して、カラースキームを定義することができます。2番目または3番目の色を追加するのはオプションですが、生成されるカラースキームに影響を与えます。
デザイントークンのまとめ
デザイントークンとは
UI要素を構成する基本的な要素
色、フォント、サイズなどのスタイル値を名前で参照する
デザイン、ツール、コードで共通に使用される
名前と値のペアで構成される（例：md.ref.palette.secondary90 → #E8DEF8）
重要性
デザインシステムの一貫性を保つための単一の情報源となる
スタイルの変更をシステム全体に簡単に反映できる
プラットフォームに依存しない
マテリアルデザインとトークン
従来はガイドラインやデザインファイルなどでスタイルを伝えていた
トークンを使うことで、スタイルをダウンロード、カスタマイズ、適用できる
デザイン決定をプラットフォームに依存しない形で共有できる
トークンの種類
リファレンストークン：基本的なスタイル値を定義（例：md.ref.palette.secondary）
システムトークン：プラットフォーム固有の値を定義（例：md.sys.elevation.level4）
コンポーネントトークン：個々のコンポーネントのスタイルを定義（開発中）
トークンが役立つ場面
製品のデザインを更新、新規作成する場合
複数の製品やプラットフォームでデザインシステムを使用する場合
将来的にスタイルを簡単に維持、更新したい場合
ダイナミックカラーなどのマテリアルデザインの機能を活用したい場合
トークンがあまり役に立たない場面
既存のアプリがハードコードされた値を使用しており、今後1～2年は変更しない場合
製品がデザインシステムを持っていない場合
ジェスチャー
ジェスチャーは、ユーザーがコンテンツを移動したり、アクションを実行したり、変換したりするのに役立つものです。
UI 要素はジェスチャーに対して即座に反応する必要があります。
ジェスチャーの種類
タップ
スクロール
スワイプ
タップ
ユーザーは目的地に移動し、タッチを通じて要素を操作できる。
ダブルタップ
2 回の素早いタップで、ユーザーはコンテンツをズームインまたはズームアウトできる
長押し
要素を長押しすることで追加機能にアクセスできる
スクロール
表面を水平、垂直または任意の方向にスライドすることでコンテンツ内を移動できる
スワイプ
ユーザーは、タブなどのピア ビュー間を水平方向に移動して、アクションを完了できる
操作方法の種類
ジェスチャーの他にも操作の方法がいくつかあります
引っ張る
長押しで拾って移動
ピンチ(拡大縮小) など
インプット
入力は、アプリの対話型制御を提供するデバイスです。一般的な入力には、マウス、キーボード、またはタッチパッドが含まれます。
デバイスの外部入力
携帯電話、タブレット、折りたたみ式、テレビ、ラップトップ、デスクトップ コンピューターでマウスやキーボードなどの外部入力を使用できます。外部入力を自分のデバイスに接続するとき、ユーザーはそれが使い慣れた便利な方法で動作することを期待します。さまざまな入力方法に合わせて設計すると、アプリをすべての画面サイズでより使いやすく、アクセスしやすくすることができます。
外部入力の共通機能
マウス
左右クリック
マウスホイール
追加のボタン
トラックパッド
左右クリック
ジェスチャー
ハプティクス
物理キーボード
仮想キーボードを置き換えます
メディアキー
修飾キー
入力デバイスの動作
マウスとトラックパッドの動き
▶画面上にマウスカーソルを表示する
プライマリクリック
▶マウスのクリックをタッチ イベントとは異なる方法で扱う
二次クリック
▶コンテキストメニューをアクティブにする
ホバー
▶コンポーネントの状態を変更する
ハイライト
▶マウスカーソルでテキストを選択できるようにする
マウスホイールとトラックパッドの2本指ドラッグ
▶リストを縦横にスクロール
トラックパッドのピンチ
▶要素またはページをズームする
物理キーボード
▶スクリーンキーボードの表示と非表示を切り替える
マウスホイールとトラックパッドのジェスチャ
外部マウスまたはタッチパッドを使用する場合、マウス ホイールとトラックパッドのジェスチャにより、より多くのアクションが可能になり、これらの操作に対する既存の期待に準拠する必要があります。
縦スクロール
▶カーソルがリスト上に配置されている場合、マウス ホイールと 2 本指のタッチパッド ジェスチャによってリストを垂直スクロールできるようにする必要があります。
タッチスクロールとマウステキスト選択
▶タッチ アンド ドラッグ ジェスチャを行うと、テキスト領域がスクロールします。マウス操作を使用してテキスト領域内をドラッグすると、テキストが選択されます
横スクロール
▶マウス ユーザーは、マウス ホイールを使用してスクロールして、水平スクロール フィールドを移動できる必要があります。トラックパッド ユーザーは、2 本指の水平ジェスチャを使用してスクロールできる必要があります。
物理キーボード
▶物理キーボードが外部または内蔵ラップトップ キーボードとしてデバイスに接続されている場合、ユーザーは仮想キーボードが提供するあらゆるアクションなどを実行できる必要があります。
仮想キーボードの表示と非表示を切り替える
▶仮想キーボードは、物理キーボードの存在に応じて表示または非表示にする必要が
一般的なキーボード操作
▶通常、人々は物理キーボードの Enterキーを開発者が有効にして、メッセージの送信などの一般的な機能を可能にすることを期待しています。
スペースバーコントロール
▶通常、人々はスペースバー(または利用可能なメディア キー) を使用して音楽やビデオを再生および一時停止できることを期待しています。
選択
選択により、ユーザーはアクションを実行する特定のアイテムを選択できます
選択は表面の色の変化によって示されます
コンポーネント全体を選択することも、コンポーネント内の特定の部分だけを選択することもできます
タップ、カーソル、キーボード、音声で選択が可能です
リソース
タイプリンク状態デザインデザインキット(figma)利用可能です！私もダウンロードしました✨
選択インジケーター
選択内容は、チェック マーク アイコン、チェックボックス コンポーネント、表面色の変更、またはそれらの組み合わせを使用して表示されます。
選択内容は次のコンポーネントに継承されます。
カード
チェックボックス
チップス
データテーブル
リスト項目
メニュー項目
ピッカー
ラジオボタン
スライダー
スイッチ
選択手法について
タッチ
タッチ デバイスでは、次を使用して項目を選択します。
長押しタッチまたは2本指タッチ
選択ショートカット (利用可能な場合) (アバターのタップなど)
選択モードの開始と終了
選択モードに入るには、アイテムを長押しするか、アイテムのアバターをタップするなどのショートカットを使用します。追加の項目を選択するには、それぞれをタップします。
選択モードを終了するには、選択した各項目を選択が解除されるまでタップするか、ツールバーのアクションをタップします。
より幅広い選択肢
複数の項目を同時に選択するには、長押しして項目間をドラッグします。カードなどのアイテムを拾ったり移動したりするためにこのジェスチャの組み合わせがすでに使用されている場合は、このジェスチャの組み合わせを使用しない。
クリック
デスクトップでは、選択が主なアクティビティである場合、チェックボックスが常に表示されます。選択が二次的な場合、チェックボックス (または他のインジケータ) が表示されます。
カーソルを置いた項目の単一のチェックボックスとして
1 つの項目を選択した後のすべての項目
選択するには、項目の上にカーソルを置くとチェックボックスが表示されます。チェックボックスをクリックできるようになります。
今回でマテリアルデザインの要約まとめは基本のところが終わったので終了です！今度からは本の感想要約やデザイナーの最近のお仕事について呟いて行ければな……とおもいます！
ここまで応援してくださった皆様ありがとうございました！引き続き頑張りますのでよろしくお願いします🙏✨