空の状態には具体的にどんな状況が含まれますか?「新規ユーザーが登録直後で、まだ何もない」というケースだけですか?
空の状態は少なくとも4つの一般的なケースに分けられ、それぞれ原因も適切な対応も異なる。1つ目は「初回利用」で、ユーザーがその機能を使い始めたばかりでまだデータが何もない状態だ。開設したばかりのクラウドストレージアカウントなどが該当する。2つ目は「ユーザーによるクリア」で、ユーザーが能動的にあるアクションを完了させた結果、画面が空になった状態だ。受信トレイのメッセージをすべて処理し終えた場合などが該当する。3つ目は「検索やフィルタで結果がない」場合で、ユーザーが能動的に検索を行ったが、条件に合うデータがなかった状態だ。4つ目は「エラーや接続の問題」で、何らかの技術的な問題により画面が一時的にコンテンツを表示できない状態だ。オフラインになっている場合などが該当する。
この4つの空の状態は視覚的には似て見えるかもしれない(すべて「画面に何も表示されていない」)が、その瞬間のユーザーの心理状態はまったく異なる。初回利用のユーザーは期待に満ちた探索的な気持ちを抱いており、受信トレイをクリアしたユーザーはタスクを完了させた達成感を抱いているかもしれない。検索結果がないユーザーは多少がっかりしたり戸惑ったりしているかもしれず、接続の問題に遭遇したユーザーは不安やいらだちを感じているかもしれない。この4つの状況をすべて同じ汎用的な「データがありません」というメッセージで処理してしまうと、それぞれの心理状態に正しく応える機会を逃してしまう。
なぜ空の状態は真剣にデザインする価値があるのですか?単に「現在データがありません」と一言添えるだけではだめなのですか?
最も直接的な理由は、空の状態が現れるタイミングが極めて重要であることが多いからだ。新規ユーザーがある機能を初めて使うとき、最初に目にする画面はしばしば空の状態そのものだ——つまり空の状態こそが、ユーザーがその機能に対する第一印象を形成する場所である可能性が高い。もしその画面に冷たい「データがありません」というメッセージとグレーのアイコンしかなければ、ユーザーの第一印象は「まだ完成していないように見える」や「ここには見るものが何もない」となり、最初のデータを作ろうと留まるのではなく、離脱を選んでしまう。
もう一つの理由は、空の状態が「ユーザーがまだ操作できるものが何もない」ことと「ユーザーが最初のアクションへと導かれる必要がある」ことの、まさに交差点に位置しているという点だ。空の状態が単に現状を受動的に述べるだけであれば、ユーザーは次に何をすべきか自分で考えなければならない。しかし空の状態が明確な次のステップ(明確なボタン、導きの言葉など)を能動的に提示すれば、ユーザーを「何をすべきか分からない」状態から「次に何をすべきか分かっている」状態へと直接導くことになる。この転換こそが、その後のアクティベーション率が向上するかどうかを左右する重要な瞬間の一つであることが多い。
よく設計された空の状態には、具体的にどんな要素が含まれるべきですか?
よくある構造には4つの要素がある。現在の状況を説明する簡潔な見出し、背景や文脈を補足する説明文、感情や機能の性質を視覚的に伝える関連アイコンやイラスト、そしてユーザーが次に何をすべきかを伝える明確な行動喚起(ボタンやリンク)だ。この4つの要素は毎回すべて使う必要はないが、見出しと行動喚起の2つは、通常省略すべきではない部分だ。
デザイン上、見落とされがちな細部もいくつかある。空の状態のビジュアル表現は、その機能自体の性質に合ったものであるべきで、汎用的なテンプレートをそのまま当てはめるべきではない——カレンダーの空の状態とショッピングカートの空の状態は、視覚的なトーンが本来異なるはずであり、製品全体のすべての空の状態が同じように見えてしまうと、かえって各機能の個性が失われてしまう。イラストの比率にも配慮が必要だ。あまりに目立つイラストは、かえって画面を「より空虚」に見せてしまうことがある。視覚的な焦点がすべてイラストに吸い取られ、本来注目されるべき行動喚起がかえって希薄になってしまうからだ。
AIデザインツールで画面を生成する際、空の状態がよく見落とされたり雑に作られたりします。プロンプトでどう明示的に要求すればよいですか?
最もよくある状況は、AIが機能画面を生成する際、デフォルトで「すでにデータがある」バージョンを生成することだ。それが最も見せやすく、最も完成しているように見えるからだ。空の状態が特に言及されていなければ、しばしばそのまま省略されてしまう。これを避けるには、プロンプトの中でメインの画面と一緒に空の状態バージョンも生成するよう明示的に要求し、この空の状態がどのカテゴリーに属するか(初回利用、ユーザーによるクリア、検索結果なし、エラー状態)を具体的に指定するとよい。それぞれの状況で必要な文案のトーンと行動喚起はまったく異なるため、漠然と「空の状態も入れて」と言うだけでは、通常は汎用的で個性のないバージョンしか得られない。
特に注意すべきは「初回利用」の空の状態だ。なぜならそれは新規ユーザーがその機能に対して抱く第一印象である可能性が高く、先述したアクティベーション率における重要な瞬間の一つでもあるからだ。もし新規ユーザーが最初に触れる画面やコア機能を設計しているなら、この空の状態のバージョンは、他の3つのケースよりも多くの労力をかけて磨き上げる価値がある。なぜならその役割は単に現状を伝えるだけでなく、ユーザーを引き留め、次の操作へと進ませることも含まれているからだ。
Untitled UIのあるデザインガイドは、空の状態は新規ユーザーが機能を初めて開いたときに目にする最初の画面でありながら、チームが最後に手をつける画面であることが多いと指摘している。多くの場合、スプリントサイクルの終わりに何気なく作られ、画面中央にグレーの「データがありません」という文字が置かれるだけになってしまう。この対比自体が注目に値する。ユーザー体験の中で最も早く現れ、最も第一印象を形成しやすい画面が、デザインプロセスの中では最も優先順位が低く、最も労力が投じられない部分になってしまっている。この落差こそが、空の状態がいかに見落とされやすいかを示す具体的な兆候である。
利点は、そのままでは「意味のない空白」として片付けられがちな画面を、プロダクトの教育とユーザーを次のアクションへ導く機会に転換できる点だ。特に初回利用のシナリオでは、アクティベーション率に直接影響を与える。欠点は、4種類の空の状態すべてを適切にデザインするには、追加のデザインとコピーライティングの時間が必要になる点だ。機能数が多い製品の場合、各空の状態を個別にカスタマイズするコストは決して低くない。実務上は通常、ユーザーが最も早く遭遇し、最も影響の大きい少数の空の状態を優先的に投資し、それ以外はまずまずの品質の汎用バージョンでしのぐのが現実的だ。