gihyo.jpサイトのロゴ

週刊Webテク通信

2011年9月第1週号1位は、アプリデザインとWebデザインのお互いから学ぶべきこと、気になるネタは、mixi版Facebookページ「mixiページ」スタート

2011-09-08

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年8月29日～9月4日の間に見つけた記事のベスト5です。

1. App design versus web design: what designers can teach each other | Webdesigner Depothttp://www.webdesignerdepot.com/2011/08/app-design-versus-web-design-what-designers-can-teach-each-other/

アプリデザインとWebデザインのお互いから学ぶべきことをまとめています。アプリデザインはWebデザインのデザイン性から学ぶ部分があり、Webデザインはアプリデザインの機能性から学ぶ部分がありそうです。

  1. 機能過多を避ける
  2. 他にはない斬新なものを作成する必要がある
  3. ユーザーインターフェイスのパーツやパターンは標準的なものを使う
  4. わかりやすいエラーメッセージを用意する
  5. 重要事項
  6. 拡張性が必要

1の機能過多ですが、原文では「feature creep」となっています。

コンピュータソフトウェアなどに継続的に新機能を追加していくと、余計な機能や不要な機能が徐々に増加していくことを英語では「feature creep」と言うそうです。

図1　アプリデザインとWebデザインのお互いから学ぶべきこと
図1　アプリデザインとWebデザインのお互いから学ぶべきこと

2. HTML5で制作された国内企業サイト20から現状の制作状況を知る!! | HTML5でサイトをつくろうhttp://www.html5-memo.com/html5-site/links/

HTML5でコーディングされている国内企業サイトを紹介しています。実験的サイトだけでなく、普通のサイトにも結構使われているんですね。

株式会社コンテンツのサイトは、一見FlashサイトのようですがHTML5やCanvas、JavaScriptなどの技術が駆使されていて、Flashは使われていません。

テレビ朝日は地デジ5チャンネルなので、他局に先がけHTML5にしたんでしょうか…。

「45 Inspirational Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers」という海外のHTML5サイトを集めた記事もありました。

図2　HTML5で制作された国内企業サイトいろいろ
図2　HTML5で制作された国内企業サイトいろいろ

3. 70 Examples Of Modern Responsive Web Design | Splashnologyhttp://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/

レスポンシブWebデザインのサイトを多数紹介しています。

各サイトを訪れて、ウィンドウサイズを広げたり狭めたりしてみましょう。

図3　レスポンシブWebデザインの作例いろいろ
図3　レスポンシブWebデザインの作例いろいろ

4. 40 Beautiful Illustrations in Web Design - Web Design Blog ? DesignM.aghttp://designm.ag/resources/40-beautiful-illustrations-in-web-design/

イラストが使われているWebデザインのギャラリーです。

レトロスタイルのデザインにイラストが使われているパターンが多いですね。

図4　Webデザインで使われているすばらしいイラストたち
図4　Webデザインで使われているすばらしいイラストたち

5. 35 High Quality PSD UI Web Design Elements | Free and Useful Online Resources for Designers and Developershttp://www.smashingapps.com/2011/08/29/35-high-quality-psd-ui-web-design-elements.html

ユーザーインターフェイス部品のPhotoshopファイルを多数紹介しています。WebサービスやWebサイトのインターフェイスに使えそうな素材が揃っています。

図5　UIエレメントのPSDファイル集
図5　UIエレメントのPSDファイル集

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

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

Journal+ : Social News with Google+http://jp.journalplus.net/

「Journal+」はGoogle+内で人気のある記事や写真・動画などをセレクトして、まとめて表示するサービスです。

Google+上で共有された数と「+1」が押された数とでランク付けしているようです。Google+で話題となっているリンク先の情報をまとめたもので、いわゆる「ソーシャルニュース」と呼ばれるジャンルのサービスです。国・地域でJapanを選べば、日本でのランキングを元にした内容になります。

自分、または誰かのGoogle+のURLを入力すると、その人が共有した記事のランキングをを見ることができます。

TwitterやFacebookでのこの手のサービスは、自分がフォローしている人を対象としたカスタマイズができるのが定番ですが、このサービスでは今のところカスタマイズ性はありません。

このサービスを運営している株式会社ユーザーローカルは、Google+の読者数の多いユーザーランキングを紹介する「Google+ランキング G+Navi」も提供しています。

図6　Google+内の人気記事をまとめたソーシャルニュースサイト
図6　Google+内の人気記事をまとめたソーシャルニュースサイト

おすすめ記事

記事・ニュース一覧