CSS Nite LP14「Photoshopper meets Fireworks」フォローアップ（8）山口 有由希さん | CSS Nite公式サイト

2011年3月5日（土）、ベルサール九段で開催したCSS Nite LP, Disk 14「Photoshopper meets Fireworks」のフォローアップとして、山口 有由希さん（フロッグマンオフィス）の『FireworksマニアLIVE!』のスライドと音声をシェアします。

• スライド（PDF、47ページ、4.6MB）
• 音声（MP3、52:35）

ご来場の皆様、本当にありがとうございました。

Fireworksを使って、特別なことをしなくてもアイデア次第でいろいろと自由な表現ができ、また作業もかなり効率化できる、ということがお伝えできればと考えておりましたので本当にシンプルなステップで、ベーシックなツール・機能だけでできるデザインパーツの作り方を中心にご紹介させていただきました。

すぐにお試しいただけるものばかりですので、普段あまりFireworksを使っていない方にも挑戦していただければ幸いです。

また、アンケートを拝見させていただきました。

Fireworksマニアを見てくださっている方が予想以上に多くびっくりしております。ありがとうございます。

反面、サイトに掲載しているチュートリアルの紹介も多かったためもっと違うチュートリアルもあるとよかった、とのお声もいただきました。

またこのような機会があれば違ったネタをご紹介できればと思います。ブログの方でも随時公開していきますので、ぜひご覧下さい。

アンケートにて、いくつかご質問をいただきましたので、回答させていただきます。

基本的にスタイルは作業中のドキュメントへの登録「現在のドキュメント」に追加していく状態で作業しています。

• ページ内で同じパーツが出てくる頻度が少ないもの
• スタイルに登録したときに見分けのつきにくいもの

に関しては、スタイルに登録しても探しにくかったり、必要なスタイルが探しにくくなったりしまいますので鷹野さんのセッションでもご紹介のあった属性のコピーで対応することも多いです。（ctrl + shift + alt + v）

以前作ったデザインデータから属性のコピーをしてそこからアレンジしていくこともあります。

スタイルライブラリへの登録は、「点線」「ボタン」「シャドウ」「ワイヤーフレーム用」など定番パーツで、これは！と思ったものが作れた場合のみセットに追加して保存しておくようにしています。（増やしすぎると、本当に必要なスタイルが探しにくくなるので）

今回のデザインは、空いている時間に細切れにやっていたので正確な時間はわからないのですが、Fireworksでのデザイン作業自体（ワイヤーフレーム作成後の実際のデザイン作業の部分）は合計で4-5時間くらいの時間をかけたのではないかと記憶しています。

デザイン作業に与えられた時間のうちのほとんどはクライアントの業務理解や、ワイヤーフレームの決定、デザインの方向性を考える部分に使っているので（時には何日も…）そこまで決まってしまえば、デザインの実現自体はFireworksの機能のおかげで素早く作れて助かっています。

コーポレートカラーなどがあればその色をベースに、あとはサイトのイメージ・コンセプトに合う写真やイラストを何枚か選んできて、その写真からスポイトで色を抜いて調整して決めたりしています。

本編中ではさらっとしかご紹介できなかったパールの書き方とマスキングテープの作り方は、サイトの方に詳しく記事を書いております。 　 * パールの書き方* マスキングテープの作り方

その他、以下の作り方もブログの方でご紹介しておりますので細かいプロパティの設定などはこちらをご参照いただければと思います。

• コラージュ風パーツの作り方
• 星ツールのつかいこなし方

また、Fireworksの初期ストローク一覧はこちらです。

• ストローク一覧

テクスチャ一覧、パターン一覧もサイト内にありますのでよろしければご参照ください。

この度は本当にありがとうございました！