週刊Webテク通信

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

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

おすすめ記事

記事・ニュース一覧