2009年の Web デザイントレンド

Smashing Magazine にて、今年 Web デザインのトレンドとなりそうな傾向をまとめた 「Web Design Trends For 2009」 という記事が上がっていましたのでご紹介。

Smashing Magazine にて、今年 Web デザインのトレンドとなりそうな傾向をまとめた 「Web Design Trends For 2009」 という記事が上がっていましたのでご紹介。

ちなみに、元記事は今年の 2回に分けての記事とのことでまずは今年トレンドになりそうな 10のデザイン傾向から。

Over the last months, we've analyzed numerous Web designs, observing emerging trends and weighing the merits of numerous design decisions and coding solutions. In this post, we present Web design trends for 2009: recent developments, new design elements and new graphic approaches. We also discuss situations in which these trends can be used and present some beautiful examples. Did you miss any recent development in this overview? Let us know in the comments!

Web Design Trends For 2009 : Smashing Magazine

挙げられているのは下記の 10個。それぞれ日本語にしていますが、直訳ではなくわかりやすい言葉に置き換えてます。

  1. Letterpress : デボス加工した文字
  2. Rich user interfaces : リッチユーザーインターフェイス
  3. PNG transparency : 透過PNG
  4. Big typography : でか文字
  5. Font replacement (sIFR, etc.) : Flash オブジェクト等に置き換えたテキスト(sIFR 等)
  6. Modal boxes : JavaScript によるポップアップ (Lightbox等)
  7. Media blocks : 動画による情報配信
  8. The magazine look : 印刷メディアのデザインを応用
  9. Carousels (slideshows) : スライドショー
  10. Introduction blocks : サイトの説明等をわかりやすく掲載

それぞれの詳しい説明やサンプルとなるサイトは元記事で紹介されていますのでそちらをご覧ください。以下はそれぞれの項目に関して個人的な見解とか。

1. Letterpress : デボス加工した文字

デボス加工、つまり凹加工されたようなテキストの処理ですね。なんていうか、「立体感」 みたいのがトレンドになるのでしょうか。

2. Rich user interfaces : リッチユーザーインターフェイス

ここ数年、JavaScript や CSS を活用したリッチなインターフェイスが当たり前になってきましたが、これは今年も続く傾向になるんでしょうね。

3. PNG transparency : 透過PNG

これが使えるとデザインの幅も広がるし、なにより複雑なデザインをより楽に作れるようになるんですけどね。

4. Big typography : でか文字

とにかくでかい文字。

5. Font replacement (sIFR, etc.) : Flash オブジェクト等に置き換えたテキスト(sIFR など)

sIFR 等を利用してテキストを Flash オブジェクトに置き換えることで、ユーザーの環境に依存せず選択可能な状態でフォントを埋め込んだり、アンチエイリアスされたテキストを表示したりする手法ですね。海外では結構普通に使われていますが、やはり日本語の壁が結構高いのが問題。

6. Modal boxes : JavaScript によるポップアップ (Lightbox等)

画像の拡大とか、今や定番の手法ですね。

7. Media blocks : 動画による情報配信

1000文字のテキストよりも 1つの動画の方がわかりやすく説得力があるってこともありますね。アクセシビリティ的な考慮が必要ですが、1つの情報伝達手段として動画というのは利用価値があると思います。

8. The magazine look : 印刷メディアのデザインを応用

DTP の知識は Web デザインでも活かせますし、Web デザインしかやらないという人も知ってた方がいい知識ですね。

9. Carousels (sh3deshows) : スライドショー

スライドショーっぽいインターフェイス。画像などを効果的に見せることができますね。

10. Introduction blocks : サイトの説明等をわかりやすく掲載

Web サイトの上部、目立つ部分にサイトの説明等を掲載し、訪問者にサイトの内容を素早く理解してもらう手法。Blog 等ではよくやりますね。

さて、どうでしょう。デザインに取り入れられそうな要素はあったでしょうか。うちの Blog もそろそろリニューアルしましょうかね。

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?