2010年1月21日、アップルストア銀座でCSS Nite in Ginza, Vol.43を開催し、160名を超える方にご参加いただきました。
『2009年のデザイントレンド総括 ?トレンドをチェックして2010年のデザイン業務に取り込め！』と題して、原 一浩（karadesign/fxb）さん、矢野りんさんのお二人にお話しいただきました。
原さんには、2009年12月のCSS Nite in Ginza, Vol.42（Shift 3）にてもデザイントレンドをダイジェスト版としてお話しいただきましたが、今回はその増強版。さらに、矢野りんさんとの掛け合いやロジックな解説も加わりに、非常に濃い回でした。
セッションのスライド、音声は、追ってCSS Nite公式サイト（新着エントリー）にて公開いたします。RSSを購読されることをオススメします。
▲撮影：飯田昌之
矢野りんさんに興味を持たれ方は『伝わるコンテンツのための理論と実践 WEBデザインメソッド』をチェックしてみてください。
- ものづくりにっぽん: 「WEBデザインメソッド 伝わるコンテンツのための理論と実践」刊行記念イベント
- [本] WEBデザインメソッド --伝わるコンテンツのための理論と実践 ／矢野りん 著｜ワークスコーポレーション
次のブログで取り上げていただきました。ありがとうございます。壮大なレポートである必要はありませんので、ぜひ、ブログ/mixi日記／twitterなどで取り上げていただければ幸いです。
- CSS Nite in Ginza, Vol.43（デザイントレンド） - Mac,DTP et etc....
- 2009年のデザイントレンド総括「CSS Nite in Ginza, Vol.43」行ってきた: Miklog
- 2009年のWebのトレンドと、2010年の傾向予測 - KA-Channel
- 2009年のデザイントレンド総括「CSS Nite in Ginza, Vol.43」: ◆Webデザイン・制作: Webデザイナー's ブログ[at 千葉]
- 早起きできるかな: css nite vol.43に行ってきました！
- syのあらかた真面目なブログ: 071 CSSNite in Ginza Vol.43のまとめ
- イラレラボ illustrator-labo - CSS Nite in Ginza Vol.43 に参加してきました。
- 2009年デザイントレンド総括！CSS Nite in Ginza, Vol.43に行ってきました - EC studio デザインブログ
- CSS Nite in Ginza, Vol.43｜Positive Life － 「伝える」 webデザイナーを目指す夢日記－
 | karad | 懇親会では、興味がある人がいれば、どういう風にクロールしキャプチャしているかの解説も出来ればと思いますです | 2010-01-21 14:07:34 |
 | route5 | 今日参加するイベント→CSS Nite in Ginza, Vol.43 2009年のデザイントレンド総括／ iPhoneでTUDAり？どうしようかな...。 http://tinyurl.com/yge6898 | 2010-01-21 14:29:06 |
 | tomotana | 到着。 | 2010-01-21 18:51:21 |
 | hmiyazaki | CSSniteはいつも別のイベントとぶつかる。いきたいけど僕は今白山の東洋大学 | 2010-01-21 18:55:07 |
| route5 | 椅子すわれた。 | 2010-01-21 18:56:16 |
 | crema | #cssniteginza43 はじまりましたー。今後 @takazodo さんと @msng さんが出されるのですなー。楽しみだ！ | 2010-01-21 19:02:59 |
 | edom18 | はじまったー | 2010-01-21 19:03:39 |
| tomotana | 今後の予定 3/18 CSS3 , 4/15 Webデザイナーの未来 , 5/20 クリエイティブ・コモンズと著作権,6/17 レベニューシェアという報酬,7/15 パジャログLIVE | 2010-01-21 19:04:07 |
| route5 | ゆるくつだろうと思う。 | 2010-01-21 19:07:17 |
 | NoDanceNoLife | #cssniteginza43 矢野りんさんのぼうやが来てるー | 2010-01-21 19:09:48 |
| tomotana | トレンドとは最先端ではない、時代に最適化されつつある現象である。(原 一浩) | 2010-01-21 19:12:16 |
| tomotana | Vaqumeはサイトだと思っていました | 2010-01-21 19:12:58 |
| crema | #cssniteginza43 @karad さんのデザイン収集ツールは、私が世の中で1番見たいもののひとつです！ | 2010-01-21 19:13:37 |
| route5 | #cssniteginza43 アイコンはピクトグラム化し、単一色へ | 2010-01-21 19:15:34 |
| crema | #cssniteginza43 2009年のデザイントレンド。アイコンはピクトグラム化し、単一色に。 | 2010-01-21 19:15:39 |
| tomotana | ディスプレイデザインのサイズが大きくなたのが理由(見立てのデザイン) | 2010-01-21 19:15:50 |
| tomotana | うちのデザイナが見立てやってた。 | 2010-01-21 19:16:06 |
| crema | #cssniteginza43 見立てのデザインは更に増加傾向に。 | 2010-01-21 19:16:30 |
 | yukiomitsuki | 横幅サイズが広がって背景が景色が多くなった。 | 2010-01-21 19:16:59 |
| crema | #cssniteginza43 圧倒的に字が少なくなってきている。 | 2010-01-21 19:17:07 |
| crema | #cssniteginza43 流行りの色は、青。 | 2010-01-21 19:17:31 |
| tomotana | 見立てはワイドでつくるとかっこいいですね | 2010-01-21 19:17:33 |
| tomotana | 流行りの色、青 Twitter FaceBookの影響？ | 2010-01-21 19:18:38 |
 | yng13 | 今年の流行色は青 | 2010-01-21 19:18:55 |
| crema | #cssniteginza43 テクスチャはステッチ、皮、紙が流行。 | 2010-01-21 19:19:05 |
| crema | #cssniteginza43 よりモノっぽい感じに。 | 2010-01-21 19:19:30 |
| tomotana | 巻き込みリボン、ごめんなさい明日のデザインプレゼンで使います。 | 2010-01-21 19:20:12 |
| crema | #cssniteginza43 巻き込みリボンの流行。（W3Cも！） | 2010-01-21 19:21:11 |
| route5 | #cssniteginza43 巻き込みリボンがWebでトレンドだって。こう見ると、何か紙媒体のエディトリアルでつかう小物みたいだね。 | 2010-01-21 19:21:33 |
| crema | #cssniteginza43 テキストはより大きく。 | 2010-01-21 19:21:42 |
| crema | #cssniteginza43 アンチエイリアスで表示可能なOSが増えると、より文字サイズを大きくできるのでは？ | 2010-01-21 19:23:57 |
| route5 | #cssniteginza43 CSSによるドロップシャドウ。ブラウザによる。 | 2010-01-21 19:24:30 |
| crema | #cssniteginza43 CSSによるドロップシャドウ。 | 2010-01-21 19:24:37 |
| crema | #cssniteginza43 ビッグインプットはより多彩に。 | 2010-01-21 19:25:22 |
| crema | #cssniteginza43 メインイメージはインタラクティブに。 | 2010-01-21 19:26:36 |
| route5 | #cssniteginza43 ビッグインプットはより多彩に。記入欄のなかに、記入項目以外にアイコン等 | 2010-01-21 19:26:49 |
| crema | #cssniteginza43 Flashではなく、jQueryで見せることが増えた。 | 2010-01-21 19:27:54 |
| crema | #cssniteginza43 ビジュアル要素に吹き出しの多用。 | 2010-01-21 19:28:30 |
| crema | #cssniteginza43 小さな段組。 | 2010-01-21 19:28:55 |
| route5 | #cssniteginza43 メインイメージはよりインターラクティブに。Javaスクリプトでページめくるとか。ふらっしゅいらないね、みたいな。 | 2010-01-21 19:29:00 |
| tomotana | アクセシビリティサイトを作ると白ベース以外になにを持っていくか難しいですね 、勉強・勉強 | 2010-01-21 19:30:26 |
| crema | #cssniteginza43 Forbus Global 500に出ているグローバル企業のデザインは、白ベースに最低限の情報＋世界地図。 | 2010-01-21 19:30:54 |
| crema | #cssniteginza43 大きな写真をバックにグリッドレイアウト。 | 2010-01-21 19:31:27 |
| crema | #cssniteginza43 日本的Webデザイン。太い下線。余白ではなく線でエリアを区切る。余白狭い。新着情報の欄が大きい。 | 2010-01-21 19:34:45 |
 | zeitkazz | 的を射てますね。 RT @crema 日本的Webデザイン。太い下線。余白ではなく線でエリアを区切る。余白狭い。新着情報の欄が大きい。 | 2010-01-21 19:36:03 |
| crema | #cssniteginza43 自治体サイト。Webマスターによる手作りか公共系Web制作会社のサイト。リキッドレイアウトか、横幅800px以内。自分の自治体がどこにあるか、場所を提示していることが多い。 | 2010-01-21 19:37:38 |
 | akrymmt | ここだけ聞きたい(^^; RT @crema: 自治体サイト。Webマスターによる手作りか公共系Web制作会社のサイト。リキッドレイアウトか、横幅800px以内。自分の自治体がどこにあるか、場所を提示していることが多い。 | 2010-01-21 19:40:29 |
| crema | #cssniteginza43 彩度と明度のコントロール。ライトグレーの上に濃いグレー乗せるとか。乗算かけた感じ。彩度低めのところに、目立たせたいところだけ彩度高い色をいれている。 | 2010-01-21 19:40:34 |
| crema | #cssniteginza43 読みやすい文字。システムフォントを使い、letter-spacing（綴りあってる？）を詰め気味に。 | 2010-01-21 19:43:14 |
| crema | #cssniteginza43 アルミの質感はノイズがポイント。 | 2010-01-21 19:44:20 |
| crema | #cssniteginza43 背景にテクスチャを入れた上に、カットアウトした文字を乗せて、質感アップ。 | 2010-01-21 19:46:11 |
 | kawacoco | ドロップシャドウを使い分ける。微妙なグラデーション、細かい仕事 | 2010-01-21 19:47:53 |
| crema | #cssniteginza43 見出しの色が寒色だと後退気味に見えるので、多少彩度高くても、サムネイルの色とコンフリクトしないのでは。色味のあるものをサムネイルの周りにおかない。 | 2010-01-21 19:49:00 |
| crema | #cssniteginza43 jQueryの流行により、メインイメージの差し替えがおおいのでは。 | 2010-01-21 19:50:17 |
| tomotana | #cssniteginza43 http://www.d-department.com/jp/ | 2010-01-21 19:50:29 |
| crema | #cssniteginza43 細かい段組のサイトの話。D&DEPARTMENTのサイトとか。小さな箱に区切ると、情報が少なくてもスカスカに見えにくい。 | 2010-01-21 19:52:17 |
 | EGooooN | RT @route5: 巻き込みリボンがWebでトレンドだって。こう見ると、何か紙媒体のエディトリアルでつかう小物みたいだね。 | 2010-01-21 19:54:50 |
| EGooooN | RT @route5: ビッグインプットはより多彩に。記入欄のなかに、記入項目以外にアイコン等 | 2010-01-21 19:55:35 |
| crema | #cssniteginza43 商品写真をとるときから、写真の背景色を無彩色などに統一。写真以外の要素に彩度の高い色を使わない。 | 2010-01-21 19:55:38 |
 | globalwe6 | #cssniteginza43 原さんの年間19000キャプチャースゴイな? | 2010-01-21 19:56:13 |
| EGooooN | RT @crema: 自治体サイト。Webマスターによる手作りか公共系Web制作会社のサイト。リキッドレイアウトか、横幅800px以内。自分の自治体がどこにあるか、場所を提示していることが多い。 | 2010-01-21 19:57:25 |
| EGooooN | RT @crema: アルミの質感はノイズがポイント。 | 2010-01-21 19:57:51 |
| EGooooN | RT @crema: 背景にテクスチャを入れた上に、カットアウトした文字を乗せて、質感アップ。 | 2010-01-21 19:59:15 |
| EGooooN | RT @kawacoco: ドロップシャドウを使い分ける。微妙なグラデーション、細かい仕事 | 2010-01-21 19:59:17 |
| EGooooN | RT @crema: 細かい段組のサイトの話。D&DEPARTMENTのサイトとか。小さな箱に区切ると、情報が少なくてもスカスカに見えにくい。 | 2010-01-21 19:59:24 |
| crema | #cssniteginza43 Goldman Sacks のサイトの話。写真メインのスクエアなレイアウト。見出しのさりげない処理。見出しの文字サイズとウエイトが本文と同じなのだけれど、罫線の色とあいまってスタイリッシュに。 | 2010-01-21 19:59:42 |
| route5 | #cssniteginza43 ゴールドマンサックスのサイト参照 | 2010-01-21 20:00:02 |
| crema | #cssniteginza43 カラムをグループ化するテク。 | 2010-01-21 20:01:10 |
| globalwe6 | #cssniteginza43 GSのサイトカッコイイな！ | 2010-01-21 20:02:03 |
| EGooooN | RT @crema: Goldman Sacks のサイトの話。写真メインのスクエアなレイアウト。見出しのさりげない処理。見出しの文字サイズとウエイトが本文と同じなのだけれど、罫線の色とあいまってスタイリッシュに。 | 2010-01-21 20:02:07 |
| route5 | #cssniteginza43 ゴールドマンサックスのサイト。カラムと見出しの使い方。やはり整理されたエディトリアルに私は見える。何でも黄金律はそんざいするか。 | 2010-01-21 20:03:51 |
| crema | #cssniteginza43 行田市のサイトの話。2009年の自治体サイトの中で、ビジュアル的に一番なのでは。ナビゲーションを目立たせる小技。同一色相に補色の基本色相。 | 2010-01-21 20:06:04 |
| globalwe6 | #cssniteginza43 行田市のサイトも帰ったらチェックしよう | 2010-01-21 20:06:33 |
| crema | #cssniteginza43 アイキャッチになるメニュー。イラスト使用。生まれたときから死ぬまでタイムラインになっている。 | 2010-01-21 20:07:54 |
| tomotana | #cssniteginza43 行田市 便利ガイドがTLになっている！ これはいいね。 | 2010-01-21 20:07:57 |
| globalwe6 | #cssniteginza43 ここから2010のトレンドだ | 2010-01-21 20:08:08 |
| EGooooN | RT @crema: 行田市のサイトの話。2009年の自治体サイトの中で、ビジュアル的に一番なのでは。ナビゲーションを目立たせる小技。同一色相に補色の基本色相。 | 2010-01-21 20:09:54 |
| crema | #cssniteginza43 2010年の予想。アイコンつきフォームの普及。グレーアウトにより操作対象の明確化がすすむ。（モーダルってことかな） | 2010-01-21 20:09:58 |
| tomotana | #cssniteginza43 公共系Web屋の私としても大変勉強になりました。 | 2010-01-21 20:10:57 |
| tomotana | #cssniteginza43 サイトマップの決定版登場。 | 2010-01-21 20:11:17 |
| route5 | #cssniteginza43 原さんの予想。アイコンつきフォームの普及。グレーアウトによる操作対象の明確化がすすむ。リキッド型のセバレートを超えるなにか。 | 2010-01-21 20:11:24 |
| crema | #cssniteginza43 リキッド型のセパレートを超えるなにか。アプリケーション化したデザインへ。サイトマップの決定版登場。クリック領域の拡大。文字のノングラフィック化。 | 2010-01-21 20:11:55 |
| globalwe6 | #cssniteginza43 微調整か?。なるほど！ | 2010-01-21 20:13:35 |
| akrymmt | い...行田市 RT @crema: 行田市のサイトの話。2009年の自治体サイトの中で、ビジュアル的に一番なのでは。ナビゲーションを目立たせる小技。同一色相に補色の基本色相。 | 2010-01-21 20:13:40 |
| EGooooN | RT @route5: 原さんの予想。アイコンつきフォームの普及。グレーアウトによる操作対象の明確化がすすむ。リキッド型のセバレートを超えるなにか。 | 2010-01-21 20:13:53 |
| crema | #cssniteginza43 微調整しやすいデザインが流行る。運用しながら微調整を繰り返す公開方法が一般化。小さなボックスを並べたレイアウトが流行。文字情報が削られる傾向に。 | 2010-01-21 20:14:05 |
| akrymmt | 目から鱗 RT @crema: アイキャッチになるメニュー。イラスト使用。生まれたときから死ぬまでタイムラインになっている。 | 2010-01-21 20:14:32 |
 | hitoyam | 行田市か... RT @akrymmt: い...行田市 RT @crema: 行田市のサイトの話。2009年の自治体サイトの中で、ビジュアル的に一番なのでは。ナビゲーションを目立たせる小技。同一色相に補色の基本色相。 | 2010-01-21 20:14:35 |
| yukiomitsuki | マーケもやるからABスプリットは日常茶飯事だけど、やっぱりめんどいかなぁー | 2010-01-21 20:15:44 |
| crema | #cssniteginza43 スマートフォンで見たときのレイアウトの最適化。 | 2010-01-21 20:16:05 |
 | cipher | かなり広範な内容だけど海外の予想 http://bit.ly/8QbrCG | 2010-01-21 20:16:11 |
| route5 | #cssniteginza43 矢野さんの予想。微調整しやすいデザインが流行る。ボックスを並べたレイアウトが流行する。ボックスを並べるスタイルにより、文字情報が減る傾向に。スマートフォンなど小サイズのディスプレイに最適化できるレイアウトがそろそろ出てくる。 | 2010-01-21 20:16:40 |
 | natsuki3 | RT @crema: 日本的Webデザイン。太い下線。余白ではなく線でエリアを区切る。余白狭い。新着情報の欄が大きい。 | 2010-01-21 20:17:54 |
| globalwe6 | #cssniteginza43 派手な色合いは飽きる！ | 2010-01-21 20:19:12 |
| route5 | #cssniteginza43 文字はディスプレイサイズの違いは小さい方に合わせて克服。 | 2010-01-21 20:19:18 |
| EGooooN | RT @route5: 矢野さんの予想。微調整しやすいデザインが流行る。ボックスを並べたレイアウトが流行する。ボックスを並べるスタイルにより、文字情報が減る傾向に。スマートフォンなど小サイズのディスプレイに最適化できるレイアウトがそろそろ出てくる。 | 2010-01-21 20:19:30 |
| crema | #cssniteginza43 レイアウト。ディスプレイサイズの違いは小さい方に合わせる。情報量のダイエット。デカ文字。飽きさせない配色。背景色は白に限らず、サイトのテーマに合った配色とテクスチャを。 | 2010-01-21 20:20:34 |
| cipher | ご参考までに http://www.abtests.com/ | 2010-01-21 20:20:43 |
| crema | #cssniteginza43 日本のWebデザインの特異性。（PC向けのサイトもガラパゴスなのかしら） | 2010-01-21 20:21:50 |
| crema | #cssniteginza43 世界を変えるより自分を変えろ。 | 2010-01-21 20:22:39 |
| globalwe6 | RT @crema 日本のWebデザインの特異性。（PC向けのサイトもガラパゴスなのかしら） | 2010-01-21 20:23:14 |
 | TsubakiMasashi | RT @crema 世界を変えるより自分を変えろ。 | 2010-01-21 20:23:50 |
| crema | #cssniteginza43 いやー、勉強になりました！今夜からの仕事に、すぐ役立ちます>< | 2010-01-21 20:24:00 |
| route5 | #cssniteginza43 終わり。原さん、矢野さんのお疲れ様でした。 | 2010-01-21 20:24:10 |
| cipher | 海外の話。ご参考まで RT @proteanbm: Corporate WebSite Powered By WordPress | Wordpress Arena http://bit.ly/5XmAWA | 2010-01-21 20:24:24 |
| globalwe6 | #cssniteginza43 スゴくためになった?！ | 2010-01-21 20:24:52 |
| EGooooN | 幅2000とかの背景になってる時点で・・・。 RT @crema: レイアウト。ディスプレイサイズの違いは小さい方に合わせる。情報量のダイエット。デカ文字。飽きさせない配色。背景色は白に限らず、サイトのテーマに合った配色とテクスチャを。 | 2010-01-21 20:26:18 |
 | AsukaYatabe | RT @crema: 日本のWebデザインの特異性。（PC向けのサイトもガラパゴスなのかしら） | 2010-01-21 20:34:29 |
| tomotana | 私もですね。皆さんに感謝。QT @globalwe6: スゴくためになった?！ | 2010-01-21 20:34:58 |
 | Spoon | 大好きなMatt Johnsonの歌を思い出しました（微妙に似ているだけですが）。世界を変えることができないのなら自分を変えろ 自分を変えられないのなら世界を変えろ RT @crema: 世界を変えるより自分を変えろ。 | 2010-01-21 20:42:14 |
 | KillBurN | 確かに無料やともったいない位のセミナーでしたね。ありがとうございました。 | 2010-01-21 20:46:31 |
 | shiinomacoto | 「悪目立ち」って、使えそうなことばだなぁと思いました。そして、矢野さんが黒髪の少女に。。。。 | 2010-01-21 20:51:11 |
| shiinomacoto | そうそう。ほんとに。 RT @globalwe6 スゴくためになった?！ | 2010-01-21 21:51:23 |
 | ucchie | これはもう超求められてます。 RT @crema: 微調整しやすいデザインが流行る。運用しながら微調整を繰り返す公開方法が一般化。小さなボックスを並べたレイアウトが流行。文字情報が削られる傾向に。 | 2010-01-21 21:51:58 |
 | shimashimaru | CSS Niteのセミナー面白くてためになった！これが無料とは。。。頼まれてるサイトのイメージのヒントになった。作り始めるのが楽しみだ。皆様に感謝です！「世界を変えるより自分を変えろ 変わり続けられることこそ生き残りのカギ」矢野りんさんのお言葉 | 2010-01-21 22:25:10 |
 | tomix | RT @crema: 微調整しやすいデザインが流行る。運用しながら微調整を繰り返す公開方法が一般化。小さなボックスを並べたレイアウトが流行。文字情報が削られる傾向に。 | 2010-01-21 22:27:54 |
 | tomamo | とっても参考になりました！行って良かったです。 | 2010-01-21 22:40:06 |
| KillBurN | Goldman Sacksのサイトはcareerに日本語のページがあるね。h1では普通にシステムフォントを使ってるなぁ。Segoeというフォントは初めて聞いた。 http://www2.goldmansachs.com/japan/careers/ | 2010-01-21 22:44:23 |
| KillBurN | JQueryライブラリのイメージを切り替えるやつというのを使ってみたいな。矢野さんのWebデザインメソッドを丁度読んでいるところでしてタイムリーなセミナーでした。ありがとうございました。 | 2010-01-21 22:49:48 |
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
