サイトに検索フォームを付けたいけれど、虫眼鏡のアイコンだけでいいのか、ボタンに「検索」と書くべきか、どこに置けばいいのかと迷っていませんか。
検索フォームは小さな部品ですが、見つけにくかったり、押しても何が起きるか分からなかったりすると、せっかくの情報に利用者がたどり着けなくなります。
この記事では、検索フォームのデザインの基本として、検索フォームの構成、置き場所、スマホでの見せ方、入力中の候補表示の考え方を、見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。見本の部品は押しても動きません。
検索フォームの基本
まずは、検索フォームがどんな役割を持ち、どんなパーツでできているのかを押さえましょう。
検索フォームとは
検索フォームとは、利用者がキーワードを入力して、サイトやサービスの中から目的の情報を探すための部品です。
「検索窓」「検索ボックス」とも呼ばれ、文字を入力する欄と、検索を実行するボタンを組み合わせて作ります。
Webサイトでは、メニューのカテゴリを順にたどる探し方が基本ですが、ページの数が増えると、メニューだけですべての情報に案内しきれなくなります。
検索フォームがあれば、探したい言葉が決まっている利用者は、カテゴリをたどらずに目的のページへ直接たどり着けます。
つまり検索フォームは、メニューとは別の「もう1つの入り口」として、情報量の多いサイトほど大切になる部品です。
検索フォームを構成するパーツ
検索フォームの基本のパーツは、「入力欄」と「検索ボタン」の2つです。
検索ボタンは、「検索」という文字で示す形と、虫眼鏡のアイコンで示す形があり、どちらもよく使われます。
見本Aは、ボタンに文字で「検索」と書いているので、初めての人にも役割が確実に伝わります。
見本Bは、虫眼鏡のアイコンで検索を表した形で、文字が要らないぶん省スペースです。
見本Cは、入力欄の中に虫眼鏡を目印として置き、キーボードの確定(Enter)キーで検索する形で、入力した文字を一度に消す「×」のボタンを添えることもあります。
このほか、入力中に検索の候補を表示する一覧や、「記事」「商品」のように検索する範囲を選ぶ絞り込みを組み合わせることもあります。
たとえばデジタル庁デザインシステムの検索ボックスでは、検索対象を選ぶメニュー、入力欄、虫眼鏡のボタンを組み合わせた例が紹介されています(検索ボックス – デジタル庁デザインシステム)。
入力欄そのもののデザイン(枠線・状態・ラベルの考え方)は、ほかのテキストフィールドと同じです(テキストフィールドとは?で解説しています)。
検索フォームのデザインのコツ
ここからは、検索フォームを見つけやすく、使いやすくするためのコツを見ていきます。
「置き場所」「入力欄を見せること」「幅」「スマホでの扱い」「候補表示」「見えないラベル」の6つがポイントです。
置き場所はページ上部で、全ページ同じにする
検索フォームは、ページの上部(ヘッダー)に置き、どのページでも同じ位置に表示するのが基本です。
利用者は「検索はたいていページの上のほうにある」と経験的に知っているので、そこにあれば探さずに見つけられるからです。
Webの使いやすさ(ユーザビリティ)を長年調査・研究しているアメリカの専門機関、Nielsen Norman Groupも、検索はページの上部、特に右上に置かれていることを利用者が期待している、と述べています(The Magnifying-Glass Icon in Search Design(英語))。
ページごとに検索フォームの位置が変わると、そのたびに探し直すことになるので、サイトの中では位置をそろえましょう。
PCでは入力欄を最初から見せておく
PCの画面では、虫眼鏡のアイコンだけを置くのではなく、入力欄そのものを最初から表示しておきます。
アイコンだけだと、利用者はまずアイコンを見つけて押し、入力欄が現れるのを待ってから入力することになり、ひと手間増えるうえ、検索があること自体に気づかれにくいからです。
先ほどのNielsen Norman Groupの記事でも、PCやタブレットでは虫眼鏡アイコンと一緒に入力欄を表示しておくことを勧めています。
アイコンだけを置いて押すと入力欄が広がるデザインは、すっきりして見栄えがよい反面、検索するたびにひと手間かかります。記事や商品が多く、検索で探してもらうことが大切なサイトほど、見た目より探しやすさを優先して入力欄を見せておきましょう。
NGの見本では、虫眼鏡がメニューの文字と同じくらい小さく、検索の入り口だと気づくまでに時間がかかります。
OKの見本では、枠のある入力欄が見えているので、「ここに文字を入れられる」とすぐに伝わります。
虫眼鏡のアイコンは、検索を表す記号として広く知られているので、文字の「検索」ボタンの代わりや、入力欄の目印として添えるのに向いています。
入力欄はよく使う検索語が収まる幅にする
検索フォームの入力欄は、利用者がよく入力する長さのキーワードが、途中で切れずに全部見える幅にします。
欄が短すぎると、入力した文字が欄の外へはみ出して先頭が隠れ、打ち間違いに気づきにくくなるからです。
Nielsen Norman Groupも、入力欄は典型的な検索語が収まる幅にするべきで、狭すぎると文字がスクロールして使いにくくなると指摘しています(Search: Visible and Simple(英語))。
「Figma オートレイアウト」のように、2〜3語を組み合わせた検索語が入るかどうかを、実際に入力して確かめてみましょう。
スマホではアイコンから開いてもよい
画面の狭いスマートフォンでは、ヘッダーに虫眼鏡のアイコンだけを置き、押すと入力欄が開く形にすることがよくあります。
スマホのヘッダーはロゴやメニューのボタンでいっぱいになりやすく、入力欄を常に置くと、どれも窮屈になってしまうからです。
PCでは画面の幅に余裕があるので入力欄を見せておけますが、スマホでは幅が限られるため、ロゴやメニューのボタンの場所を優先し、検索は押したときだけ開く形にするのが現実的な落としどころです。
この場合は、アイコンを押したらすぐに入力欄が開き、文字を打てる状態(フォーカスが当たった状態)になるようにして、利用者がもう一度入力欄を押さなくて済むようにします。
開いた状態の見本では、入力欄の枠が太く濃くなり、すでに文字を打てる状態だと分かるようにしています。
検索をやめたいときのために、「閉じる」や「キャンセル」で元の表示に戻れるようにしておくことも忘れないようにしましょう。
アイコンだけのボタンは押せる範囲が小さくなりがちなので、見た目のアイコンが小さくても、押せる範囲は指で押しやすい大きさにします(ボタンの大きさの考え方はボタンの内側の余白とは?で解説しています)。
ヘッダーにほかに何を置くかや、メニューのボタンとの並べ方は、ヘッダー全体のレイアウトとして考えます(Webサイトのヘッダーとは?で解説しています)。
候補表示で入力の手間を減らす
文字を入力している途中で、検索語の候補を入力欄の下に一覧で表示すると、利用者は最後まで打たずに候補を選ぶだけで検索できます。
入力の手間が減るだけでなく、打ち間違いを防いだり、サイトにどんな情報があるかのヒントになったりするからです。
候補表示の見本では、入力済みの「余白」は普通の太さ、候補で補われる部分は太字にして、どこが追加された言葉なのかを見分けやすくしています。
キーボードの矢印キーで候補を選べるようにし、選んでいる候補は背景色などで分かるようにします。
候補の数が多すぎると、かえって選びにくくなるので、画面に収まる程度の数に絞りましょう。
ラベルを見せない場合もコード上の名前は付ける
検索フォームは、入力欄の上にラベルを表示しないデザインがよく使われますが、その場合もコード上では「検索」などの名前を付けておきます。
虫眼鏡やボタンを見れば検索だと分かる人が多い一方で、画面を音声で読み上げるソフトの利用者には、名前がないと何の入力欄か伝わらないからです。
W3Cのチュートリアルでも、検索欄のように見た目で目的が分かる場合はラベルを視覚的に隠してもよいが、読み上げソフトなどのためにコードには用意する必要がある、としています(Labeling Controls – W3C Web Accessibility Tutorials(英語))。
ここからは、Webサイトを自分でコーディングする人向けの補足です。
HTMLでは、検索フォーム全体を<search>要素で囲み、入力欄にtype="search"を指定するのが基本の形です。
<search>
<form action="/search/">
<label for="q" class="visually-hidden">サイト内を検索</label>
<input type="search" id="q" name="q">
<button type="submit">検索</button>
</form>
</search><search>要素は、その中身が検索や絞り込みのための部分であることを示す要素です(MDN: <search>: 汎用検索要素)。
type="search"を指定すると、ブラウザによっては入力を消すボタンが表示されたり、スマートフォンのキーボードの確定キーが検索用の表示になったりします(MDN: <input>)。
コード例のvisually-hiddenは、見た目では隠しつつ読み上げソフトには読ませるために、自分で用意するCSSのクラス名の一例です。
画面では虫眼鏡やボタンで検索だと分かるのでラベルの文字は見せたくない、でも読み上げソフトには「検索」と伝えたい、という両方をかなえるための書き方です。
実践のポイント
検索フォームで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 検索フォームをページの一番下やサイドバーの奥など、目立たない場所に置いてしまうことがあります。
検索したい人が探さずに見つけられるよう、ページ上部に置きましょう。 - 検索結果が0件だったときの画面を用意していないことがあります。
何も表示されないと「壊れているのでは」と不安にさせるので、「見つかりませんでした」と伝えたうえで、別の言葉で探す・カテゴリから探す・よく読まれている記事を見るなど、次の行動を案内して行き止まりにしないようにしましょう。 - 虫眼鏡アイコンを、検索とは関係のない「拡大表示」などの意味でも使ってしまうことがあります。
同じアイコンが別の役割を持つと混乱するので、サイトの中では虫眼鏡は検索だけに使いましょう。 - プレースホルダーに「キーワードを入力」とだけ書き、何を検索できるのかが分からないことがあります。
「記事を検索」「商品名・型番で検索」のように、検索できる範囲が分かる言葉にすると親切です。
よくある質問
- Q. 検索ボタンは「検索」の文字と虫眼鏡アイコンのどちらがいい?
A. どちらも広く使われていて、どちらが正解ということはありません。
虫眼鏡は省スペースで言語に関係なく伝わり、文字は確実に意味が伝わります。
サイトの中でどちらかにそろえることのほうが大切です。 - Q. 小さなサイトでも検索フォームは必要?
A. ページ数が少なく、メニューから全ページにすぐたどり着けるなら、なくても困らないことがあります。
記事が増えてカテゴリをたどるのが大変になってきたら、検索フォームを用意しましょう。 - Q. 検索フォームの入力欄の上にラベルは必要?
A. 虫眼鏡アイコンや「検索」ボタンで目的が分かるなら、見えるラベルは省略してもかまいません。
ただし、上で説明したとおり、コード上では読み上げ用の名前を付けておきましょう。
まとめ
検索フォームは、入力欄と検索ボタン(文字または虫眼鏡アイコン)を組み合わせた部品で、メニューとは別の「もう1つの入り口」として、目的の情報へ直接案内する役割があります。
ページ上部の決まった位置に置き、PCでは入力欄を最初から見せ、スマホではアイコンから開いてすぐ入力できるようにし、候補表示や0件のときの画面まで考えておくことがポイントです。
まずは、よく使うサイトをPCとスマホの両方で開き、検索フォームがどこにあり、押したあとどう表示が変わるかを見比べてみてください。
