シンプルで気が利く、完璧な検索ボックスをデザインする方法

検索ボックスは入力フィールドと送信（Submit）ボタンの組み合わせでできています。検索ボックスにデザインなんていらない、と思う人もいるかもしれませんね。なにしろたった２つの要素しかないのですから。

しかし、膨大なコンテンツをもつWebサイトでは、最もよく使われるデザイン要素が検索ボックス、ということがよくあります。ユーザーは比較的複雑なサイトに行ったとき、最終目的地にすばやく苦労なく到達するためにすぐに検索ボックスを探します。検索ボックスのデザインとユーザビリティーは極めて重要です。

この記事では、ユーザーの目的を素早く叶えるために、検索ボックスをどう改善できるか考えていきます。

検索ボックスをデザインするポイント

すばらしい検索ボックスを作るためのベストプラクティスを順を追って紹介します。

ポイント1. 虫眼鏡アイコンを使う

検索ボックスには必ず虫眼鏡アイコンを使います。アイコンとは、ある物体やアクション、アイデアなどをビジュアル表現したものです。万人が理解するアイコンというものは多くはありません。虫眼鏡アイコンはそんなアイコンのひとつです。ユーザーは虫眼鏡アイコンを見れば文字ラベルがなくても、検索だと認識するでしょう。

ヒント：できるだけ簡潔な図柄の虫眼鏡を使うこと。グラフィック要素が少ないほどユーザーの認識が速くなります。

ポイント2. 検索フィールドはよく目立つように

あなたのアプリやWebサイトにとって検索が重要な機能であるなら、よく目立たせる必要があります。検索はユーザーが発見するための最短経路だからです。

▲左の検索機能はアイコンの陰に隠されている。（出典： thinkwithgoogle）

また、プログレッシブ・ディスクロージャー（段階的開示）はコンテキストを隠蔽するので検索に向いていません。 入力フィールド全体が見えていないと、ユーザーの注意を引くためのコストが高くなります。

▲アイコンの陰に隠れた検索機能は見つかりにい。 （AntonioJDN / Up Labs）

ポイント3. 検索ボックスには検索ボタンをつける

ボタンをつけることで、ユーザーは検索の実行まであと1ステップ必要であることがわかります。結果的にEnterキーを押すとしても、ボタンは必要です。

ヒント：

• 送信ボタンは適切な大きさにして、マウスを厳密にあわせなくてもいいようにしてください。クリックできる面積が広いほど楽にクリックできます。
• Enterキーを押しても、アイコンをクリックしても検索できるようにしてください。ユーザーの多くは、検索実行のためにボタンをクリックすることが習慣になっています。

ポイント4. 検索ボックスはどのページにもつける

検索ボックスは必ずどのページでも使えるようにすべきです。

目的のコンテンツが見つからなければ、Webサイトのどこにいようともユーザーは検索しようとするからです。

ポイント5. 検索ボックスはシンプルに

検索ボックスをデザインするときは、間違いなくそう見えるように作るのはもちろんですが、できるだけシンプルにしてください。

ユーザビリティー研究によると、高度な検索オプションはデフォルトで表示しないほうが、ユーザーフレンドリーだとされています。高度な検索機能（たとえば複合条件検索）は、ユーザーが使おうとして混乱するおそれがあります。

ポイント6. 検索ボックスはユーザーが期待する場所に置く

検索ボックスが目立たなくて見つけにくい場所にあるために、その都度探さなくてはならないのは困ります。

下のチャートはドーン・シャイクとカイシ・レンツの研究結果によるものです。142名の調査協力者を対象に、サイト検索ボックスがあると思う場所をたずねた結果を示しています。同研究によると、ユーザーにとって最も便利なスポットは、あらゆるページの左上または右上だとわかりました。よく知られた、視線が「F字」を描く視線パターンで見つけやすい場所だからです。

▲この図は、被験者が検索ボックスはここにある、と思った場所を表している。右上隅はユーザーが最初に検索ボックスを探す場所だ

つまり、検索ボックスを右上隅から中央に配置すれば、ユーザーの思ったところに検索ボックスが見つかることになります。

▲膨大なコンテンツをもつYouTubeは、検索ボックスを上部中央に配置している。

ヒント：

• 検索ボックスは、Webサイト全体のデザインに完璧に溶け込み、なおかつユーザーが必要としたときにわずかに目立つのが理想的。
• コンテンツの数が増えれば増えるほど、検索機能を目立たせる必要があります。もしあなたのサイトにとって検索が絶対不可欠なら、入力フィールドとアイコンが背景からも、周囲のデザイン要素からも際立つように、十分なコントラストをつけてください。

ポイント7. 入力フィールドのサイズはよく考えて

入力フィールドを短くしすぎることは、デザイナーが犯しやすい失敗です。

もちろんそれでもユーザーは長いクエリを入力できますが、テキストの一部しか見えないため確認や修正が困難になり、ユーザビリティーが低下します。実際、入力フィールドが短いとユーザーは短くて不正確な検索クエリを入力してしまう傾向があります。入力フィールドのサイズが適切であれば、タイプするにも読むにも便利です。

経験則によると、27文字分のテキストフィールドがよいようです（検索クエリの90%が収まります）。

▲アマゾンの検索ボックスは適切なサイズで作られている

ヒント：クリックすると入力フィールドが大きくなる拡大型検索ボックスを使う方法もあります。こうすることで画面スペースを節約しながら、検索ボックスをすばやく見つけるためのビジュアルな合図をユーザーに送ることができます。

ポイント8. オートサジェスト機構を使う

オートサジェストは、入力した文字列に基づいて、ユーザーの求める検索文字列を予測するしくみでオートコンプリートとも呼ばれます。オートサジェストの目的は検索プロセスをスピードアップするためというよりも、ユーザーを誘導することで検索クエリの組み立てを手助けすることです。

一般に、ユーザーはクエリの構築が非常に不得手です。最初の検索結果がうまくいかないときは、その後の検索もまず成功しません。実際、諦めてしまうことも少なくありません。オートサジェストの予測がうまく当たれば、ユーザーはよりよい検索クエリを組み立てることができます。

Google検索は2008年からこれを実装していてパターンを熟知しています。ユーザーは同じものを2回以上検索することが多いので、検索履歴を記憶することで、Googleは時間を節約し、はるかに利便性の高いエクスペリエンスを作ることが可能になります。

ヒント：

• オートサジェストは確実に役立つように作ること。設計の悪いオートサジェストはユーザーを混乱させるだけです。スペリングの自動修正、語幹の認識、テキストの予測などを利用してツールを改善してください。
• オートサジェストは、できるだけ早く表示すること。たとえば3文字目が入力された直後に候補を表示することでユーザーの入力の手間を減らすことができます。
• 表示する候補は10項目以内（スクロールバーは使わない）にして、ユーザーを惑わせないようにします。
• 候補リスト内の移動にはキーボードを使えるようにすること。最後の項目を過ぎたら、リストの先頭に戻る。Escキーで選択をキャンセルできるように。
• 入力した情報と、予測情報とをはっきり区別すること（たとえば、入力テキストは通常の文字で、候補項目は太字で）。

ポイント9. 何を検索できるかをわかりやすく

入力フィールドに検索クエリのサンプルを載せておくのはよいアイデアです。そこで何ができるかをユーザーに知らせることができます。

複数のカテゴリーで検索できる場合は、入力パターンのヒントを使って説明するとよいでしょう（下にIMDbの例を載せてあります）。HTML5を使うと、入力フィールドの中にプレースホルダーとして簡単にテキストを入れることができます。

ヒント：サンプルやヒントは短めに。さもないとユーザーの「認知的負荷」を増やしてしまうことになります。

まとめ

検索は基本的な機能であり、膨大なコンテンツをもつアプリやWebサイトを作る上で不可欠な要素です。

たとえば入力フィールドを適切なサイズにしたり、検索フィールドにどんな情報を入れられるかを明記する、といった些細な変更であっても、全体のユーザーエクスペリエンスと相まって、検索の利便性を著しく高めることができるのです。

（翻訳：Nobuo Takahashi　提供元：UX Planet）