「あれ、何もない…？」を優しく伝える。リストが空の時の「Empty State」の作り方
Webサイトを作っていると、必ずと言っていいほどぶつかる壁があります。それが「リストの中身が何もない時、どうすればいいの？」という問題です。
例えば、お気に入りの商品リストを作ったのに、まだ何も登録していない状態。あるいは、検索結果が1件もヒットしなかった時。画面が真っ白でポツンと寂しくなっていると、ユーザーは「あれ、システムが壊れたかな？」「読み込み中なのかな？」と不安になってしまいますよね。
この「何もない状態（Empty State）」を、いかに優しく、かつ分かりやすく伝えるか。これはフロントエンドエンジニアとしての腕の見せ所であり、ユーザーへの「おもてなし」の心そのものです。今回は、HTMLのリスト要素と、ちょっとした魔法のスパイス（aria-live）を使って、素敵な「何もない画面」を作るコツを解説します。
—
1. まずは「空っぽ」をHTMLで表現する
リストを表示するための `
- ` や `
- ` がないとただの「存在感のない箱」になってしまいます。ユーザーに「今は空っぽですよ」と伝えるためには、「リストとは別に、メッセージを表示するエリア」を用意するのが鉄則です。
まずは、お買い物のカートを例に考えてみましょう。
現在、カートの中身は空です。お買い物をお楽しみください！
ここで大切なのは、「リストが空かどうか」をHTMLの構造だけで判断させないことです。CSSで `display: none;` や `opacity: 0;` を使って、中身がない時だけメッセージをフワッと表示させるのが、現場でもよく使われる王道テクニックですよ。
—
2. 視覚障がいのある方にも「空であること」を伝える
さて、ここからが少しだけプロの領域。「画面が見える人」はデザインで空っぽだと分かりますが、音声読み上げソフトを使っている方はどうでしょう？
何もメッセージがないと、「読み込み中なのかな？」とずっと待たせてしまうかもしれません。そこで登場するのが、`aria-live` という魔法の属性です。
aria-live=”polite” の魔法
これは、「このエリアに変化があったら、今の作業を邪魔しない程度に優しく教えてあげてね」というブラウザへの指示です。
「polite（礼儀正しい）」という名前の通り、ユーザーが入力作業をしている最中なら、それが終わるのを待ってからそっと教えてくれる、とても気の利いた機能なんです。
—
3. 実践！JavaScriptで状態を切り替える
最後に、JavaScriptを使って「リストの中身が0件だったらメッセージを表示する」というロジックを組んでみましょう。コードはシンプルで大丈夫ですよ。
const list = document.getElementById(‘product-list’);
const emptyMessage = document.getElementById(‘empty-message’);function checkListStatus() {
// リストの中に - があるかどうかを確認
if (list.children.length === 0) {
// 空ならメッセージを表示
emptyMessage.classList.remove(‘is-hidden’);
} else {
// 中身があるなら隠す
emptyMessage.classList.add(‘is-hidden’);
}
}// ページ読み込み時や、アイテムが削除されたタイミングで実行！
checkListStatus();—
「大丈夫ですよ」というメッセージを添える
最後に一つだけ、デザインのヒントをお伝えします。
「何もありません」という事務的な表示よりも、「何か見つかりませんでした。別のキーワードで検索してみませんか？」といった、次に何をしてほしいか（アクション）を添えてあげると、ユーザーの体験はグッと良くなります。
Web制作は、コードを書く作業であると同時に、ユーザーの不安を取り除いてあげる「対話」のようなものです。最初は難しく感じるかもしれませんが、まずは「空っぽの時に寂しくない画面」を作ることから始めてみてください。
きっと、あなたのサイトを訪れる誰かが、その優しさに気づいてくれるはずです。また何か分からないことがあれば、いつでも聞きに来てくださいね！応援しています！
- ` は、中身の `
コメント