EC studio EC studio デザインブログ

2010年1月21日に開催されました、
CSS Nite in Ginza, Vol.43に行ってきました。

今回のテーマは
「2009年のデザイントレンド総括?トレンドをチェックして
2010年のデザイン業務に取り込め!」というテーマで、
原 一浩(karadesign/fxb)さん、矢野りんさんによるトークセッションでした。

セッションの内容は、下記のような感じです。
・2009年のデザイントレンドを実際のサイトを用いて紹介
・矢野りんさんによる、デザイン解説を交えての紹介
・2010年のデザイントレンド大予想!

まず、お二人の自己紹介から始まり、「トレンドとはどういうことか?」という
話になったのですが、ここで原さんが考える「トレンド」という言葉の意味が
紹介されました。

“トレンドとは最先端ではない時代に最適化されつつある現象である”

この言葉はすごく納得の行く言葉で、確かにトレンドと言うのは、
最先端を追いかけるということではなく、その時代にあったデザインを
みんなが選択して使うことで発生する現象のことなんだ。
というのがすっと頭の中に入ってきました。

前置きが長くなりましたが、ここから本題の紹介に入りたいと思います。

2009年のデザイントレンド(海外)

■アイコンのシンプル化
100125_01
今まではMac OS のアイコンのようなリアルなものが主流だったが、
最近は、ピクトグラム化し、単一色の物が増えてきている。

[参考サイト]
MUTANT LABS
Eastern Ranges
Mochimedia

■見立てのデザイン
100125_02
見立てのデザインとは、背景を風景などに見立てたデザインのこと。
現在は増加傾向にあるので、見立てのデザインにチャレンジするのであれば
今後1~2年くらいは大丈夫だろうということです。

このデザインが流行った背景には、ディスプレイが大きくなり、
背景として見せる領域が大きくなったことも関係しているのではないか、
ということでした。

[参考サイト]
BLOSSOMES VILLAGE RESORT
Hull Digital Live hd
Blue Acorn

■流行りの色は青
100125_03
様々なサイトを見ていると、青を基調色としたサイトが多く、
TwitterやFacebookといったサイトの影響も大きいのでは
というお話が出ていました。

[参考サイト]
Mobile My Site
Oyster
Unuidesign

■テクスチャ
100125_04
テクスチャに使用する素材は、ステッチ、皮、紙などを
使用したサイトが多く見られるようです。

[参考サイト]
Mark Hadley
Ulredesign
Daniel Marino

■巻き込みリボン
100125_05
見出しのデザインなど、背景に巻き込み立体的に見せているサイトが多く
「W3C」のサイトもこのデザインを採用しており、
「今後のデザインの標準になっていくのでは!?」との
大胆予想も飛び出しました(笑)

[参考サイト]
CuisineSaine
Open Source Design Network
World Wide Web Consortium

■テキストはシステムのアンチエイリアス前提
100125_06
海外のサイトはテキストはより大きくなり、
システムフォントを使用し、アンチエイリアスをかけた
サイトが多くなっているとのことでした。

ただし、アンチエイリアスで表示可能な
OSのシェアの普及が少ないのと、
日本語のシステムフォントで表示した場合も、
見栄えがあまり良くないので、日本での実用は
まだ難しそうとのことです。

[参考サイト]
BIG SPACESHIP
Boag World
Pw Studio

■フォームは大きく、見やすく、美しく
100125_07
フォームのインプット部分は、大きくすることで、
ユーザーは使いやすく、見やすくなり、
またデザインする側も、フォームが大きくなったことで、
アイコンを表示させるなどより多彩なデザインが
出来るようになりました。

[参考サイト]
Tea Round
CULINAR
Google

■メインイメージはインタラクティブに
100125_08
ペラペラとページがめくれるような動きのものが多くなっています。
また、これらはFlashで開発されているのではなく、jQueryのライブラリを
使って開発されています。

[参考サイト]
THINGS THAT ARE BROWN
Point Zero
ROBERT ALAN

■吹き出し表現
100125_09
ビジュアルの要素として、吹き出しを使用しているサイトも
多く見られます。こちらもTwitterの影響もあるのではないかという
お話をされていました。

[参考サイト]
Catholic Chaplaincy
Evan Bowers Design
F91W

■小さな段組
100125_10
小さなボックスで区切られたレイアウトです。
ボックスで区切られているので、意外と入る情報は少なく
コピー量を極力減らすなどバランスも必要になります。

[参考サイト]
D&DEPARTMENT PROJECT
CreativeDepart
Reform&Revolution

その他、グローバル企業や、上場企業のサイトデザイン(国内)の
傾向などの紹介も有りましたが、今回はデザイントレンドの紹介ということで、
あえてここでの紹介はやめておきます。

また、このようにデザインを分析するために原さんは
独自で開発した「Vaqum」というツールを使いサイトの
キャプチャを取り分析しているようです。

昨年キャプチャしたサイトの数は約19,000サイト!
サイトを見て、分析している量が全然違います。

改めて、いろんなサイトを見て分析することは
重要なことだなと思いました。

2010年のデザイントレンド大予想

■原さん予想
・アイコン付きフォームの普及
・グレーアウトにより操作対象の明確化
・リキッド型(100%幅)のセパレートを超える何か
・アプリケーション化したデザイン
・クリック領域の拡大、文字のノングラフィック化

■矢野さん予想
・微調整しやすいデザイン
・ABテストなど、運用しながら微調整を繰り返す公開方法
・ボックスを並べたレイアウト
・ボックスを並べたレイアウトは文字情報が削られ、文章が減少する
・スマートフォンなどの小さいサイズのディスプレーに最適化されたレイアウト

以上が、お二人の2010年のデザイントレンド予想になります。
曖昧なものもありますが、今年はどのようなトレンドが生まれるのか楽しみですね。

今回のセッションのスライドと音声は下記よりダウンロード出来ます。
CSS Nite in Ginza, Vol.43フォローアップ&メッセージ


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.