EC studio 企画デザインブログ

WebDesignerWallより、2010年のデザイントレンド予測の記事がありましたので、その中身を見ていきたいとおもいます。

「2010年のウェブデザインはより面白く、実験的なものが増える」とのこと。
CSS3やHTML5への注目が集まり、新しいビジュアル・機能を持ったウェブデザインを試しているサイトが増えてきています。
ビジュアルの傾向でいいますと、手書きスケッチ、大きな背景のサイトというのは減少傾向にあり、一方でセリフ書体のフォントを使ったデザインや、テクスチャーを使ったサイトが人気のようです。

またCSS3（と、実装してくれているブラウザ）のおかげで、角丸やRGBAプロパティを使った半透明表現、ドロップシャドウ効果などもたくさん簡単に使えるようになってきています。
そして特に海外では顕著ですが、スマートフォン向けのデザインを提供するサイトも増えてきています。

実際にそれらのトレンドに当てはまるサイトを紹介していきます。（一部）

セリフ書体フォントのデザイン

2000年～はVersanaやArialなど、サンセリフ書体のフォントデザインが多かったのですが、2010年からはセリフ書体が注目を浴びるでしょう。

The New York Times - Breaking News, World News & Multimedia
http://www.nytimes.com/

陳 Jon Tan
http://jontangerine.com/

Sushi & Robots, by Jina Bolton
http://sushiandrobots.com/

大きなヘッダー

大きなヘッダーを取り入れたサイトはここ数年増えてきていますが、さらに人気が出そうです。

N.Design Studio | Design Blog & Portfolio
http://www.ndesign-studio.com/

Carsonified presents The Future of Web Apps Conference Miami, Florida 2010
http://carsonified.com/

Web design and CSS training, workshops and DVDs for web designers | For A Beautiful Web
http://www.forabeautifulweb.com/

Webフォントを使用

CSS3のWebFont（@font-face ）を使うことで、閲覧環境のデバイスフォントではなく、サイト側で指定したフォントで文字を表現することができます。
Typekit、Font Squirrelなど無償・有償で提供するサイトも増えています。
ちなみに欧文フォントだけでなく、日本語フォントでもオープンソースで利用できるものが増えてきています。
自由に使えるオープンソースの日本語フォント - SourceForge.JP Magazine

Elliot Jay Stocks.
http://elliotjaystocks.com/

tap tap tap
http://www.taptaptap.com/

微妙なテクスチャの背景

大きな背景画像を使ったサイトは減少傾向にあり、それに変わって増えてきているのはあまり派手ではない、地味で微妙なテクスチャを背景画像に取り入れるサイトが増えました。模様は小さいノイズのようなものや、少しグランジっぽいもの（かすれたもの）が多いです。

iSaidWhat?!
http://www.tapparatus.com/isaidwhat/

Sibling Rivalry | A Speck Brothers Wine.
http://www.siblingrivalrywine.ca/

Analog
http://analog.coop/

ミニマル、グリッドなデザイン

ミニマル、というのが日本語的に表現が難しいですが、「小さな」デザインのサイトのことです。
この「小さい」というのは単純にサイト幅が狭いというだけでなく、色や過度な装飾は抑えたシンプルなデザインも含めるようです。
このミニマルと同様に、グリッドが計算されて整列されたデザイン、余白を生かしたデザインが増えています。
ミニマルとグリッドを合わせたデザインも多い傾向にあります。

FRKT
http://www.forrykt.com/

Heartworker
http://www.heartworker.com/

screen capture
http://www.wilsonminer.com/

CSS3を取り入れる

CSSはすべてのブラウザでサポートされていないですが、多くのウェブデザイナーが実験的に自分のサイトやクライアントのサイトに取り入れています。

CSS3 アニメーション

Google ChromeまたはSafari最新版で閲覧してください、右上の円形が動きます。
他のブラウザだと静止した丸というだけで、閲覧に支障はありません。
こうした遊びのような形で取り入れるのは面白いです。
http://neutroncreations.com/blog/

角丸とドロップシャドウ

角丸とドロップシャドウはCSS3の中でも頻用されるプロパティです。
Tap Tapas
http://www.taptapas.com/

CSS-Tricks
http://css-tricks.com/

テキストシャドウ

テキストにドロップシャドウの効果を与えます。
使われ方としてはその言葉のとおりテキストに影を落として立体的に浮かせる効果もありますが
影の角度や色を調整すれば、文字部分がへこんでいるような効果を出すことができます。
グラデーションなどと組み合わせるとよりキレイに見えるようになります。

tweetCC | Publish & license tweets with Creative Commons
http://www.tweetcc.com/

Adii Rockstar | Creator of Rockstar Awesomeness
http://adiirockstar.com/

半透明効果を使う

CSSにより対象の要素の透過度を調整できます。
RGBAプロパティまたはOpacityプロパティを使うとこの効果が表現できますが、OpacityよりもRGBAにより透明表現をするケースが多いです。
理由はOpacityの場合だと、指定した要素だけでなく、包括する子要素にも影響してしまうので、背景色だけを透過したい！という場合はRGBAを使うのが好ましいです。

モバイル向けデザイン

2007年にiPhoneが世の中に出てから、多くの人がモバイル向けデザインについての話題を取り上げました。現在ではiPhoneなどのスマートフォンはCSSやJavaScriptをサポートしているので、PC向けのデザインよりも未来のデザインを作ることができます。多くのサイトがこうしたスマートフォン向けのデザインを提供し始めています。
※iPhoneをお持ちの方は実際にiPhoneでアクセスすると良いでしょう。

Social Media News and Web Tips – Mashable – The Social Media Guide
http://mashable.com/

Hello | Erskine Design（モバイル版URL）
http://m.erskinedesign.com/

Nike Lab
http://www.nike.com/nikelab/

まとめ

2010年はCSS3やHTML5といった新技術を取り入れて新しい表現を追求していくWebデザイナーが多くいるようです。
CSS3を活用すれば、それ以前よりもHTMLのコード量も減ったり、効率的にコードもかけます。装飾表現の多くもCSSで済みますから、わざわざPhotoshopなどを立ち上げる必要などもなく、ワークフロー全体でみても効率が上がるのではと思います。
対応していないブラウザがあるから仕事でできない！という人は個人ブログなどででも、こうしたデザイントレンドや技術を取り入れていきましょう。

参照元記事：
Design Trends (Predictions) in 2010
http://www.webdesignerwall.com/trends/design-trends-predictions-in-2010/

関連した記事：

• 2009年デザイントレンド総括！CSS Nite in Ginza, Vol.43に行ってきました