CSS Nite公式サイト

2011年9月21日（水）19:00-21:00、加賀電子セミナールーム（秋葉原）にて開催を予定していたCSS Nite redux, Vol.5 powered by Designer's Garageですが、台風のため、開催を延期します。

お申し込みくださった方には、延期のお知らせをご連絡いたしました。なお、ご送金いただいた方には、一旦、全額返金いたします。

9月17日(土)、ベルサール神保町にてCSS Nite LP, Disk 18「その先にあるjQuery」を開催し、163名の方にご参加いただきました。

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

• CSS Nite LP18「その先にあるjQuery」 - Togetter

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

• CSS Nite LP17 そして LP18 | オヤマ日記飴
• CSS Nite LP, Disk 18「その先にあるjQuery」 ? naonyan’s blog
• エム・アールデザイン｜デザインブログ ? CSS Nite LP, Disk 17「HTML5による電子書籍」｜CSS Nite LP, Disk 18「その先にあるjQuery」を聴講した。

こちらは出演者、関係者のブログ

• CSS Nite LP, Disk 18「その先にあるjQuery」が終了しました[to-R]
• awesome! creators shop　新着情報｜オーサムクリエイターズショップ #awesome

9月17日(土)、ベルサール神保町にてCSS Nite LP, Disk 17「HTML5による電子書籍」を開催し、150名の方にご参加いただきました。

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

• CSS Nite LP17「HTML5による電子書籍」 - Togetter

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

• CSS Nite LP17 そして LP18 | オヤマ日記飴
• CSS Nite LP, Disk 17「HTML5による電子書籍」 ? naonyan’s blog
• Re* Programming ? CSSNite LP17 「HTML5による電子書籍」　参加レポート
• watalucky.com - CSS Nite LP, Disk 17「HTML5による電子書籍」
• CSS Nite LP, Disk 17「HTML5による電子書籍」 - overprint
• エム・アールデザイン｜デザインブログ ? CSS Nite LP, Disk 17「HTML5による電子書籍」｜CSS Nite LP, Disk 18「その先にあるjQuery」を聴講した。

こちらは出演者、関係者のブログ。

• Charles Web Debugging Proxy の使い方 | gaspanik weblog
• awesome! creators shop　新着情報｜オーサムクリエイターズショップ #awesome

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、こもり まさあきさんの『写真の色に関するトラブルをなくせ ? その色、本当にあってますか？』のスライドと音声をシェアします。

• スライド
• 音声（MP3、37:58）
• フォローアップ

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、丸山 章さんの『パワーユーザー必携の海外の拡張機能20選+α』のスライドと音声をシェアします。

• スライド（PDF、34ページ、1.5MB）
• 音声（MP3、44:04）

メッセージ

長丁場のイベントでしたが、来場者の皆様お疲れ様でした。

CSS NiteでFireworksのイベントが開催されるのを本当に待ちに待っていた人の一人です(笑)。

今回はFireworksでの作業効率化にフォーカスした拡張機能をいろいろ紹介させていただきました。

皆様のアンケートを拝見しましたが、概ね好評で、自分が思っている以上に海外の情報が知られていないんだなあと驚きの反面、今回のテーマにしてよかったと思っております。少しはFireworksの良さを伝えるのに貢献できたかなと(笑)。

実はコマンドはそれほど敷居が高い物ではなく、JavaScriptが多少わかれば簡単なものであれば、簡単にカスタマイズして使うことが可能です。

自分はJavaScriptの勉強にコマンドを覚えました（まだへっぽこですが）。FireworksAPIはExtending Fireworksをご覧下さい。邦訳されてないので、英語が苦手な方には若干敷居が高いかもしれませんが、是非チャレンジしていただければと思います。Extending Fireworkshttp://help.adobe.com/en_US/fireworks/cs/extend/index.html

Tables拡張機能はJohn Dunning氏によるもので今回とりあげたその他の拡張機能も彼のものが多いです。http://www.johndunning.com/fireworks/

今度はいつFireworksのイベントが開催されるかわかりませんが、その時もまた皆様とお会いできますことを楽しみにしています。

Enjoy your Fireworks life!

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、山本 和泉さん（#fc0）の『コーダーさんにもやさしいFireworks』のスライドと音声をシェアします。

• スライド（PDF、14ページ、1.9MB）
• 音声（MP3、8:03）

メッセージ

CSS Nite LP14にご参加のみなさま。こんにちは！#fc0山本和泉です。長い時間おつかれさまでした！

今回私は「ものさしツール」と「書き出し領域ツール」を紹介しました。これらのツールは知っている人はめっちゃ知ってるけど、知らない人は存在さえ知らないツールだと思います。でもとてもいい仕事をするツールなのでぜひ使ってみてください！

「ものさしツール」は、Web制作に関わる方すべての方を幸せにするツールだと思います。補足として「ものさしツール」はオブジェクトとして扱われていますので、線や文字（数字）の色を変更することもできるので、デザインカンプのテイストに合わせて色を変えることで数値を見やすくすることができます。

「書き出し領域ツール」は、普段の作業でコアに使うツールではないと思いますが、修正後一部だけ書き出さないといけないときなどに大変便利なツールです。補足として、ドラッグで表示した領域を解除するには［Esc］キーを使います。間違えやすいので気をつけるとさらに効率がアップすると思います。

今回をきっかけにFireworksのイベントが増えたらいいな！って思っています！そしてもっとみなさんとFireworksを一緒に語り合いたいです！

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、上敷領 智子さん（オフィスコトウ） の『モバイルサイト制作におけるFireworksの活用』のスライドと音声をシェアします。

• スライド（PDF、32ページ、3.8MB）
• 音声（MP3、9:28）

メッセージ

ご参加されたみなさま、長時間のイベントお疲れさまでした！

モバイルサイト制作はニッチなテーマだったかもしれないのですがまだまだ需要がなくならないものですし、セッション内容を活かしていただけると幸いです。今回セッションで触れた画像の書き出しと共有ライブラリはスマートフォンサイトの制作にも活用できるところもあるのではと考えています。

以下、補足や今回のセッション内容に関連したとても参考になる記事です。

■コマンド機能-半角変換のコマンド

-コマンドの登録方法についての参考記事です。掲載されているコマンドもとても便利で参考になります。自動化のすすめ（Fireworks CS4 コマンドでより効率化！） - EC studiohttp://designblog.ecstudio.jp/tool/fireworks-cs4-command.html

■共有ライブラリ-共有ライブラリ化されたiPhoneパーツなどを紹介されています。かなり便利！大喜利を担当された南さん、坂井さんも書かれているブログです。

【Fireworks】iPhone 画面パーツ集 - バシャログ

-PCサイト向けの使えるパーツが入っていておすすめです！大喜利を担当された柴田さんのブログです。Fireworksの共有ライブラリ作りました - Webデザインのタネ

■おまけ-当日していたネイルです。Adobe Fireworks & Photoshopネイル

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、関口 和真（cieds） さんの『PhotoshopのカスタムブラシをFireworksで利用する方法』のスライドと音声をシェアします。

• スライド（PDF、16ページ、2.2MB）
• 音声（MP3、21:04）

メッセージ

PhotoshopのカスタムブラシをFireworksで使う、というテーマで話をさせて頂きましたが、Fwでは残念ながらPhotoshopのカスタムブラシの全てを使うことは出来ません。ですが、分解することで、絵の描けない方でも効率的に素晴らしい作品を作る一助になれば、幸いです。Fireworksで読込んだ分解済みのブラシですが、共有ライブラリに入れることで再利用可能となり、より利便性を向上することも可能かと思います。FireworksLoverな方は是非使ってみてください。

FireworkUsersGroupでもFireworksに関するテクを勉強会通して学ぶ機会をさらに設けたいと思います。機会がありましたら、是非ご参加ください。

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、山本 和泉さん（#fc0）、鷹野 雅弘（スイッチ）、黒野 明子さん（linker）の『FireworksビギナーのためのFireworksベーシック』のスライドと音声をシェアします。

• スライド（PDF、63ページ、6.6MB）
• 音声（MP3、75:30）

メッセージ

ご参加ありがとうございました！

実は、Fireworksでは厳しいな、と数回延期。苦肉の策でPhotoshop使いを巻き込んで、という展開だったのですが、結果として、楽しいイベントになったように思います。

このイベントの準備を通して、私自身も大変勉強になりました。サイボウズLiveを使って、やりとりをしていたのですが、そこで集まったネタを、追ってまとめてお知らせする予定です。

今回の内容、および、昨年6月のOmetesandoの内容を書籍化します！

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、湯口 りささん（RsStudio）の『フォーム系の共有ライブラリの活用』のスライドと音声をシェアします。

• スライド（PDF、23ページ、5.0MB）
• 音声（MP3、10:35）

メッセージ

LP14に参加していただいた皆様、本当にありがとうございました。

どこにこんなにFireworksが好きな方や、ちょっとでも気になると思ってくれている方がいたんだろうと、開始直後から嬉しくてたまりませんでした。

大喜利では、便利だけれど使われてないものをということでフォーム系共有ライブラリの活用と題してお話させていただきました。

当日活用まで届かなかったデザイン変更の部分や、使う上でのちょっとしたポイントなどをサイトにアップしましたのでフォーム系共有ライブラリを使う際、ちょろっと見ていただければ幸いです。

[Fireworks]フォーム系共有ライブラリ Tipsと注意点

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、坂井 賢太郎さん、南 慶隆さん（バシャログ）の『FireworksにおけるスライスのTips & Tricks』のスライドと音声をシェアします。

• スライド（PDF、12ページ、0.3MB）
• 音声（MP3、8:27）

メッセージ

CSS Nite LP14 にご来場された皆さま、ありがとうございました。

今回はショートセッションということで、Fireworks の「スライス機能」の効率的な使い方にフォーカスしてお話させていただきました。お話した内容は作業効率化のためのひとつの方法として、ご参考いただけますと幸いです。

セッション後に皆さまから頂いた質問に、この場を借りてお答えします。

Q.　スライスを意識したレイヤーわけにすることのデメリットは？

A.　デメリット、といいますか共有レイヤーやページ機能を駆使して複数ページのデザインがしてあるデータの場合、今回のようなレイヤーわけにすること自体が難しいこともあります。

Q.　あのレイヤーわけではデザイン効率が悪いのでは？

A.　弊社ではデザインの工程ではあまりレイヤー構造は意識しないで作業しています。いざスライス！　という段階で一気にレイヤー構造を整理します。ただ、背景とデバイスフォントのレイヤーはデザインの工程から分けておくと、デザイン作業もやりやすいです。あとは、残ったレイヤーを「スライスする」「スライスしない」の二つに振り分けるだけで OK です。

仕上がりの「クオリティ」では Photoshop かもしれませんが、「作業効率」では断然 Fireworks が優位だと感じています。最近のバージョンでは「クオリティ」の面でも両者の差が縮まってきていますし、今 Fireworks を使わない理由はないのでは！　と思います。

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、林 大輔さん（楽天トラベル）の『Fireworksでテクスチャを使ってみよう！作ってみよう！』のスライドと音声をシェアします。

• スライド（PDF、23ページ、4.1MB）
• 音声（MP3、7:55）

メッセージ

CSS Nite LP14にご参加のみなさま、長時間お付き合いいただきましてありがとうございました。

テクスチャの基本的な使い方、そしてテクスチャの作り方についてお話しさせていただきました。

オリジナルのテクスチャも簡単につくることが出来ることができます。「白と黒」「繰り返し」を意識して、デザインにあわせてテクスチャを是非作ってみてください。

セッション中に紹介したテクスチャ配布サイトのURLです。

• Fireworks texture gallery
• シンプルパターン研究所

アンケートを拝読しました。多くのPhotoshopperなみなさまが、Fireworks Loverになったことを実感させていただきました。Fireworksもできるコなんですよ！

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、柴田 大樹さんの『複数ページのカンプ制作に効く！Fireworksのページ機能の使いどころ』のスライドと音声をシェアします。

• スライド（PDF、18ページ、1.0MB）
• 音声（MP3、8:15）

CSS Nite LP14にご参加されたみなさま、長い時間お疲れさまでした。今回は「ページ機能の使いどころ」を紹介しました。

• 共通で表示するところには「マスターページ」
• 一部のページで共通で表示するところには「レイヤーを複数ページで共有」

しっかり使い分けることで、カンプのPNGデータが軽くなったり、修正の際に他のページにもその修正が反映されたりと、今まで面倒だと感じていたことが時間をかけずに済ますことができる機能です。

効率化を目指すには使わない手はありません！ページ機能を使って効率化をはかっていきましょう。

カットした部分をいくつかブログに掲載しました。こちらもぜひご覧ください。

Fireworksのページ機能の細かすぎて伝わりにくい使いどころ | Webデザインのタネ

■アンケートでいただいたご質問です

　 Q.コンテンツ量によって位置が変化するフッターはページ機能を使って効率的に管理できないの？ 　 A.今のところ、ページ機能を使ってコンテンツの増減に対応するフッターは作ることができません。そのかわり私がやっている方法は、フッター全体をシンボルにして、ページ毎に配置しています。 　 他にも、大喜利で発表されていたバシャログ南さんが、ヘッダー・フッターを9スライスを利用して、コンテンツの増減に対応する方法を紹介されていました。 　 　【Fireworks】9スライスをこんな風に使ってみました。 | バシャログ。

■おまけ：ページを扱う上で覚えておくと便利なキーボードショートカット

　 デモのときにページ間の移動には何回かキーボードショートカットを使いました。覚えておくと非常に便利なので、紹介します。 　 * 前のページに移動：Page Upキー * 次のページに移動：Page Downキー

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、松田 直樹さん（TSUDUMI）の『Fireworks PNGの特性を活かした、"書き出し"をしない効率的ワークフロー』のスライドと音声をシェアします。

• スライド（PDF、17ページ、2.7MB）
• 音声（MP3、7:59）

メッセージ

今回、Fireworksでしかできない、変態的ワークフローをご紹介いたしました。FireworksのPNGをそのままマークアップに使うワークフローといたましたが、工程ではなく、ロゴやバナーなどサイト上の要所要所でも使っていただける裏技となっています。

また、PNGは使い方によっては、GIFよりも軽くなる性質を持っています。業界的にはまだまだGIFが多く使われている状況ですが、もっとPNGの普及を広められたらうれしいですね。

• PNGGauntlet（Windows用）
• ImageOptim（Mac OS X用）
• PNGOUT（コマンドラインアプリ）

PNGはとても優れた画像形式です。そのPNGを一番うまく扱えるFireworksも、もちろんとても優れたアプリです。ぜひ皆さんにも使っていただき、ナレッジを共有していきましょう！

2011年9月14日、アップルストア銀座（3Fシアター）にて、CSS Nite in Ginza, Vol.59を開催し、167名の方にご参加いただきました。

• ご参加いただけなかった方は、来週のCSS Nite redux, Vol.5へのご参加をご検討ください。
• スライド・音声などは、9月26日に公開します。
• 配布資料をゲットできなかった方は、こちらからダウンロードしてください（PDF）。
• こちらはチラシ。両面、裏のみ。
• 『効率的なサイト制作のためのDreamweaverの教科書』（CS5.5対応版）は、9月22日発売です。すでにAmazonで予約開始しています。
• 書籍のサンプルサイトはこちら。

［撮影：飯田昌之］

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

• CSS Nite in Ginza, Vol.59 - Togetter

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

• CSS Nite vol.59に行ってきました-あんどうのブログ
• レスポンシブ・ウェブ・デザインについて　CSS Nite Vol.59 - KA-Channel
• レスポンシブル・デザイン（CSS NITE Vol.59）asa nisi masa

撮影：飯田昌之

本日（9月14日）19:00からアップルストア銀座（3Fシアター）にて、CSS Nite in Ginza, Vol.59を開催します。

事前登録された方で優先入場を希望される方は、受講票に書かれたURLの画像をケータイにてご呈示ください。

事前登録された方には、昨日のお昼、および、本日の2回、受講票をお送りしています。なお、メールアドレス不備等によって届かない等の場合、再送はいたしません。

• CSS Nite in Ginza, Vol.59：ご入場に際し | CSS Nite公式サイト

2011年9月21日（水）19:00-21:00、加賀電子セミナールーム（秋葉原）にてCSS Nite redux, Vol.5 powered by Designer's Garageを開催します。

9月14日に開催するCSS Nite in Ginza, Vol.59のキャンセル待ちが尋常ではない数になってしまったため、急遽、開催することにしました。

とはいっても、そんなにキャパはありませんので、ご興味あればお早めにお申し込みください。

CSS Nite in Ginza, Vol.59との違いは、次の表をご覧ください。

2011年9月14日（水）19:00からアップルストア銀座（3Fシアター）にて、CSS Nite in Ginza, Vol.59を開催します。

アップルストア銀座でのCSS Nite開催は、これまで木曜日ですが、今回のみ水曜日ですのでご注意ください。

ご入場に際し

事前登録を行った方

• 入場時に、13日に発送する受講票をご呈示ください。ご呈示ない場合には、事前登録は無効とさせていただきます。
• 18:40前にご来場の場合には1F右手奥からの階段にてお待ちください。18:50以降はエレベータをご利用ください。
• 椅子席は先着順です。
• 後から来る方の「椅子取り」はご遠慮ください。

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

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

CSS Niteに初参加の方へ

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

注意事項

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

公開ポリシーとtwitter

• スライド、音声は、イベント終了後にCSS Nite公式サイトにて公開予定です。
• セミナー中にスライドなどを撮影されたり、録音いただくことは問題ありません。ただし、個人利用（社内での勉強会などの利用）にとどめてください。
• 撮影いただく場合、携帯電話など、撮影時に音が出る機器はご遠慮ください。

終了後

アップルストア銀座の近くのお店で懇親会を開催します。希望される方は、Facebookにてご表明をお願いします。
お店はイタリアン系、会費は4000円前後です。

キャンセルについて

キャンセルのご連絡は不要です。

9月17日開催のLP17/LP18ご参加の方へのご連絡です。

• カウントダウンメールを送付していますので、ぜひ、ご一読ください。
• 懇親会に参加される方は、事前にお申し込みをお願いします。参加費は3,500円です。事前登録時に「参加する」とされた方も名簿作成のために、再度、お願いします。
• 受講票は、週明けにお送りします。

キャンセル待ちの方へ

cssnite.payment@gmail.comから、キャンセル繰り上げの連絡をお送りしています。

2011年10月15日（土）、ベルサール神保町にてCSS Nite LP, Disk 19「アクセス解析Advanced」を開催します。

昨日、早々に満席となってしまいまい、すでに10名以上の方からキャンセル待ちの登録をいただいています。

再演版の開催を検討しますので、「この日程ではNGだった方」、「タイミングを逃してしまった方」は、キャンセル待ちへのご登録をお願いします。