空状態プレースホルダ

解説

空状態プレースホルダは、リストや検索結果に表示するものが何もないときに見せる案内ブロックです。大きめの SVG アイコンを中央に置き、その下に見出し・補足文・次の行動を促すボタンを縦に並べた、シンプルで分かりやすい構成です。レイアウトは text-align:center と余白の調整だけで成り立ち、JavaScript は使っていません。何もない画面を「壊れているのかな」と思わせず、自然に次の操作へ誘導できます。

表示すると効果的な場面

• 検索やフィルターの結果が 0 件だったとき
• まだデータを登録していない初回の一覧画面
• 受信箱や通知が空のときの落ち着いた案内

アイコンの大きさは .es__i の font-size で、見出しや本文のサイズと色はそれぞれの要素の指定で調整できます。文面は状況に合わせて「まだ何もありません」より「最初の項目を追加してみましょう」のように、前向きで具体的な言葉にすると効果的です。ボタンの行き先は実際の追加や検索に結びつけ、空っぽの画面を行き止まりにしないことが大切です。色のコントラストを十分に取り、補足文が薄くなりすぎないよう注意しましょう。

使用例・適したシーン

• サービス紹介セクション
• メンバー紹介・スタッフ一覧
• 料金プラン比較
• 実績・事例カード