Aggregator

2010/1/1-1/31の投稿数は137。個別閲覧記事トップ10は以下の通り。

http://www.hcdnet.org/hcd/column/katakana.php

HCD-Net内でガイドラインを使用していただくことを期待しております。

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

#cssniteginza43 - ハッシュタグクラウドより。

関連リンク：

Google Analyticsが新機能を発表（2009/12/8）
Google Analytics、非同期codeの提供を開始（2009/12/2）

Chart below shows the monthly unique visitor(000) of NAVER.

Below chart shows monthly and Q3 shipment(000) and sales(100millon yen), divided by desktop type and notebook type.

2007年5月に開催した「LP3：Coder's High」の続編。コーディング／マークアップにフォーカスし、スピードコーディング、jQuery、表示速度改善、HTML5+CSS3などを取り上げるCSS Nite LP, Disk 9（LP9）「Coder's Higher」を4月に開催します。

• イベント名：CSS Nite LP, Disk 9（LP9）「Coder's Higher」
• 日時：4月17日土 12:00-18:00（予定）
• 会場：ベルサール神田（東京）

現在、予定している出演者と演目は下記の通りです。それぞれのプロフィールについては、LP9の告知ページをご覧ください。

• キーノート：森田雄
• スピードコーディング：大藤 幹、大杉 充（スキルパートナーズ）
• jQuery：徳田 和規（マインドフリー、5509(+1)）
• HTML5：益子貴寛（サイバーガーデン）
• CSS3：福田泰雄（AGN）、高津戸 壮（ピクセルグリッド）
• UI設計：長谷川 広武（24-7、THE HAM MEDIA）
• 表示速度改善：調整中

なお、コーディングコンテストについては、ピクセルグリッドさんにご協力いただき、開催する予定です。

現在、1週間で参加表明が180名を超えるなど、高い関心をいただいています。参加表明くださった方には、早割などをご用意する予定ですので、ぜひご表明ください。