アクセシビリティ
デベロッパーリソース

目次

  1. はじめに
  2. アプリケーションのページの作成

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

アプリケーションのページの作成

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」と入力します（図３を参照）。シンボルプロパティパネルを使用して、リッチシンボルの特性を変更します。

    UIコンポーネントのプロパティ設定

    図３. UIコンポーネントのプロパティ設定

  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著）をお読みください。

ページ 2 / 2
前のページ