はじめに

普段iPhoneを使っているAndroidエンジニア(1.5年程度)がAndroidらしさを学びたくマテリアルデザインの基礎の基礎を学んだものです

同じようにAndroidらしさの触り部分を学びたい方はご参照ください

モバイル向けのデザインの基礎にあるアクセシビリティ、システムバー、用語集について記載しています

基礎

アクセシビリティ

世界人口の約6人に1人が障害のうちに重度または一時的な障害を経験する中で、使いやすく高品質なアプリであることでユーザーと開発者両方が恩恵を得られる

視覚アクセシビリティのガイドライン

まず、色のコントラストのダメなデザイン例は以下

アプリのコンテンツが可能な限り読みやすく、コンポーネントも視覚的に理解しやすくするための設計として以下のガイドラインに従う必要がある

様々なデバイスに対応できるよう、フォントサイズにはスケーラブルピクセル(sp)を使う
bodyのフォントを12spより小さくしない
背景とテキストのコントラスト比は4.5:1になるようにする
背景とボタンなどの非テキスト要素の間にはコントラスト比3:1を満たすようにする
リンクなどのアクションには複数のビジュアルアフォーダンスを使う

サウンドのガイドライン

TalkBackというGoogleスクリーンリーダーを用いてユーザーが目を使わずにコントロールできる機能がある
アプリがスクリーンリーダーに対応できるとように以下のガイドラインがある

コード内にUI情報を記述する
- xmlはcontentDescription
- ComposeはSemantics properties
アイコンと画像の追加のテキスト説明を提供する
装飾アイテムの説明には null を設定
アクションとコンテンツのブロック間をスキップできるようにするには、UI の細分性と UI 要素のグループ化を考慮する

オーディオ向けのデザイン

Androidは、ユーザーの様々な音声コマンドやクエリを通じてデバイスを操作できる

Voice Accessを使うと、音声を使用してハンズフリーでアプリを開いたり、ナビゲートしたり、テキストを編集することができる

運動能力に合わせたデザイン

スイッチアクセスを使用すると、ユーザーは別のデバイスを使用してAndroid端末を操作することができる

(操作用のデバイスのイメージ)

タッチスクリーンを操作するのが難しい、手先の器用さが制限されているユーザに対して役に立つ機能

以下のガイドラインがある

全てのアクションを完了するために、ジェスチャ(スワイプなど)に依存しない形にする
- (例：ゴミ箱アイコンで削除可能)
UI要素のビジュアルを超えている場合でも、タッチターゲットが少なくとも48dpある
触覚フィードバックの利用を検討する

Androidシステムバー

ステータスバーとナビゲーションバーを合わせてシステムバーと呼ぶ

UI設計にかかわらずシステムバーが目立ってしまうことを考慮するのが重要
システムバーが確実に考慮されるよう、ほとんどのレイヤーの最上部に配置する

システムバーにおける重要な点

UIセーフゾーン、システムインタラクション、入力方法、...などを考慮してデザインにシステムバーを含める
推奨事項：システムバーを透明にしてアプリを全画面でレイアウトし、バーの下にUIを継続してedge-to-edgeを提供する
両方のバーを透明に設定できない場合は、バーの色をアプリ本体の色と一致させる
edge-to-edgeやジェスチャーナビゲーションと競合する場所にタップジェスチャを追加しない

システムバーの背後にコンテンツを描画するようにする

ユーザに没入型のエクスペリエンスを提供するため、ナビゲーションバーを透明にするなどedge-to-edgeを推奨している

edge-to-edgeの設計の際に次のインセット(画面のどの部分がシステムUIと交差するか)に注意する

システムバーインセットは、タップ可能であり、システムバーによって視覚的に隠れてはいけないUIに適用される
システムジェスチャインセットは、アプリよりも優先され、システムによって使用されるジェスチャナビゲーション領域に適用される

ステータスバー

Androidではステータスバーに通知アイコンとシステムアイコンがある
ユーザーはステータスバーを引き下げることで通知シェードにアクセスする

ステータスバー領域

ステータスバーは、時刻やユーザーが設定したパラメータやテーマによって表示が変わる
そして、スタイルを設定することもできる

ライトテーマとダークテーマ
デフォルト(黒)
スタイル付きバー
edge-to-edgeを使用した透明バー

システムバーをデフォルトの属性に設定したままにせず、コンテンツを強化したりアプリのブランドに合わせることが必要

以下のようにステータスバーのスタイルを設定できる

.xml

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

ディスプレイのカットアウトは、前面にあるセンサー用の領域でステータスバーの外観に影響を与える可能性がある

xml上で設定することができる

ナビゲーションバー

Androidではユーザーが「戻る」、「ホーム」、「Overview」をコントロールして制御できる

「戻る」は前のビューに直接戻る
「ホーム」はアプリからデバイスのホーム画面に遷移する
「Overview」は最近開いたアプリが表示される

ユーザーはジェスチャーナビゲーション(推奨)や3ボタンナビゲーションなど様々な構成を選択できる

ジェスチャーナビゲーション

ジェスチャーナビゲーションでは、「戻る」、「ホーム」、「Overview」のボタンを使用する代わりにスワイプでの操作になる

良いUXを実現するためにジェスチャーナビゲーションでは以下のことを考慮する

edge-to-edgeをサポートする
ジェスチャーナビゲーションの下に押下可能なものを追加しない

参考：ジェスチャーナビゲーションの実装

イマーシブモード

イマーシブモード：全画面表示が必要な場合にシステムバーを非表示にするモード

デザイン例：

ゲームアプリ
ビデオ通話
プレゼンテーション

システムバーの表示切り替え：

非表示　WindowInsetsControllerCompat.hide()
表示　WindowInsetsControllerCompat.show()

このほかにも非表示にする際の振る舞いなどを指定できる

用語集

AndroidとUI関連の用語

用語	説明
CTA(Call To Action)	ユーザーに実施してもらいたい行動の喚起例：資料請求が目的のアプリで、「今すぐ資料請求をする」ボタンを画面上部に設置して資料請求を促す
Canonical layout	一般的なユースケースや画面サイズに適応させるために用いられるデザイン構成例：MateriaDesignのCanonical layout
Chroma(彩度)	グレー〜鮮やかな色のカラフルさの度合い
Containment	視覚的なグループ化の概念例：ダイアログ、カード、リスト
Density-independent pixels (dp)	どの画面でも均一な寸法になるように拡大縮小できる柔軟な単位 160dpi画面を基準にしていて1dpは1ピクセルとほぼ等しい
Display cutout	一部のデバイス上で、前面センサー用のスペースを提供するためにディスプレイ表面に広がる領域わかりやすい：https://qiita.com/YusukeIwaki/items/c9ce1ecc9b6518112241
Hue(色相)	色の説明方法
Navigation bar	画面の下部に表示される Android システムバー
Scalable pixels (sp)	dpと同じ機能を果たすが、フォントに対してのみ機能する
Status bar	画面上部に表示される Android システムバー
Tasks	ユーザーが目標を達成するために従う一連のアクティビティ
Tone	色の輝度、または明るさ

おわりに

マテリアルデザインを学ぶための基礎を学びました

個人的には何も考えなければ突拍子もないデザインになりかねないと思うので、(トレードオフはありますが)ガイドラインに則っていくことで自分なりのこだわりを見つけていきたいです

Androidらしさを学ぶ (Material Design)