Android

マテリアルデザインのガイドラインのメモ

はじめに

Android開発をやっていると「マテリアルデザイン」という言葉を聞くと思います。
簡単に言えば、Googleが考える最強UI構築法という感じで、
もっと具体的に言えば、AndroidアプリのUI標準となっています。

そのため、ある程度しっかりしたAndroidアプリを作ろうとすると、
マテリアルデザインは避けては通れない道です。

そこで、一度マテリアルデザインについてある程度しっかりやろうと思い、
今日時間を取って、以下ガイドラインを読むことにしました。
せっかくなので、読みながらこのメモを書くことにします。

https://material.io/jp/guidelines/

ガイドラインが9個に分かれているので、同じ分け方で書いていきます。

マテリアルデザイン

  • 時代変わっても優れたデザイン+最新技術=マテリアルデザイン
  • 統一性:プラットフォーム、画面サイズに関係なく統一感を出す
  • マテリアルとは、現実世界をもとにしたオブジェクト。物理的法則を守る。紙とインク
  • 動き(アニメーション)は、ユーザーが主役であることを強調するために、ユーザー操作をきっかけとするのが基本
  • マテリアルは3D環境上(x、y、z軸がある)に展開される
  • z軸は常に1dpの厚さ
  • z軸(高さ)のどの位置にいるかを示すために、光と影で表現する。高いマテリアルは影が大きいなど
  • ボタンの下に別のビューがあっても、タップイベント等はボタンの下まで貫通することはない
  • マテリアルは同じ高さで重なり合うことはできない。別の高さならOK
  • マテリアル同士で通り抜けはNG。普通の物理法則と同じ
  • マテリアルは変形できる。丸から四角、拡大縮小など
  • 折り曲げ、たたむのはNG
  • 合体、分離はOK
  • 動きとして、生成、消滅、軸に沿った移動はOK
  • ユーザー操作はZ軸に沿った動きが基本。ボタンが凹むような動きなど
  • マテリアルオブジェクトには、基準となる高度(=静止高度)がそれぞれある。ボタンはNdpという感じ
  • マテリアルが重なり合う時は、それぞれの高低差がわかるように影をつける
  • オブジェクトには親子関係があり、親が動けば子も同じように連動して動く。テーブルを動かせばテーブルの上にあるコップも動くのと同じ

モーション

  • モーションは、ビュー間ガイド、完了アクション、操作時のヒント、読み込み中などの処理から注目をそらす、楽しみ、などの効果がある
  • ユーザー入力に対してすぐに反応する(300~400ms、小アニメは150~200ms)
  • 反応が遅いと遅く感じ、早すぎるとわかりにくくなる
  • 直線的な動きではなく、開始と停止はやや遅くなるカーブ(イージングカーブ、加速カーブ)に沿って動く
  • マテリアルは周りのマテリアルを意識できるので、動く時は他マテリアルを押し出したり、結合できる
  • これをタップしたからこれが開いた、とわかるように遷移させる
  • スワイプできない時とできる時がある場合、動きで差を付ける
  • アニメーションで注目を引きつける
  • モーションは、素早く、わかりやすく、統一性を持つ
  • モーション時間は、移動距離が長いほど長くなり、画面サイズが大きいほど長くなるのが一般的
  • 上から下、下から上の時は重力を意識する
  • 画面外から画面に入る時は減速カーブ、逆は加速カーブ、一時的に出る戻るような場合は急カーブが良い(素早く出入りさせるため)
  • ただし、画面内のオブジェクトを押し出すような場合は標準カーブにする(急に動きすぎるため)
  • 矩形の変形は、幅や高さを標準カーブに沿って変化させる
  • 円の場合は、放射側に変形させる
  • 複数の要素が遷移する場合は、メイン要素のみを動かすようにする
  • マテリアル作成時は、作成元の要素を意識した動きにする
  • タップ時は、放射状の動きを使うとわかりやすい
  • 1つのアイコンで2つの機能を持つ時(再生、一時停止など)、アイコンの変化をアニメーションさせる
  • リストがゼロ件になった時、何かの達成時などにアニメーションを付ける
  • 画像やイラストのちょっとした動きで、ユーザー体験に楽しさを与えられる

スタイル

  • カラーパレットは、500番をメインカラー(プライマリカラー)にし、700番を濃いプライマリカラー、それ以外をアクセントカラーにするのがおすすめ
  • テキストは黒か白を使い、透明度で調整する
  • 黒のメインテキストの透明度は87%、サブテキストは54%、ヒントや無効テキストは38%
  • 白のメインテキストの透明度は100%、サブテキストは70%、ヒントや無効テキストは30%
  • 製品アイコンは、48dpを1単位として作成するのが推奨される
  • 製品アイコンは、フィニッシュ(照明?)、マテリアル背面、マテリアル前面、カラー、シャドウから成る
  • 製品アイコン上で重なり合うマテリアルは2つまで
  • システムアイコン(UIアイコン)は、シンプル、モダン、親しみやすく、直感的
  • システムアイコンは、立体感を出してはいけない、正面から
  • 画像は、関連性、情報、楽しさを意識する
  • 実在物を表現する場合は、具体的な写真をまず検討すること
  • 画像は、何を重点(強調)としているかがわかるものにする
  • プラットフォームが変わっても適切に表示できるように解像度に注意する
  • フォントは、英字はRoboto、日本語はNotoが良い
  • 行間はフォントのスタイルごとによって適切なサイズが変わる
  • 単語が読みやすいように改行を入れる
  • 1行あたり60文字前後が読みやすい
  • 文章は、ユーザーに対して語りかけるようにする。ユーザーのことを「私」等の一人称で表現することは不可
  • ユーザーが主役のような文章にする。例えば、送らせていただきますはOK、届きますはNG
  • 文はなるべく短く簡潔に。例えば、保存しますか?はOK、保存してもよろしいですか?はNG
  • できるだけ現在形を使用する
  • 一番簡単な言葉を選択する
  • 手順ではなく目的を先に言う
  • ボタンテキスト:戻る、キャンセル、閉じる、完了、了解、詳細、次へ、いいえ、後で、OK、スキップ
  • 肯定的な表現にし、否定的にしない。例えば、~まで使用できます。はOK、~でないと使用できまあせん。はNG
  • 不要な句読点や記号は使わない
  • 1行のみの場合などに句点を使わない

レイアウト

  • 基本原理は印刷のデザイン。画面=紙
  • 辺全体を共有している高さの同じ2つのViewは同時に動く
  • 1インチあたりのピクセル数=ピクセル解像度の高い画面は、小さく表示される
  • dpは密度非依存ピクセルで、ピクセル解像度の違う画面でも均一に表示できる
  • spはスケーラブルピクセルで、基本はdpと同じだが、ユーザーのフォント設定に依存する
  • ベースラインは8dp単位が基本
  • リスト、詳細ビュー、ナビゲーションドロワー、は、ベストな余白が決まっているので参考にする
  • UI要素は、代表的なアスペクト比で配置すると良い
  • タップターゲットのサイズは、48dp × 48dp 以上
  • ツールバーに載せる文字やアイコンの色は統一すること
  • ブレークポイント:最適なUXのサイズにすると良い
  • マテリアルデザインは、12列グリッドレイアウトが基本

コンポーネント

  • 以下UIについて、サイズ・色などのこうするべき情報が載っているので辞書的に使う
  • 下部のナビゲーションバー(タブ)
  • モーダル底部シート(画面下から出てくる情報)
  • ボタン(フローティングボタン、浮き出しボタン、フラットボタン、プルダウン)
  • カード
  • チップ
  • データテーブル
  • ダイアログ
  • リスト、グリッドリスト
  • メニュー
  • 日付選択ツール、時間選択ツール
  • 進捗インジケーター
  • チェックボックス、ラジオボタン、スイッチ
  • スライダー
  • スナックバー、トースト
  • タブ
  • ラベル
  • ツールバー

パターン

  • こちらも以下項目に対して辞書的に使う
  • 日付や時刻の表記方法
  • 空の状態の時の表示方法
  • ユーザー入力時のエラー表現
  • アプリのエラー(権限、接続、ネット)
  • 指紋認証登録
  • ドラッグ、スワイプ
  • 起動画面
  • 画像の読み込み
  • ナビゲーション
  • 画面遷移
  • スクロール
  • アプリ内検索
  • 設定

学習と情報提供

  • ユーザーにアプリを高く評価してもらえるように、アプリの機能などをタイミングよく紹介する
  • 最初の7日間はガイドするなど
  • オンボーディング:ユーザーの利用状況に合わせてガイドなどを表示する。自己選択、クイックスタート、主要な利点の3パターンある
  • ガイドは、ターゲティング、トリガー、回数、頻度、に注意する

ユーザビリティ

  • ユーザー補助:すべての人が問題なく操作したり、理解できるアプリ
  • 障害を持った人でも使用できるようにする場合は、以下に気をつける
  • 音・色を使わない、高コントラストモード有効、画面拡大、スクリーンリーダーを使う、音声操作
  • タップターゲットを48 x 48 ピクセル以上にし、要素間を8dp以上にする
  • ガイドやヘルプを提供する
  • 大きいフォントサイズでも快適に使えるようにする

リソース

  • マテリアルデザイン推奨のカラーパレットがあるのでそれを使う