週刊Webテク通信

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

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

ネットで見かけた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+内の人気記事をまとめたソーシャルニュースサイト

今週の気になるWebネタ

ミクシィ,「mixiページ」発表 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1108/31/news031.html

Facebookページのように,企業や個人などがmixi内に開設できるページ「mixiページ」がスタートしました。いよいよ企業が無料でmixi上でのプロモーション活動ができるようになったわけです。

スタートと同時にディズニーやローソンなど有名企業も続々参入,開始から2日間で8万以上のmixiページが作られたそうです。Google+がスタートと同時に一気に会員数を集めたのと同様なフィーバーぶりですね。

もっとも,mixiページのランキングを見ていると,個人が作った有名人のファンサイト的ノリのページが大量にあるようです。規約はFacebookページと同様の,⁠対象となる人物,キャラクター,企業,団体,ブランド,店舗,商品,テーマ等の本人(代表者)または正式な代理人が管理者となれます」となっているので,非公認のファンクラブ的ページはグレーゾーンだと思います。そういうのはmixiコミュでやるべきものですし。

ところで,mixiページ内の各記事はFacebookっぽく「イイネ!」「コメント」ができるんですが,そこでの「イイネ!」のアイコンがハートマークでした。一方,Facebookの「いいね!」といえば,親指を上げた「サムアップ(thumbs up)⁠アイコンがトレードマークのようになっています。相手に対して「いいね!」と言っている印象の強いサムアップに対し,ハートだと自分の好みで「イイネ!」と思ったというイメージが強いなと思いました。たかが小さなアイコンですが,イメージに与える影響は大きいんじゃないかと感じています。

わたしのまとめたmixiページについて簡単まとめという文書をEvernoteから共有しています。興味のある方はご一読を。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入