週刊Webテク通信

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

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

ネットで見かけた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

今週の気になるWebネタ

「Yo」というメッセージを送るだけのアプリ「Yo」--エンジェルファンディングで100万ドル - CNET Japanhttp://japan.cnet.com/news/business/35049714/

「Yo」というメッセージを送るだけのアプリ「Yo.」が話題となっています。送信先をタップすると「Yo」という音声付きの通知が相手に送られるだけの機能ながら,エンジェルファンディングで100万ドルを得たとのことです。

Facebookに付いている謎機能といわれているPokeと似ていますね。Pokeも友達に挨拶を送るだけの機能で,メッセージも何もなくただPokeが届いていると通知が出るだけです。双方の同意があれば,いろいろな意味に使えるというところも同じですね。

なお,⁠開発時間はわずか8時間」と言われているこのアプリですが,⁠電話番号を利用してユーザーを検索する」機能にセキュリティ的配慮がされていないという記事がありました。アップデートされるまで電話番号の登録は控えた方がよさそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入