「キャリア」プロダクトマネージャとして、私は実際、自分が管理しているツールのパワーユーザではありません。しかしながら、数年にわたって、複雑な印刷とWebのワークフローに関する問題に対する多くの解決策を構築してきました。市場において20年経った業界としては、プロトタイピングはまだ非常に時間がかかる冗長なものです。冗長とは、ある特定のコンセプトデザインに基づいて１つのアプリケーションで作成する作業が、多くの場合、作成時には別のアプリケーションで再度作成されるために捨て去られるということを意味しています。

多様なツールを使用する様々なデザイナーとの会話で、私は顧客に対する試供版やモックアップを作成するほとんどすべてのユーザがプロセスを高速化したいと考えていることを知りました。さらに、それらのユーザは、実際のWebサイトの作成の基盤として試供版やモックアップを実際に使用したいと考えています。大幅な時間の節約になります。

必要条件

Fireworks CS3

• 体験版
• 購入

ソースファイル：

• quickticket_prototype_fw_cs3.zip（ZIP、436K）

今日のプロセスの確認

現実の世界における今日のプロトタイピングのプロセスがどのように行われるものか簡単に確認してみましょう。昨年ニューヨークで会ったCynthia Wangは、Adobe Flashで構築されたオンライン構成ツールのインターフェイスの開発を行って、独立したデザイナーとして働いています。彼女はFlashで開発する方法を知ってはいますが、長い間、Adobe Photoshopによるデザイン面を専門にしてきました。彼女のデザインのモックアップがクライアントにより承認されると、PhotoshopファイルをFlashデベロッパーの同僚に渡し、その同僚がPSDファイルを実稼動のための適切なFlashエレメントに分類します。

この具体例*では、宝石店のWebサイトのためにFlash構成ツールが使用されていました。正しい石、サイズおよび設定を選択すると、顧客がオンラインで発注できるカスタム製品が作成されます。このサイトの構成ツールのバリエーションのすべてを構築するために、CynthiaはPhotoshopファイルで172レイヤーを作り上げました。その時点では、彼女にとってPhotoshopは非常に快適なデザインツールなので、Photoshopでのデザインプロセスは非常に大きな意味を持っていたのです。その作業は、クライアントに対する試供版の作成であり、言わば後で捨て去られるための労力でしかありませんでした。

宝石店のマーケティングチームはPhotoshopを持っていなかったり、使用方法すら知らなかったりしたため、CynthiaはPhotoshopで一度に約20レイヤーのグループをいくつか選択し、それらの各レイヤーを統合されたJPEGファイルに保存しました。次に、各JPEGをMicrosoft PowerPointに読み込み、そのPPTファイルをマーケティングチームに電子メールで送信しました。彼女は、電話でスライドごとにデザインを説明し、デザインの変更点について情報を集めたり、プロジェクトを進めるための承認を得たりしました。

より良い方法

Adobe Fireworks CS3はリッチなインターネットアプリケーションを迅速に付け足すためのすばらしいツールです。アドビでは、Creative Suite 3の「ニッチ」に気付いており、迅速なプロトタイピングの特定の領域においてさらに魅力を引き上げる多くの新しい機能を追加しました。

２番目の例を見てみましょう。（その後アドビに変わる）Macromediaの前にElectronics for Imagingでの最後の役割であったプロダクトマネージャとして、私は短期間のオンデマンドのカラードキュメントを印刷するためのWeb送信ソフトウェアアプリケーションを管理しました。難しかったのは、近所のプリント店に立ち寄り、カウンタの店員にプリントの状態についての説明するときのように、ファイル／プリントの選択を効率的で正確なものにすることでした。

私たち製品のデザインチームは、人間とのやり取りを直感的なWebエクスペリエンスに置き換えるために、非常に多くのバリエーションのWebインターフェイスのデザインを検討しました。このプロセスでは、私たちは、プリントの作成ワークフローの視覚的な例を作成することから開始しました。電子的に開始するのではなく、ホワイトボードや紙と鉛筆を使用して、ブレインストーミングを行いました。最初に作成したワークフローの繰り返しによって、ワークフローを非常に正確に説明することができました（図１を参照）。

図１．鉛筆と紙によるプリント作成ワークフローについてのブレインストーミング

プロセスのすべての部分がどのように連携して動作するかを感じ取ると、各関連コンポーネントに対するワイヤフレームのブレインストーミングを開始しました。図２はその一例です。ここでも鉛筆と紙を使用して、新しい「プリントドライバ」Webインターフェイスのスケッチを描きました。

図２．プリントドライバWebインターフェイスのワイヤフレーム

次のステップで、非常に多くのワイヤフレームを使用したこのテーマに基づいて、いくつかのバリエーションを作成しました。個別のスクリーンに適切な量の情報を含めたと感じた時点で、Macromedia Dreamweaver MX 2004で直接、各スクリーンのモックアップの作成という骨の折れる作業を開始しました。

実のところ、この時点でMacromedia Fireworks MX 2004はデザインのバリエーションを構築するために使用することを考えていた製品ではありませんでした。ところが、私自身がキャリアプロダクトマネージャであったため、私は、いくつかのデザインのバリエーションを付け足すことによって、自分自身、そして現在設定されているAdobe Fireworks CS3の機能を試すことを決意しました。結果は同封のPNGファイルで、Webプリントチケットが「記入済み」になったときのページデザインに対するいくつかのバリエーションを備えています（図３を参照）。

図３．Fireworks CS3でのWebプリントチケットのモックアップ

迅速なプロトタイピングの経験

先に述べたように、このプロジェクトで一緒に作業したデザインチームは、基となるスケッチのためのコンセプトとインタラクションのデザイナーとHTMLとCSSのモックアップを作成するDreamweaverで単独で作業する２番目のインターフェイスのデザイナーで構成されていました。同封のPNGプロトタイプは、Fireworks CS3でモックアップを作成するのに、わずかな時間しかかかりませんでした。

アイコン、フォームエレメント、パネルおよびヘッダという個別のグラフィックエレメントのすべてを集めるところからプロセスを開始し、９スライスの拡大縮小を使用して、必要に応じてシンボルプロパティを適用して、それぞれをリッチシンボルとして作成しました（図４を参照）。

図４．Webプリントチケットモックアップのグラフィックエレメント

個別の部分を作成した後では、ページを付け加えるのは簡単な作成作業でした。この例では、ヘッダタブと上部のナビゲーションがすべてのページに発生したため、すべてのヘッダエレメントに対するレイヤーパネルにサブフォルダを定義して、そのレイヤーをすべてのページにわたって共有するのは意味のあることでした。このようにして、ヘッダエレメントに対して行った細かい調整は、自動的にすべてのページに反映されました。

横のナビゲーションにも同じことが当てはまりました。基本的なナビゲーションをすべてのページにわたって共有し、個別のページに可変長の列と実際のアクティブなナビゲーションボタンを追加しました。

個別のページに一意のフォームエレメントを付け加える手順は、単純に、リッチシンボルをキャンバスにドラッグし、シンボルプロパティパネルでラベルを定義するだけでした。

フッタの場所はコンテンツに基づいてページごとに異なるため、フッタのグラフィックとテキストをシンボルとして定義し、各ページの下部の適切な位置に配置しました。

ページデザインの完了後の次のステップは、ページ間またはセクション間で簡単なハイパーリンクを定義し、HTMLクリックスルーモックアップとして最終結果を保存することでした。

次のステップ

私の労力の結果をお楽しみいただけたことを願っています。PNGファイルをダウンロードして、Fireworks CS3でそれがどのように組み合わされているかをご覧ください。

詳しくは、Fireworks Developer Centerの次の記事を参照してください。

• Creating rich symbols for MXML and Images export in Fireworks CS3*（Trevor McCauley）
• Fireworks CS3を使用した効果的でインタラクティブなWebサイトプレゼンテーションのデザイン（Hoang Dinh）

注意：スケッチとQuickTicketデザインの使用に関して、Ev Shafrir、Dick HolmesおよびElectronics for Imaging, Inc.に謝意を表します。

著者について