ステートを使ったシナリオ作成

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

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

図2： 1つのファイル内の各ステートにそれぞれの画面を配置しています。

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

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

図3： ナビゲーションのオブジェクトは複数のステートに渡って配置されています。オブジェクトは、一度変化を加えると、すべてのステートにおいて変更されます。

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

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

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

図4： 画面固有のオブジェクトは非共有レイヤーに配置します

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

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

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

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

図5： 1つあるいは複数のオブジェクトを選択してF8を押して、シンボルを作成します。

ページ 2 / 6

前のページ

次のページ