幾何形を組み替える空状態

バウハウスの基礎課程では、ヨハネス・イッテンやヨゼフ・アルバースが、限られた材料をどう組み替えるかを学生に課しました。素材を増やさず、配置だけで意味を変える——この訓練の思想は、要素が何もない画面をどう見せるかという問題と、そのまま重なります。

空は失敗ではない

初回ログイン直後、リストは必ず空です。にもかかわらず多くのプロダクトはこの画面を後回しにし、灰色の「データがありません」を置いて済ませます。ユーザーから見れば、それは壊れた画面と区別がつきません。空状態は、サービスとの関係が始まる最初の1画面であり、最初の1件を作らせるための専用ページです。だから見出しは「まだ、何も置かれていません」——欠落ではなく、これから何を並べるかを決められる状態として書きます。

5つの図形だけで成立させる

青い四角、赤い円、黄色い三角、黒い棒、黄色いリング。この5つを3×3の罫線の上に置くだけで画面は成立します。イラストレーターに発注する必要も、空箱や虫眼鏡のありふれたアイコンを使う必要もありません。「構成を組み替える」ボタンを押すと、同じ5つが位置と角度を変えて別の配置になります。図形は1つも増減しない——これはバウハウスの課題そのものであり、待たされている数秒に小さな手触りを与える仕掛けでもあります。主導線はあくまで「最初のプロジェクトを作る」で、遊びは常に副次に置きます。

仕上げの判断軸

原色と太い黒罫は業務ツールの他画面から浮きやすいので、空状態だけに使うのか、プロダクト全体の言語にするのかを先に決めてください。中途半端に一画面だけ様式が変わると、統一感の欠如として読まれます。動きは prefers-reduced-motion で必ず止め、ヒント文には最初の1件を作る具体的な近道——テンプレート、既存データの取り込み——を1行で添えます。

空状態の成功は美しさでは測りません。次の画面へ進んだ人の割合で測ります。