エンプティステート（データなし表示）
エンプティステートは、検索結果がゼロ件のときや初回利用でまだデータがないときに表示する空状態の画面です。このサンプルは JavaScript を使わず、中央に点線のインライン SVG イラスト、見出し、説明文、行動を促すボタンを縦に並べます。
解説
エンプティステートは、検索結果がゼロ件のときや初回利用でまだデータがないときに表示する空状態の画面です。このサンプルは JavaScript を使わず、中央に点線のインライン SVG イラスト、見出し、説明文、行動を促すボタンを縦に並べます。イラストは外部画像に頼らない軽量な SVG なので読み込みが速く、配色や線の調整も CSS で簡単に行えます。
使いどころ
- 検索やフィルタの結果が0件だったとき
- 初めてログインしたユーザーの空のリスト画面
- 削除後にアイテムがなくなったとき
大切なのは「ただ空」を見せるのではなく、次の一歩を示すことです。ボタンの文言は「最初のプロジェクトを作成」のように具体的な行動に変えると、ユーザーが迷いません。検索0件のときは条件を見直すヒントを添えると親切です。イラストは装飾なので aria-hidden を付け、見出しと説明文だけで意味が通るようにするとアクセシビリティが高まります。
よくある質問
イラストを自社のものに差し替えられますか
できます。サンプルはインライン SVG なので、SVG のパスやアイコンを別のものに置き換えれば見た目を変えられます。画像ファイルを使う場合は img 要素に差し替えても構いません。
検索0件と初回データなしで内容を変えるべきですか
変えるのが望ましいです。検索0件なら条件を緩めるヒントを、初回データなしなら最初の作成を促すボタンを出すなど、状況に合った文言とアクションにするとユーザーが次の行動を取りやすくなります。