Sacss WordPress Special with Fireworks

作業時間をぐっと短縮するFireworksの使い方

短縮してできた時間の有効活用-個人サイト運営のすすめ-

&

2012年6月16日土曜日

山口有由希福岡県在住、長崎県出身

フロッグマンオフィス所属福岡県でWebデザイナー

やまぐちゆうき


Fireworksマニアhttp://fw.v-colors.com


本を書きましたFireworks CS5/4/3 (速習デザイン)



本日の流れ

✦ これだけは伝えたい！Fireworksの時短ワザ15+小ネタいけるとこまで

✦ 時短でできた時間を使っての個人サイト運営のすすめ

✦ まとめ


Fireworks時短ワザ15


Fireworks使ってますか？

質問!!


Fireworks使ってますか？✦ イヤ、Illustratorで作ってます✦ Photoshop一択✦ イラレとフォトショがあればいいです✦ 使ったことあるけど今は使ってない✦ そもそも使ってないし興味ない

質問!!


デザイナーだけじゃない！すべてのポジションの人に役立つツールです！


ラフスケッチ

ワイヤーフレーム

デザインカンプ

下層デザイン

書き出し・コーディング


ラフスケッチ



下層デザイン



ラフスケッチ



下層デザイン



無駄に時間を取られること＆

無駄を解消するワザ！

サイト制作時に


(C)Laika XDS Testing v0.0.1 Wire Frames / mccready



無駄に時間を取られること

✦ アタリ画像を書いていちいちサイズ書き入れて…

✦ テキスト流し込んで…一個一個コピペや入力が大変…

✦ ここアイコンとかここボタンとか表すのにいちいちパーツ作ったり探してくるのが手間…

✦ テーブル……………………（遠い目）



✦ ガイドが簡単に引ける！「Guides Panel」✦ アタリ画像を簡単に「placefolder」✦ 楽々テキストの流し込み「PI_Textgenerator」✦ 表が簡単に作れる「Tables」✦ 共有ライブラリを使えば面倒なパーツ準備も不要！


(C)Web Design Trends / Digital Markketing

デザイン


無駄に時間を取られること✦ もう全ページできた状況でグローバルナビゲーションに項目追加ですか…

✦ 全ページのフッターを修正…✦ ボタンの見た目を全部修正？あれもこれも直さなきゃ…

✦ ほう、書体を全部変更ですか…✦ 文字色…グレーの方がいいですねそうですね



✦ すべてのページで共通するパーツはページ機能を使って管理

✦ シンボル化を使えばフッターの管理も楽々！

✦ サイドバーの共有はレイヤーの共有機能で管理




✦ 「スタイル」機能を使って書体やボタンの見た目を管理

✦ 「属性のコピー」を使えば、簡単に同じ見た目を引き継げます

✦ 「検索と置換」機能で一気に色を置き換えよう！


スライス・コーディング


無駄に時間を取られること

✦ スライスがめんどくさい✦ 色を拾うのが大変✦ これCSS3で実現てコードどうするの…



✦ 「スライスを挿入」を使いこなすOption(Alt)+Shift+U

✦ ページ機能を活用する✦ 簡単カラーコードコピー ✦ CSSプロパティパネルでCSS3書き出し


Fireworksいけるとこまで


縦横比を保って数値でリサイズしたい


ここにチェックを入れる


ランディングページを作ろうとしたら6000px以上の

カンバスが作れません。


CS4以降なら環境設定ファイルの設定を書き換えればいつ

でも6000px以上のカンバスが作れるようになります。


MaxDocSizeInPixels


画像をリサイズしたら荒くなりました。


画像を「シンボル化」することでサイズ変更しても

画質の落ちない画像にすることができます。


カンバスサイズを変更した時、カンバスの外にある

オブジェクトが削除されたり、画像が切り取られたりしてしまう…！！！


環境設定 -> 編集 ->切り抜き時に不要なオブジェクトを削除の

チェックを確認します。


テキストオブジェクトにテクスチャが適用されません


塗りがべた塗りの時、テキストオブジェクトにテクスチャが適用できない不具合があります。

が、塗りをグラデーションに

変更することによって解決できます。


GIFの書き出しが汚い


CS5.1で解消されました。CS5を利用している人は

すぐにアップデートしましょう！


インパクトのある放射状のオブジェクトが簡単に作れる

「Sunburst」


画像の傾きを直してくれる

「Level Horizon」


テクスチャやパターンを一覧表示「PI_TextureList」


まとめ


✦ワイヤーフレーム作成からデザインカンプ、モックアップに画像のスライスまでこれ一本

✦CSS3の書き出しもできちゃう

✦シンプルなデザインからグラフィカルなリッチデザインまで簡単に作成できる


効率的に作業を進めることができ、無駄な作業を防いだり

減らしたりすることができるので

「時間に余裕を持って」作業に取り組むことができる。


使ったことがない人もぜひ一度挑戦してみてください！


ツールを使いこなしてよりよいWebデザインを！


個人サイト運営のすすめ




そもそもなぜはじめたのか？


はじめての技術をいきなり業務で初実践するのが不安だった

✦ 見積もった工数で問題なくできるのか？✦ すべてのリスクが確認できているか？✦ 時間は間に合うのか？


勉強会に行っても身に付いていないなと思った

✦ 学んだことはすぐに自分なりに整理して実践しないと全く身に付かない

✦ いざやろうとしたとき忘れている


どうせなら私もなにか人の役に立つかたちで…


挑戦してみたい技術

×

人の役に立てそうなこと

orやりたいこと


jQuery Mobileというのがあるらしい…


WallPaper Collection

✦ 写真撮るのにハマってる✦ jQuery Mobileを使いたい✦ もうすぐスマホデビューする


WordPressでスマホ対応…


VIVID COLORS +BLOG✦ WordPressでスマホ対応する時のベストな方法が知りたい

✦ 最近PC版のデザインを変えたのであわせたい


PHPで画像の色を解析できるらしい…！


PHOTO STOCKER✦ PHPで画像の色解析ができるらしい✦ 写真撮るのにハマってる✦ 素材写真をハードディスクから探すのが面倒


CSS Niteにいきたい…


Fireworksマニア

✦ Fireworksもっとひろめたい✦ CSS Niteにいきたい


自分でサイトを運営するメリット


業務上のメリット


✦ 時間の見積り、それを利用した場合のリスクなどを工数見積りの段階で正確に伝えられる。クライアントも自分も安心。

✦ ブログを続けるのがなぜ難しいか？どうやったらやる気が出るか？身をもって体験できる

✦ アクセス解析をしっかりすることにより、クライアントにより幅の広い提案ができるようになる

✦ ひとりで全部作るので全容が把握できる


個人的なメリット


好きなテイストを極められる


地方にいながら東京のお仕事も


本を書いたり


セミナーにでれたり


Fireworksに自作のパーツがプリインストールされたり


✦ ふつうに福岡で会社員しているだけでは絶対出会えないような人たちにたくさん会えた

✦ すさんだときに「ありがとう」って声をかけてもらえて救われる


デメリット


めっちゃ時間かかる


経験を積んだことにより業務の時間が短縮。

結果時間が生まれることに。


体感で2倍以上！！！


ぜひはじめてみてください！！


WordPressとFireworksがあれば誰にでもできる！


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

@yuki930

ご質問などお気軽に。


Documents

Sacss WordPress Special with Fireworks