Fireworksを使用したユーザインターフェイスのモックアップの作成

近所のアートギャラリーが、次の機能を含むWebアプリケーションを設計して構築するよう依頼してきました。

• ギャラリーのデータベースにあるアートワークを検索する検索ページ
• ギャラリーの従業員がデータベースのレコードを修正できるようにする更新ページ
• 従業員がデータベースに新しいアートワークを追加できるようにする挿入ページ

アプリケーションの構築を開始する前に、ページのモックアップを作成してギャラリーの経営者からフィードバックを得る必要があります。Adobe Fireworks CS3の新機能では、このプロセスを大幅に簡素化することができます。

この記事では、これまで以上に迅速にWebアプリケーションまたはデスクトップアプリケーションの仕様を作成して構築できるように、Fireworks CS3を使用してユーザインターフェイスのモックアップを作成する方法について説明します。15分以内で、架空のアートギャラリーで使用するWebアプリケーションの検索、更新および追加ページのユーザインターフェイス（UI）のモックアップを作成します。

モックアップファイルの作成

ページ見出しとページ本文の２つのレイヤーを持つシンプルなページデザインを作成することにしましょう。

1. Fireworks CS3で、ファイル／新規作成を選択します。
2. 新規ドキュメントダイアログボックスで、次のキャンバスプロパティを指定します。
   • 幅：800ピクセル
   • 高さ：600ピクセル
   • 解像度：72ピクセル／センチ
   • キャンバスカラー：白
3. ドキュメントの右側にあるレイヤーパネルで、パネルの下部にある「レイヤーの作成・複製」ボタンをクリックして新規レイヤーを作成します。
4. パネルの「Layer 2」レイヤーをダブルクリックします。小さなレイヤー名ダイアログボックスが表示されます（図１を参照）。
5. レイヤーの名前を「Header」に変更してEnterキーを押します。
6. 「Layer 1」レイヤーをダブルクリックして名前を「Body」に変更します。

   これで既定のWebレイヤーに加えて、「Header」と「Body」の２つのレイヤーが追加されたはずです。

7. ファイルに「gallery_mockups.png」という名前を付けて保存します。

ページの見出しの作成

Fireworks CS3のツールを使用してページの見出しを作成した後で、その見出しをシンボルに変換してアプリケーションの各ページで再利用することができます。

1. レイヤーパネル（ウィンドウ／レイヤー）で、「Header」レイヤーを選択します。
2. ツールパネルから矩形ツールを選択するか、Uキーを押します。
3. キャンバス上で、780x40ピクセルの矩形を描画します。プロパティインスペクタの「幅(W)」および「高さ(H)」テキストボックスを使用して正確なサイズを設定できます。
4. キャンバス上の座標（10, 10）に矩形の左上隅を位置合わせします。プロパティインスペクタの「X」および「Y」テキストボックスを使用して矩形の正確な位置を設定できます。
5. 矩形が選択されていることを確認してからプロパティインスペクタで次の矩形プロパティを設定します。
   • 塗りのカラー（バケツアイコン）：#CCCC99 | 基本
   • 線のカラー（鉛筆アイコン）：#FFFFFF | なし
   • 角丸の半径：40
6. ツールパネルからテキストツールを選択するか、Tキーを押します。
7. 矩形の左側をクリックして「Etna Gallery」と入力します。
8. 選択ツール（ツールパネルの左上隅にある黒い矢印）を選択し、新たに入力したテキストを選択してプロパティインスペクタで次のテキストプロパティを設定します。
   • X：20
   • Y：20
   • フォント：Tahoma
   • サイズ：18
9. Shiftキーを押しながらテキストと矩形オブジェクトをクリックして両方を選択し、修正／シンボル／シンボルに変換を選択して見出しをFireworksのシンボルに変換します。
10. シンボルに変換ダイアログボックスで、新しいシンボル名として「Header」と入力し、「グラフィック」オプションが選択されていることを確認します。「OK」をクリックします。

    ライブラリパネル（ウィンドウ／ライブラリ）にシンボルが表示されます。シンボルは複数の場所で再利用できるアセットです。インクルードファイルと同様に、シンボルを編集すると、そのシンボルを使用するすべてのページで変更内容が表示されます。この演習では、見出しをWebアプリケーションのすべてのページで使用するので、シンボルに変換することにしました。

11. ページを保存します。

それでは、アプリケーションの様々なページを作成しましょう。

Fireworks CS3では、単一のドキュメントにレイヤーを追加できるのと同様にページも追加できます。各ページには独自のレイヤーセット（サブレイヤー）があり、デザインの自由度を最大限に引き出すことができます。また、新しいページ機能によりページレイアウトを複製できるため、大幅に作業を迅速化することができます。

1. ページパネル（ウィンドウ／ページ）でPage 1を選択し、パネルの下部にある「ページを作成 / 複製」ボタン（ページアイコン）にドラッグして現在のデザインに基づく新しいページを作成します。
2. 各ページのラベルをダブルクリックして、それぞれ「SearchArt」および「UpdateArt」に名前を変更します（図２を参照）。
3. ページを保存します。

基礎となるページデザインの複製を作成したので、各ページにはまったく同じデザイン（この場合は共通の見出し）があります。パネルの各ページをクリックして、ドキュメントウィンドウで見出しを確認することができます。これで各ページに固有のUI要素を追加できるようになりました。

検索ページの作成

Fireworks CS3には、Flex、Mac OS、Windows XPおよびモバイルアプリケーション向けのリッチシンボルというUIイメージの共有ライブラリがあります。 SpryのようなAjaxフレームワークを使用してアプリケーションのレイアウトを設定する場合は、Flexのシンボルを使用してアプリケーションのおおよその外観を把握することができます。また、様々なUIフレームワーク用の独自のリッチシンボルを作成することもできます（この記事の最後にある次のステップの節を参照してください）。

1. ページパネルで、SearchArtページを選択します。
2. レイヤーパネルで、「Body」レイヤーを選択します。このレイヤーにUIコンポーネントを挿入します。
3. 共有ライブラリパネル（ウィンドウ／共有ライブラリ）で、Flex Componentsフォルダをダブルクリックして開きます。
4. パネルコンポーネントをページ上にドラッグします。
5. ページ上のパネルコンポーネントを選択して、プロパティインスペクタで次のプロパティを設定します。
   • 幅：760
   • 高さ：260
   • X：20
   • Y：60
6. パネルがまだ選択されていることを確認し、シンボルプロパティパネル（ウィンドウ／シンボルプロパティ）のtitleプロパティとして「Search Art」と入力します（図３を参照）。シンボルプロパティパネルを使用して、リッチシンボルの特性を変更します。

7. 共有ライブラリパネルのFlex Componentsフォルダから、TextInputコンポーネントとボタンコンポーネントをページ上のパネルコンポーネントにドラッグします。
8. ページ上のTextInputコンポーネントを選択して、プロパティインスペクタで次のプロパティを設定します。
   • X：160
   • Y：140
9. ページ上のボタンコンポーネントを選択して、プロパティインスペクタで次のプロパティを設定します。
   • 幅：42
   • X：325
   • Y：140
10. ボタンがまだ選択されていることを確認し、シンボルプロパティパネル（ウィンドウ／シンボルプロパティ）のlabelプロパティとして「Go」と入力します。
11. テキストツール（T）を選択し、ページ上のTextInputコンポーネントの左側をクリックし、「Title:」（コロンを含む）と入力します。
12. 選択ツールに切り替え、「Go」テキストオブジェクトが選択されていることを確認してプロパティインスペクタで次のテキストプロパティを設定します。
    • X：120
    • Y：144
    • フォント：Verdana
    • フォントのサイズ：11
13. 共有ライブラリパネルのFlex Componentsフォルダから、PopUpButtonコンポーネントをページ上のパネルコンポーネントにドラッグします。
14. ページ上でPopUpButtonが選択された状態で、プロパティインスペクタで次のプロパティを設定します。
    • X：160
    • Y：170

    ヒント：エレメントを垂直または水平に整列させるには、Shiftキーを押しならがエレメントをクリックして修正／行揃えを選択することもできます。

15. PopUpButtonがまだ選択されていることを確認し、シンボルプロパティパネル（ウィンドウ／シンボルプロパティ）のlabelプロパティとして「Painting」と入力します。
16. テキストツール（T）を選択し、ページ上のPopUpButtonコンポーネントの左側をクリックし、「Object:」（コロンを含む）と入力します。
17. 選択ツールに切り替え、「Object」テキストオブジェクトが選択されていることを確認してプロパティインスペクタで次のテキストプロパティを設定します。
    • X：108
    • Y：174
    • フォント：Verdana
    • フォントのサイズ：11
18. ページを保存します。

検索ページのモックアップは図４のようになるはずです。

更新ページの作成

次の作業はレコードの更新ページのモックアップを作成することです。以下の説明を扱いやすくするために、ページでは数個のUIコンポーネントのみ使用しています。ただし、操作方法を理解すればコンポーネントを追加することは簡単です。

この場合、更新ページには検索ページと同様のフィールド（特に「Title」フィールドと「Object」フィールド）が一部含まれています。検索ページの複製を作成して、それを更新ページの開始ポイントとして使用するので、作業が短縮されます。

1. ページパネルでSearchArtページを選択して、パネルの下部にある「ページを作成 / 複製」ボタン（ページアイコン）にドラッグします。
   更新ページのデザインに基づいてPage 1という新しいページが作成されます。
2. ページパネルで既存のUpdateArtページを選択して、パネルの下部にある「ページを削除」ボタン（ごみ箱アイコン）にドラッグします。このページは今後必要にはなりません。
3. ページパネルでPage 1ページをダブルクリックして「UpdateArt」に名前を変更します。
4. UpdateArtページのパネルコンポーネントを選択して、プロパティインスペクタでプロパティを次のように変更します。
   • 高さ：360

   より多くのUIコントロールに対応できるようにパネルを少し大きくするとよいでしょう。

5. パネルがまだ選択されていることを確認し、シンボルプロパティパネル（ウィンドウ／シンボルプロパティ）のtitleプロパティとして「Update Artwork」と入力します。
6. ページ上のボタンを選択して、プロパティインスペクタで次のプロパティを設定します。
   • 幅：60
   • X：160
   • Y：220

   ボタンをコントロールの横ではなく下に移動するとよいでしょう。

7. ボタンがまだ選択されていることを確認し、シンボルプロパティパネル（ウィンドウ／シンボルプロパティ）のlabelプロパティとして「Update」と入力します。
8. 共有ライブラリパネルのFlex Componentsフォルダから、CheckBoxコンポーネントをページ上にドラッグします。

   注意：CheckBoxコンポーネントをドキュメントでまだ使用していないので、共有ライブラリから取得する必要があります。ドキュメントで既に使用したコンポーネント（TextInputコンポーネントなど）を使用する場合は、共有ライブラリではなくライブラリパネルから取得します。Fireworksで利用可能なシンボルをすべて一覧表示する共有ライブラリパネルとは異なり、ライブラリパネル（ウィンドウ／ライブラリ）には現在ドキュメントで使用されているシンボルのみ一覧表示されます。ファイルサイズをできる限り小さくするには、ドキュメントに既にあるシンボルを再利用する必要があります。

9. ページ上のCheckBoxコンポーネントを選択して、プロパティインスペクタで次のプロパティを設定します。
   • X：330
   • Y：174
10. CheckBoxコンポーネントがまだ選択されていることを確認し、シンボルプロパティパネル（ウィンドウ／シンボルプロパティ）で次のプロパティを設定します。
    • label：Appraised
    • selected：true

    注意：言葉がデザイン内で切断されてしまう場合は、スペースバーをもう一度押すか、パージパネルで他のページをクリックしてからUpdateArtページをクリックして再描画を強制実行します。

11. ページを保存します。

更新ページのモックアップは図５のようになるはずです。

追加ページの作成

次の作業はレコードの追加ページのモックアップを作成することです。ほとんどのアプリケーションで、レコードを追加するためのユーザインターフェイスはレコードを更新するためのユーザインターフェイスとほぼ同じです。これに気づけば、更新ページのモックアップを複製してわずかに変更を加えるだけでよいので、作業が簡単になることが分かります。

1. ページパネルでUpdateArtページを選択して、パネルの下部にある「ページを作成 / 複製」ボタン（ページアイコン）にドラッグします。更新ページのデザインに基づいてPage 1という新しいページが作成されます。
2. ページパネルでその新しいページをダブルクリックして「AddArt」に名前を変更します。
3. AddArtページのパネルコンポーネントを選択し、シンボルプロパティパネル（ウィンドウ／シンボルプロパティ）のtitleプロパティとして「Add Artwork」と入力します。
4. ボタンコンポーネントを選択して、シンボルプロパティパネルのlabelプロパティとして「Add」と入力します。
5. ページを保存します。

更新ページのデザインに基づいて追加ページを作成するのに必要な作業は以上です。

次のステップ

このチュートリアルでは、Fireworks CS3で基本的なユーザインターフェイスのモックアップを作成する方法について説明しました。これで、ユーザエクスペリエンスをシミュレートするクリックスルー型のプレゼンテーションを作成することが可能になりました。また、プレゼンテーションをエクスポートして顧客に送信しフィードバックを得ることも可能です。さらに詳しくは、FireworksデベロッパーセンターのFireworks CS3を使用した効果的でインタラクティブなWebサイトプレゼンテーションのデザイン（Hoang Dinh著）をお読みください。

Fireworksで独自のUIリッチシンボルを作成することもできます。例えば、左側に編集可能なラベルのあるカスタムテキストボックスを作成することができます。さらに詳しくは、アドビデザインセンターのFireworksでのリッチシンボルの使用（Aaron Beall著）をお読みください。