週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

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

1. How To Design A Great Search Boxhttp://www.designyourway.net/blog/inspiration/how-to-design-a-great-search-box/

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

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

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

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

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

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

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

2. HTML, CSS, PSD and More: 18 Free Design Resources from February/March 2014 - noupehttp://www.noupe.com/freebie/html-css-psd-and-more-18-free-design-resources-from-februarymarch-2014-81774.html

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

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

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

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

3. 50+ New Mobile UI Designs and Concepts for Inspiration | Icons | Design Bloghttp://blog.karachicorner.com/2014/03/new-mobile-ui-designs-and-concepts-for-inspiration/

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

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

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

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

4. Icon Font Fallbackhttp://dfcb.github.io/iconfont-fallback/

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

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

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

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

5. slick - the last carousel you'll ever needhttp://kenwheeler.github.io/slick/

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

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

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

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

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

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

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

DMartifyhttp://dmartify.com/

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

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

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

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

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

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

今週の気になるWebネタ

奈良市公式Webサイトの構成がひどいと話題に | スラッシュドット・ジャパン IThttp://it.slashdot.jp/story/14/03/25/0221249/

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

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入