サイト内検索のUIデザイン

サイト内検索の型の選び方

サイト内検索の型は、「検索の入口をどこに置くか」「入力をどう助けるか」「結果をどう見せるか」の3つで変わります。問い1で入口の型を1つ選び、問い2で入力の助け方を加え、問い3で結果のページを組みます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。

問い1：検索の入口を、どこに置きますか？

ヘッダーの余裕と、検索がどのくらい使われるかで決まる問いです。

問い2：入力の途中で、手助けをしますか？

ページの題名やよく検索される言葉が決まっている場合に加える型です。問い1の入口と組み合わせて使います。

問い3：結果を、どう見せますか？

検索したあとのページです。入口の型にかかわらず、両方を用意しておくのが基本です。

サイト内検索の型の比較

すべての型に共通する設計の原則

サイト内検索の型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。

• 検索の欄は role="search" の form で囲み、入力欄とボタンに名前（ラベル・aria-label）を付ける
• アイコンだけに頼らない。虫眼鏡のボタンにも「検索」という名前を付ける
• 欄を開いたら入力欄へ移し、閉じたら元のボタンに戻す。Escキーで閉じられるようにする
• 画面を覆う検索はモーダルとして扱い、操作を検索の画面の中に閉じ込める
• 結果のページでは、検索した言葉を入力欄に残し、件数と一致した言葉を示す。並び順は関連度の高い順を基本にし、今の並び順を表示する
• 0件で終わらせない。言い換え・ヒント・よく見られているページ・問い合わせへの入口を用意する
• SPでは入力欄の文字を16px以上にし、押せる範囲は44px程度の高さを目安に確保する
• 検索された言葉と0件になった言葉を記録し、ページの追加やメニューの見直しに使う。検索の欄には個人情報が入力されることもあるため、記録を残す場合はその扱いに注意する

組み合わせの例

• ページ数の多いコーポレートサイト：ヘッダー内検索型で入口を見せ、結果一覧型と0件時の案内型で結果を受け止める
• メニューの多いサービスサイト：アイコン展開型でヘッダーを整理し、入力中は候補表示型で題名の候補を出す
• SPからの利用が多いサイト：全画面検索型でよく検索される言葉を見せ、入力を始めたら候補表示型に切り替える
• よくある質問が多いサイト：サイト全体の検索とは別に、よくある質問のページの中で検索型 FAQを使う

よくある質問

サイト内検索は、すべてのサイトに必要ですか?

ページが少なく、メニューから目的のページにたどり着けるサイトでは、置かないほうがヘッダーが整理される場合があります。ページが増え、メニューからたどるのに何段階もかかるようになったら、置く目安になります。

入口と結果の型は、組み合わせて使うのですか?

組み合わせて使います。入口の型（ヘッダー内検索型・アイコン展開型・全画面検索型）を1つ選び、結果の見せ方として結果一覧型と0件時の案内型を用意するのが基本の形です。

検索された言葉の記録は、どう使えばよいですか?

よく検索される言葉は、全画面検索型の言葉の例や、メニューの見直しに使えます。0件になった言葉は、サイトにない情報を示しているため、ページの追加や言い換えの候補づくりに役立つと考えられます。

検索の結果のページは、検索エンジンに表示させたほうがよいですか?

サイト内検索の結果のページは、検索した言葉の数だけURLが増え、内容の薄いページが大量にできやすいため、一般には検索エンジンに登録させない（noindex）設計が多く見られます。