Zenn
🐈

これから Android アプリのデザインを始めるデザイナーさんに知っていてほしいこと

2022/01/14に公開
Android
デザイン
tech

最近は　Android のデザインに対する知見を持っているデザイナーさんや Android アプリ専用のデザインに取り組んでいる企業さんも出てきていますが、iOS に比べるとまだまだ Android のデザインのノウハウをお持ちのデザイナーさんや企業さんは少ないように感じます。

本記事では Android アプリのデザインを行う上でデザイナーさんに知っていてほしいことをご紹介していきたいと思います。

前提

Android のデザインは Material Design で、iOS の Flat Design とは異なります。

テーマ/スタイル

Android の View の見た目や色合いはテーマやスタイルを使うことで一貫性を保つことができるようになっています。Material Themingという考え方があります。

画面サイズ

  1. 画面サイズの単位は dp です。iOS の pt のようにピクセル密度に依存しない単位です。
  2. スマートフォンタイプの Android デバイスの画面の横幅の最小値は 320 dp です。
  3. Android デバイスは機種によって画面の横幅と高さが大きく変化します。アスペクト比のバリエーションが iPhone よりも多いです。デザインを起こすときは色々なアスペクト比に対応できるようにする必要があります。

タップへの応答

  1. タップ可能な View の最小サイズは 48 dp とされています
  2. 画面端にタップ可能な小さなアイコンなどを配置する際はタップ可能なサイズにするだけの余白が十分にあるかどうか注意してください
  3. タップフィードバックにはリップルがよく使われます。タップフィードバックを入れたくない場合は実装者に明示的に伝えるようにしてください。

アプリアイコン

  1. Adaptive Icon になります

テキスト

  1. line height に対応していない場合があります（OSのバージョンやライブラリなど）
  2. 複数行テキストの行間のサイズ指定は paragraph など別の形で指定してください
  3. font weight には対応していない場合があります（OSのバージョンやライブラリなど）
  4. font weight の代わりに normal, bold という大雑把な太さの指定が可能です
  5. フォントは機種によって異なります
  6. フォントは端末の設定によっても異なります
  7. フォントサイズは端末の設定によって異なります（端末の設定に依存させずに固定することもできますが、視力の悪い人にとっては使いにくいアプリになってしまいます）

アイコン

  1. 特殊なものを除いて、最近は SVG で切り出すことが多いです（アプリのサイズを小さくするため）。SVG の場合、OS のバージョンによってはグラデーションや長すぎるパスを扱えない場合があるので注意が必要です。こうしたアイコンをどうしても使いたい場合は PNG や WebP で素材を切り出すように実装者に依頼してください。
  2. アイコンの色は SVG の中で直接指定することができます。tint を使ってアイコンとは別に色を指定することもできます。昔は「PNG のアイコンを増やしてアプリのサイズを増やすよりも tint で色を変えよう」という考え方がありましたが、SVG が使える現在ではあまり積極的に tint を使って実装工数を増やす方向にはしないという判断の方が優位性があると思います。その場合は各色ごとのアイコン素材を切り出せる形で用意する必要があります。

レイアウト

  1. Android でも制約によるレイアウトが可能です
  2. Android でもアスペクト比を指定して View のサイズを決定することが可能です
  3. Android でもネガティブマージンを使ったレイアウトができます（できない場合もあります）
  4. ステータスバーは機種ごとにノッチの有無等によって高さが変わります
  5. ナビゲーションバーは端末の設定によって有無が変わります
  6. View の辺の位置やサイズは 4dp グリッドにそろえることが推奨されています

アニメーション

  1. アニメーションは端末の設定でオフにできます
  2. アニメーションには色々な実現方法がありケースバイケースで最適な対応が変わるので、実装者に都度詳細を確認することをお勧めします
  3. 「移動するだけ」、「回転するだけ」、「フェードイン/アウトするだけ」といった簡単なアニメーションは素材があればエンジニアでも実装可能です

AppBar / Toolbar

  1. Android の AppBar / Toolbar のタイトルは左寄せです

BottomNavigation

  1. 横幅の小さい端末だとテキストが表示しきれなくなることがよくあります。本当にテキストが必要かどうか事前に十分に検討してください。
  2. 標準で用意されているバッジが存在します。カスタムバッジを実装することもできますが、ユーザーが消してしまう小さな表示用の部品のためにどこまでコストをかける必要があるか事前に十分に検討してください。

Dialog

  1. ロードに時間がかかるコンテンツ（代表的なものは WebView ）をダイアログにいれてはいけません。ダイアログがつぶれた状態で表示されてしまいます。
  2. 縦長のダイアログは端末の高さによってはスクロールが必要になってしまうため、避けた方が無難です。

参考

Discussion