週刊Webテク通信

2014年6月第4週号1位は、ユーザビリティに関する5つの原則、気になるネタは、「Yo」いうメッセージを送るだけのアプリ「Yo」--エンジェルファンディングで100万ドル

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

1. 5 Basic Usability Principles Every Website Should Followhttp://despreneur.com/5-basic-usability-principles-every-website-should-follow/

ユーザビリティに関する5つの原則をまとめています。

  • すべてを簡潔に分かりやすくすることで、ユーザーの時間を短縮する
  • Webサイトでの体験の満足度を上げて不満を防ぐ

という二つの目的に向かい、以下の5つの原則を紹介しています。

  1. Webサイトの目的をハッキリ示す
  2. Webサイトの中をやさしくガイドする
  3. エラーを起こさない・エラーページ(Not foundページ)をデザインする
  4. 今どこにいるかを常に分かるようにする
  5. 信用と信頼につながる要素を提供する

5つ目の「信用と信頼」ですが、ユーザビリティは技術的な面だけでなく、ユーザーがそのサイト(の提供者)を信頼できるかどうかも重要とのことでした。

図1 ユーザビリティに関する5つの原則
図1 ユーザビリティに関する5つの原則

2. Call to Idea - Get inspired!http://calltoidea.com/

UIデザインをパーツごとに閲覧できるサイトです。大きくコンポーネント、レイアウト、ユーティリティの3つの項目に分かれており、さらに細かいカテゴリ別にUIのキャプチャ画像が見られます。

それぞれの元サイトへのリンクもほしいところですが、リンクも解説もなく画像のみというシンプルさが特徴となっています。

図2 UIデザインのギャラリーサイト
図2 UIデザインのギャラリーサイト

3. Web Starter Kithttps://developers.google.com/web/starter-kit/

Webサイト作成のためのベースとして使える、いわゆるboilerplate的なものをダウンロードできます。この手のものはもう目新しさはありませんが、これはGoogleが提供しているということで注目されています。

Node/Ruby/Ruby Sass gem/Gulp.jsを使った開発者向けのもののようですが、ボタンやアイコン、グリッドなどのコンポーネントはWebデザイナーでも利用できそうです。

図3 GoogleによるWeb制作のスターターキット
図3 GoogleによるWeb制作のスターターキット

4. Responsive Websites Design Examples | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/06/new-responsive-websites-design/

レスポンシブWebデザインのギャラリーです。全画面の背景写真を使っているサイトが多いですね。

画像がふんだんに使ってあり、フラットデザインをあまり感じさせないものばかりでした。

図4 レスポンシブWebデザインのギャラリー
図4 レスポンシブWebデザインのギャラリー

5. 15 Amazing Redesigns of Famous Websiteshttp://despreneur.com/15-amazing-redesigns-of-famous-websites/

有名なサイトを勝手にリデザインした作品を多数紹介した記事です。

dribbbleやBehanceに投稿された、Apple StoreやDropbox、Wikipediaなどのリニューアル案の画像がまとめられています。

図5 有名なサイトのリデザイン案のまとめ
図5 有名なサイトのリデザイン案のまとめ

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

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

カラーホイール | カラースキーム - Adobe Kulerhttps://kuler.adobe.com/ja/create/color-wheel/

今回は、Adobeが提供する配色ツールKulerを紹介します。なぜ今さらKuler? と思う人もいるでしょうか、今さらながらAdobe Creative Cloud 2014の登場のタイミングで日本語化されたのです。

Kulerはカラーテーマを作成して、公開、共有できるWebサービスです。類似色、単色、補色などのカラールールが用意されているので、キーカラーを決めるだけで適切な配色を作ることができます。もちろん、カスタムで色を決めることも可能です。

人の作ったカラーテーマを探して利用できるところも便利です。日本語化によって日本語のテーマ名が使えるようになったので、より探しやすくなりそうですね。自分で作ったテーマは、公開することも非公開で保存することもできます。

Kulerで作ったカラーテーマは、aseファイルとして書きだしてPhotoshopやIllustratorなどに取り込めます。また、Illustratorでは、Kulerに保存したカラーテーマを直接読み込むことができて便利です。

図6 日本語化された配色ツールKuler
図6 日本語化された配色ツールKuler

おすすめ記事

記事・ニュース一覧