サイト内検索を8つの型に分け、AIへの指示文・動く見本・コードを載せています。
サイト内検索はどの型を選ぶか
サイト内検索は「入口をどこに置くか」「入力をどう助けるか」「結果をどう見せるか」の3つに分けて考えます。入口は、検索で探す人の多さで決めます。製品や記事が多く、検索が主な使い道ならヘッダー内検索型、たまに使う程度ならアイコン展開型か全画面検索型にします。そのうえで、入力の助けと結果の見せ方の型を組み合わせます。
| こんなとき | 向いている型 |
|---|---|
| 製品・記事が多く、検索で探す人が多い | ヘッダー内検索型 |
| ヘッダーをすっきり見せたい・検索はたまに使われる | アイコン展開型 |
| よく探される言葉が決まっていて、先に見せたい | 全画面検索型 |
| ページの名前がはっきりしていて、直接移ってほしい | 候補表示型（入口の型と組み合わせる） |
| 同じ言葉で何度も調べる人が多い | 最近の検索型（入口の型と組み合わせる） |
| 種類の違うページが同じ検索に出てくる | 結果一覧型 |
| 結果が多く、種類や製品などの条件で減らしてもらいたい | 絞り込み併用型 |
| 自分の言葉で検索する人が多く、0件がよく出る | 0件時の案内型（結果一覧型と組み合わせる） |
入口の型（ヘッダー内・アイコン展開・全画面）から1つ選び、入力を助ける型（候補表示・最近の検索）と、結果のページの型（結果一覧・絞り込み併用・0件時の案内）を組み合わせて使います。
どの型でも守ること
- form に role="search" を付ける。読み上げソフトで「検索」の場所として見つけられます。入力欄は
type="search"、送り先はmethod="get"にして、結果のページの URL に言葉が残るようにします。 - 入力欄に label を付ける。見た目では隠してもかまいませんが、placeholder だけで済ませません。placeholder は文字を打ち始めると消えるうえ、文字色が淡く、読み取りにくいからです。
- 検索ボタンを絵だけで済ませない。虫眼鏡の横か下に「検索」と書きます。書けない場所でも、
aria-labelでスクリーンリーダー向けの名前は持たせます。 - 検索した言葉を入力欄に残す。結果のページでも入力欄に言葉を入れておき、言い換えや言葉の追加をしやすくします。
- 空のまま送らせない。入力欄が空のままボタンが押されたら、検索は実行せず、カーソルを入力欄に置き直します。
よくある質問 (FAQ)
ページが50を超えるか、よくある質問・商品・記事が積み重なっていくサイトなら置きます。ページが十数個の会社のサイトなら、メニューからたどれるので検索はなくても困りません。付けると決めたら、結果のページだけでなく、何も見つからなかったときの画面も作ります。
検索がサイトの主な使い道なら常に表示し、たまに使う程度ならアイコンで開きます。見えている入力欄はそれだけで「ここで探せる」という案内になります。アイコンにするときも、虫眼鏡に「検索」の文字を添えて見落とされないようにします。
数百ページまでなら、ページの名前の一覧を一度だけ読み込んでブラウザの中で探せば足ります。それより多いときは、キー入力が途切れて0.3秒ほどたってからサーバーに問い合わせる作りにします。1文字ごとに問い合わせると、表示が入力に追いつかずにちらつきます。
月に1回、0件になった言葉を多い順に見て、ページを足すか言い方を書き足します。同じ言葉で何度も探されているなら、その情報を求めている人がいます。ひらがなや略語の揺れなら、ページの本文にその言い方を加えたり、言い換えの対応表に足したりします。