週刊Webテク通信

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

ネットで見かけた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 デジタルアイテムを売買できるマーケットプレース

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

おすすめ記事

記事・ニュース一覧