本日は木曜日に行ったCSSNiteのメモ書きを掲載します。
CSS Nite in Ginza, Vol.43
日時 2010年1月21日(木)19:00〜20:00
会場 アップルストア銀座 3Fシアター
HP http://cssnite.jp/ginza/vol43/
twitterのハッシュタグ #cssniteginza43
テーマ
2009年のデザイントレンド総括
トレンドをチェックして2010年のデザイン業務に取り込め!
まずは2009年のWEBデザインの流行の振り返り。
・アイコンはリアルからピクトグラム化へ
・背景をいっぱいに使った見立てのデザイン
・巻き込みリボン
・フォームは大きく美しく。ビッグインプットが多彩に。
・吹き出し
・流行りの色は青だった。真っ白を使うことが減少。
・テクスチャはステッチ、皮、紙が流行。
・テキストは大きく。CSS3によるドロップシャドウ。
・メインイメージはJavascript・jQueryでインタラクティブに。
現在の企業と自治体のサイト。
グローバル企業のサイト
・きちんとしているところとしていないところの差が激しく。
(しっかりしていないところは
・2000年くらいに行われていたデザイン。
・白ベースに最低限の情報。
・営業しやすい。今すぐ
自治体のサイト
・リキッドレイアウト+3カラム
・800px以内
・ファーストビューに場所を表示(北海道に多かったとのこと)
・WEBマスターの手作りだったり、
公共のWEB制作会社が作成しているため営業しにくいらしい。
ここから先は実際のサイトにクローズアップ。
サムネイルをクリックするとすこし大きめの画像が出てきますが、
実際のサイトに行ってみたほうがいいはず。
○Hull Digital Live http://www.hdlive09.co.uk/
・見立てのサイト
・彩度/明度のコントロールが良い
・背景を白に近いグレーにしていてロゴからも手作りっぽさが出している
・彩度を抑えて、青をひき立てている
・フッターにも青が入ったグレー
・スタイリッシュさの保持
○THE OSDN http://osdnetwork.org/
・アルミの質感はノイズがポイント
・色使い(青)で小道具を際立たせる
・サムネイルで色をプッシュ
(画像より背景などを目立たせてはいけない)
○D&DEPARTMENT http://www.d-department.com/jp/
・よく見ると文字数・情報数が少ない
・解像度の高いパソコンで幅を広げるとボックスが右にフロート
・画像の背景の色が白からグレーと統一されている
・画像以外に彩度の強い色を不使用
○Goldman Sachs http://www2.goldmansachs.com/japan/
・写真メインのスクエアなレイアウト
・見出しのさりげない処理(罫線&文字色)
・カラムを罫線だけでグループ化するテクニック
・写真を目立たせるためのデザイン
○行田市 http://www.city.gyoda.lg.jp/
・ナビゲーションを際立たせる小技
(グルーバルナビゲーションの下に罫線が!)
・同一色相に補色の基本色彩
・アイキャッチになるメニュー
(『妊娠・出産→・・・→ご不幸』とタイムラインになっている)
2009年を振り返ったところで2010年の流行を予想!
・アイコンつきフォームの普及
-グレーアウトにより操作対象の明確化
・リキッド型(100%幅)のセパレートを超える何か
-視覚的に飽きられないデザイン
・アプリケーション化したデザインへ
-サイトマップの決定版登場?
・クリック領域の拡大+文字のノングラフィック化
・微調節しやすいデザイン
・ボックスを並べたレイアウト
-ボックスが並べるスタイルは文字情報が削られる。
-原稿から文字が減ることに繋がる。
・スマートフォンなど小さいサイズのディスプレーに最適化できるレイアウト
・右上にページの拡大縮小
あと隅っこのほうにメモをしていたことですが、
日本のサイトは特殊らしく、明確な線で区切り、
構造が似ていて間はあまり空けないらしいです。
メモ書き以上。
初めてCSSNiteに行きましたがとても面白かったです!
家に帰ったらすぐ真似したくなることばっかりでした。
2009年の流行すら知らなかったのに、
2010年の流行に乗ろうと思ってしまいました(^_^;)
自分のWEBサイト製作に生かそう!
今日はここまで。

