より良い検索フォームのための９つのベストプラクティス

検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった２つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。

複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。

この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。

ベストプラクティス

１. 虫めがねのアイコンを使用する

検索ボックスには常に虫めがねのアイコンが付いています。アイコンは定義上、オブジェクトやアクション、またはアイデアの視覚表現です。アイコンの中には、ユーザーに普遍的な認識があるものがいくつかあり、虫めがねアイコンもその１つです。

ユーザーは説明のラベルがなくても虫めがねのアイコンが何か認識します。

ヒント：虫めがねのもっともシンプルな形である、概略図のアイコンを使用しましょう。グラフィックがシンプルであるほどアイコンを認識しやすくなります。

２. 検索フィールドを目立つように表示する

アプリやサイトにとって検索が重要な機能である場合は、ユーザーが早く発見できるように、目立つように表示する必要があります。

左：検索機能がアイコンの後ろに隠れてしまっています。画像クレジット：thinkwithgoogle

アイコンの後ろに隠れてしまう検索ボックスは検索機能が目立ちにくく、インタラクションの労力が増えてしまいます。そのため、入力フィールドは見える形で表示することが大切です。

プログレッシブディスクロージャ（progressive discosure：段階的表示）は検索内容を隠してしまうため使用しないでください。画像クレジット：AntonioJDN

３. 検索ボックスの検索ボタンを提供する

ボタンがあることで、検索を始めるためにもう１つステップがあることを伝えられます。たとえユーザーはボタンをEnterキーで代用するとしても、ボタンが存在することは効果的です。

ヒント：

• ユーザーがマウスを細かく操作する必要がないように、検索ボタンは適切な大きさにしましょう。クリック可能な領域を大きくすると、簡単に見つけてクリックすることができます。
• ユーザーがEnterキーを使用してもアイコンをクリックしても、検索できるようにしてください。多くのユーザーは、まだ実際のボタンをクリックして検索する習慣があります。

４. すべてのページに検索ボックスを置く

探しているコンテンツが見つからない場合、ユーザーはサイトのどこにいても検索を使用しようとします。ですから、いつでも各ページの検索ボックスを使用できるようにする必要があります。

５. 検索ボックスをシンプルにする

検索ボックスをデザインするなら、一目で検索ボックスだとわかるようにして、できるだけシンプルにしましょう。ユーザビリティ調査によると、デフォルトでは高度な検索オプションを表示しないほうがユーザーには使い勝手が良いと言われています。高度な検索オプション（以下の例にあるようなANDやORを使った検索など）は、ユーザーを混乱させてしまうかもしれません。

ANDやORを使った検索

６. ユーザーが見つけやすいところに検索ボックスを設置する

目立たない、見つけにくいなどの理由でユーザーが検索ボックスを探さなければならないのは、良いデザインとは言えません。

以下の図は、A. Dawn Shaikh氏とKeisi Lenz氏による調査から得たもので、142人の参加者がサイト内で検索フォームがあると予想した位置を示しています。この調査では、ユーザーにとってもっとも便利な位置は、サイトのページの左上または右上であることがわかりました。そこであれば、ユーザーは有名な視線移動の法則であるF型の流れで自然に見つけることができるのです。

この図は、参加者が検索ボックスが見つかると予想した領域を示しています。右上の隅は、依然としてユーザーがもっとも検索ボックスを予測した場所となっています。

したがって、レイアウトの右上または中央上部に検索ボックスを配置すると、ユーザーは予想通りの場所に検索ボックスを見つけることができます。

たくさんのコンテンツを持つYouTubeでは、中央上部に検索ボックスを設置しています。

ヒント：

• 検索ボックスはサイトの全体的なデザインに溶け込んでいながらも、必要なときには見つけられる程度に目立っているのが理想的です。
• コンテンツが多いサイトほど、検索機能を目立たせるようにしましょう。サイトにおいて検索が不可欠な場合は、背景や周囲の要素から検索バーとアイコンが目立つように、十分なコントラストをつけましょう。

７. 適切な入力フィールドのサイズ

入力フィールドを短くしすぎることは、デザイナーの間でよくある間違いです。もちろん短くても、長い検索クエリを入力することはできます。しかし、テキストの一部しか表示されず検索クエリを簡単に見直したり編集したりすることができないため、使い勝手が良くありません。（編注：検索クエリとは、検索のために入力するキーワード、またはデータを検索する際の検索条件。）

実際、検索ボックスの表示文字数が限られている場合、ユーザーは短くて不正確なクエリを強いられます。長いクエリは見にくく不便だからです。入力フィールドの大きさが予想される入力に応じて調整されれば、読みやすく、理解しやすいでしょう。

経験則としては、27文字のテキストが表示される入力フィールドが良いでしょう（これは一般的に入力される長さのクエリの90％をカバーします）。

Amazonは適切なサイズの検索ボックスを使用しています。

ヒント：クリックするとテキスト入力フィールドが拡大する検索ボックスを使用してみましょう。これにより画面のスペースを節約しながら、同時にユーザーが検索ボックスを素早く見つけて使ってもらえるような、視覚的な手がかりを与えられます。

８. 予測候補機能を使用する

予測候補機能は、入力された文字に基づいて検索クエリを予測することで、ユーザーが適切なクエリを見つけやすくします。この機能は、検索プロセスを速めるためのものではなく、ユーザーが検索クエリを構築する手助けをするものです。一般的なユーザーはクエリの作成に慣れていません。最初の検索で良い結果が得られない場合、あとの検索でも成功することはめったにありません。結果的に検索を諦めてしまうことも多々あります。クエリを自動的に補完する提案が上手く機能すれば、ユーザーはより適切な検索クエリを見つけ出すことができます。

Googleはこの予測候補の技術をマスターし、2008年から実装しています。ユーザーは同じものを複数回検索する傾向があります。ですから検索履歴を記憶することで、Googleはユーザーの時間を節約し、はるかに便利な検索体験を生み出しています。

ヒント：

• 予測候補がうまく機能していることを確認しましょう。上手く機能していない予測候補は、ユーザーを混乱させ、邪魔になる可能性があります。ですからツールを改善するためにも、スペルの自動修正、元になる単語の認識、および予測テキストを使用しましょう。
• すぐに価値を提供してユーザーのデータ入力の手間を省くために、たとえば３文字入力されたあとなど、できるだけ早いタイミングで予測候補を表示しましょう。
• 情報が多くなり過ぎないように、候補の表示は10個以下に抑えましょう。スクロールバーも使わないほうが良いです。
  
• 候補リストを操作するときにキーボードを使用できるようにしましょう。ユーザーは最後のアイテムまでスクロールしたら、リストの先頭まで戻る必要がありますが、エスケープキーを押すことでリストを終了できます。
• 入力された情報と提案した情報の違いを強調しましょう（たとえば、入力テキストは普通のフォントにし、提案された単語は太字にするなど）。

自動補完機能はユーザーの時間を節約し、内容や適切な言葉を提案することもできるでしょう。

９. ユーザーが何を検索できるかを明確にする

入力フィールドにサンプルの検索クエリを表示して、どんな風に使用できるかをユーザーに伝えることをおすすめします。ユーザーが複数の条件を検索できる場合は、入力ヒントを使用して説明します（たとえば以下のIMDbの例のように）。HTML5であれば、入力フィールド内にプレースホルダとしてのテキストを簡単に設定することができます。

ポイント：提案するワードは数個に制限してください。そうしないと、逆に認知する労力が増えてしまいます。

結論

検索は基本的な動作であり、コンテンツの多いアプリやサイトを構築する際には決定的な要素です。入力フィールドのサイズを適切にする、検索フィールドに入力するべき情報を表示するなどの小さな変化だけでも、検索の使い勝手だけでなく、全体としてのUXを大幅に改善することができます。