UIデザインで困らないために押さえておくべき7つのWEBサービス

ウェブサイトにおいて、画像や配色だけがデザインではありません。ページャーやパンくずリスト、タブやアイコンなど、サイトの随所に存在するユーザーインターフェース(UI)も重要な要素のひとつ。とはいうものの、毎回おざなりに済ませていませんか?
その結果、なんだか使いづらいサイトができてしまった…。また同じようなデザインになってしまった‥。今回はそんな苦悩から解放されるための、便利な資料集です。

基礎編

Yahoo! Design Pattern Library

Yahoo! Design Pattern Library

http://developer.yahoo.com/ypatterns/

さまざまな UI パターンが分類されたリファレンス。このパターンはこんな問題を解決してくれる・こういう条件のときに使えるといった解説で、パターンの基本がわかります。
たとえばアコーディオンは、アイテムが多すぎてユーザーが困惑しそうだったり、スペースが足りないといった場合に、アイテムがきちんとグループ分けできるならば使える。見出しはカテゴリーやグループ名とすること……だそうです。

Welie.com

Welie.com

http://www.welie.com/patterns/index.php

こちらもデザインパターンリファレンスですが、実際にウェブサイトで使用されている例が掲載されているほか、コメント欄で意見を述べ合うこともできます。

さらに詳しく学びたいときは、この2冊がおすすめです。

デザイニング・インターフェース 第2版――パターンによる実践的インタラクションデザイン
第1章では、ユーザーはどのように行動し、どのような動作を期待するものかといった基本原則、それ以降では前述のサイトと同様、分類されたパターンを解説していますが、実例のスクリーンショットと詳細な解説文は見ものです。
ウェブサイトだけでなく、ソフトウェア開発にも通じるインターフェースデザインの基礎が学べます。本文オールカラー。

デザイニング・ウェブナビゲーション――最適なユーザーエクスペリエンスの設計
パンくずリストやページャーなど、ウェブサイトのナビゲーションデザインに特化した書籍です。UI パターンの解説はこちらも豊富ですが、特にサイト内でのページ遷移をスムーズに行なわせることに重点を置き、パターンや文言の選び方などのナビゲーション原則も解説してくれます。

デザイン編

UI パターンはユーザーエクスペリエンスを考えるとあまり変わったデザインは避けがち。ですがそれを意識しすぎると毎回似たようなデザインができあがっていまう、難しいものです。
そこでインスピレーションにつながりそうな、UI デザインのまとめサイトを紹介します。使用されているパターンや、404(Not Found)やデータが空の場合などといったページ分類から検索できるものが多いです。

UI Patterns

UI Patterns

http://ui-patterns.com/

色から検索できます。パターンリファレンスも併設されています。

Ui Parade

Ui Parade

http://www.uiparade.com/

dribbbleなどのデザイン投稿サイトから、特に UI に関わるものを集めたまとめサイトです。

Collection: Design Patterns by factoryjoe

Collection: Design Patterns by factoryjoe

http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/

カテゴリごとにアルバムにまとめたスクリーンショットコレクションです。Flickr はこういう使い方もできるんですね。

PatternTap

PatternTap

http://patterntap.com/

Idea と Visual という2種類の項目で評価されます。タグの分類にページやスタイルの種類だけでなく、プラットフォーム(iOS)があるのが、他のサイトには見られない特長かと思います。

Mobile UI Patterns

Mobile UI Patterns

http://mobile-patterns.com/


iOS に特化した UI ギャラリー。カテゴリを選ぶと App Store を意識した横スクロールの UI で閲覧できます。

おわりに

よりよい UI デザインは、PV数やコンバージョン率のアップにもつながります。これらのアイテムを駆使してぜひデザインを向上させてください。
デザインの比較や提案には、クライアント満足度がアップする7つのウェブデザインシートも便利ですよ。

This post is also available in other languages.

Reactions on Twitter

  1. @nibushibu より:

    UIデザインで困らないために押さえておくべき7つのWEBサービス – ウェブサイトにおいて、画像や配色だけがデザインではありません。ページャーやパンくずリスト、タブやアイコンなど、サイトの随所に存在する… http://t.co/a5DJdO4V

  2. UI:UIデザインで困らないために押さえておくべき7つのWEBサービス http://t.co/cwLt7ITi

  3. Yahoo! Design Pattern Library、http://t.co/nTfch0fk、UI Patternsなど> "UIデザインで困らないために押さえておくべき7つのWEBサービス" http://t.co/aSukS4RJ …

  4. Yahoo! Design Pattern Library、http://t.co/1x6ehyWB、UI Patternsなど> "UIデザインで困らないために押さえておくべき7つのWEBサービス" http://t.co/iD7EPJXr …

  5. @kaynea_real より:

    UIデザインで困らないために押さえておくべき7つのWEBサービス http://t.co/b1mAauIo

  6. @sigh_too より:

    UIデザインで困らないために押さえておくべき7つのWEBサービス http://t.co/fx4IayXHFS

  7. @kimihito_ より:

    “UIデザインで困らないために押さえておくべき7つのWEBサービス” http://t.co/yxzXljOV78

  8. @tsoshiro より:

    UIデザインで困らないために押さえておくべき7つのWEBサービス http://t.co/SW2Dv6ayWI