マテリアル デザインでアプリの魅力を高める

  • 開発
  • デザイン

マテリアル デザインの原則を採り入れることで、楽しさとわかりやすさを両立した魅力的なアプリを作成できます。

解説

マテリアル デザインには、デザインに関するおすすめの方法、一般的な慣例、視覚効果など、あらゆるデバイスに適した魅力的なアプリを開発するのに有効な情報が詰まっています。一度このデザインに慣れ親しんだユーザーは、他のアプリでも同様のデザインを期待するようになります。このデザインをアプリに採用すると、ユーザーにすぐに魅力を感じてもらうことができると同時に、使いやすさも向上し、ユーザーのエンゲージメントと定着を改善できます。

デザインの原則

  • メタファーとして使用される UI 要素であるサーフェスとシャドウを個別のレイヤとして扱い、重ねたり並べたりします。 シャドウは、どのサーフェスがどのサーフェスの上に重なっているかを表現するために使用します。シャドウを使用することで階層構造を表現し、必要な部分に注意を引くことができます。
  • 画像は画面全体に表示します。つまり、写真と写真との間のスペースや、写真と画面端との間の余白は最小限にし、コンテンツの詰まった没入感を高める UI にします。
  • 色使いは大胆にして、重要な UI 要素(たとえばブランドを表す UI 要素)を強調します。メインカラーとアクセント カラーを選んで、アプリ全体のユーザー エクスペリエンスに統一感を持たせるようにします。コンテンツから色を直接抽出できる Palette API を利用すれば、さらに没入感を高めることができます。
  • 配置とキーラインを使用すると、コンテンツの位置やサイズを 8 dp のベースライン グリッドに合わせることができるため、読みやすさや視覚的な一貫性を高めることできます。テキストをさらに細かく配置したい場合は 4 dp のグリッドも使用できます。本文テキスト、サムネイル、アプリバーのタイトルなどの要素は、可能な限り、基準となるキーラインに沿って配置します。
  • 意味のある動きアニメーションや遷移など)を使用すると、ユーザーを誘導したりユーザーの注意を引いたりできるほか、次の画面にスムーズに移動できます。意味のある動きによって視覚的にストーリーを伝えることで、魅力的なユーザー エクスペリエンスを提供し、視覚的な連続性を演出できます。
  • 反応性の高い操作(基本的なタッチ フィードバックなど)は、サーフェスの波紋で表現します。ただし、5.0 より前のデバイスでは波紋は機能として想定されていないため、デフォルトの android:selectableItemBackground 動作を採用してください。サーフェスの波紋以外のタッチ フィードバックとしては、インタラクティブなサーフェスをタップで浮き上がらせて入力中の指に合わせる方法もあります。UI 要素の変化はタップした点から放射状に広がるようにします。

システム ユーザー インターフェース要素

  • システム ステータスバーの色は、Android 5.0 以上ではアプリのメインカラーや現在の画面のコンテンツを目立たせる色にします。画像を画面全体に表示する場合は、ステータスバーを透明にします。API レベル 23 以上の場合、システム ステータスバーを淡色(代替)に設定できます(アイコンの色が暗くなります)。
  • アプリバーとツールバーは、情報提供のほか、色、タイポグラフィ、製品ロゴを使用したブランド表示に使用できます(ランチャー アイコンは使用しないでください)。画面に色鮮やかな画像を表示する場合は、アプリバーを透明にして、臨場感あふれる UI エクスペリエンスを損なわないようにします。画像は画面の端から端まで表示されるため、アプリバーやステータスバーの背後に表示されることもあります。透明なアプリバーの場合、必ず、スクリムを使用してアイコンのテキストを保護してください。また、視覚的なユーザー エクスペリエンスを改善できるスクロール方法を採用することも検討します。
  • タブは、マテリアル デザインに規定された操作性とスタイルを守る必要があります。横方向にスワイプできるようにし、タブ間を縦方向に区切ることはしません。 タブの選択状態を示すため、1 つまたは両方のフォアグラウンドの色を変えたり、タブのテキスト(またはアイコン)の下にアクセント カラーの細長い線を表示したりします。タブとアプリバーのサーフェスの高度は同じにします。ただし、階層の違いを明確に描画する必要がある場合は例外です。
  • ナビゲーション ドロワーには、メインのナビゲーション要素だけを組み込み、新しい視覚ガイドラインに沿ってデザインします。ナビゲーション ドロワーは、アプリバーと画面上のコンテンツより上、システム ステータスバーより下の階層に表示します。ナビゲーション バーが存在することをユーザーに伝えるため、アプリの初回起動時にドロワーを開いた状態で表示することをおすすめします。
  • 直接アクセスする必要がある最上位の移動先がアプリに 3~5 個ある場合は、下部ナビゲーションを使用することを検討してください。シフトする下部ナビゲーション パターンは視覚的なインパクトが強く、長めのテキスト文字列をラベルに表示できるのでおすすめです。下部のナビゲーション バーは、階層の深い詳細画面を除き、ほとんどの画面からアクセスできるようにします。また、ユーザーがスクロールすると隠れるようにします。

ユーザー インターフェース要素とパターン

  • テーマには最新のマテリアル テーマを使用し、時代遅れのアプリという印象を与えないよう注意します。システムテーマを更新することで、手軽に視覚的な印象を変えることができます。Gingerbread とホロテーマは必ず更新して、視覚的なデザインとユーザー エクスペリエンスに統一感を持たせるようにしてください。セレクタ選択ツールダイアログメニューテキスト欄などの UI 要素のテーマを、マテリアル デザイン標準に更新してください。
  • ボタンは、アプリ内で最も多く使用するインタラクティブ要素です。そのため、ボタンを最新の視覚デザインに更新するだけでも、アプリの印象を大きく変えることができます。カスタムボタンを使用する際は、角を丸めすぎないようにし、極端なグラデーションや光沢のあるサーフェスは避けるようにしてください。このようなボタンデザインを採用すると、時代遅れの印象のアプリになります。浮き出しボタンは、視覚的に強調したい重要な操作に使用します。また、画面上にテキストが多く、フラットなデザインではボタンがわかりにくくなる場合にも効果的です。強調する必要のない単純な操作には、フラットボタンを使用するのが一般的です。画面内で最も重要な操作には、フローティング操作ボタン(FAB)を使用します。他のどの UI 要素よりも上に表示され、視覚的に目立たせることができます。
  • タイルリストは、ユーザーが直接比較するような項目に使用します。リストビューは、テキストの多いコンテンツを読み流す際に便利です。タイルは、視覚要素がメインのコンテンツに使用します。レイアウトに柔軟性をもたせたリストやタイルを作成する際は、RecyclerView ウィジェットを使用します。
  • カードは、コンテンツの種類が混在する場合や、ユーザーがコンテンツを探すときに画像やテキスト文字列を直接比較しない場合に使用します。また、サーフェスに複数の操作を配置する場合にも使用します。カードを使用すると項目が大きく表示されて目立ちますが、使いすぎると目障りな印象になりますので注意してください。カード コンテンツを作成する際は、CardView ウィジェットを使用します。
  • アプリ内の検索は、アプリバーのインライン検索を使用して実装します。アプリのメイン機能がコンテンツの検索である場合は、検索ウィジェット アプリバーの常設を検討してください。
  • デバイダーは、コンテンツを大きく分割する場合や、テキスト領域を明確に区別する必要がある場合に限り使用します。単純なリストの各項目をデバイダーで区切るのは避けてください。読みやすさはさほど改善されないのに、視覚的にうるさい印象になります。コンテンツの区切りは、空白文字やタイポグラフィで対応することをおすすめします。
  • 空の状態をデザインする場合は、空の状態にしている理由をユーザーに説明し、空の状態に対処する行動を促すフレーズを配置します。

Android 7.0 の新機能

  • 通知が変更されて、コンテンツ領域、通知の操作、ユーザー コントロール、短いテキストの入力などの新機能が追加されました。