このチュートリアルでは、新しいページ機能を使用してサイトデザインを作成するためのFireworks CS3の操作に焦点を合わせて説明します。 Fireworksのインターフェイスに精通していること、および以前にファイルの書き出しとスライスツールの使用経験があることを前提にしています。
中級
新しいWebサイトのデザインの作成は(比較的)簡単です。 デザインが実際のWebサイトでどのように変換されるかを説明するのは、簡単ではありません。 デザインしたWebサイトまたはインターフェイスの一連のスクリーンショットは、作成者には意味がわかるかもしれませんが、他の人にはいくつかのランダムな画像でしかありません。 他の人にメッセージを伝えるためにアイデアを効果的に伝えることは、簡単ではない場合がありますが、特に、戦略的かつ実証済みのガイドラインを使用してデザインのアイデアを提示すると、反復するモックアップを開発し、Webクライアントから承認を確保するプロセスによって、成功するWebサイトができあがることがあります。
このチュートリアルでは、Adobe Fireworks CS3のページ機能を使用してインタラクティブな操作のデザインを効果的に説明する方法、およびプレゼンテーションのためにインタラクティブなクリックスルーを作成する方法について説明します。
サイトデザインを開発するときは、伝えたいメッセージを1つの短い文に簡略化します。 時間をかけてアイデアの概略を紙に描き、アイデアのブレインストーミングを行う時間をとります。 可能であれば、他の人とアイデアを共有し、最も有効なイメージとシンボルについてのフィードバックを得ます。 メッセージを確実に理解し、強く感じるいくつかのデザインのアイデアが浮かんだら、クライアントに見せるいくつかのグラフィックを準備するタイミングです。 サイトの作成に進む前に、クライアントの理解を助け、デザインのアプローチについての承認を得るのに役立つ、デザインの方向性についての視覚に訴える説明をクライアントに対して行うことが非常に重要です。
プレゼンテーションを作成するためにモックアップを作成するスクリーンショットについて考えるときは、映画を作成しているかのように、このプロセスを考えます。 デザインのスクリーンショットはストーリーボードの個別のコマ割りに似ています。 どのスクリーンショットがいくつあるとストーリーが最も効果的に伝わるのかを考えることから開始します。 プレゼンテーションがどのように流れるか、およびどのシーン(スクリーンショット)を含めるかを決定したら、サイトのストーリーボードの作成を開始できます。
始めに、各コマ割りに対して1ページを作成します。
ストーリーボードのコマ割りに相当する一連のページを順序に従って作成するまで、ここまでの手順を繰り返します。 ページパネルには、作成したページが表示されます(図1を参照)。 ページパネルを使用して、ストーリーを伝えるスクリーンショットを使用した魅力的なプレゼンテーションを開発できるため、これは非常に有用なアプローチです。 作成したページは、プレゼンテーションのためにも、最終的なプロジェクトでも、使用できます。
ページには、簡単なチュートリアルでは説明しきれない多くの強力な機能が含まれます。 Fireworks CS3に含まれている新しい機能について詳しくは、Fireworks製品のページを参照して、機能についてのツアーを行ってください。
Fireworks CS3の新機能の中で、お気に入りの上位3つは次のとおりです。
成功するプレゼンテーションの作成の最初の手順には、すばらしいストーリーボードの制作が含まれます。 ただし、クライアントが、スクリーンショットを移動してストーリーを理解できなければ、すばらしいストーリーボードにも気付いてもらえません。
この記事の次のセクションでは、ユーザエクスペリエンスを再現するクリックスループレゼンテーションの作成方法について説明します。 Fireworks CS3は、高解像度のアートワークとデザインのエレメントを使用して、印象的なクリックスループレゼンテーションを簡単に作成できるようにします。
デザインの様々なページの間のナビゲーションの追加を終了したら、クライアントにプレゼンテーションを書き出す準備は完了です。
クライアントにすばらしいデザインのアイデアを売り込むために使用できるインタラクティブなプレゼンテーションを作成する手順は、これですべてです。 Webデザインは、協力的な努力によって行われるものであることを忘れないでください。 魅力的なプレゼンテーションでデザインの方向性に関するアイデアや提案を伝えることによって、クライアントの承認を確保する時間が大幅に節約されます。 プロジェクトに関連するすべてのユーザがページの流れを理解していることを確認することによって、Webサイトの開発時に結果として余分な仕事を発生させる混乱の可能性をなくすことに役立ちます。
Fireworksデベロッパーセンターにアクセスして、Webデザインのテクニックと戦略に関するさらに多くのチュートリアルと記事を参照してください。多くの記事には、デザインの戦略を練る上で役立ち、デザインプロジェクトのレベルを一段階引き上げるサンプルファイルが含まれています。
Fireworks CS3の新機能について詳しくは、Alan Musselmanの「Adobe Fireworks CS3の紹介*」を参照してください。まだ参照していない場合は、「Fireworks Exchange*」を参照して、Fireworksを拡張する新しい方法について確認することをお勧めします。
Tutorials & Samples |
Fireworks Forum |
More |
| 12/16/2008 | Disappearing Mouse Cursor? |
|---|---|
| 01/13/2012 | Survey: Blend mode options in Brush tool? |
| 01/25/2012 | after a update of cs3 to 9.0.1 styles are broken |
| 08/15/2011 | CS5 plagued with many bugs in Lion |
Fireworks Cookbooks |
More |
| 09/07/2011 | How do I use FXG XML markup in Shape subclasses? |
|---|---|
| 10/15/2010 | Flex4 Dotted Line |
| 06/25/2010 | ComboBox that uses a NativeMenu (Air API) |
| 05/21/2010 | Localizing a Creative Suite 5 extension |