CSS Nite公式サイト

2013年3月21日（木）、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.68のフォローアップとして、狭間 句美さん（ふわっと）、森 和恵さん（r360studio）の『仕事で使える、アイコン作画のコツとSVG変換のススメ』のスライドを公開します。

よくわかるFireworksの教科書

狭間 句美さん、森 和恵さんが共著で執筆された『よくわかるFireworksの教科書』が、マイナビから2013年3月にリリースされました。

• 出版社の『よくわかるFireworksの教科書』紹介ページ
• Facebookページ『よくわかるFireworksの教科書』
• Amazonで『よくわかるFireworksの教科書』を見る
• 特別プレゼントキャンペーン

メッセージ

みなさま、イベントではお疲れさまでした。ありがとうございます。限られた時間ではありましたが、アイコン作成・アイコンのフォント化など、お役にたてたなら幸いです。

狭間 句美よりコメント

今回は、「アイコン作成のコツ」をお話しました。これをきっかけに、作画の流れを見て自分で素材を作ってみようか！と思う方が増えればいいなと思います♪

• CSS Nite in Ginza, Vol.68 出演しました | ふわっとブログ

森 和恵よりコメント

今回は、「SVGからWeb Fontsを作ろう」をお話しました。デフォルトの機能では無理でも、困ったことがあればいろんなツールがでるのがWeb業界の素敵なところですね。ぜひ、使ってみてください。

• フォローアップページ

参照リンク

• Web Fontsのデモデータ
• SVG1→Webfontsの参考サイトAaron Beall Fireworks機能拡張 Export
• IcoMoon
• Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる
• Fireworksを使ってオリジナルのWebアイコンを作成、実装しよう！
• アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応

DreamweaverとFireworksで作る スマートフォン対応サイト 無料セミナー

3月22日、m-schoolで開催されたスペシャルセミナーのUstream録画です（講師は森さん）。

Video streaming by Ustream

2013年3月21日（木）、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.68のフォローアップとして、松田直樹さん（まぼろし）の『HiDPI時代のFireworks』のスライドを公開します。

参照リンク

• Design Cutting Edge iOS Apps With Adobe Fireworks
• バシャログ - Retina対応用にページを分けるFireworksコマンド
• creative tweet - 画像をRetina対応で書き出しするFireworksの拡張機能作ったよ。
• iOSアプリ - LiveView
• Subtle Patterns（テクスチャ配布サイト）
• Adaptation for Retina display（画像振り分け方法）
• Optimising for High Pixel Density Displays.（画像振り分け方法）
• ReSRC.it（画像振り分けCloudサービス）
• Sencha.io Src（画像振り分けCloudサービス）
• Conditionizr（デバイスの様々な環境を振り分けるJS）

『現場のプロが教える スマートフォンサイト 制作ガイドブック』

松田直樹さんが執筆された『現場のプロが教える スマートフォンサイト 制作ガイドブック』が、翔泳社から2013年2月にリリースされました。

• 出版社の『現場のプロが教える スマートフォンサイト 制作ガイドブック』紹介ページ
• Amazonで『現場のプロが教える スマートフォンサイト 制作ガイドブック』を見る

メッセージ

今回お話させていただいた松田直樹@まぼろしです。皆様、ご参加いただきまして本当にありがとうございました。

本セッションではFireworksを用いたHiDPIデバイスへのデザイン対応のワークフローについてお話しましたが、あくまで私が今現在採っている手法であり、もっと様々な手法もあるかと思います。皆様が、それぞれに馴染むような手法を見つける際の手助けになれば幸いです。（いい方法があれば、ぜひ教えて下さい！）

Fireworksに直接関係のない内容も多く含んでおりましたが、Webサイト制作全体がFireworksだけで完結できるものはありませんし、デザインと実装を分業されているケースも多くあるかと思い、このような内容にさせていただきました。Web制作ワークフロー全体でのご参考にしていただればと思います。

ともあれ、今回のまとめ的キーワードとしては、「大きいことはいいことだ（カンバス幅640px）」と「脱ビットマップ（SVG）」ということです。

個人的にもワークフローを見直せたりと有意義なイベントでした。ありがとうございました！

私の個人ブログで、Fireworks で SVG Web Fonts を作る際のチュートリアルを説明しています。ご参考まで。

• Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる | 歴史雑談録

アンケートに「振り分け方法をたくさんご紹介されていましたが、どれがベストかと言うのはあるのでしょうか。」という質問がありましたが、現状、個人的な見解としては以下の手法となります。

• img要素の振り分け：Javascript の window.devicePixleRatio を取得して、画像のファイル名を振り分け（スライドp.47参照）
• CSSの背景画像の振り分け：Media Query で背景画像を振り分ける（スライド p.49参照）

Apple の サイトでも使われている手法ですので、最もメジャーな手法だと思われます。

2013年3月26日(火)、クリーク・アンド・リバー社セミナールームでクリ☆ステ Vol.7『ノンプログラマのためのJavaScriptはじめの一歩』を開催し、112名の方にご参加いただきました。

外村 和仁さん（ピクセルグリッド）をゲストに、40行のJavaScriptコードを読み解くことを目標にした基本から内容です。

新しいスクリーンが設置され、位置が50cmほど上部になったため、ぐっと見やすくなりました。

ご参加いただいた方には、フォローアップメール（スライド、動画など）を、クリーク・アンド・リバー社からお送りします。

追記：

フォローアップメールは、3月29日23:30くらいに送付されています。

追記：

次回（Vol.8）は、たにぐちまことさん（エイチツーオー・スペース）を迎え、PHPをテーマに2013年5月23日に開催予定です。 ぜひ、Facebookページにて仮登録をお願いします。

• クリ☆ステVol.8：PHP

2013年3月21日（木）、アップルストア銀座 3FシアターでCSS Nite in Ginza, Vol.68を開催し、140名ほどの方にご参加いただきました。

ツイートは下記にまとめました。

• CSS Nite in Ginza, Vol.68「HiDPI時代のFireworks」 - Togetter

こちらは出演者のブログ：

• CSS Nite in Ginza, Vol.68 出演しました | ふわっとブログ

狭間さん、森さんのスライドは、SlideShareで公開しています。

アンケートから

アンケートでは次のようなご意見をいただきました。

• Fwネタ以外のネタが聞けて良かったです。ありがとうございました。
• 有意義な時間をありがとうございます。
• 後半のセッション、松田さんの記事を参考にされたなら、松田さんの解説でお話を聞きたかったな、と。少し微妙だったと感じています。
• 試行錯誤しながら制作を楽しみたい。全体的にみると満足できる内容でした。ただ、今回に限るとFireworksそのものの内容が少し薄かったのがやや残念です。 今後もFWを開催してほしいです。無料とは思えない充実した内容でした。また参加したいです。ありがとうございました。 もう少し時間をとってゆっくり見たかったと思います。ですが、とても楽しい時間でした。機会あれば懇親会も参加してみたいと思っています。
• 最近制作ではなく運用ばかりしているので、制作がまたとてもしたくなりました。無料で貴重なお話が聞けてとても良かったです。また是非参加させていただきたいと思います。
• ただ、ちょっと人数の割に狭かったのは仕方ないことですかね＾＾；話聞けただけでも大満足です。 スマートフォンも対応するにはどうしたらいいのかなど、疑問に思っていたことが、いくつか解決することができました。とても参考になりました。ありがとうございました。また参加したいと思います。 初めてのアップル銀座参加でした。地方からの参加なのでなかなか平日夜は厳しいですが、またこちらにくる用事があったら参加したいなと思いました。どうもありがとうございました。
• ちょうど仕事の関係でレスポンシブデザインについて勉強しているところだったので、Retina対応やウェブフォントについて面白いお話を聞くことができました。社内に詳しい物がいないので、アプリをご紹介いただけたり、ちょっとしたツールの使い方でもすごくためになります。ありがとうございました。
• 初めての参加でしたが、楽しく過ごすことが出来ました。 また参加したいと思います。初めてでしたがとても楽しかったです。独学でスマホサイトを作ってきたので、勘違いしていることがあったららどうしようかと思いましたが、違っていなかったので安心できました。
• ひとつ聞きそびれたのですが、Fwでpng書き出すと死ぬほど重くなり、Fwで2×作成して、photoshopで1×にリサイズしています。軽くすることを考えるとphotoshopのほうがいい気もしますが、皆さんどうされているのでしょうか…

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 鷹野 雅弘（スイッチ）の『ツールと制作環境、電子書籍2012-2013』のスライドなどを公開します。

• スライド
• 音声
• 参照リンク

セッション中で触れているCoda 2、Sublime Text 2の録画は下記からご覧いただけます。

• CPI x CSS Nite「After Dark」（5）

こちらのブログ記事の「「Photoshop CS6」と「CSS3Ps」を比較してみる」も、併せてご覧ください。

• 「CSS Nite LP, Disk 25」参加レポート&Photoshop CS6の新機能「CSSをコピー」とCSSPsを比較 | Design Color

CSS Nite LP26「CSS Preprocessor Shootout」のフォローアップは、2013年4月に公開予定です。

スライド

メッセージ

「ツールと制作環境、電子書籍」を担当した鷹野です。

毎年、自分自身が非常に楽しみにしているイベントですが、今年はさらにすごかった！

逆に私のセッションは、最新情報にキャッチアップされている方には、ちょっと薄めの内容となってしまいました...

「心と手のアドビ離れ」が進んでいるように思う反面、知っていれば早く終わること、キレイにサクっと仕上がることも多々あり、依存するかどうかはさておき、知っておくことは軽視できないなと思います。

過去/これからのセミナーイベントへの参照もいくつかありましたが年末年始に、ぜひ、過去のコンテンツをご利用いただければ嬉しいです。

ビデオ

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 植木 真さん（インフォアクシア）、中根 雅文さん（慶應義塾大学）、山本 和泉さん（エフシーゼロ）の『アクセシビリティ：AccSellポッドキャストLIVE収録』のスライドなどを公開します。

• スライド
• 音声

こちらもあわせてご覧ください。

• CSS Nite LP25（Shift 6）フォローアップ（4）『アクセシビリティ：AccSellポッドキャストLIVE収録』（植木 真さん、中根 雅文さん、山本 和泉さん）
• 第10回前編: 「そもそも表を画像で作るなバカ！」 (公開録音@CSS Nite LP25)｜ポッドキャスト｜AccSell

メッセージ（中根さん）

今回のセッションでは、駆け足で2012年のアクセシビリティ関連の話題を取り上げました。

短時間でいろいろと紹介しようとしたために、日頃からアクセシビリティになじみがある方にはもの足らず、そうでない方には分かりづらい内容になってしまったかもしれません。

AccSellでは、後日今回のセッションで紹介したことをさらに詳しく話すポッドキャストを配信する予定です。また、今後も日々飛び込んでくるアクセシビリティ関連のニュースを取り上げ、またアクセシビリティの基礎的な話題についても皆さんと一緒に考えていくようなコンテンツを配信していきますので、ぜひサイトを覗いてみてください。

メッセージ（山本さん）

#fc0山本和泉＠アクセシビリティ・ビギナーです。

公開録音はいかがでしたか？　みなさんの刺激になっていたらいいなぁ。

普段のAccSellのポッドキャストでは植木さんと中根さんから聞くお話はびっくりすることばかりです。また、スクリーンリーダーやさまざまなデバイスは日々進化しているのに、制作サイドは古い情報のまま、というのはもったいないと改めて思い知らされています。

今回のセッションをきっかけに、みなさんと一緒にアクセシビリティについて改めて情報交換などができたらいいなぁって思っています！

メッセージ（植木さん）

アクセシビリティは、「より多くの人が　より多くの場面で　より多くの使いかたができるようにすること」。 そのために何をすればよいのか、どこまでやればいいのか？

その拠りどころとなるのが、JIS X 8341-3などのガイドラインです。5分間トークの中で挙げた10個のポイント。皆さんは普段どのくらい実践していますか？　

あの10個のポイントの多くは、JIS X 8341-3でいうと、最低限なレベルの等級Aの達成基準に関するものでした。意外と「あたりまえ」なことばかりでしたよね。

恭久さんの基調講演での言葉を借りれば、「アクセシビリティ」を"Reimagination（再定義）" するきっかけになれば嬉しく思います。

AccSellの情報をフォロー

AccSell -- Accessibility Central　 ポッドキャストやメールマガジンの公開情報等については、こちらで。

• AccSell@Facebook
• AccSell@Twitter

ビデオ

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のすべてのセッションのフォローアップ（スライド、音声）を公開しました。

• （1）『基調講演：未来をプロトタイプしよう』（長谷川 恭久さん）
• （2）『2013年に向けて押さえておきたいマークアップ・トレンド20』（益子 貴寛さん、小山田 晃浩さん）
• （3）『CodeGrid総集編2012「2012年の必読記事＆2013年の注目記事」』（中村 享介さん、山田 順久さん、外村 奈津子さん）
• （4）『アクセシビリティ：AccSellポッドキャストLIVE収録』（植木 真さん、中根 雅文さん、山本 和泉さん）
• （5）『ツールと制作環境、電子書籍2012-2013』（鷹野 雅弘）
• （6）『ソーシャルメディア：2012年のトピック振り返りと2013年に向けた活用の押さえどころ』（大月 茂樹さん、井出 一誠さん）
• （7）『スマホ・タブレット・ミニタブ時代の Webサイト制作術』（たにぐち まこと、松田 直樹さん、矢野 りんさん）
• （8）『WebのスキルをWindows 8で活かそう』（春日井 良隆さん）
• （9）『Webデザイントレンド年末スペシャル!! 今年のWebサイトの表現を多角的に振り返る60min.』（原　一浩さん、矢野 りんさん、坂本 邦夫さん）

気が早いですが、Shift7は2013年12月14日にベルサール神田で開催します。ご興味ある方はFacebookで仮表明しておいてください。

• Shift7（Webデザイン行く年来る年）

ご参考：

• CSS Nite LP, Disk 25：Webデザイン行く年来る年（Shift6）が終了しました | CSS Nite公式サイト
• CSS Nite LP, Disk 25：Webデザイン行く年来る年（Shift6） - Togetter

2013年3月14日（木）19:30-21:00、コワーキングスペース茅場町Co-Edoにて、CSS Nite @Co-Edo, Vol.7「まるわかりTwitter Bootstrap」を開催し、31名の方にご参加いただきました。

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 益子 貴寛さん（サイバーガーデン）、小山田 晃浩さん（ピクセルグリッド）の『2013年に向けて押さえておきたいマークアップ・トレンド20』のスライドなどを公開します。

• スライド（PDF、122ページ、8.0MB）
• 音声

メッセージ（益子さん）

マークアップセッションを担当した益子です。

今年で6年目の「Shift」。もう6年も、みなさんに愛してもらっているのかと思うと、とてもとても感慨深いです。

デバイスも、ワークフローも、制作手法も、2012年は、まさに「Shift」な一年でした。

また、仕事や生活のステージが変わった人、変わりつつある人も、きっと多かった一年だったと思うのです。

出演者として、また、みなさんと同じひとりの聞き手として、そんなことをじんわりと感じながら、セッションを楽しみました。

最後に、当日の設営は、CSS Nite地方版のみなさんにお手伝いいただきました。この場を借りて、心よりお礼申し上げます。

重い締めはイヤなので、さあ、Shift！ Shift！ Shift！

メッセージ（小山田さん）

マークアップセッションを担当した小山田です。

セッション内容、いかがでしたでしょうか。直接 HTML に触らないデザイナーさん、ディレクターさん、Web 担さんにも、関係ないのではなく、HTML5 の広い普及、それに伴うフロントエンド (HTMLコーディングなど) のワークフローに大きな変化が起こっているということは知っておくといいと思います。

なぜなら Web 作成には HTML は必ずついてくるもので、そのとき新しい技術やツールをきっと目にするはずです。

さて、セッション中の挙手によるアンケートでは、CSS プリプロセッサーを導入しているかたは 3割程度という反応をいただきました。ですので、これから導入を検討している方へのヒントをここでは共有したいと思います。Sass、LESS、stylus はどれも素晴らしいソリューションですが、もし迷われているのでしたら Sass から始めてみるといいと思います。なぜならブログなど、Web 上に情報がたくさんあるからです。

また、CSS プリプロセッサーを利用する上でビルドツールもセットで利用する必要があります。Scout は Win/Mac の両方があり、かつ無料ですので最初の導入にはいいかと思いますまとめると、導入には Sass + Scout ということです

また、Scout では物足りなくなってきたら、有償ではありますがより高機能な CodeKit や LiveReload もおすすめです。

来年 2013 年は、CSS プリプロセッサーが jQuery と同じくらいポピュラーな環境へと移り変わっていきます。ぜひこの機会に導入してみてはいかがでしょうか。

CSS プリプロセッサーについては来年の CSS Nite LP 26 で取り上げますので、これからという方は参加してみるといいかと思います。また、ビルドツールの導入や、grunt については、今後 CodeGrid(http://www.codegrid.net/) でも取り上げる予定ですのでよろしければ参考にしてみてください。

アンケートにコメントで質問いただいたきましたので、この場を借りて下記に共有したいと思います。

SVGは代替画像を表示することができますか

おかしな CSS ハックなどを使うよりは、JavaScript と組み合わせるのが一番確実です。私が以前作ったライブラリ(MIT ライセンス)がありますのでよろしければ利用してみてください。https://github.com/yomotsu/SVGReplacer

その他、細かい振り分けをしたいのであればModernizr を利用するといいでしょう。

複数人で Sass や LESS を導入して作業する際の注意点はありますか

ビルドツールを揃えるといいかと思います。というのも、ビルドツールが対応してい るCSS プリプロセッサーのバージョンによってうまく機能しない可能性があるからです。もちろん、ビルドツールが異なっても対応してい るCSS プリプロセッサーのバージョンが同じなら問題ありません。

CSS プリプロセッサーは社内で利用するにはいいけど社外向けにはどうなのでしょうか

ぜひ使ってください。Sass や LESS、Stylus は最終的に綺麗な CSS のコードを書き出します。ですので書きだした CSS ファイルを納品すればいいでしょう。もちろん、それと別に圧縮書き出しを選択することもできます。また、逆もあるかもしれません。複数人で進めているプロジェクトにアサインされた時、あなただけ Sass のファイルを開けない、なんてことになってしまうかもしれません。

メッセージ追加（小山田さん）

Shift6 の時点では未発表でしたが、本日 (12月17日)、HTML5 の仕様がほぼ Fix したようです。

本当の勧告は少し先ですが、マークアップセッション中にも触れた at risk 以外については、制作者が利用しても問題ないという目安となるでしょう。これからはさらに安心して HTML5 を採用できます。今後は PC サイト、スマホサイトなどデバイス問わず、旧 HTML でなく、より拡張性がある HTML5 を採用するといいかと思います。

at risk は HTML5.0 の草案の冒頭にも列挙されています。

ビデオ

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 中村 享介さん（ピクセルグリッド）、山田 順久さん（ピクセルグリッド）、外村 奈津子さん（ピクセルグリッド）の『CodeGrid総集編2012「2012年の必読記事＆2013年の注目記事」』のスライドなどを公開します。

• スライド
• 音声

メッセージ

特別セッション「CodeGrid総集編2012」を担当したピクセルグリッド、中村、山田、外村です。ご参加ありがとうございました。

2012年の総集編として2つのエンジニアトークをシェアしました。それぞれについて、ご質問への回答も含めて、情報を補足しますね。

■JavaScript開発見積もり（中村）

基準となる作業を決めて、それにポイントなどの仮想単位で見積もるという方法は、アジャイル開発で使われている手法です。以下の書籍に詳しい方法が紹介されていますので、参考にしてみてください。

『アジャイルな見積りと計画づくり ?価値あるソフトウェアを育てる概念と技法?』（マイナビ）http://book.mycom.co.jp/book/978-4-8399-2402-7/978-4-8399-2402-7.shtml

ピクセルグリッドでは上記の情報を参考にしながら、自分たちでアレンジしつつ見積もりを行っています。基準となる工数の見積もりをピクセルグリッドがどのように行ったかについては、ぜひCodeGridの記事を読んでもらいたいです。

この見積もりをクライアントに提出する際は、みなさんに紹介したのと同じようにポイントの意味を理解していただき、納得してもらっています。あまりそこで苦労したことはありません。

■先取り、Shadow DOM（山田）

Shadow DOMはあの時間内で消化するのは、ちょっと大変だったというご意見もありました。また、はじめてあの技術を知って、これから注目していきたいと思った方もいたようです。

参考になる情報をご紹介したいのですが、実は、まだ日本語の情報があまりありません。

よろしければ、非常にシンプルにまとめた私のブログがありますので、読んでみてください。「Chrome で試せる Shadow DOM」http://text.funenplacanen.com/2012-07-01-chrome_shadowdom.html

もし、Shadow DOMに興味を持ち、少しおさえておきたいなと思われたようでしたら、CodeGridがおすすめです（笑）。CodeGridにはなぜこんな技術が必要になったのか？から詳しく書いていますので、ぜひそちらを読んでもらえればと思います。

■キャンペーンもお忘れなく（外村）

スライドの最後でお知らせした30日間無料を60日間無料にするキャンペーンは12月17日（月）までですので、ぜひお見逃しなく。（小さな声で）60日間無料の間に解約すれば、購読料はかかりません。

■CodeGrid

また、CodeGridでどんなことをネタにしているのか、アンテナだけ張っておきたいという方はTwitterで@CodeGridをフォローしてみてください。毎週の配信タイトルをツイートしています。

■CodeGrid@Twitter

ビデオ

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 大月 茂樹さん （ニイハチヨンサン）、井出 一誠さん（ガイアックス）の『ソーシャルメディア：2012年のトピック振り返りと2013年に向けた活用の押さえどころ』のスライドなどを公開します。

• スライド（PDF、96ページ、43.2MB）
• 音声

メッセージ（大月さん）

ソーシャルメディアセッションを担当した、大月です。皆さん、ご参加ありがとうございました。そして、長丁場お疲れさまでした。

Shiftでは初めてフォーカスされたソーシャルメディア。おそらく、一人のユーザーとしてFacebookやTwitterなどソーシャルメディアをお使いの方は多いと思いますが、業務の一部としてソーシャルメディアに向き合ってらっしゃる方は、まだ少ないのではないでしょうか。また、どちらかと言うとソーシャルメディアはマーケティング寄りのトピックであり、私のようにフリーランスで制作全般に携わっている方と、分業環境で制作に携わってらっしゃる方とでは、捉え方が異なるのは当然のことだとも思います。

ただ、ソーシャルメディアの活用は今後一層加速度を増していくであろうと予測される中で、例えば、ソーシャルメディアとの親和性が高いWebデザインであるとか、マークアップであるとか…マーケターのみならず、Webデザイナー、マークアップエンジニアにも程度の差はあるとしてもソーシャルメディアの理解は少なからず必要になってくると考えています。

冒頭でもお伝えした通り、Shiftの他セッションで採り上げられたトピックと同様にキャッチアップしていくだけでもかなり大変ですが、2013年はソーシャルメディア界隈のトピックへも是非目を向けてみてください。

最後に。今回は西日本の各地から参加された方も多いと思います。興味あるイベントが開催されると知っても、「東京かぁ…」といったことも結構あるのではないでしょうか。ということで、地方の方に向けてamplifizrというイベントを主催しています。次回は、こもりさんにお越しいただきますので、興味のある方は是非。

#amplifizr

と言うことで、また来年も皆さんとShiftでお会いできるとうれしいです。良い年をお迎えください！

メッセージ（井出さん）

ソーシャルメディアセッションを担当させて頂いたGaiaXソーシャルメディア ラボの井出です。

「2012年のトピック振り返りと、2013年に向けた活用の押さえどころ」という事でお話をさせて頂きましたが、ソーシャルメディア関連の聞きなれない言葉が出てきて分かりにくい部分もあったかと思います。

各トピックで説明が足りないかなと思った部分は、以下にて参考記事をお送りしますのでご参照頂けたらと思います。

ソーシャルメディア全般

• 効果測定についての参考記事リクルートSUUMOから学ぶ、Facebookの使い方5つのポイント

Facebookについて

• Facebookクーポンについての参考記事広告メニュー化したFacebookクーポンの発行方法、詳細まとめ
• 多くの企業でFacebookクーポンが発行可能に！ノーマークだった方へ旧版との4つの違いを解説
• リアルいいね！サービス紹介サイト
• グローバルページについての参考記事
• パワーエディタについての参考記事

Twitter

• Twitter Cardsについての参考記事

Google

• SERPsとの連携についての参考ページ

ビデオ

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 たにぐち まことさん（エイチツーオー・スペース、anygraphica）、松田 直樹さん（まぼろし）、矢野 りんさん（Android女子部部長／Baidu Inc. デザイナー）の『スマホ・タブレット・ミニタブ時代の Webサイト制作術』のスライドなどを公開します。

• スライド（PDF、109ページ、12MB）
• スライド（ムービー版、819MB）
• 音声

メッセージ（たにぐちさん）

スマートフォンセッションを担当した、たにぐちです。

今年のスマートフォンセッションは、「マークアップセッション」と話が重なる部分が多かったと思います。それはきっと、「スマートフォン（タブレット端末含む）」と呼ばれるものがすでに、「携帯電話の代替」という存在から、Webを閲覧するスタンダードな存在になりつつあるといえるでしょう。

来年以降、私たちはかつて「記憶媒体はカセットテープだったんですよー」とか「プリンタはパンチカードで・・」というような話を懐かしく聞くのと同じ感覚で、「マウスというデバイスが昔はあってね・・」という時代に突入します。

そのとき、それでもマウスにかじりついてしまう人たちと、そうでない人たちに大きく分かれることになるでしょう。私たちはぜひ後者になれるよう、一緒にキャッチアップを続けていきましょう！

セッションで取り上げたツール類の URLです。 　 * Google Now* Pinterest* Path App Fly-out Menu using CSS3 & jQuery* Google ウェブマスター向け公式ブログ: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法* Media Queries - W3C* 歴史雑談録* Resizer* Aptus* Chrome for iPhone* Adobe Edge Inspect　 また、一点補足です。

Adobe Edge Inspectについて

Adobe Edge Inspectは、次の2ライセンスから構成されています。

• 無償メンバーシップ：1端末までが利用可能です
• 有償メンバーシップ：端末数に制限はありません。Edgeツールのみの「1,000円/月」のライセンスまたは、Creative Cloudライセンス（5,000円/月）があります

以上です。来年もどうぞよろしくお願いいたします。

メッセージ（矢野さん）

ご参加ありがとうございました。矢野りん＠スマートフォンセッションです

公演中、デバイスごとにコンテンツを最適化する必要がある、という話の根拠になる記事を紹介します。

Googleが運営しているインサイトコンテンツ「think with Google」のなかの、The New Multi-Screen Worldをぜひ一度御覧ください。

PC、スマートフォン、タブレットではそれぞれユースケースが異なっています。求められるコンテンツの量も質も違うのだとうことが想像できるでしょう。それと同時に、今後は「マルチデバイス」に対してコンテンツを常時配信できる組織がどんどん強くなるということもわかります。しかしそのような運用力のある組織は限られてきます。

マルチスクリーン、マルチデバイス時代突入の初速を確保するため、とにかく手持ちのコンテンツをレスポンシブにすることは間違っていません。でも、やはりそこからどんどん最適解を求める必要も同時にあるハズ。

制作コミュニティが知恵を出し合いつつ、 New Multi-Screen Worldを楽しく、便利な世界にしましょう！

メッセージ（松田さん）

スマートフォンセッションにて、レスポンシブWebデザインについてお話いたしました松田直樹です。みなさま、ご参加いただきありがとうございました。

スマートフォン視点からのRWDはどうなの？という路線での内容をご紹介しましたが、今後のRWDがどう普及するのか分からない、というのが個人的にも客観的にも正直なところです。

今年、一挙に流行した感が強く、また各所で賛否両論、難しい話が繰り広げられていたりして、導入に二の足を踏んでおられる方もいらっしゃるかと思います。ただ「RWDというスマホ対応の選択肢が増えた」ということで我々Web制作に携わる者としては喜ばしいことだと考えてみましょう。

公演でも「むずかしく考えない」とお話しましたが、まずは一度、簡単にでもRWDでサイト設計されてみることをおすすめします。RWDそのものは決して難しいものではありません。自ずと向いている点、使うべき点が見えてくると思います。RWDが向いているケースは多々ありますので、このセッションがその判断のご参考になれば幸いです。

Adobe Edoge Inspect

講演中に紹介した「Adobe Edge Inspect」ですが、Creative Cloudの有償メンバーシップであれば、一度に接続できるデバイスの数は無制限でした。 　

RWDの検証に使えるWebツール・サービス

• Firefox「レスポンシブデザインビュー」：「ツール」→「Web開発」→「レスポンシブデザインビュー」
• The Responsinator
• Responsivator
• Responsive Design Testing

ビデオ

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 原　一浩さん（Greative）、矢野 りんさん（Android女子部部長／Baidu Inc. デザイナー）、坂本 邦夫さん（フォルトゥナ）の『Webデザイントレンド年末スペシャル!! 今年のWebサイトの表現を多角的に振り返る60min.』のスライドなどを公開します。

• スライド（PDF、136ページ、14.3MB）
• 音声

メッセージ（原さん）

デザイントレンドを担当しました原です。

長時間のセッションの後に最後の65分ということで、本当にお疲れさまでした＆ありがとうございました。

今年は平年行っている各種定点観測や海外サイトのリサーチに加えて、今まで撮った海外サイトの再キャプチャも行いました。

すると、時代を経たあとのデザインの変化がわかってきます。以前は先鋭的なサイトだったものが、今では平凡なスタイルにリニューアルされていたり、相変わらずトレンドを追っていたりといった多種多様なサイト運用のありかたが見えます。

ウェブサイトのデザインの歴史は、変化の激しい時代における伝達アプローチの試行錯誤の繰り返しといえると思います。そう考えつつ、改めて今、そして過去のスライドを眺めてみると、今までは感じられなかった潮流のようなものが感じられるのではないでしょうか。

年末のちょっとした休暇中に今までのデザインを振り返ってみるのもいいかもしれません。

本セッションにご参加いただきありがとうございました！もしよければ来年お会いしましょう！

イベントの冒頭で紹介した書籍はこちらになります

Web制作標準講座 [総合コース] ~企画からディレクション、デザイン、実装まで~http://www.amazon.co.jp/dp/4798127930

コワーキングスペースを茅場町ではじめることになりました

コワーキングスペース茅場町 Co-Edo（コエド）http://www.facebook.com/CoWorkingSpaceKayabacho

※ 通称Co-Edoは鷹野さんにつけていただきました！こちらでは、HTML/CSSからバックエンド関係までいろいろな勉強会を行っていく予定です

メッセージ（坂本さん）

デザイントレンドで配色を担当しました坂本です。

昨年のShiftで液晶モニタのサイズが大きくなって、レイアウトが変わったてきたという話をしたのですが、たった1年で最も大きなはずのPC用の液晶モニタが最も貧弱な機器となりつつある現状に驚いています。

今までおまけのような扱いであったファビコンに変わりイメージを左右するスマートフォン用のホームアイコンがデザインの主役に躍り出るかもしれないとも感じています。

環境は変わり、デバイスも増えていくでしょうが、デザイン（機能性も含めた）の重要性が下がることありません。本セッションが1年間、元気に仕事を続けるためのヒントになったならばうれしく思います。

今回作成したインフォグラフィックについての補足ですが、ここ数年、背景色とのコントラストが高くなっている傾向が出ており、、スマートフォンサイズでの表示でも見やすいロゴになっています。今後、数年はこの傾向が続くのではないでしょうか。

また坂本の目でもお話ししたデバイスごとの見出しについては、2月7日発売の書籍（チラシの本です）でも解説しております。ご興味のある方はぜひお読みください。

• 『ウェブ配色 決める! チカラ - 問題を解決する色彩とコミュニケーション』
• 『ウェブ配色 決める! チカラ - 問題を解決する色彩とコミュニケーション』Facebookページ

今回は東京以外からの参加者も多かったと聞いております。また来年もどこかでお会いできればと思っています。皆様、どうぞよい年をお迎え下さい。

メッセージ（矢野さん）

今年は「情報の流れ、理解を促進するステップを形にしたデザインが今年のトレンドだった」というお話をしました。

また、タブレットやPCといった操作方法の異なるデバイスでの利用を想定したレイアウト、パーツのサイズなども事例がどんどん出てきた年でしたね。

このセッションを組み立てるにあたり、原さんがガンガン収集してくださった「トレンディーな」サイトをとてもたくさん拝見しました。そんな中で矢野は「流れ」を意識し「活用する」ことを前提としながら「平面に成果物を落としこむ」デザインはずっと昔からあることに気づきました（にもかかわらず当日は時間がなくて言及しませんでした）。

それは「飛び出す絵本」です。

ストーリー性、操作性、クリエーティブ。どれをとっても今のウェブサイトに求められるクリエーティブにそっくりです。飛び出す絵本の巨匠といえば「ロバート・サブダ（Robert Sabuda）」です。ぜひ一度書店で手にとってみてください。ウェブサイトじゃん！と、びっくりしますよ。

でも、サブダ本人のオフィシャルサイトは...（http://wp.robertsabuda.com/）この相関関係に気づいてないっぽいですねw

ビデオ

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 春日井 良隆さん（日本マイクロソフト）の『WebのスキルをWindows 8で活かそう』のスライドなどを公開します。

• スライド
• 音声

メッセージ

「特別セッション：WebのスキルをWindows 8で活かそう」を担当した日本マイクロソフトの春日井です。ご参加いただきありがとうございました。

今回の講演はWindows 8の開発チームが今年の6月にブログに投稿した「Windows 8 のユーザー エクスペリエンスの作成」という記事から構成しました。ぜひご一読ください。

超ハイテンションでWindows 1を語るSteve Ballmerの伝説のビデオはこちらです。この圧倒的なエネルギーが世界各国に散らばるMS社員を牽引しています。

HTML5とJavaScriptでWindows 8アプリを作れることを始めて知った！作ってみたい！という方が多くいらっしゃいました。ぜひ、Webの技術でWindows 8アプリを作って下さい。

開発関係では、アンケートでこんな質問をいただきましたので回答します。

Q：Windows 8アプリはWindows 8 64bitでないと開発できないという話を耳にしましたが、HTML5+JSなどの場合は該当しないでしょうか？

A：Windows 8が32bit版でも、HTML5+JS、C#、C++に関係なくWindows 8アプリの開発はできますのでご安心ください。ただし、なにか特殊な事情がない限り（どうしても使いたいデバイスのドライバーが32bit版しかないなど）、64bit版のWindows 8を使うことをお勧めします。

「・・・そして2年後、もしその時点でもタッチ機能を搭載しないPCが店頭にあったならば、消費者は画面を触ってみて、「これは壊れているのではないか？」と訝しむようになると思います」と答えたスティーブン・シノフスキーのインタビュー全文はこちらです。

Kinectを使ったプレゼンが思いの外、好評でした。Kinectは元々はXBOX360向けのデバイスですが、Kinect for WindowsというWindows OSで使えるキット、SDKが出ています。Open NIというサードパティのSDK（非公式）はMacOSにも対応しています。これからのコンピュータデバイスのコンテンツやサービスには、こんなフィジカルな要素が増えてくると思います。

ビデオ

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 長谷川 恭久さんの『基調講演：未来をプロトタイプしよう』のスライドなどを公開します。

• スライド
• 音声

メッセージ

基調講演を担当した、長谷川です。長丁場お疲れさまでした。長くもあり短く感じた濃い時間を、多くの方と共有できて嬉しく思っています。

大変短い時間だったこともあり、紹介しきれていない部分が多々ありましたので、以下の記事や資料を参考にしてください。 　 * スライドで紹介した Web サイト・サービスのリンク集* カンプは過去のものと捉えて、未来の Web デザインを考えようと提案した講演。スライドがみれます。 * 今年はプロトタイプのワークショップを何度か開催しました。そのときの模様をひとつ。 　 今回、プロトタイプのツールや作り方を解説しなかった理由は、プロトタイプそのものに固定概念をもってほしくないというメッセージが込められています。私自身、誰とどのようにコミュニケーションをするかによって、ツールを変えています。紙で行うタイプのものから、Photoshop で出来るものまで様々。10 前後のプロトタイプツールを時と場合に応じて使い分けています。数多くのツールが存在しますし、肌に合うツールをきっと見つけることができるはずです。

なぜ使い、どれを使うのかを探し求めるプロセスが、スキルとして自身に浸透するはずです。基調講演で「What」ではなく「Why」と話したこととも繋がります。

何処から始めて良いのか分からないのであれば、紙で書いたものを動かしてみてください。Fireworks から抜けられないのであれば、まずはホットスポット機能を活用してインタラクションを見せるように工夫してみてください。「こうしなければプロトタイプではないかも」と考えるのではなく、「今のような静的なカンプでは伝わらないコトは何で、どうすれば伝わるのか」を考えてみてください。視覚以外の多くのことがうまく伝わっていないというキヅキにもなるはずです。

今までずっと続けてきた Web サイト制作プロセスの再定義は、言う以上に難しいです。しかし、再定義が余儀なくされるほど、社会が変わってきているのも事実です。また、今話題になっている様々な Web 技術やテクニックも、従来のカンプ（静的な絵）から始めるデザインプロセスでは有効に活用できないこともあります。例えば Less/Sass のようなプリプロセッサーも完成したカンプを早くマークアップするための効率化テクニックではありません。今のワークフローやプロセスに合うかどうかではなく、どう変えていくことで、これからの技術やテクニックを最大限に活用できるかを考えなければいけません。

そのためのキーワードとして「プロトタイプ」は重要な意味をもつと考えています。来年以降もこのトピックには深く関わっていきますので、お楽しみに。一緒に勉強していきましょう！

2012年、ありがとうございました。来年度もよろしくお願いします。

ビデオ

2013年3月7日（木）19:30-21:00、コワーキングスペース茅場町Co-Edoにて、CSS Nite @Co-Edo, Vol.6「画面に向かうな！ 『作らないデザイン』をしてラクをしよう」を開催し、24名の方にご参加いただきました。Ustream中継も行いました。

ツイートは下記にまとめました。

• CSS Nite @Co-Edo, Vol.6 「画面に向かうな！ 『作らないデザイン』をしてラクをしよう」 - Togetter

次のブログで取り上げていただきました。ありがとうございます。

• CSS Nite @Co-Edo Vol. 6 「画面に向かうな！ 『作らないデザイン』をしてラクをしよう」に参加しました | CreativeStyle
• 技術メモ: 3月7日 CSS Nite @Co-Edo, Vol.6 「画面に向かうな！ 『作らないデザイン』をしてラクをしよう」 に参加した

今回の講演者、石嶋さんのブログ：

• CSS Niteにて「スマートフォンデザインでラクするために」のワークショップを行いました | ウープスデザインブログ (デザイナーまめこ)

来週の木曜日（3月21日）19:00からアップルストア銀座（3Fシアター）にて、CSS Nite in Ginza, Vol.68を開催します。

今回は、Fireworksにフォーカスし、2つのセッションで構成します。

• HiDPI時代のFireworks／松田 直樹（まぼろし）、鷹野 雅弘（スイッチ）
• 仕事で使える、アイコン作画のコツとSVG変換のススメ／狭間 句美（ふわっと）、森 和恵（r360studio）

事前登録を行った方

• 入場時に受講票をご呈示ください。ご呈示ない場合には、事前登録は無効とさせていただきます。
• 受講票は3月14日7:30頃に、登録されたメールアドレスにお送りしています。
• 18:45前にご来場の場合には1F右手奥からの階段にてお待ちください。開演時間まではエレベータ階段をご利用ください。
• 椅子席は先着順です。
• 後から来る方の「椅子取り」はご遠慮ください。

※事前登録を行っていても、座れない可能性があります。

事前登録を行っていない方

• エレベータは使用せず、1F右手奥からの階段をご利用ください。
• 18:50からのご入場を予定しています（それまでは階段にてお待ちいただくことになります）
• 当日枠は20-30人くらいの見込みですが、定員180名を超える場合、ご入場いただけない可能性があります。

CSS Niteに初参加の方へ

はじめてご参加される方へをぜひご一読ください。

注意事項

• CSS Niteに関しては撮影、録音などOKですが、アップルストア銀座のその他のフロアーは、写真撮影不可です。
• アップルストア銀座の店内では飲食不可ですが、フタ付きのペットボトル等であれば問題ありません。
• アップルストア内でのお食事はご遠慮ください。

公開ポリシーとtwitter

• スライドは、イベント終了後にCSS Nite公式サイトにて公開予定です。アップルストア銀座でのイベントの規約変更に伴い、録音・録画がNGになりました。スライドのみ、公開します。
• 音声の公開は行いませんので、必要な方は、ご自身で録音してください。
• 撮影いただく場合、携帯電話など、撮影時に音が出る機器はご遠慮ください。

キャンセルについて

事前登録された方で、ご都合が悪くなった場合には、キャンセルフォームからご連絡ください。

懇親会について

今回の懇親会は、コワーキングスペース茅場町Co-EdoにてFireworks User Group LightningTalkとして開催します。こちらのみの参加もOKです。

2013年3月21日（木）19:00-20:00、アップルストア銀座 3FシアターでCSS Nite in Ginza, Vol.68を開催します。

松田 直樹さん（まぼろし）を迎え、「HiDPI時代のFireworks」と題して開催します。

iPhone 4にRetinaディスプレイが採用された以降、昨今リリースされるデバイスのHiDPI（高密度）化が急速に向上しています。サイトのスマートフォン対応の必然性、レスポンシブWebデザインの普及も相まって、デザインカンプのあり方も変わりつつあります。
このような状況の中、デザイン作成の手法、Webサイトにおける画像の取り扱い方はどう変わっているのでしょうか。自身の経験に基づいたHiDPI時代のデザイン手法、Fireworksを中心としたTipsなどをご紹介します。

事前登録をまもなく終了します。

事前登録する

また、狭間 句美さん（ふわっと）、森 和恵さん（r360studio） による「仕事で使える、アイコン作画のコツとSVG変換のススメ」というミニセッションも予定しています。

スマートフォン対応サイトでは、リンクなどでアイコンをよく使うようになりました。しっくりくる絵がないな…というとき、探すより作った方が早いかもしれません。
リアルな写真からアイコンを作る場合、対象をいかに簡略化して認識しやすい絵ににするか？が大切です。そんな、知っておくとうれしい、Fireworksでのアイコン素材作成のコツをお話します。
また、それを SVGやWeb Fontsに変換し、HiDPI対応サイトでも使えるように仕上げます。

さらに、終了後、会場をコワーキングスペース茅場町Co-Edoに移し、Fireworks User Group LightningTalkを開催します。

2013年3月7日（木）19:30-21:00、コワーキングスペース茅場町Co-Edoにて、CSS Nite @Co-Edo, Vol.6「画面に向かうな！ 『作らないデザイン』をしてラクをしよう」を開催します。

画面に向かう前に、準備することはたくさんあります。その中でも悩みの種になりやすいのが、コミュニケーション。
社外・社内問わずデザインに関しての議論は終着点が見えづらく疲れ果てた時になんとなくで決まったりすることもあります。
どんな風にしていけば、スムーズなのか。そしてその時に気をつけることはどんなことなのか？
画面に向かわないけどこれも「デザイン」です。言わば「作らないデザイン」
わたしが意地悪な発注者としてみなさんに案件を依頼しますので、チームを組んでどんな提案をすべきか会議をしてください。そのとき、決着がつかなかった点はどこなのか。それには何が足りなかったのか。一緒に考えてみましょう。

すでに満席になっていて、受付は終了していますが、Ustream中継を行います。

参加予約されるとリマインダーが届きます。

Free live streaming by Ustream

2013年2月28日（木）19:30-21:00、コワーキングスペース茅場町Co-EdoでCSS Nite at Co-Edo, Vol.5「スマホデザインプロトタイピングワークショップ」を開催し、25名の方にご参加いただきました。

スキャンしたり、データのままになっている町内会報とか学校からのおしらせ、回覧板のような「もともと紙を最終出力形式にする目的で作られたコンテンツを電子化したデータ」を便利に活用しやすくするアプリを想定し、グループごとに、ストーリーやプロトタイプ作成を行うというワークショップです。

矢野さんの講評（Facebookイベントにリンク）

• CSS Nite @Co-Edo, Vol.5「スマホデザインプロトタイピングワークショップ（仮）」