新しいWebサイトのデザインの作成は（比較的）簡単です。 デザインが実際のWebサイトでどのように変換されるかを説明するのは、簡単ではありません。 デザインしたWebサイトまたはインターフェイスの一連のスクリーンショットは、作成者には意味がわかるかもしれませんが、他の人にはいくつかのランダムな画像でしかありません。 他の人にメッセージを伝えるためにアイデアを効果的に伝えることは、簡単ではない場合がありますが、特に、戦略的かつ実証済みのガイドラインを使用してデザインのアイデアを提示すると、反復するモックアップを開発し、Webクライアントから承認を確保するプロセスによって、成功するWebサイトができあがることがあります。

このチュートリアルでは、Adobe Fireworks CS3のページ機能を使用してインタラクティブな操作のデザインを効果的に説明する方法、およびプレゼンテーションのためにインタラクティブなクリックスルーを作成する方法について説明します。

必要条件

このチュートリアルを完了するには、次に挙げるソフトウェアまたはファイルをインストールする必要があります。

Fireworks CS3

• 体験版
• 購入

サンプルファイル

• mockup_pages_fw_cs3.zip (ZIP：216K)

この記事に必要な予備知識

このチュートリアルでは、新しいページ機能を使用してサイトデザインを作成するためのFireworks CS3の操作に焦点を合わせて説明します。 Fireworksのインターフェイスに精通していること、および以前にファイルの書き出しとスライスツールの使用経験があることを前提にしています。

ストーリーの伝達

サイトデザインを開発するときは、伝えたいメッセージを１つの短い文に簡略化します。 時間をかけてアイデアの概略を紙に描き、アイデアのブレインストーミングを行う時間をとります。 可能であれば、他の人とアイデアを共有し、最も有効なイメージとシンボルについてのフィードバックを得ます。 メッセージを確実に理解し、強く感じるいくつかのデザインのアイデアが浮かんだら、クライアントに見せるいくつかのグラフィックを準備するタイミングです。 サイトの作成に進む前に、クライアントの理解を助け、デザインのアプローチについての承認を得るのに役立つ、デザインの方向性についての視覚に訴える説明をクライアントに対して行うことが非常に重要です。

プレゼンテーションを作成するためにモックアップを作成するスクリーンショットについて考えるときは、映画を作成しているかのように、このプロセスを考えます。 デザインのスクリーンショットはストーリーボードの個別のコマ割りに似ています。 どのスクリーンショットがいくつあるとストーリーが最も効果的に伝わるのかを考えることから開始します。 プレゼンテーションがどのように流れるか、およびどのシーン（スクリーンショット）を含めるかを決定したら、サイトのストーリーボードの作成を開始できます。

ストーリーボードのコマ割りの作成

始めに、各コマ割りに対して１ページを作成します。

1. ウィンドウ／ページを選択してページパネルを開きます。 または、F5キーを使用できます。
2. ページ名をダブルクリックし、ストーリーボードの最初のコマ割りの説明を入力します。 説明的な名前を入力するときは、スペースではなくアンダースコアを使用してください。 この説明は、後でコマ割りを編成するときに役立ちます。
3. ページパネルの右下にある「ページを追加」または「ページを複製」ボタンをクリックして、新しいページを作成します。
4. 新しいページ名をダブルクリックし、ストーリーボードの２番目のコマ割りの説明を入力します。

ストーリーボードのコマ割りに相当する一連のページを順序に従って作成するまで、ここまでの手順を繰り返します。 ページパネルには、作成したページが表示されます（図１を参照）。 ページパネルを使用して、ストーリーを伝えるスクリーンショットを使用した魅力的なプレゼンテーションを開発できるため、これは非常に有用なアプローチです。 作成したページは、プレゼンテーションのためにも、最終的なプロジェクトでも、使用できます。

図１．ストーリーボードに使用されたページを表示するページパネル

Fireworks CS3のページ機能について

ページには、簡単なチュートリアルでは説明しきれない多くの強力な機能が含まれます。 Fireworks CS3に含まれている新しい機能について詳しくは、Fireworks製品のページを参照して、機能についてのツアーを行ってください。

Fireworks CS3の新機能の中で、お気に入りの上位３つは次のとおりです。

• ページパネルは非常に便利です。 各ページが個別のファイルのように機能します。 ページには、様々なサイズ、背景色およびレイヤー（Webレイヤーを含む）を含めることができます. これによって、空のレイヤーや一致するキャンバスサイズについて心配する必要がなくなるため、大幅に時間が節約されます。
• 必要なときに、複数のページにわたってレイヤーを共有することができるようになっています。
• 更新されたレイヤーパネルには、必要なアイテムだけを選択し、編集することを行いやすくするサブレイヤーが含まれています。

インタラクティブなデザインのプレゼンテーションの作成

成功するプレゼンテーションの作成の最初の手順には、すばらしいストーリーボードの制作が含まれます。 ただし、クライアントが、スクリーンショットを移動してストーリーを理解できなければ、すばらしいストーリーボードにも気付いてもらえません。

この記事の次のセクションでは、ユーザエクスペリエンスを再現するクリックスループレゼンテーションの作成方法について説明します。 Fireworks CS3は、高解像度のアートワークとデザインのエレメントを使用して、印象的なクリックスループレゼンテーションを簡単に作成できるようにします。

複数のページのリンク

1. ツールボックスでホットスポットツールを選択します（またはキーボードショートカットを使用して、Jキーを押します）。 ホットスポットツールを使用して、現在のページにホットスポットを描画します。 ページにボタンを追加した場合、Fireworksは各ボタンの周囲に自動的にスライスを作成します。
2. 画面表示／スライスのオーバーレイを選択し、ホットスポットとスライスの両方を表示するオプションをオンにします。 または、２を押すことによって、キーボードショートカットを使用できます。

3. ホットスポットまたはスライスが選択されたことを確認します（図２を参照）。

   

   図２．スライスまたはホットスポットの選択

4. プロパティインスペクタが開いていない場合は、ウィンドウ／プロパティを選択して開きます。 様々なページ間のナビゲーションを効率的に作成できるように、プロパティインスペクタで、リンクフィールドの横にある矢印をクリックし、ホットスポットまたはスライスをリンクするページを選択します（図３を参照）。

   

   図３．リンクするページの選択

5. 別のホットスポットを描画したり、別のスライスを選択したりして、すべてのページがリンクされるまでプロセスを繰り返します。 ホットスポットはオブジェクトなので、Fireworksの他のオブジェクトと同様にカットおよびペーストできます。 例えば、ロゴイメージを各ページのホームページに戻るようにリンクする場合は、単純に、ホットスポットを１回作成し、それをデザインの各ページにペーストします。

プレゼンテーションの書き出し

デザインの様々なページの間のナビゲーションの追加を終了したら、クライアントにプレゼンテーションを書き出す準備は完了です。

1. ファイル／書き出しを選択します。
2. 書き出しダイアログボックスで、名前を入力し、プレゼンテーションを保存する場所を選択します。 ファイルの共有、アップロードまたは配置の変更を簡単に行うことができるように、最初に新しいフォルダを作成し、そのフォルダにプレゼンテーションを書き出すのは非常に便利です。
3. ファイルを書き出す場合は、書き出し設定を選択するときに、次の選択を使用します。
   1. Export: HTML and Images
   2. HTML：HTMLとイメージ
   3. スライス：スライスの書き出し
   4. 「現在のページのみ」オプションのチェックが解除されていることを確認します。
   5. 残りの設定はオプションなので、プレゼンテーションに最も適した選択を行います。
4. 「書き出し」をクリックします。

クライアントにすばらしいデザインのアイデアを売り込むために使用できるインタラクティブなプレゼンテーションを作成する手順は、これですべてです。 Webデザインは、協力的な努力によって行われるものであることを忘れないでください。 魅力的なプレゼンテーションでデザインの方向性に関するアイデアや提案を伝えることによって、クライアントの承認を確保する時間が大幅に節約されます。 プロジェクトに関連するすべてのユーザがページの流れを理解していることを確認することによって、Webサイトの開発時に結果として余分な仕事を発生させる混乱の可能性をなくすことに役立ちます。

次のステップ

Fireworksデベロッパーセンターにアクセスして、Webデザインのテクニックと戦略に関するさらに多くのチュートリアルと記事を参照してください。多くの記事には、デザインの戦略を練る上で役立ち、デザインプロジェクトのレベルを一段階引き上げるサンプルファイルが含まれています。

Fireworks CS3の新機能について詳しくは、Alan Musselmanの「Adobe Fireworks CS3の紹介*」を参照してください。まだ参照していない場合は、「Fireworks Exchange*」を参照して、Fireworksを拡張する新しい方法について確認することをお勧めします。

著者について