【感想】Fireworks標準デザイン講座［CS6/5対応］

　Fireworksについて書かれた本。著者は菊池慎悟さんと小野寺健一さんの二人。二人ともWebデザインのディレクションや制作を仕事にしているようだ。この本は、レッスンを始める前に、ワイヤーフレームを…作成する、ボタンを作成する、バナー・アイコンをデザインする、マウスオーバーと連動した表現を作成する、サイトのデザインとレイアウトを行う、オブジェクトの組み合わせによるパターンデザインを作成する、スライスと書き出しを行う、WordPressのテーマをデザインする、Jquery Mobileのテーマをデザインするという序章を含める全10章で構成されている。
　レッスンを始める前にでは、Fireworksの環境や設定について簡単に説明している。パネルやワークスペース、メニューやよく使うツールについて書いてある。ワークフローについても親切に説明されている。
　ワイヤーフレームを作成するでは、ドキュメントやガイドを引きシェイプを重ねていきながらワイヤーフレームを作成していく。オブジェクトの長さを計測し、オブジェクト上に長さを表示してくれる機能は便利だと思う。
　ボタンを作成するでは、グローバルメニューのボタン画像を作成していく。カラーパレットやグラデーション、テクスチャ、カラーモードの説明が簡単にされている。その他、文字の入力やカーニングやトラッキング、アンチエイリアスについても説明がされていた。
　バナー・アイコンをデザインするでは、一歩踏み込んだテクスチャの使い方、パターンなどを使いバナーやアイコン、ヘッダー画像を作成していく。ペンツールやドロップシャドウ、ベベルとエンボス、マスクの使い方が簡単に説明されている。ビットマップ画像の読み込みや補正するツールの使い方もここで紹介されている。Photoshopほどの補正はできないが色の3属性を補正する機能は用意されているみたいだ。
　アニメーションバナーを作成するでは、GIFアニメーションを作るステートという機能について説明されている。Flashのオーサリングツールのように画像一枚を一コマとしてアニメーションを作成していく。イージングやループ、ディレイも設定できるようだ。
　マウスオーバーと連動した表現を作成するでは、ボタンで切り替わる画像やマウスオーバーで動くキャラクターイラスト、ナビゲーションを作成していく。マスクやクリッピングマスク、ステートの少し詳しい使い方を説明しながら、ボタンを押すと切り替わる画像を作成していく。ステートにマスクした画像を設定し、スワップという機能でボタンと画像を関連付ける。Fireworks上でボタンにマウスを重ねると画像を切り替えることができる。
　マウスオーバーで動くキャラクターイラストではシェイプや変形機能を使いイラストを描いていく。描いたキャラクターにホットスポットツールでボタンを登録し、ホットスポットツールで設定したスペースがボタンとして設定され、スワップ機能でキャラクターの画像が切り替わるようになる。
　ナビゲーションでは、序盤で作ったボタン画像をシンボルに登録し、マウスオーバー時やマウスダウン時の状態をデザインする。必要な分だけ作成しテキストを変更する。ポップアップメニューエディタを使ったポップアップメニューの作り方なども書いてあった。オブジェクトの組み合わせによるパターンデザインを作成する。ヘッダーやバナーを作成していく。素材を組み合わせてコラージュのようなヘッダーを作成したり、マスキングテープ風の見出し素材などを作成する。パスやストロークを使いアナログ風なヘッダーをデザインする方法も書かれている。
　サイトのデザインとレイアウトを行うでは、ワイヤーフレームからカンプデザインを作成していく。マスターページ機能を使い、各章で作成したパーツを配置する。アニメーションシンボルや9スライスなどについても説明がされている。また配置したオブジェクト、テキストにはスタイルを適用する。塗り、線の色をスタイルに登録することで、頻出する同じようなオブジェクトを一括で管理できる。テキストの幅が変わった場合も、スタイルを変更するだけで、適用したオブジェクトを一括で変更することができる。レイヤー共有機能についても説明がされている。サイドバーを下層ページにも表示したい場合、レイヤー共有機能を使うことで実現できる。共有ライブラリという機能も説明されている。Fireworksにはお問い合わせフォームやタブ、ボタンなどのパーツがあらかじめシンボルとして登録してある。必要に応じて共有ライブラリからパーツを配置することができる。
　Fireworksの書き出し方法を把握するでは、デザインカンプを出力する方法やデザインカンプからHTMLに使う画像を切り出す方法、モックアップを出力する方法などが紹介されている。前章で配置したデザインからスライスツールを使いガイドを参考に画像を切り出していく。出力する際、画像の代替テキストを設定できるほか、デザインカンプ用のPDFとして出力したり、画像にHTML、CSSを付属させたり、CSSスプライトも出力することができる。スライスした画像は最適化することができる。jpegの圧縮率を変更したり、GIFやPNGの色数を減らすようなこともできるようだ。
　ワードプレスのテーマをデザインするでは、デフォルトテーマであるトゥエンティイレブンを編集して新しくテーマを作成していく。テーマを編集する方法は通常2種類あり、一つは最初からHTMLとCSSを作成し、ワードプレス用にクラスやIDを変更する方法、もう一つはFireworksのCS6から実装された機能であるCSSプロパティを利用する方法がある。この章ではCSS3ベースでデザインしたファイルからCSSコードを抽出して子テーマとして適用している。子テーマをワードプレスにインストールするまでが説明されている。ワードプレスのインストールや設定については書かれていない。
　Jquery Mobileのテーマをデザインするでは、Jquery Mobileのテーマを作成していく。Jquery MobileのテーマデザインはCSS3で実装されており、アイコンはCSSスプライトで書き出されている。テーマの色はスウォッチと呼ばれ、5パターン用意されている。アルファベットのＡ～Ｅがパターンとして割り当てられており、アルファベットを変更することでテーマカラーの変更が可能なようだ。Dreamweaverの5.5ではJquery Mobileに対応した機能が実装されていて、色のパターンを簡単に切り替えることができるそうだ。Jquery Mobileテーマ機能を使ってデザインし、CSSスプライトやCSSファイルを書き出してテーマをカスマイズしている。またAdobeの配色支援サービスkularを使い配色を設定している。
　1冊の内容がチュートリアル形式になっており、説明とチュートリアル通りに操作することでFireworksの主要機能を把握することができる。しかし本の通りに作ってみても、ところどころ端折ってあるため本の完成品と同じものは作成できない。WordPressやJquery Mobileについてはおまけ程度の説明になるので、詳しく知りたい場合は別途本を買うか、サイトで情報を集める必要がある。Fireworksの本は初めて読むため学ぶ部分が多くあった。多くはInDesignやIllustrator、Photoshopからのノウハウから得られた機能を合わせたものだ。ワイヤーフレームやカンプのデザインはPhotoshopでしたいと考えているので、ワークフローも含めて勉強になった。メモ的に書き出していったのでだらだら長い感想になってしまった。続きを読む