味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法

2017年6月29日
Webデザイン, ユーザビリティ

ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！

↑私が10年以上利用している会計ソフト！

検索ボックスをもっと使いやすくする

1. 誰が見てもすぐ見つかる場所に

ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。

2. テキストボックスの背景色

デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背景色をつけてもOK。下の画像のように背景とテキストボックスが同化するのだけはさけましょう。

3. 虫メガネのアイコン

「検索＝虫メガネ」と言ってもいいくらい世界的に虫メガネアイコンは検索ボックスを意味します。虫メガネアイコンのデザインを少しかえるだけでもユーザーの目をひく検索ボックスになりそうです。

4. 他のテキストボックスの近くに設置しない

何度か検索ボックスだと思ったらEメール購読の登録フィールドだったことがあります。。下の画像はかなり極端ですが、こんな配置は絶対さけましょう。どうしても並べなければならない場合でもライン・枠・色などでくぎって混合しないようにレイアウトを組みましょう。

5. 検索ボタンはひとつ！

未だにWikipediaの検索ボタン「表示」と「検索」の違いがわかりません。。これって必要なんですかね？検索ボックスに必要なのは基本的にはテキストボックス＋ボタンひとつずつのみでOKです！

6. onfocusでテキストを表示・非表示する

あらかじめテキストボックスに「検索する」などのテキストを表示して、フォーカスすると文字を消し、フォーカスが外れるとまた文字が表示されるテクニックです。たまにフォーカスしても文字が消えない検索ボックスもあり、イライラしてしまうので、下記JavaScriptコードを参考に実装してみてください。

&amp;amp;lt;input type=&amp;amp;quot;text&amp;amp;quot; value=&amp;amp;quot;検索キーワード&amp;amp;quot; onfocus=&amp;amp;quot;if( this.value == '検索キーワード' ) { this.value = ''; } &amp;amp;quot;  onblur=&amp;amp;quot;if( this.value == '' ) { this.value = '検索キーワード'; } &amp;amp;quot; /&amp;amp;gt;

素敵なデザインの検索ボックスギャラリー

細かいデザインにまでこだわっている検索ボックスを紹介します！