[日本語]マテリアルデザイン 『Empty states』#41
はじめに
今回は『マテリアルデザインガイドライン』の『Empty states』について解説していきます。なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいと思った箇所を分かりやすい言葉に置き換えるなど、一部に個人的な解釈も含まれます。
正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design
URL：https://material.io/
※動画・画像データ等はこちらから引用させていただいております。
※各項目のリンクは、タイトル右のアイコンをタップしてご覧ください🔗
(エンプティステートとは)🔗
エンプティステートとは、UI上に表示するコンテンツが無い状態の時に表示するUIコンテンツの総称です。
エンプティステート(空の状態)では、さまざまなコンテンツを表示できますが、ユーザーが混乱しないように分かりやすくデザインする必要があります。
Content(エンプティーステートに表示する内容)
基本的なエンプティステートの内容は、画像とキャッチフレーズ(テキスト)の2つのUI要素で構成されています。
画像は以下のようなものを使用します。
Has a neutral or humorous tone(美しさや面白さを表現したもの)
Is consistent with your brand(UI全体のブランドと一貫性がある)
また、以下のようなキャッチフレーズを含めます。
Has a helpful message（役立つ内容)
Is consistent with your brand(ブランドと調和していること)
Conveys the purpose of the screen, without appearing actionable(操作できるという内容ではなく、画面の目的を説明するもの。)
(右)エンプティステートでは、タップしても反応しないため、操作ができるようなフレーズは使用しないでください。緊急性を伝えるような画像もユーザーを混乱させる可能性があるため使用しないでください。
Alternatives(エンプティステートの代替案)🔗
Starter content(スターターコンテンツ)
アプリやUIを初めて使用するユーザーをサポートするために、エンプティステートとは異なる方法として「スターターコンテンツ(Starter content)」があります。
スターター コンテンツを使用することで、ユーザーはアプリをすぐに使い始めることができ、アプリの機能について簡単に学ぶことができます。
また、スターターコンテンツは、以下の内容に基づいて使用することが推奨されています。
コンテンツ (書籍や音楽など) を保存したり、テンプレート化されたコンテンツ (メモやドキュメントなど) を作成するアプリで使用する。
メイン機能を示すコンテンツに対して使用する。
ユーザーがスターター コンテンツを削除および置換できるようにします。
可能であれば、それぞれのユーザーに合わせたコンテンツを提供する。
Educational content(教育コンテンツ)
画面の目的がユーザーに伝わりにくいと判断した場合は、「教育コンテンツ(Educational content)」の使用も検討してください。
「教育コンテンツ」とは、そのUIにコンテンツがあるとどんなことができるのかをユーザーに伝える方法です。
教育コンテンツは、以下の内容に基づいて使用することが推奨されています。
教育コンテンツは、消去またはスキップできるようにします。
教育コンテンツの表現はシンプルにする
教育コンテンツは、そのアプリのコンテキスト(何をする画面なのか)に合わせた内容にする
Best Match(ベストマッチ)
ユーザーの検索キーワードに完全に一致するコンテンツが無い場合、キーワードが少し異なる検索結果を表示することによって、検索キーワードに最も一致するコンテンツを「ベストマッチ」として表示することができます。
この「ベストマッチ」を表示することによって、ユーザーは探しているものを見つけやすくなります。
