2009年のWebのトレンドと、2010年の傾向予測

2010-01-21

2009年のWebのトレンドと、2010年の傾向予測

　CSS Nite Vol.43「2009年のデザイントレンド総括」を聞きに行ってきました。今夜のはすごかったです。

http://cssnite.jp/ginza/vol43/

　出演は原一浩さんと矢野りんさん。オーディエンスもものすごい数。内容の濃い刺激的なお話で、とても勉強になりました。特に矢野さんのサンプルサイトの解説は、デザイナーの視点はやはり違う！とただただ驚嘆するばかり。同時にプロの世界はあまりに遠いなと打ちひしがれちゃったり…。でも心の奥底では、自分もそのレべルに少しでも近づきたいと闘志も湧いてきました！

　今回は、議事録を書かなきゃいけない打ち合わせさながらに、ノートを取りまくってきました。デジカメでスライドを撮影している方も沢山いましたが、自分は携帯しかなく、それはもう必死にｗ。

　テクニック的な部分でよくわかならい点も多かったので(フォトショでこういう加工をしてこうなった、とか)、大まかな内容の備忘録として書いておきます。誤解等もあるかもしれず、正確な内容は、後日公式サイトにスライドや音声がアップされるそうなので、そちらをご確認ください。

★トレンドとは…「時代に最適化されつつある現象である。」

プレイバック2009年

アイコンがリアル志向からピクトグラムへ
- 2007年　リアル志向アイコン
- 2008年　デフォルメされたキャッチーなアイコン
- 2009年　単一色　←作るのが楽。FacebookやTwitterのデザインの影響も(?)

見立てのデザイン
- エリア区切りもできている、風景的な背景。
  ←ディスプレイのインテリア化や横幅の広がりの影響。
  ←言葉を尽くさず興味を持ってもらうビジュアル志向

流行りの色…「青」
- 背景「白」のサイトが減った→薄いグレーだったり。

テクスチャ/背景やボタンの装飾…皮が流行った

巻き込みリボン
- メニューの後ろ側に巻き込むデザイン。
- W3Cサイトの「standards」部分も！

テキスト
- アンチエイリアス前提に。より大きく。
- アンチエイリアスで表示可能なOSのシェアはまだまだ低い。
- CSS3やJavaScriptによるドロップシャドウが増えている。
  →積極的に使える環境が整っている。

フォームは大きく見やすく美しく。
- さらにフォームに入れるものがアイコンで表示されるサイトも。
- Googleの検索フォームも大きくなった。

メインイメージがインタラクティブに
- クリックで左右にスクロールしていろんな画像を見せる、など。
- FlashでなくjQueryのライブラリの使用ケースが多い。

吹き出し表示を多用

小さな段組
- D&DEPARTMENTなど。日本と海外は使われ方がちょっと違う。

グローバル企業(Forbus Global 500)

白ベースに最低限の情報＆世界地図(2000年くらいから変わらない傾向)
背景全体に写真、半透明のボックスにテキスト　など。

<国内企業>

上場企業(4000くらい)でもちゃんとしているところとしていないところ(水産系・倉庫)の差が大きい
→営業チャンス
日本的Webデザイン…海外デザインと比べると特殊
- 日本語の下に英語のメニュー
- メニューや見出しに太い下線
- 空白じゃなく線でエリア区切り
- 隙間をガッチリ埋める
- サイトマップや検索フォームなどの位置が統一されてる
- Web2.0的デザインを取り入れつつ日本的になってる。
- 新着情報エリアが大きい

<自治体>

Webマスターと公共系制作会社の2系統。営業は難しいかも。
トレンドデザイン
- リキッド(100％)+3カラム…行田市
- 横幅800px以内
- 完成度の決め手はディティールの作り込み。
- ファーストビューに自治体の場所を表示。

2009年のデザイントレンド解体新書

Hull Digital Live http://www.hdlive09.co.uk/

制作者：branded07さん　http://www.branded07.com/

見立てのデザイン、大きなフォント、手描きの書体。
彩度と明度のコントロールがポイント。
ライトグレーの上に彩度の低い文字。画面全体が締まって見える
下の部分。青が入ったグレー。彩度が低いのでシックだけど読みやすい。
色相が同系で、派手な文字も悪目立ちしない。
彩度の高いものを細かく置いている。そのバランスが良い。

THE OSDN http://osdnetwork.org/

背景にアルミ質感…ノイズをちょっとだけプラス。
質感を入れた背景により、カットアウトした見出しが映えている。
青のリボンの部分は明度と彩度を上げてグレーとのコントラストをうまく出している。
細かい部分でのグラデーションやドロップシャドウがポイント。
サムネイルを色でプッシュ
←イメージや写真の紹介は、背景は灰色、無彩色が原則。
メインイメージの切り替え→jQueryライブラリを利用

D&DEPARTMENT…セレクトショップ http://www.d-department.com/jp/

狭い段の沢山あるレイアウト。
1ページの文字数、商品数は見掛けほど多くない。少ない情報をボリュームいっぱいに見やすく提供。
幅を広げると右にボックスがフロート←いろんなティスプレイに対応＆驚き提供
商品は背景を統一して撮影している→すっきりした外観に
写真以外彩度の強い色は不使用。
JavaScriptでのカラムの配置。

Goldman Sachs http://www2.goldmansachs.com/

写真メインのスクエアなレイアウト。
罫線など細かい部分の丁寧なデザインで綺麗に魅せている。
写真のクオリティにうっとりせず、文字レイアウトの力に注目。
見出しのさりげない処理
　行間の開け方、罫線の色の絶妙な薄さ
　付加情報はコントラストを下げて役割を変える
カラムのグループ化を線一本で。
写真を目立たせるという大前提でのバランス

行田市　2009年ベストビジュアルデザイン http://www.city.gyoda.lg.jp/

ナビゲーションを際立たせる小技
- 罫線を左右に引く(彩度のないもの)
- ブレットまでしっかり作っている。
同一色相に補色の基本カラースキームで統一(緑―赤・オレンジ)
イラストでアイキャッチになるメニュー(人生のタイムラインにも沿ってる)

2010はこうなる！

原さん　<海外>
- アイコン付フォーム増加。
- グレーアウトによる操作対象の明確化。
- リキッド型100％幅のセパレートを超える何か。視覚的新しさ。
- アプリケーション化したデザイン。メイン画像も使うもの、操作できるものに。
- サイトマップの決定版登場？
- クリック領域の拡大。タップしやすく。
- 文字のノングラフィック化(アンチエイリアス可も伴って)

矢野さん　<日本>
- 微調整しやすいデザイン。ちょこちょこ直しながら運用。足したり引いたりできるもの。
- A/Bテストなど運用しながらテスト、公開していくスタイル。
  　iGoogleのような、囲みを並べるレイアウト方式
- 短文化…言葉を尽くすよりビジュアルで見てわからせる
- 情報収集の多様化→機器に対応するようなレイアウト。
  　PCサイトもスマートフォンで見るとどうなるか
  　小さい画面を大きい画面にどう映すか、に考え方が変わる