空状態（イラスト + メッセージ）

解説

検索結果がゼロ件のときやデータがまだ無いときに表示する、空状態の案内 UI です。中央にやさしいアイコン、見出し、説明文、そして次の行動を促すボタンを縦に並べ、利用者が「壊れているのかな」と不安にならないよう配慮しています。

レイアウトは text-align:center と max-width で中央の細い帯にまとめ、アイコンは opacity を少し落として主張しすぎないようにしています。JavaScript は不要で、すべて CSS で組まれています。アイコンはインライン SVG なので拡大しても輪郭がぼやけず、文字色に合わせて自動で色が付きます。

向く場面と書き方のコツ

• 検索やフィルターで結果が無いとき
• 新規ユーザーでデータが未登録のとき
• お気に入りや履歴が空のとき

説明文は責めずに優しく、ボタンは「条件を変えて検索」「最初の項目を追加」など次の一歩を具体的に示すのが効果的です。アイコンの大きさは .es__ic の font-size、ボタンの配色はアクセントカラーで揃えられます。空っぽの画面でも丁寧な案内があるだけで、離脱を防ぎやすくなります。