2014年4月第1週号 1位は、検索ボックスのデザインについて、気になるネタは、奈良市公式Webサイトの構成がひどいと話題に

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2014年3月24日～3月30日の間に見つけた記事のベスト5です。

検索ボックスのデザインについて解説した記事です。

検索ボックスは芸術的にデザインするところではありませんが、レイアウトが重要とのことです。

訪問者はページの上部の中央か右側にボックスを探すので、その期待通りの場所に典型的なデザインの検索ボックスを配置することを勧めています。

見つけやすい検索ボックスにするとともに、入力内容を送信するボタンも明白でわかりやすくする必要があります。

結局のところ、既存のWebサイトにおける典型的なパターンのデザイン／レイアウトにしたほうがいいということですね。これは検索ボックスだけでなく、Webデザイン全般にも通じる考え方だと思います。

図1　検索ボックスのデザインについて

※指定画像がありません※

Webデザインに役立つ素材を多数紹介しています。

HTML／CSSのテンプレート、Photoshop形式のテンプレート、インターフェースデザイン素材に分けて掲載してありました。

図2　Webデザインに役立つ素材いろいろ

※指定画像がありません※

モバイル端末向けのユーザーインターフェイスのコンセプトデザインのギャラリーです。今ホットな分野だけあって、力作揃いです。

DribbbleとBehanceから探したものですね。

図3　モバイル向けユーザーインターフェイスデザインのギャラリー

※指定画像がありません※

Webフォントを使えないブラウザの場合だけ、アイコンフォントで設定したアイコン部分を画像に置換するスクリプトです。ちょっと面倒ですが、代替用の画像は用意する必要があります。

アイコンフォントは大変便利ですが、対応していないブラウザもあるため、このようなスクリプトを使うという方法は便利そうです。

図4　使えない環境ではアイコンフォントを画像に置換するスクリプト

※指定画像がありません※

カルーセル／スライダー用のスクリプトです。

レスポンシブでスワイプにも対応しているのでモバイル対応もOKですし、オプションも多くいろいろなパターンのカルーセルが作れます。

「the last carousel（最後のカルーセル⁠）⁠」という名前にふさわしいスクリプトのようですね。

図5　カルーセル／スライダー用のスクリプト

※指定画像がありません※

そのほか、最近の記事の中から、気になる記事を3つ紹介します。

先週の気になるWebサービス

DMartifyは、デジタルアイテムを売買できるマーケットプレースです。

テーマ、テンプレート、グラフィックスやスクリプトを購入することができます。また、中にはフリーの素材もありました。

カテゴリごとに分かれて、たとえば大カテゴリがテーマの小カテゴリがWordPressといったように探せるのですが、まだ始まったばかりで登録点数が少ないようです。

5分で販売が開始できるということですが、手数料が70%というのはちょっと高い気もします。

図6　デジタルアイテムを売買できるマーケットプレース

※指定画像がありません※

ある人がブログで指摘したことがきっかけで、奈良市公式Webサイトの構成がひどいと話題になっています。大量のパンくずリストがページの先頭に並んでいるページが特にインパクトがあり、否定的意見が多いようです。

しかし、いろいろなルートを示すことに意味があるようにも思えますし、1つのパンくずリストを残して、残りはページの最後に入れるといった改善策もありそうです。

なお、1つのページに複数のパンくずリストを入れた場合、Googleの検索エンジンは最初のものだけをパンくずリストと認識するそうです。

ちなみに、パンくずリストという呼び名は、童話「ヘンゼルとグレーテル」で、森の中で帰り道が分かるようにパンくずをちぎって置いていったことが由来となっています。これを知らないと、イラストネタの意味がわからないと思いますので、念のため。