Fireworks ページを使用した Web サイトとインターフェイスのプロトタイプの作成

Fireworks PNG ファイルは 1 つのファイルに複数のページを含めることができるので、Web やアプリケーションインターフェイスのプロトタイプの作成に最適です。各ページには、カンバスサイズ、カラー、画像解像度およびガイドの独自の設定が含まれます。これらのオプションは、指定のページまたはドキュメント内のすべてのページに対して設定されます。Web レイヤー以外にも、各ページには独自のレイヤーセットが含まれます。共通の要素については、マスターページを使用するか、ページ間でレイヤーを共有できます(詳しくは、レイヤーの共有を参照してください)。

注意:

ページを作成しない場合、ドキュメントのすべての要素は 1 ページに配置されます。

各ページはページパネルで確認でき、各ページのオブジェクトがページ名の横にサムネールとして表示されます。アクティブなページはパネルでハイライト表示され、アクティブドキュメントの上にあるポップアップメニューに表示されます。

ページの書き出しについて詳しくは、ワークスペースからの書き出しを参照してください。

ビデオ

Fireworks または Photoshop を使用した高品質プロトタイプの作成(00:01:17)(英語)

Fireworks または Photoshop を使用して高品質のプロトタイプを作成する方法を手短に紹介します。

出演:ジム・バベージ

ページの追加、削除および移動

ページパネルを使用して、新規ページの追加、不要なページの削除および既存のページの複製を行うことができます。ページを追加、削除または移動すると、Fireworks によってページタイトルの左側の数値が自動的に更新されます。これらの数値を使用すると、大規模な複数ページのデザインで特定のページに簡単に移動できます。

ページの追加

ページのリストの末尾に空白のページが挿入され、アクティブなページになります。

  1. 次のいずれかの操作を行います。

    • ページパネルで、ページを作成/複製ボタン をクリックします。

    • パネルを右クリックし、ポップアップメニューから「新規ページ」を選択します。

    • 編集/挿入/ページを選択します。

  1. 次のいずれかの操作を行います。

    • ページパネルでページを選択します。

    • キーボードの Page Up キーと Page Down キーを使用します。

    • ドキュメントウィンドウの上部またはページパネル右下のページポップアップメニューからページを選択します。

    注意:

    ページポップアップメニューのページ名の横にあるアスタリスクは、マスターページを示しています。

ページの複製

ページを複製すると、現在選択されているページと同じオブジェクトおよびレイヤー階層を含んだページが新たに追加されます。複製されたオブジェクトでは元のオブジェクトの不透明度と描画モードが維持されます。複製されたオブジェクトを変更しても元のオブジェクトに影響はありません。

  1. 次のいずれかの操作を行います。

    • ページを作成/複製ボタンにページをドラッグします。

    • ページを右クリックし、ポップアップメニューから「ページを複製」を選択します。

1 つまたは複数のページの移動

ページパネルでページを移動して、関連するデザインを近くに配置するとレイアウトプロセスを高速化できます。

  1. (オプション)複数のページを移動するには、次のいずれかの操作を行います。

    • 隣接する複数のページを選択するには、Shift キーを押しながら、最初と最後のページをクリックします。

    • 隣接しない複数のページを選択するには、Ctrl キー(Windows)または Command キー(Mac OS)を押しながら各ページを選択します。

  2. パネル内で選択したページを上下にドラッグします。他のページの上または下に表示される濃い色の境界線が、マウスを放すことで選択したページを配置できる箇所になります。

ページの削除

削除したページの上のページがアクティブになります。

  1. 次のいずれかの操作を行います。

    • ページパネルで、ごみ箱アイコン にドラッグします。

    • ページを右クリックし、ポップアップメニューから「ページを削除」を選択します。

ページカンバスの編集

各ページには一意のカンバスがあり、カンバスサイズ、カラーおよび画像解像度はそれぞれ異なります。

  1. ページパネルまたはドキュメントウィンドウの上のページポップアップメニューからページを選択します。

  2. 変更/カンバス/画像サイズ、変更/カンバス/カンバスカラー、または変更/カンバス/カンバスサイズを選択します。

  3. 変更を行います。ページのカンバスを選択している場合、変更はプロパティパネルを使用して変更を行うこともできます。

  4. 選択したページにのみ変更を適用するには、「現在のページのみ」オプションを選択した状態にしておきます。変更をすべてのページに適用するには、このオプションを選択解除します。

マスターページの使用

一連の要素をすべてのページで使用するには、マスターページを使用します。通常のページをマスターページに変換すると、ページはページパネル内でリストの先頭に移動します。マスターページを作成すると、マスターページレイヤーが各ページのレイヤー階層の一番下に追加されます。

マスターページの作成

  1. ページパネルで既存のページを右クリックし、ポップアップメニューから「マスターページとして設定」を選択します。

ページ間で共有されているレイヤーはすべて通常(非共有)のレイヤーになります。ただし、フレーム間で共有されているレイヤーは維持されます。リンクしているページにマスターページのフレームを表示する方法については、ステート内のオブジェクトの表示を参照してください。

マスターページの作成後に新規に作成するページは、マスターページの設定が自動的に継承されます。既存のページにこれらの設定を継承するには、ページをマスターページにリンクする必要があります。後でマスターページを変更したときに、リンクしているページはすべて自動的に更新されます。

マスターページからその他のページへのオブジェクトとビヘイビアーの継承には、次の制限があります。

  • ページでは、マスターページ上のすべてのオブジェクトの現在のステートだけが継承されます。すべてのオブジェクトのすべてのステートを継承するには、各ページで、継承するステートの最大数以上のステートをオブジェクトに追加します。ページ内のすべてのオブジェクトに、マスターページのすべてのステートが継承されます。

  • ページ上でカンバスサイズまたはイメージサイズを変更すると、マスターページにリンクしていないページを含むすべてのページに反映されます。変更を現在のページに制限するには、「現在のページのみ」を選択します。

  • マスターページのカンバスカラーの変更は、リンクしているページだけに継承されます。

  1. 次のいずれかの操作を行います。

    • ページパネルでページを右クリックし、ポップアップメニューから「マスターページにリンク」を選択します。

    • ページパネルのページのサムネールの左側にある列をクリックします。リンクアイコンはそのページがマスターページにリンクされていることを示します。

      注意:マスターページにリンクされているページの設定を変更すると、新しい設定が優先されマスターページへのリンクが切れます。

マスターページのレイヤーの表示と非表示

表示と非表示の変更はすべてのページに反映されます。

  1. レイヤーパネルで、マスターページのレイヤーの左側にある目の形をしたアイコンをクリックします。

マスターページのレイヤーの削除

  1. レイヤーパネルを右クリックし、ポップアップメニューから「マスターページレイヤーを削除」を選択します。

マスターページのレイヤーをページに戻すには、レイヤーパネルを右クリックし、ポップアップメニューから「マスターページレイヤーを追加」を選択します。

マスターページを通常のページに戻す

  1. ページパネルを右クリックし、ポップアップメニューから「マスターページをリセット」を選択します。

選択したページの書き出し

1 つの手順で複数のページを書き出すことができます。選択したページのみが書き出されます。ページを書き出す際には、個々のページに対して指定した最適化設定が、ファイルの書き出しに使用されます。

  1. ページパネルで、書き出すページを選択します。

  2. 右クリックして、「選択したページの書き出し」を選択します。

  3. 書き出しダイアログボックスで、書き出しメニューからいずれかのオプションを選択します。

    レイヤーからファイルへ

    選択したページのレイヤーを個別のファイルとして書き出します。

    ステートからファイルへ

    選択したページのステートを個別のファイルとして書き出します。

    ページからファイルへ

    選択したページを個別のファイルとして書き出します。

ページの書き出し時のファイル名の変更

  1. ページパネルで、書き出すページを選択します。

  2. 右クリックして、「選択したページの書き出し」を選択します。

  3. 書き出しダイアログボックスで、「オプション」をクリックします。書き出しメニューで選択したオプションに基づいて、「オプション」ボタンが有効になります。

  4. 書き出しオプションダイアログボックスで、「接頭文字を追加」または「接尾文字を追加」を選択して、メニューからオプションを選択します。次のいずれかのオプションを使用して、ファイル名を指定することができます。

    ドキュメント名

    ソースファイルの名前が、接頭文字または接尾文字として追加されます。例えば、「接頭文字を追加」オプションを使用してソースファイル sites.png から Index という名前のページを書き出す場合、Sites_Index.gif という名前のファイルが生成されます。

    #(1、2、3...)または #(01、02、03...)

    ファイルが番号順に生成され、接頭文字または接尾文字として連番が追加されます。書き出すすべてのページファイルに、ページパネルに表示される順番で番号が付けられます。多数のページを書き出す場合は、2 桁の連番を使用してください。

  5. ファイルタイプメニューのオプションを使用して、書き出すファイルの設定を最適化します。

選択したページでのスライスの書き出し

ソースファイル内のスライスは、ファイルの書き出し時に無視されます。スライスを書き出すには、書き出しダイアログで次の設定を使用します。

  1. 書き出しメニューで、「HTML と画像」または「画像のみ」を選択します。

  2. HTML メニューで、「HTML ファイルの書き出し」を選択します。

  3. スライスメニューで、「スライスの書き出し」を選択します。

  4. 次のいずれかのオプションを選択します。

    選択したスライスのみ

    スライスとしてマーク付けした領域が書き出されます。

    スライスのない領域も含める

    スライスとしてマーク付けされていない領域も書き出されます。

複数ページのプレビュー

ファイルを読み込んだときまたは開いたときに、マスターページ以外のすべてのページをプレビューすることができます。プレビュー中に選択したページが、ファイルを開いたときに表示されるページになります。

マスターレイヤーのオブジェクトが含まれているページを挿入すると、マスターページが通常のレイヤーに変換されて読み込まれます。

複数ページのプレビューの有効化

ファイルを読み込んだときまたは開いたときに、すべてのページをプレビューすることができます。環境設定ダイアログボックスの初期設定では、複数ページのプレビューオプションは有効になっています。

以前のバージョンで作成したファイルの複数ページのプレビューを有効にするには、現在のバージョンでそのファイルを開いて保存します。

  1. 環境設定ダイアログボックスで、「一般」を選択します。

  2. 「ページのサムネールごとに保存」を選択して、複数ページのプレビューを有効にします。このオプションを無効にすると、ページ名は保存されますが、これらのファイルのサムネールは生成されません。

ページを開く前または読み込む前のページプレビュー

  • Windows の場合、ファイルを読み込んだとき、または開いたときに、読み込みダイアログボックスまたは開くダイアログボックスにプレビューが表示されます。

  • Mac OS の場合は、開くダイアログボックスまたは読み込みダイアログボックスで「プレビュー」をクリックします。または、読み込みダイアログボックスでファイルをダブルクリックして、プレビューモードにすることができます。

    読み込むページを、ドキュメント内の現在選択しているページの後ろに挿入する場合は、ファイルを読み込むときに「現在のページの後ろに挿入」を選択します。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト