週刊Webテク通信

2010年5月第3週号 1位は,2010年のWebデザインのトレンド,気になるネタは,Google TV 発表,秋にソニーとLogitechから発売

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

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

1. Web Design Trends for 2010 | Webdesigner Depothttp://www.webdesignerdepot.com/2010/05/web-design-trends-for-2010/

いいデザインは流行に影響されないのはもちろんですが,Webデザインにおける流行は技術の進歩による影響を受けています。この記事では,これまでのWebデザインの限界を超えていく,進化へとつながるトレンドを紹介しています。

そのトレンドは,以下の4つに分類して紹介されています。

1.印刷物のデザインにより近づいたもの

モニタの解像度が高くなったことやスムージング技術が向上したなどの理由から,セリフフォント,大きな画像,ダイヤグラム/インフォグラフィックを使った,より印刷物に近いデザインが増えています。

2.シンプルさを追求したもの

要素を絞ったシンプルなデザインも流行しています。1ページで完結したシンプルな構造のサイトも,デザイナーのポートフォリオなどでよく目にします。

3.CSS3のテクニックを使ったもの

プログレッシブエンハンスド(どんなブラウザでも正しく情報にアクセスできるようにし,最新ブラウザではよりリッチな見せ方や操作性を実現させる)の考え方を取り入れて,CSS3のテクニックをうまく利用したサイトが増えています。

4.より独創性を高めたもの

独創的なデザインはソーシャルメディアでどんどん広まる時代となっています。そのことが,Webデザインの全体の質を高め,発展を促進している面もあるようです。

図1 2010年のWebデザインのトレンド

図1 2010年のWebデザインのトレンド

2. Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation - Smashing Magazinehttp://www.smashingmagazine.com/2010/05/20/web-design-trends-2010-real-life-metaphors-and-css3-adaptation/

この記事も2010年のWebデザインのトレンドに関するものです。見た目のデザインよりも,サイトの操作方法やテクニック面に注目した内容です。

以下の4つに分類して紹介しています。1位で紹介した記事と直接かぶっているものはCSS3についての項目です。2010年はCSS3元年として将来振り返られるのかもしれません。

  1. 現実のメタファー(比喩)⁠複雑さを表に出さない
  2. 巧妙なインタラクティブ性
  3. 状況に合わせて出現するナビゲーション
  4. CSS3への対応

図2 こちらも2010年のWebデザインのトレンド

図2 こちらも2010年のWebデザインのトレンド

3. Huge Infographics Design Resources: Overview, Principles, Tips and Examples | Onextrapixel - Showcasing Web Treats Without A Hitchhttp://www.onextrapixel.com/2010/05/21/huge-infographics-design-resources-overview-principles-tips-and-examples/

インフォグラフィックに関する情報源をまとめた記事です。インフォグラフィック制作のためのテクニックや優れた作例が掲載されています。

グラフを作るためのツールやJavaScriptライブラリの紹介もあります。

図3 インフォグラフィックに関するまとめ記事

図3 インフォグラフィックに関するまとめ記事

4. 20 Coolest Web Designs From the Far East | Richworkshttp://richworks.in/2010/05/20-coolest-web-designs-from-the-far-east/

日本,中国,韓国の優れたWebデザインを集めたギャラリーです。

全面Flashなサイトばかりなのは,日本語/中国語/ハングルできれいなフォントにこだわると,Flashに行き着いてしまうからかもしれません。

図4 極東のかっこいいWebデザインいろいろ

図4 極東のかっこいいWebデザインいろいろ

5. Wabi Sabi: Natural Simplicity In Web Design | Van SEO Designhttp://www.vanseodesign.com/web-design/wabi-sabi-web-design/

「わび・さび」の要素を取り入れたWebデザインに関する記事です。

自然,シンプル,静けさ,非対称,不規則などのわび・さびデザインのポイントが紹介されています。

千利休の話から始まるWebデザイン記事というのも面白いですよね。

図5 Webデザインにおける,わび・さび

図5 Webデザインにおける,わび・さび

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

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

Google Font API - Google Codehttp://code.google.com/intl/ja/apis/webfonts/

3週連続でウェブフォントサービスの紹介になってしまいましたが,今週はGoogleからラボ機能として公開されて話題となっている「Google Font API」を紹介します。

WebサービスではなくAPIの提供ということですが,Googleがホスティングしているフォントを無料で利用することができます。

以前紹介したデコもじFonts.com Web Fontsは,ブラウザ上の管理画面で設定を行いJavaScriptで読み込ませる方式でしたが,Google Font APIは単純にCSSで設定します。Google Font APIが生成するCSSファイルを読み込ませ,自前のCSSファイルにfont-familyを指定するだけです。

対応ブラウザにはIE 6以上も含まれています。今のところiPhone,iPad,Androidには対応していません。

日本語フォントが登場すると,日本でも一気に普及しそうです。フォントが充実してくると,有料のウェブフォントサービスにとっては脅威となりそうですね。

設定の仕方や詳細については,以下の記事も参考になると思います。

図6 Google codeで公開中のGoogle Font API

図6 Google codeで公開中のGoogle Font API

今週の気になるWebネタ

Google TV 発表,秋にソニーとLogitechから発売http://japanese.engadget.com/2010/05/20/google-tv-logitech/

Googleから,ネット接続テレビのプラットフォーム「Google TV」が発表されました。日本では,⁠ソニーとグーグルが提携」というところが注目されたニュースとなっていますね。

テレビに接続してインターネットが楽しめる端末と言えば,その昔WebTV(ウェブ・ティービー)というのがありました。ベンチャー企業が開発したものだったのですが,すぐにマイクロソフトが買収しています。ソニーは,このWebTVの端末も作っていました。モデムと電話線を使いダイヤルアップでネット接続していた時代の話です。

リビング端末として,アップルのiPadとGoogle TVがライバルになるという見方もありますね。アップルには「Apple TV」という端末もあるのですが,こちらは忘れられ気味な存在のようです。Apple TVにもiPhone OSを載せてアプリが動かせるようになると面白いと思うのですが,どうなんでしょう。

Google TVではAndroidアプリも使えるので,ゲーム機代わりにもなるということですよね。携帯ゲーム機としてiPhone/iPod touchが台頭しているように,家庭用ゲーム機としてGoogle TVの進入を許すと,日本の誇るゲーム機メーカーたちもまずいんじゃないでしょうか。ゲーム機メーカーでもあるソニーはどう考えてるんでしょうね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入