インタラクティブプロダクトのデザインにこそFireworksを

「どんなツールを使ってデザインをしているのですか？」とよく尋ねられます。その時、私は「Fireworksです」と答えています。そうすると、たいてい怪訝な反応をされるので、結構時間をかけてFireworksを使っている理由を説明しています。Fireworksは、業界標準のツールとは言い難いだけに、養護せずにはいられないのです。

私がコンサルティング会社「Cooper」で務めることになったとき、レイヤー機能が無い頃から愛用していたオールマイティのPhotoshopからFireworksに乗り換えることになりました。そのことに懐疑的で心配だったのですが、数週間後には、選択ツールの地獄から解放されたデザイナーへと生まれ変わっていました。実際、Fireworksはインタラクティブデザインを行う上で有効な機能を数多く持っており、私たちの作業プロセスにおいて大いに役立っています。この記事では、私たちがインタラクティブプロダクトのデザインを作成する上でどのようにFireworksを活用しているかを紹介します。

私たちがどのようにFireworksを使ってインタラクティブデザインやビジュアルデザインを作成しているのかについて興味ある方は、私たちの最新プロダクトを見ていただくとともに（後ほど記事で紹介します）、まずはこのショートビデオをご覧下さい。

Cooperでの作業スタイル

Cooperでは、デスクトップやWeb、そしてモバイルデバイスなどのさまざまなプラットフォームに向けて幅広くインタラクティブプロダクトをデザインしています。私たちのデザインチームはそれほど多人数ではなく、通常、インタラクションデザイナー、デザインコミュニケーター、ビジュアルデザイナーから構成されており、ハードウェアコンポーネントをデザインするときにはインダストリアルデザイナーが加わるといった感じです。インタラクションデザイナーとデザインコミュニケーターは一緒になってインターフェイスのビヘイビアのデザインやドキュメント化を、ビジュアルデザイナーはインターフェイスのビジュアル面を担当します。インダストリアルデザイナーはハードウェアの物理形状要素を担当します。また、チームをマネージメントするengagement leadがいて、彼は契約を担当し、チームにガイドラインやディレクションを提供します。

一般的なプロジェクトにおいて、そのソリューション作成フェーズでは、デザインチームはホワイトボードにシナリオのストーリーボードを描いて、それらのスケッチをスクリーン上に落とし込みます。それから、そのスケッチ内容を繰り返し繰り返し見直して洗練させていきます。その後、デザインをクライアント向けにドキュメント化し、彼らがプロダクトを制作する際に参照できるようにします。

Fireworksの活躍しどころ

いいアイデアが生まれたら、インタラクションデザイナーは手早くFireworksに落とし込み、プロダクトの詳細を詰めていきます。他の会社では、インタラクションデザイン用のツールとしてVisioやOmniGraffleを使ったり、ビジュアルデザイン用のツールとして、Photoshopを使っていると思います。しかし、私たちの経験上、デザインプロセス全体をFireworksで作業することには多くのメリットがあります。

まず第一に、チーム間で作業ファイルをやりとりしながら問題解決を行う上で、コラボレーションしやすいということがあります。また、互いの作業ファイルに対して、エレメントを再作成したり、チェックしたりする必要がないので、効率よく素早く作業を進めることができます。さらに、バージョンが異なる複数ファイルを扱う必要がないので、ミスも減らすことができます。図1は、Fireworksを使ったデザイン作業プロセスにおける、異なるステージの作業ファイル例です。

まず、インタラクションデザイナーは、Fireworksを使って主要骨格をレイアウトしながらシナリオをデザインします。弊社では、スケッチ的なワイヤーフレームで作成します。この時、あえてビジュアル要素を使いません。その理由は、初期段階ではプロダクトのビヘイビアにフォーカスするためです。なお、インタラクションデザイナーは1つの画面をデザインするだけではありません。インターフェイスのビヘイビアやいくつかのシナリオに沿って、20～30の画面をデザインします。Fireworksでは、ステートを使えば、これらの画面群を1つのファイルで管理できるのです（※ステート機能は、 Fireworks CS3までは「フレーム」と呼ばれていました）。

たとえば、私たちは音声メッセージ付き写真共有アプリケーション「GoldMail」を手掛けました。その時の1つのシナリオが、ニコルという女性ユーザーが、猫や家族の写真を追加・整理して母親のマーガレットと共有するというものです。図2は、そのシナリオの画面で、1つのファイル内で複数のステートを使って作成したものです。1つのファイル内で複数の画面を管理できれば、制作時間を抑えることができますし、その分の時間をデザイン的な問題の解決に費やすことができます。

共有レイヤーでインターフェイスの骨格を作成

ステートの威力は、共有レイヤーを使い始めると実感できると思います。図3のGoldMailのグローバルナビゲーション部分を見てください。このシナリオでは、ナビゲーションメニューの位置はそのままですが、ニコルが「Create」「Record」「Share」の画面を選ぶとボタンの見た目が変化します。

共有レイヤーの中にナビゲーションメニューの全オブジェクトを置くことで、1つのロケーションで表示・管理しつつも、共有レイヤーを共有するすべてのステートからアクセスすることができます。たとえば、ナビゲーションメニューに変化を付けたいとします。ニコルが「Create」画面や「Record」画面を選んだ際に変化を付けるとしましょう。その場合、変化を付けた異なる共有レイヤーを表示すればいいのです（もちろん、この共有レイヤーは、ファイル内のすべてのステートからアクセスできるようにしてあります）。繰り返し強調しますが、Fireworksでは、オブジェクトの共有レイヤーを1つのロケーションで管理しつつ、複数のステートに渡って配置することができるのです。そして、シナリオに沿って、自由に各共有レイヤーを表示／非表示にすればいいのです。

この共有レイヤーとステートの機能を使えば、素早くセットアップできるだけでなく、1つの場所でコンテンツを管理することで、シナリオのすべての要素（テキストラベルやボタンの位置など）を一貫性のある状態で保つことができます。たとえば、ナビゲーションを含む共有レイヤーをあるステートで調整すれば、他のすべてのステートでもその調整が反映されます。このように、インタラクションデザイナーは繰り返しデザインする手間が省けて時間を節約でき、ビジュアルデザイナーもビジュアルスタイルを追加・洗練する上で時間を節約することができます。

また、画面特有の要素のために、非共有のレイヤーを1～2つ用意します。図4の例でみると、写真やワークスペースのキャプションなどは、シナリオを通して常に変化する要素です。ただ、2つ以上のステートで使う要素は、共有レイヤーで管理する方がおすすめです。

共通するアイコンやコントロールをシンボルで設定

インタラクションデザイナーが完成したシナリオファイルをビジュアルデザイナーに渡す前に、もう1つ大きな仕事があります。それは、「オブジェクトをシンボルへ変換する」作業です。Fireworksのシンボルは、Flashのシンボルと同じように機能します。シンボルはライブラリパレット内に格納して、シンボルのインスタンスをキャンバスに配置した状態でも、シンボルを編集することができます。シンボルを編集すると、その内容がすぐさまキャンバス上のすべてのインスタンスに反映されます。キャンバス上のインスタンスをダブルクリックすると、その場で編集できます。

シンボル化に適したオブジェクトとは、頻繁に使うオブジェクト、キャンバス上で位置を変更するオブジェクトです。たとえば、アイコンやコントロールなどはシンボル化しておくといいでしょう。インタラクションデザイナーは、たいてい、アイコンやコントロールをシンボル化してライブラリパレットに格納しています。そして、そのインスタンスを各ページにおおよそに配置して、後はビジュアルデザイナーがそれをブラッシュアップします。

シンボルを作成するのは簡単です。Fireworksのキャンバス上でオブジェクトを作成して選択し、メニューから「修正＞シンボル＞シンボルに変換」を選ぶか、F8を押すだけです。するとダイアログボックスが開くので、特別な処理を加える場合以外は、通常「グラフィック」を選ぶといいでしょう。コントロールはテキストフィールドのように伸縮させるかもしれないので、その場合はオプションの「9スライスの拡大・縮小のガイドを有効にする」をチェックしておきます（図5）。アイコンの場合は、9スライスは必要ないでしょう。

インタラクションデザイナーがシナリオフローや画面の骨格の作成に取り組んでいる間、ビジュアルデザイナーはビジュアルストラテジーに取り組みます。このビジュアルストラテジーは、いくつかのディレクションから構成されています。ディレクションとは、リサーチから得たプロダクトが目的とする経験属性を示したものです。ストラテジーが決まり、そのディレクションをインタラクションデザイナーから上がってきたシナリオに適用させます。

グリッドの土台を配置

まず、ビジュアルデザイナーは、ガイドを使ってデザインを設計するためにグリッドを敷きます。ガイドパネル（図6　拡張機能としてダウンロードできます）を使えば、この作業を手早く行えます。ガイドパネルの詳しい情報については、Fireworksチームのインターフェイスデザイナー、Eugene M. Judeが書いた 「Using the Guides panel in Fireworks CS3」* を見てください。

次にビジュアルデザイナーは、画面のメインインターフェイス要素にスタイルを追加します。通常、インターフェイスの背景といった大きなオブジェクトから始めて、徐々にシンボルといった小さなオブジェクトへと進めていきます。ちなみに、先ほどのグローバルナビゲーションにスタイルを追加すると、その変更はすぐさますべてのステートに反映されます。

スタイル属性の共有

Fireworksのツールの中で、私のお気に入りツールの1つが「属性をペースト」コマンドです。このコマンドを使えば、オブジェクト間のスタイルを素早く共有することができます（図7）。

仮に、あなたがインターフェイスのラベルのスタイル付けをして、シナリオファイル内のラベルを一斉にそのスタイルに変更したいとします。その場合、単にスタイル付けしたテキストオブジェクトをコピーして、シナリオファイル内の該当するテキストオブジェクトに「属性をペースト」するだけです。一瞬です。

このコマンドでは、テキストのサイズや色だけではなく、フォントスタイルやレディング、フィルタといった属性までをコピーします。テキストにドロップシャドウを適用させていても大丈夫です。「属性をペースト」コマンドは、ベクターシェイプ、ライン、テキスト、写真などすべてのオブジェクトに使うことができます。

また、スタイルパレットを使えば、よく使うスタイル属性のセットを作成して管理することができます（図8）。パレットにスタイルを追加したり、そのパレットからオブジェクトにスタイルを適用させることが可能です。

複数のオブジェクトのスタイルを変更したい場合は、単に1つのオブジェクトのスタイルを変更して「スタイルを再定義」を選べば、すべてのオブジェクトが新しいスタイルに更新されます（図9）。スタイルは他のオブジェクト用にも記録され、別の開いたドキュメントにあるオブジェクトも使うことができます。似たような見た目のスタイルだと、スタイルパレット上の小さなアイコンでは区別しにくいのですが、その場合はパレットの下側に表示されるラベルをみるといいでしょう。

シンボルの編集

インタラクションデザイナーがしっかりとシナリオファイルをセットアップしていれば、頻繁に使うオブジェクトはシンボル化されているはずです。シンボルを編集モードにするには、ダブルクリックするだけです。周りの背景が半透明になり、その場でシンボルを編集することができます。キャンバスをダブルクリックすると、編集内容が確定し、元の画面に戻ります（図10）

Fireworksはベクターベースのプログラムなので、アイコンをデザインするツールとしては最適です。シンプルなものから、グラフィカルなもの、かなり緻密なものまで、すべてのタイプのアイコン作成に使えます。しかし、PhotoshopからFireworksに乗り換えたばかりの頃は、パスパレットの手助けがないと、ピクセルでの作業にフラストレーションを感じるでしょう。このパスパレットは、Fireworksでピクセル精度の作業を行う上で最も重要なツールの1つです（図11）。

パスパレットの効果を実感していただくために、仮に図12のようなフォルダアイコンを作成しました。32ピクセルの標準的なアイコンです。この16ピクセルバージョンを作成するとします。アイコンをスケールダウンすると、シェイプのアウトラインがぼやけてしまいます。もともとパスはソフトなラインであり、エイリアス（ギザギザ）になるようになっています。それをスケールダウンすると、ポイントがピクセル端の正確な位置にないため、ラインがぼやけてしまうのです。そこで、オブジェクトのポイントを選択し、パスパレットから「ポイントをピクセル単位に丸める」ツールを選ぶと、ラインがシフトして再びシャープでエイリアスなラインになります。

パスパレットの選択ツールは非常に役に立ちます。すべてのポイントをピクセル単位に丸めるときは、まず「すべてのポイントを選択」ツールを使えばいいのです。角丸ボタンのようなオブジェクトの幅を広げたいときには、「右のポイントを選択」ツールを使って、ボタンの右端のポイントを選択するだけです（図13）。あとは、右カーソルボタンだけを使って、素早くボタンの幅を広げることができます（Shiftキーを押しながらだと、10ピクセル単位で広がります）。

また、「ポイントをまっすぐに」ツールや「ポイントのスムージング」ツールを使えば、複雑なシェイプもシンプルにすることができます。パスパレットの中には、私はそれほど使っていませんが、他にも便利なツールがあります。

共有ライブラリパレットと9スライスでコントロールにパワー注入

Fireworksのもう1つの素晴らしい機能を紹介しましょう。それは、共有ライブラリパレットです。これは、ライブラリパレットを拡張したもので、共通UIコントロールが入っています。UIコントロールのラベルやステートはキャンバス上で直接操作することができます。

ノート： Fireworks CS3 の共有ライブラリには、Vista UIコントロールの限られたセットしか入っていません。XPコントロールを、 Fireworks Exchange* や senocular.com* からダウンロードできます。

WinXPフォルダからチェックボックスを選んで、キャンバス上にドラッグしてみてください。すぐにラベルとチェックボックスが表示されます。シンボルプロパティパレットを開いて、使用可能ステートを trueからfalseに変更して、チェックボックスを不能にすることができます。また、Textフィールドをクリックしてラベル名を変更したり、stateフィールドのメニューを変更してチェックボックスをチェック済み状態にすることもできます（図15）。

インタラクションデザイナーは、見た目を気にせず、このUIコントロールを使ってシナリオを作成することができます。また、これらのシンボルには9スライスが実装されているので、実際のオブジェクトを触ることなく、テキストフィールドの幅などを編集することができます。こうした柔軟性があるおかげで、インタラクションデザイナーは、見た目を気にすることなく、素早くコントロールを追加していくことができるのです。

これら共有ライブラリのシンボルは好きなスタイルにカスタマイズできますし、オリジナルのアイテムを共有ライブラリに入れることもできます。ただし、それぞれの共通シンボルは、特別な名前を付けたオブジェクトを含んでおり、その名前をコードから参照しているので、変更しないように注意してください。共有ライブラリ用のシンボル作成についての詳細は、Aaron Beallが書いた「Using rich symbols in Fireworks*」を見てください。

素早く、ライブフィルタで洗練させる

デザインを洗練させていく課程で、色やテクスチャといったビジュアル要素は何度も調整するものです。うれしいことに、Fireworksにはライブフィルタという機能があり、こうした調整作業を手助けしてくれます。プロジェクトの最後の仕上げの作業の1つとしてよくあるのが、ボタンの状態作成です。ノーマル／デフォルト／マウスオーバー時／不能時／マウスクリック時など。各状態を一から作っていくのは面倒です。そこで、ライブフィルタを使って、ノーマル状態のボタンにフィルタを追加／削除して各状態を作ります（図16）。たとえば、ドロップシャドウを付けた白いボタンがあるとします。このボタンの不能時の状態を作るには、まずドロップシャドウのフィルタを取り除いて、透明度を高くするだけです。

デザインを洗練させていく課程で、デザインが変わってしまうことはしかたのないことです。こうしたツールがあれば、デザイン調整によりスムーズに行え、新しいアイデアをチームやクライアントと共有して検討することができるでしょう。

デザインの形が見えてきたら、細心の注意を払って、そのデザインがどのように機能するのかをドキュメントとしてまとめます。このドキュメントは「Form and Behavior Specification（構造とビヘイビアの仕様）」と呼ばれ、デザインコミュニケーターが仕上げます。デザインコミュニケーターは、シナリオのフローに沿ってインターフェイスのビヘイビアを議論する立場にいます（図17）。

私たちは、デザインをドキュメント化するにはInDesignを使用しています。InDesignはFireworksとシームレスに連携することができ、Fireworksからデザインの全ステートを簡単に書き出し、各スクリーンショットを置くことができます。そうして、情報たっぷりの分厚い冊子ができるわけです。

書き出しコマンドを使えば、ドキュメントやプレゼンテーション用にデザインの最終結果を取り入れるのは簡単です。メニュー「ファイル＞書き出し」を選んで、書き出しメニューから「フレーム（ステート）をファイルに変換」を選ぶだけです（図18）。また、イメージプレビュー（Ctrl+Shift+X)）からも書き出すことができ、その場合、クオリティを確認しながら書き出すことができます。

スタイルガイドのドキュメント化

「Form and Behavior Specification（構造とビヘイビアの仕様）」では、ビジュアルデザイナーがインターフェイスのビジュアルスタイルをドキュメント化します。その内容には、ブランド、色、タイボグラフィー、イメージなどの情報が含まれています（図19）。この作業にもFireworksを使っています。

Fireworksは、効率的にグラフィックを生産できることでも有名です。通常、ドキュメント用にはフル画面で書き出しますが、個々のパーツで依頼されることもよくあります。もし、ファイル内で几帳面にしっかりとグラフィックパーツのシンボル化を行っておけば、ドキュメントライブラリから簡単に書き出すことができます。特に、スライスなどが必要のないアイコンなどのグラフィックには最適です。書き出しの方法は簡単で、ライブラリパレットのオプションメニューから「シンボルの書き出し」を選ぶだけです（図20）。

Java SwingやWebなどの特別なメディアに最適化する必要があるグラフィックが大量にある場合は、バッチ処理を使うといいでしょう。

Fireworksの有利点、不利点

Fireworksをメインのツールとして使っているからと言って、PhotoshopやIllustratorを使っていないわけではありません。Fireworksは、基本的に画面デザイン用のアプリケーションです。私は、印刷メディアのデザインにはPhotoshopやIllustratorを使っています。Photoshopのコピースタンプツールを使ったフォトレタッチ能力には他にはない優れたものですが、他のレタッチ能力（レベル補正、カーブ、マスク）についてはFireworksの方が管理しやすく、フィルタのおかげもありアンデュも簡単です。

Fireworksのずっと指摘された弱点として「タイプエンジン」がありますが、CS3ではアドビタイプエンジンを実装し弱点を克服しています。

さらに学習したい方へ

Cooperでは、ベストなツールを使うために、何年にも渡り、競合製品も含めて評価・再評価を繰り返してきました。インタラクションデザインやビジュアルデザインにおいては、Fireworksを使えば生産作業を最低限に抑えることができ、その分クライアントにとって素晴らしいプロダクトをデザインすることにフォーカスすることができます。

Cooperの手法をもっと知りたい方は、以下のリンクを参考にしてください。ガイドパネルを使ってオブジェクトを完璧なピクセル単位でレイアウトする方法や、リッチシンボルを使ってFireworksドキュメント内の要素を素早く作成・編集する方法を解説してます。

• The Cooper Process*
• GoldMail Case Study*
• Using the Guides panel in Fireworks CS3* (Eugene M. Jude)
• Using rich symbols in Fireworks* (Aaron Beall)