CSS Niteベスト・セッション2011

激動の今年を振り返る、師走のWebデザイントレンド60分拡大版!

毎年恒例となりましたWebデザイントレンド。
Shift 5では時間を60分に拡大し、ゲストを交えてお届けします。

今年は東日本大震災をはじめ、日本を大きく変える出来事が起きました。IT的なトピックとしては、タブレットや様々なアプリの普及により、閲覧環境 スタイルの変化が起きています。これらの社会環境の変化はWebデザインにも影響を与えたのでしょうか？　これまでのトレンドのカウンターとなるスタイル は登場してきているのかもしれません。

矢野りんさん、小山さん、坂本さんを特別ゲストに迎え、デザイン理論、ユーザーインターフェース、カラーコーディネートの視点から、深く掘り下げて 今年のキーサイトを見ていきましょう。海外サイトの分析に加え、今年もフォーチューン500社、県市町村の自治体、全上場企業の定点観測から見えてきたト レンドについても、去年のキャプチャと比較した上でわかりやすく解説いたします。
これを見ないと今年は終われない!!

出演者

• 原 一浩（Greative）@kara_d
  プロフィール
• 矢野りん @yanorin
  プロフィール
• 坂本 邦夫（フォルトゥナ） @Kunio_Sakamoto
  プロフィール
• 小山 智久（キゴウラボ ） @kigoulab
  プロフィール

イベント情報

• CSS Nite LP, Disk 20：Webデザイン行く年来る年（Shift5）
• 2011年12月10日（土）
• 終了エントリー
• Togetter

セッション情報

• スライド、音声（公開は2012年3月を予定しています）

その他のインフォメーション

• 「Simeji」生みの親が語る、バイドゥによる買収の「なぜ」と「これから」 - インタビュー：ITpro
• 『ウェブデザインコーディネートカタログ』（著：黒野 明子、秋野 琢、小山 智久、原 一浩、柳谷 真志）
• 『ウェブ配色 コーディネートカタログ』（著：坂本 邦夫）
• CSS Nite redux, Vol.6 （Shift 5「デザイントレンド」再演）
• WDHA#32「配色でみる2011年のデザイントレンド＆2012年の傾向予想」（青森で1月末に開催）

選出理由

暮れのCSS Niteの定番となりつつある「Shift」の中での目玉企画。今回は、坂本 邦夫さん（色彩）、小山 智久さん（UI設計）を加え、さらに幅と奥行きがでました。アンケートでの評価も「役に立った：4.8」というあり得ない評価をいただきました。
好評のため、ロングバージョンを1月14日に開催予定。

受賞者からのコメント

昨年に引き続き、本年もベスト・セッションに選出いただきありがとうございました！

1つのサイトでも様々な閲覧環境に応じてスタイルが変化するようになりつつある現在のウェブデザイン情勢の中で、いかに多角的にウェブサイトをとらえられるようにしていくかということが、今年の自分自身の課題と感じています。例えばキャプチャ1つとっても、レスポンシブな環境において同一のサイトでも変化することはあるでしょうし、アプリケーション化するウェブサイトにおいては、1つのアクションで画面が大きく変わるということもありえます。

いくつかのサービスにおいては、実際に使いつつ思索を重ねると同時に、広範囲なデータからの統計的な傾向を割り出すことも継続して続けようと考えています。
そして、それらを専門的に分析しつつも、わかりやすく楽しいアウトプットとして、また年末にお見せする事ができたら素晴らしいなと考えています。

年明けには、再演版「CSS Nite redux, Vol.6」、1月末には青森にて「配色でみる2011年のデザイントレンド＆2012年の傾向予想」もさせていただけることになりました。
本年もどうぞよろしくお願いします。

たにぐち まこと（エイチツーオー・スペース）

• プロフィール
• @seltzer

出演イベント

• CSS Nite LP, Disk 13（スマートフォン特集 Part 1、iPhone/iPad）
• CSS Nite LP, Disk 13 reprise（スマートフォン特集 Part 1、iPhone/iPad）
• CSS Nite redux, Vol.3
• CSS Nite redux, Vol.4
• CSS Nite in MIYAZAKI, Vol.2
• CSS Nite LP, Disk 16「スマートフォン特集（2）Android編」
• CSS Nite LP, Disk 20（Shift 5）

その他のインフォメーション

• 著書
  • 『iPhone+Android スマートフォンサイト制作入門』
  • 『よくわかるPHPの教科書』
    Amazonの2011年和書ランキング（コンピュータ部門）で9位。
• セミナー出演情報
  • 1/17 CSS Nite back2basic #3「PHP」
  • ロクナナワークショップ
• H2O Blog.
• H2O Space（Facebook）

選出理由

聞き取りやすいトークと華麗なデモの手さばきは、「ジャパネットたにぐち」と呼ばれるほど。多くのイベントにご出演いただき、たにぐちさんのセッションはすごい！と大変好評でした。

受賞者からのコメント

昨年は、本当に多くの場でお話をさせていただく機会を頂きました。

スマートフォンのサイト制作は、2012年も引き続き「レスポンシブ・Webデザイン」や、タブレット端末への対応などを含めて、注目されているトピックとなっています。

今年も、新しい知識を携えて、さまざまな場で皆様にお会いできたらと思っておりますので、どうぞよろしくお願いいたします。この度は、本当にありがとうございました！

中川 直樹（アンティ・ファクトリー）

• プロフィール
• Twitter @nakagawan

出演イベント

• CSS Nite in FUKUI, Vol.4
• CSS Nite in OKAYAMA, Vol.1
• CSS Nite in AOMORI, Vol.5
• CSS Nite in Ginza, Vol.60

その他のインフォメーション

日本WEBデザイナーズ協会（JWDA）を宜しくお願いいたします。

選出理由

中川さんの話を聞くと「Webデザインっていう仕事、そんなに悪くないよね」と、いつも誇らしい気持ちになります。すでにおなじみとなった手書きプレゼンと熱いトーク。常に安定して高評価です。

CSS Nite in Ginza, Vol.60ではそのものズバリ、「Web Creators Pride 2011」と題してお話しいただきました。「着眼大局、着手小局」。

受賞者からのコメント

このたびは、ベストスピーカー賞をいただき、大変光栄です。ありがとうございます。
今後も業界の未来のために「日々是精進、そして、一歩前進」あるのみです。引き続き、よろしくお願いいたします！

企業Web担当者 自社サイト＆ソーシャルメディア利用の基本のキ

企業Web担当者が、スマホ対応やHTML5やといった具体的な話をする前に押さえておくべき大基本を「自社サイト」「ソーシャルメディア利用」のそれぞれについて解説します。

どんな新しい施策をしても、どんなステキなサイトにしても、企業Webサイトでは「何のために、だれのために、そのサイトをやっているのか」が明確になっていなければ、サラリーマンとして失格です。ボスを巻き込んで方向を定めるための大前提をお話しします。

ソーシャルメディア利用に関しても同様です。FacebookやTwitterやに取り組む前に、ソーシャルメディアとは何か、自社サイトとソーシャルメディアの違いは何か、どういったステップで進めるべきかの基本を解説します。

• 安田 英久（インプレスビジネスメディア）
• @hidehisa
• プロフィール

イベント情報

• CSS Nite in HIROSHIMA, Vol.4
  〜スマートフォンビジネスについて考えてみよう〜
• 2011年11月19日、広島コンピュータ専門学校　5Fホール
• 終了エントリー
• Togetter

セッション情報

• スライド、音声、フォローアップ（準備中）
• 好評だったこのセッションを都内の方にも聞いていただきたく、3月15日のCSS Nite in Ginza, Vol.62「ビジネスとしてのWeb制作を見直す」にご出演いただきます。

その他のインフォメーション

• Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど
• Web担当者100人交流会★アクセス解析新年会＠原宿☆Web担＋a2i＋eVar7共同で1/26開催！ | Web担当者Forum

選出理由

ともすればスキル重視になりがちなWeb制作の中で、初心に返ることができたセッション。自分たちの日々の仕事がクライアントに対して与えるバリューは何か、ぐっと染みました。

主催者（藤本さん）からのコメント

スマートフォンだかけのセッションの中で唯一全く違う内容はやるまではドキドキでしたが、すべてのWeb担当者の共感を生むあの内容と安田編集長のあのなぜだか懐かしくもあるような心の距離を縮めてくれるようなしゃべりは、まさに広島のWeb担当者に安らぎを与えていただけたのではないかと思います。

電子雑誌のためのWeb Adaptive Layout

• Web for All, Web on Everything（スマートデバイスの普及で変わること）
• Webzine（ウェブマガジンと電子雑誌の違い、ブックメタ​ファ）
• Web Adaptive Layout（電子雑誌の設計、組み方向、タイポグラフィ、フレ​キシブル・グリッド、ページメディア、マシンリーダブルなドキュ​メントにするポイント）
• Future（ソーシャルメディアとの接続、電子雑誌の未来、​ウェブの未来）

出演者

• 境 祐司
• @commonstyle
• プロフィール

イベント情報

• CSS Nite LP, Disk 17「HTML5による電子書籍」
• 2011年9月17日、ベルサール神保町
• 終了エントリー
• Togetter

セッション情報

• スライド（PDF、199ページ、17MB）
• 音声
• フォローアップ

その他のインフォメーション

境 祐司さんのこのセッションがベースになり、『ウェブレイアウトの教科書』として書籍化されました。

• 講演
  • 2012年2月8～10日に東京で開催されるカンファレンス「PAGE2012」にて
    「徹底解説！　電子書籍デザイナーのためのDreamweaverを使ったEPUB3.0 マガジンレイアウトの実践」というテーマで登壇します。
• 書籍
  • 『EPUB 3 スタンダード・デザインガイド』（境 祐司、こもりまさあき、林 拓也、秋田克彦）
  • 『ウェブレイアウトの教科書　PC・スマートフォン・タブレット時代の標準デザイン』
  • 『Webデザイン基礎 改訂3版（速習Webデザイン）』

選出理由

テーブルレイアウトからCSSレイアウト、そして、スマートフォン/タブレットを含んだマルチデバイスへの対応のアダプティブデザインへ。大きく時代が変わる節目にたったワクワク感を感じることができました。

イベントはHTML5による電子書籍というテーマでしたが、今後、Webデザインのスキルが生かされるフィールドが広がっていくことにも実感できました。

受賞者からのコメント

2010年5月25日、イーサン・マルコッテ氏が、A List Apartで「Responsive Web Design（レスポンシブ・ウェブデザイン）」という記事を発表し、話題になりました。2011年に入ると、スマートデバイスの急速な普及に伴い、テクニック論としてのレスポンシブ・ウェブデザインのブームは縮小し、広義の設計思想としてアダプティブ・ウェブデザインが語られるようになってきました。

ユー ザードリブンな電子書籍コンテンツの特性は、再現性よりユーザビリティを重視、アダプティブ（適応可能）な設計思想と合致することから、共通テーマとして 電子出版プロジェクトなどを進めてきました。2011年9月の講演では、前述した論の”まとめ”をプレゼンテーションしたつもりです。電子書籍・電子雑誌 には、既存の出版を踏襲するレプリカモデルと、まったく新しいデジタルの書物を構築するウェブモデルがあり、後者はウェブデザイナー出身のイーブックデザ イナーたちが積極的に関わっています。

90年半ば、マルチメディアクリエーターやDTPデザイナー、グラフィックデザイナー、フォトグラ ファーたちが、商用化されたばかりのインターネットの仕事に参画し、ウェブ業界が形成されたように、（2012年以降）一部のウェブデザイナーたちによっ て新しいデジタルパブリッシングの世界がつくられるのではないかと、期待しています。

「なでしこJAPAN」に見るアトリビューションの重要性と最新動向 〜Googleアナリティクスの新機能「マルチチャネル」活用術〜

「なでしこJAPAN」のＷ杯優勝を見て感じたのは、得点者だけではなく、チームとしてゴールを目指す姿の重要性でした。サイトでの成果という「ゴール」 もそれを達成させた広告だけでは評価できません。その考えを「マルチチャネル」という形でいち早く取り込んだのがGoogleアナリティクス。この新機能 を活用した分析方法、私自身の取り組み、そして米国の事例も含めた最新動向を紹介いたします。

出演者

• 小川 卓（リクルート）
• @ryuka01
• プロフィール

イベント情報

• CSS Nite LP, Disk 19
• 2011年10月15日、ベルサール神保町
• 終了エントリー
• Togetter

セッション情報

• スライド（PDF、57ページ、3.9MB）
• 音声（MP3、55:22）
• フォローアップ

その他のインフォメーション

『入門 ウェブ分析論〜アクセス解析を成果につなげるための新・基礎知識〜』（ソフトバンククリエイティブ）

その他のインフォメーション（ご本人から）

• 地方への出前セミナーを行なっていますので、興味がございましたらご連絡ください。
• Markezineでアクセス解析に関する連載を行わせていただいております。
• 1月25日発売の「日経デジタルマーケティング」（雑誌）にソーシャルメディア分析ツールに関する記事を寄稿させていただきました。
  

理由

本当にアタマのよい人はシンプルに話す、ことを体感したセッションでした。“たとえ”方がうまく、「あ、そういうことだったの？」とストンと落ちた方が多かったようです。

軽妙な語り口とパッション。また、聞いてみたいという声が多かったです。

受賞者からのコメント

選出いただきありがとうございます。アクセス解析業界で2011年に話題となった「アトリビューション」に関しての講演をさせていただいた小川です。今回の受賞はアクセス解析に携わっている皆様、そして鷹野さんを始めとするCSS Niteの皆様のおかげです。非常に楽しく資料作成から発表まで行うことが出来ました。本当にありがとうございます！

2012年もアクセス解析の分野で、個人ブログ「リアルアクセス解析」を中心に、連載・講演・書籍などの形で皆様と意見交換ができればと願っております。どうぞ、よろしくお願いいたします。

HTML5の衝撃〜なぜHTML5なのか？HTML5が目指す世界とは〜

近年大きく話題に上がるHTML5ですが、旧来のHTML仕様とは異なり、マークアップにとどまらず、JavaScriptから利用するAPIも規定しています。さらに、HTML5に関連する仕様も含めれば、その範囲は壮大なものとなります。

これらHTML5をはじめとしたウェブ・テクノロジーは、ウェブページという領域から飛び出し、さまざまなアプリケーション分野へ拡大していくことは間違いありません。
HTML5はインパクトが大きいゆえに、多くの誤解や疑問が蔓延しています。

HTML5を学ぼうとするみなさん。流行っているから学ぶのですか？
盲目的に細かい知識やテクニックを学ぶ前に、まず、HTML5とは何なのかを正しく理解しておくことが肝要です。本講演では、HTML5によってもたらされる世界とは何なのか、そして、HTML5を学ぶ意義について語ります。

出演者

• 羽田野 太巳（futomi）
• @futomi

イベント情報

• CSS Nite in Shinagawa「HTML5+IE9 Web Camp」
• 2011年3月6日、マイクロソフト品川オフィス　セミナールーム
• 終了エントリー
• Togetter

セッション情報

• スライド（PDF、50ページ、4.3MB）
• 音声（MP3、49:43、47.8MB）
• Ustream
• フォローアップ

その他のインフォメーション

• 『徹底解説HTML5マークアップガイドブック 最終草案対応版』
• 『徹底解説 HTML5 APIガイドブック ビジュアル系API編』

選出理由

「XHTMLなんて、自己満足でしかなかった...」。ショッキングですが、「ま、そうだよね」と...　単なる技術解説でなく、“広義のHTML5”がもたらす今後の動向について、ぱっと開けたセッションでした。

2011年2月、福井での「今さら聞けないHTML5の疑問〜なぜHTML5なのか？HTML5が目指す世界とは〜」も併せてご確認ください。

受賞者からのコメント

選出頂き、光栄です。HTML5をはじめとしたウェブテクノロジーの進化は凄まじいです。以前はパソコンという領域に閉じていたウェブは、スマートフォン、そして次はスマートTVなど、その応用範囲がどんどん広がっています。さらにウェブ・テクノロジーだけでアプリも作れる時代になってきました。今後、ますます、私たちのスキルが活かせる領域が増え、ウェブ業界が活性化することを期待したいですね。

Android向けサイト制作のあれこれ：viewportについて

スマートフォン対応を行う上で無視できない「viewport」。記述に関する基本から、その使いどころ、Android対応を行う上での注意点などについて解説します。

出演者

• 高津戸 壮（ピクセルグリッド）
• @Takazudo

イベント情報

• CSS Nite LP, Disk 16「スマートフォン特集（2）Android編」
• 2011年6月18日、ベルサール神田
• 終了エントリー
• Togetter

セッション情報

• スライド（※2011年6月現在、Safariでのみ正常に閲覧できます）
• 音声（MP3、46:01）
• フォローアップ

その他のインフォメーション

• 著書
  • 『Webデザイナーのための jQuery入門』
• セミナー出演情報
  • CSS Nite back2basic #1 「jQuery」
  • CSS Nite back2basic #9 「jQuery」
    

選出理由

viewportだけで40分!? と思いきや、おなかいっぱいのセッションでした。このセッションにかかわらず、高津戸さんは非常に多くの検証を経て準備されており、「実際に自分で実装したらはまるであろう見落としがちなこと」を取り上げてくださるので、非常に好評価です。

2011年1月しょっぱなのCPI x CSS Nite「After Dark」（1）の「HTML5とJavaScriptの切っても切れない関係」はUstream録画を公開していますので、こちらもご覧ください。

受賞者からのコメント

私が担当させていただいたセッションは、スマートフォンのviewportはマイナーなテーマではありましたが、実際、仕事やこのセッションを準備するために、かなりの時間を要したテーマでした。そういった、放っておけば埋もれてしまうような知識を、このような場で発表する機会を頂き、ありがとうございました。2012年も技術的な内容をセミナー等の形で共有させていただければと存じます。今後とも宜しくお願いいたします

事例から学ぶスマートフォンサイトの設計手法

今後も増加の一途を辿るスマートフォンユーザーに対し、対応サイトやアプリをリリースしたいという要望が増えてくることは確実です。

そんな中で、今の周りの状況や、既にあるPC・モバイルサイトと照らし合わせ、どのような要件の整理を行うのがよいのでしょうか。
また、この新しいデバイスに対して、どのようなワークフローで制作するのがよいのでしょうか。

サッポロビールのスマートフォン対応の事例を通して、それらを考えるための「ヒント」や、意外に気づきにくい「盲点」をお伝えしていきます。

• 伊原 力也（ビジネス・アーキテクツ）
• @magi1125

イベント情報

• CSS Nite LP, Disk 13 reprise
• 2011年2月5日、ベルサール九段
• 終了エントリー
• Togetter

セッション情報

• スライド（PDF、95ページ、3.9MB）
• 音声（MP3、41:50）
• フォローアップ

その他のインフォメーション

サッポロビールさまでは、他にもPhoneGapを利用したiPhoneアプリ「近くで！乾杯★サーチ」を公開しております。こちらもピクセルグリッド外村さんと協力して制作しました。PCサイトの構成を利用して効率よく作成した事例として、ご参考頂ければ幸いです。

お手伝いをさせて頂いた富士フイルム様のグローバルサイト（スマートフォン版）が、第5回企業ウェブ・グランプリのグローバルサイト部門にて部門グランプリを獲得しました。こちらも是非ご覧ください。
富士フイルムグローバルサイトスマートフォン版（スマートフォンでアクセスしてご覧ください）：

選出理由

要件（制約）からどのようなロジックで実装方法を決定していったのかをトレースできることは、何にも代えがたいバリューです。特に、p.49の「実装パターン」のロジックチャートは必見です。

受賞者からのコメント

選出いただきありがとうございます！スマートフォンサイト制作におけるワークフローはPC版やフィーチャーフォン版とは異なる部分も多いため、自分なりのまとめとしてご紹介させていただきました。

まとめてみた感想としては、今回ご紹介させていただいたようなプロトタイピングの活用のように今後はより設計・デザイン・実装が近づいていき、それぞれの分野をクロスさせながら検討するような流れに「ならざるを得ない」状況になっているのだなあ、ということです。今後も横断的な視点を忘れずに、興味深いトピックをご紹介させていただければと思っています。

FireworksマニアLIVE!

Fireworksマニアで紹介している人気のTipsを織り交ぜながら、実際にその場でFireworksでデザインカンプを作りあげていきます。

• 山口 有由希（フロッグマンオフィス） @yuki930

イベント情報

• CSS Nite LP, Disk 14「Photoshopper meets Fireworks」
• 2011年3月5日、ベルサール九段
• 終了エントリー
• Togetter

セッション情報

• スライド（PDF、47ページ、4.6MB）
• 音声（MP3、52:35）
• フォローアップ

その他のインフォメーション

『Fireworks CS5/4/3 (速習デザイン)』が2011年12月に発売になりました。

• Fireworksの本を書きました！ まだ発売前なのですが先に中身を紹介させてください><

選出理由

いまや「Fireworksといえば、この人！」というくらい、Fireworksのエバンジェリストとなっている山口 有由希さん。作例（サンプル）が魅力的なことが大きく、Fireworksファンならずともワクワクさせてくれます。

Fireworksマニアをはじめ、ブログなどを通して継続的にアウトプットされていることで、親近感がわいている方が多いでしょう。

受賞者からのコメント

実はFireworksマニアはどうしてもこのイベントに参加したく立ち上げたサイトでした。
結果、スピーカーとして呼んでいただくことができ、さらにはこのイベントがきっかけで書籍を執筆させていただくことまでできました。
思い出深いイベントでの受賞、本当に本当にうれしいです！

限られた時間の中でひとりでデザインからコーディング、プログラミングまで行っていると、どの作業もできるだけ効率的にこなしていく必要があり、そんなときに役立ってくれるのがFireworksだと思っています。

2012年もFireworksの便利な使い方をいろんな形でお伝えしていけるといいなと思っておりますので、今後ともどうぞよろしくお願い致します。

Dreamweaver CS5.5によるスマートフォン対応サイトの実装

同じHTMLを使いながら、デスクトップ、タブレット、スマートフォンのデバイスごとに異なるレイアウトを与えるレスポンシブWebデザインをDreamweaverで実装する方法についてフォーカスします。

メディア・クエリーなどDreamweaver CS5.5で強化されたポイントに絞ってご紹介します。

• サンプルサイト（作例）
• サポートサイト（Facebook内）

Dreamweaver CS5.5は、jQuery Mobileにコミットし、スターター（サンプルページ）、［挿入］パネルやコードヒントによる入力支援などの機能強化を図っています。jQuery Mobileの概要から実装のポイントについてご紹介します。

出演者

• 鷹野 雅弘（スイッチ） @swwwitch

イベント情報

• CSS Nite redux, Vol.5 powered by デジタルハリウッド福岡校
• 2011年11月25日、デジタルハリウッド福岡校セミナールーム
• 終了エントリー
• Togetter

セッション情報

• フォローアップ
• 終了エントリー

CSS Nite in Ginza, Vol.59の『DreamweaverによるレスポンシブWebデザインの実装』に、CSS Nite in MIYAZAKI, Vol.2の『スマートフォンサイト制作におけるインタラクティブ・プロトタイプ制作』を加えた同様のセッションを、福岡以外でも大阪（CSS Nite in OSAKA, Vol.27 presented by リクルートエージェント）、広島（CSS Nite in HIROSHIMA, Vol.4）、徳島（CSS Nite in TOKUSHIMA, Vol.1）、名古屋（CSS Nite in NAGOYA ♭001）でも開催しました。

その他のインフォメーション

• 『効率的なサイト制作のためのDreamweaverの教科書（CS5.5対応版）』
• CSS Nite in Ginza, Vol.59フォローアップ（録画あり）

選出理由

2010年の総評にて、今後のセッションのあり方のキーワードとして「掛け合い、ワークショップ、添削」をあげました。CSS Nite redux, Vol.5でのセッションは、講演部分とミニワークショップ（同じ机での軽いディスカッション）のメリハリが、ひとつのスタイルとして完成しました。

コーディングを3倍速くする！ Vim入門／比留間 和也（カヤック）

Vim（ヴィム）を使うと、HTMLのコーディング中に繰り返し起きる「ダブルクォーテーションの中をまとめて選択」したり、「タグをまるごと削除」したり、といった作業をとても簡単に実行できます（場合によってはキーを3回入力するだけで！）。 そんな、使わないと損するVimの使い方をご説明します。

• 比留間 和也（カヤック）
• プロフィール

イベント情報

• CSS Nite in Ginza, Vol.56
• 2011年4月21日、アップルストア銀座
• 終了エントリー
• Togetter

セッション情報

• フォローアップ
• ビデオ（Vimeo）

その他のインフォメーション

『プロならば知っておくべきWebコーディング＆デザインの定石100』（MdN）

選出理由

2011年は、比留間さんのVim、小久保浩大郎さんのSass、駒形 真幸（FJORD）さんのターミナルなど、ちょっとマニアック系のセッションが注目されました。

なお、比留間さんには次のイベントにもご出演いただきました。

• CSS Nite in Shinagawa「HTML5+IE9 Web Camp」

受賞者からのコメント

Vimの素晴らしさを少しでも広めることができたら、という思いでやらせていただいたセッションでしたが、 こうしてベスト10セッションに選んでいただき、とても光栄に思っています。 セッション時の動画もかなり好評のようで、自分自身もとても満足の行くセッションとなりました。 入門として分かりやすさを意識した内容になっているので、Vimに興味がある方はぜひ見てみてください！

jQuery Mobileでのサイト作成

注目のスマートフォンフレームワーク「jQuery Mobile」。jQuery Mobileを利用すれば簡単にスマートフォンサイトを作ることができると聞きますが本当でしょうか？
答えは「No」であり「Yes」。本セッションではjQuery Mobileの基本的な利用方法とともに、jQuery Mobileが得意とすること、苦手とすることを洗いざらい解説していきます。

• 西畑 一馬（to-R/まぼろし） @KazumaNishihata

イベント情報

• CSS Nite in TAKAMATSU, Vol.5 「スマートフォン特集」
• 2011年10月1日、eとぴあ・かがわ　BBスクエア
• 終了エントリー
• Togetter

セッション情報

• スライド（PDF、18.9MB）
• 音声（MP3形式、00:53:20、18,752KB）
• フォローアップ
• フォローアップ（西畑さんのブログ）

その他のインフォメーション

• 著書
  • 『jQuery Mobile スマートフォンサイト デザイン入門』（2月3日発売予定）
• 執筆
  • ASCII.jp：西畑一馬のjQuery Mobileデザイン入門
• セミナー出演情報
  • 1/17 CSS Nite back2basic #7「jQuery Mobile」
  • ロクナナワークショップ

選出理由

jQuery Mobileを扱ったセッションの場合、スライド完成後に、jQuery Mobileがバージョンアップする、といった悪夢が付くまとうのですが、ついにjQuery Mobileも正式版となりました。

jQuery Mobileは実案件で使えるのか、使うときには注意すべき点はどこかなど、掘り下げたセッションは、ASCII.jpでの連載、2月発売の『jQuery Mobile スマートフォンサイト デザイン入門』とともに必見です。

受賞者からのコメント

2011年は「スマホ」が流行語大賞にノミネートされるなどスマートフォンが注目された一年でした。 私もお仕事で様々な形でスマホと関わり、そして悩まされた一年でした。 2012年も試行錯誤した経験をアウトプットしていきたいと思いますのでよろしくお願いします。

LP20（Shift 5）

イベント情報

• CSS Nite
• 2011年12月10日、ベルサール神保町　ルーム1-2
• 終了エントリー
• Togetter

出演者

• 長谷川恭久
• 益子貴寛（サイバーガーデン）
• 小山田 晃浩（ピクセルグリッド）
• 植木 真（インフォアクシア）
• 高畑 哲平（KDDIウェブコミュニケーションズ）
• 東後 澄人（グーグル）
• 後藤 誠（CODE54）
• 岡崎 理枝子（オリーズデザイン）
• 山崎 正宏（ヘルツ）
• 蝦名晶子（ディーシーティーデザイン）
• 鷹野 雅弘（スイッチ）
• たにぐちまこと（エイチツーオー・スペース）
• 矢野りん
• 原 一浩（Greative）
• 矢野りん
• 坂本 邦夫（フォルトゥナ）
• 小山 智久（キゴウラボ ）

その他のインフォメーション

• 「デザイン・トレンド」セッションのみのロングバージョンCSS Nite redux, Vol.6 を2012年1月14日に開催予定。
• 青森にて、配色で見る2011年のデザイントレンド＆2012年の傾向予想を1月28日に開催予定。

選出理由

マークアップ、制作環境、アクセシビリティなど、それぞれのカテゴリごとにその年の制作シーンを振り返るという、年末に開催している恒例のCSS Niteのイベントで、今回が5回目。3、4回目は、アップルストア銀座にて、各セッション10分弱の圧縮版で開催したが、今回は30-40分の尺で開催。加えて、「“みんビズ”で変わる!?今後のWeb制作ビジネス」、「地方のWeb制作ビジネス」など、新しい試みを盛り込みました。

各スピーカーが講演慣れしているため、安心して聞けるのはもちろん、日々流れていく中で、俯瞰することの大切さを改めて実感。アンケートでも「役に立った：4.8」と高評価をいただきました。

CSS Nite in FUKUI, Vol.4

イベント情報

• CSS Nite in FUKUI, Vol.4
• 2011年2月19日、福井県産業情報センター　マルチホール
• 終了エントリー
• とりあげていただいたブログなど
• Togetter

セッション+フォローアップ

• 「今さら聞けないHTML5の疑問
  〜なぜHTML5なのか？HTML5が目指す世界とは〜」
  羽田野 太巳 @futomi
• 「『中川流　Webデザイン道』福井編」
  中川 直樹 @nakagawan
• 「もし福井の女子Webデザイナーが「PMBOKガイド　第4版」を読んだら」
  林 千晶 @chiaki

その他のインフォメーション

CSS Nite in FUKUI, Vol.5を3月に開催予定です。

選出理由

それぞれのセッションはもちろん、3つのセッションで1つのストーリーのようにつながった。

CSS Nite in FUKUSHIMA, Vol.5

イベント情報

• CSS Nite in FUKUSHIMA, Vol.5
• 2011年10月29日、ホテルハマツ
• 終了エントリー
• Togetter

各セッション

• CSS Nite in FUKUSHIMA, Vol.5 フォローアップ（1） 山本 章 さん
• CSS Nite in FUKUSHIMA, Vol.5 フォローアップ（2） 高橋 直氣 さん
• CSS Nite in FUKUSHIMA, Vol.5 フォローアップ（3） 鈴木 亮 さん
• CSS Nite in FUKUSHIMA, Vol.5 フォローアップ（5） 座談会

選出理由

「みんなで創ろう、福島の未来」という抽象的なテーマのため、正直、参加人数は定員割れしてしまいましたが、蓋を開けてみると、ヒントになることが盛りだくさんの充実したセッションばかりとなりました。青森（映像コンテンツ）、山形（コミュニティマーケティング）、岩手（勉強会）、宮城（プログラミング）、岩手（「復興の狼煙」プロジェクト）に加え、福島陣を中心としたディスカッションなど、東北各地のスピーカーで構成され、それぞれの立ち位置で得意なことを生かしつつ、どのように仕事に向き合っているか、印象深いイベントになりました。

富山のWeb制作事情本音トーク

イベント情報

• CSS Nite in TOYAMA, Vol.3
• 2011年12月3日
• 終了エントリー
• Togetter

出演者

• 谷井 太（プロヴィデザイン）
• 堤 慎太郎（ADDAM）
• 小野田 篤（サイト）

選出理由

「架空の案件に対して、見積額を提示し、プレゼンを行う」という試みは、構想自体あったもののCSS Niteでは初。制作という表層だけでなく、どんなバリューを提供できるのか、について、その見せ方、伝え方ともに、深掘りしていきたいと思わせるセッションだった。ほかの地方版でもトライしたい。

受賞者からのコメント

選出いただきましてありがとうございます。
当日のセッションは臨場感、緊迫感を出すため、各スピーカーとも互いの提示金額や内容などを全く打ち合せせずに挑みました。
各社が何に重きを置いて、どういった手段で構築するのかの参考にはなったかなと自負しております。
作り手とユーザーとの距離を縮める一つの方法として、微力ながら一石を投じれたこと、結果、賞をいただけたこと大変誇りに思います。
課題も多く頂きましたので、今後のボリュームにフィードバックしていきます。
ありがとうございました。

CSS Nite in NAGOYA, Vol.6　覗いてみよう「アノヒトの仕事術」

イベント情報

• CSS Nite in NAGOYA, Vol.6　
  覗いてみよう「アノヒトの仕事術」
• 2011年7月16日、電気文化会館 イベントホール
• 終了エントリー
• 終了レポート
• Togetter

出演者

• 長谷川 哲 @satoc（山崎デザイン事務所）
• 平野 秀幸 @eleanor_1967（アクアリング）
• 西岡 克真 @kaduma2010（デザイン工房ハラペコ）
• 伊藤 清徳 @kiyotchi（春芳堂）
• 藤田 春菜 @867867（グランフェアズ）

その他のインフォメーション

Vol.7「著作権だがや」を1月21日に開催。

選出理由

仕事の組み立て術や、時短ノウハウ、仕事に役立つサービス、ツールの活用術などを、ショートセッションとパネルディスカッションで構成。スキルやノウハウでなく、スタイルに特化したところがおもしろく、会場も沸きました。

受賞者からのコメント

昨今非常に多くのセミナーや勉強会が活発に開催されています。また地域柄、WCANなど多く人が集まる会もあります。
そんな中でVol.6は、CSS Nite in NAGOYA自体を開催する意義から考え直した回でした。
さらには、これまでも多くのスピーカーの方をお招きしてきましたが、名古屋をはじめとした東海地域以外の方がほとんどでした。そこで、もっと名古屋で活躍している方々をクローズアップできる機会にもしていきました。

そんな名古屋で活躍するさまざまなバックグラウンドをもって活躍している方々の普段の仕事の雰囲気や状況を共有することで、自分が主とする仕事内容以外への理解が出来る機会を作り上げられたとするなら、参加した多くの方々にとっても有益な機会になるのではないかと考えました。

さらにCSS Nite のひとつのコンセプトでもある、「オープンでフラットな集まり」をより近いカタチで実現するために、参加者のほとんどの方にご回答いただいた、事前アンケートをもとにした話題でのパネルディスカッションを開催してみました。
これからもCSS Nite in NAGOYAでは、スピーカー・スタッフ・参加者が一体になって作り上げていくCSS Niteを目指していきます。

CSS Nite in OKAYAMA, Vol.1

イベント情報

• CSS Nite in OKAYAMA, Vol.1
• 2011年7月2日
• 終了エントリー
• Togetter

出演者

• 前川 昌幸 @maepon（スクイズ研究所）
• 山下 リール @ylille（リール）
• 山口 真央 @gutch_jp（クレオフーガ）
• 大月 茂樹 @ohtsuki2843（ニイハチヨンサン）
• 岡崎 理枝子 @rie_oriese（オリーズデザイン）

その他のインフォメーション

• 岡山WEBクリエイターズ
• 岡山WEB系女子会

選出理由

「LT（ライトニングトーク）は気軽にできるからいいや」という位置づけで行われていることが少なくないですが、実際、時間が短くなればなるほど、構成やロジックの緻密さが求められます。前日の公開リハを通して、5セッションともにLTというより、ミニセッションと呼ぶべき高いレベルとなりました。

受賞者からのコメント

CSS Nite初開催の地、岡山からの選出ありがとうございます! 　テーマは、canvasアニメ、色、Ruby on Rails、NFC、勉強会活動…と技術からデザインまで網羅した幅広いジャンルのLTとなりました。女性陣の奮闘も印象に深いところです。これからも岡山で個性あるCSS Niteを開催していきますのでどうぞよろしくお願いいたします!