2010年のWebデザインで押さえるべきトレンド7点

WebDesignerWallというサイトにおいて、2010年のWebデザイントレンド予測をまとめた記事 - Design Trends (Predictions) in 2010が公開された。2010年に流行するであろうWebデザインのトレンドが合計7点、豊富なサンプル画像と一緒に紹介されている。

紹介されているおもなトレンドは次のとおり。

セリフ体のフォント(Serif Fonts)

直近10年の間ではWebサイトの大部分でVerdanaかArialのサンセリフフォントが使用されていた。ディスプレイの技術革新とIE7以降でClearTypeがデフォルトになったことから、今後10年間でこの流れが変移していく可能性がある。

大きい見出し(Big Headings)

ヘッダデザインの一部として、サイズの大きい見出しを使う兆しがあるとのこと。

カスタムフォントの埋め込み(Custom Font Embedding)

Typekitでフリーのより良いクオリティのフォントが利用可能になり、今後はこのカスタムフォントの埋め込みが活発になるのではないかと予測している。残念ながら同Webサービスはまだ日本語フォントに対応していないため、国内Webサイト作成のトレンドになるかどうかは未知数といったところか。

テクスチャ背景(Texturized Background)

大きな背景画像をもちいたデザインは時代遅れとなり、かわりに繊細なテクスチャ(とくに軽いノイズが入ったもの)が用いられるようになった。これらの画像は自作するほか、各種配布サイトを利用するのも良いだろう。

ミニマリストとグリッドの併用(Minimalist & Grid)

必要最低限の配置しかおこなわないデザイン - ミニマリストと、グリッドはこれと言ってとくにあたらしいデザインではない。しかしながら、この2点を組み合わせたものは以前からポピュラーなもので、今年もその人気は続くのではないかと予測している。またWebDesignerWallサイト内の記事において、50のミニマルサイトをまとめたものが2009年2月に掲載されている。こちらも併せて参照されたい。

角丸やボーダーイメージといったCSS3の新機能 (CSS3 New Features)

いまのところCSS3をフルサポートしているWebブラウザは登場していない。しかしおおくのWebデザイナが次に挙げる新機能を実験的にもちいている。

  • 角丸
  • 複数の背景画像指定
  • マルチカラムレイアウト
  • ボーダーイメージ
  • アニメーション
  • ボックスシャドー
  • テキストシャドー
  • RGBA & 透過設定

角丸ボタンはニーズが多い一方で、画像の作成や文字位置の微調整など、意外に実装が面倒だったりする。CSS3を使えばborder-radiusプロパティを利用するだけでこの角丸が実現できるようになる。「CSSグラデーションを使ってクールなボタンをつくる方法」にてborder-radiusとグラデーションを使って簡単に綺麗な角丸ボタンを用意する方法を紹介しているので、興味がある方はこちらも参照されたい。

モバイルへの対応 (Mobile Design)

2007年にiPhoneがリリースされて以来、モバイルデザインは活発なものになってきている。iPhone以外にもCSS/JavaScriptをフルサポートするスマートフォンが今後もリリース/普及していくことで、モバイルに対応したWebデザインは外せない要素となるであろう。人気ソーシャルブックマークのはてなブックマークがiPhoneに対応したのは記憶にあたらしい。

iPhone版はてなブックマークのスクリーンショット

要注目はCSSにモバイル、カスタムフォント、そしてHTML5

同記事の最下段では、紹介した上記7点のうち、どのトレンドがホットになるかを予想する投票機能が設けられいる。15日(日本時間)執筆時点では「CSS New Features」「Mobile Design」「Custom Fonts」が高い投票率となっていた。

「Which of the following do you think will be hot in 2010?」より投票結果を引用。CSS New Featuresがもっとも高い投票率となっており、次点にMobile Design, Custom Fonts(@font-face)が挙がっている

今年中に正式仕様が勧告される予定となっているHTML5。また一部ではあるが、CSS3に対応しているWebブラウザも続々とリリースされてきている。これら新技術はゆくゆく制作者サイドの労力を減らすのと同時に、あたらしいWebデザインの流行を生み出す可能性がある。まだこれらの技術に目をとおしていないなら、まずはチェックしてみることをお勧めする。マイコミジャーナル内の記事でHTML5/CSS3/モバイルデザインのトレンドをチェック・応用できる記事をリストアップしたので、こちらもぜひ参考にしてほしい。

HTML5

CSS3

モバイル対応

Design Trends (Predictions) in 2010では締めくくりに「2010年はWebデザイナー/デベロッパにとって文字通りあたらしい冒険になるのではないか」とまとめている。