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

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

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

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

必要条件

この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。

Fireworks CS3

• 体験版
• 購入

サンプルファイル：

gallery_mockup_fw_cs3.zip （ZIP：76K）

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

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

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. ページを保存します。

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

ページ 1 / 2

次のページ

著者について