PoworPoint2007でwebワイヤーフレームを作成する
こんにちは、inoueです。
年が明けたばかりだというのに、自宅のTV（御年14歳）が終わりの時を迎えようとしてます。
昨夜から一発目のスイッチオンではラジオ状態（＝映像が出ない）です。
とうとう買い替えかぁ…ワクワク。
さて、このところ業務でPowerPoint2007にてwebサイトのワイヤーフレームをいくつか作成しております。
ワイヤーフレーム作成ツールは、Firefoxアドオンなどでも存在しますが、既存サイトのスクリーンショットを加工しつつの
作業の場合、PowerPointが断然使いやすいです。
今回は、PowerPoint2007を使ったワイヤーフレーム作成のポイントと、今回作成したパーツテンプレートファイルをご紹介します。
ポイント1：スクリーンショットで既存サイトを利用する
ベースとなる既存ページが存在する場合、スクリーンショットを取得してスライドに貼り付けていくと便利です。
私が愛用しているスクリーンショットツールは、Firefoxアドオンの Screengrab!です。
Screengrab！では、「ページ全体」「ページ可視範囲」「選択した領域のみ」「ウィンドウ全体」のファイル保存およびクリップボードへのコピーが可能です。
ポイント2：トリミング機能でスクリーンショットを部品化する
貼り付けたスクリーンショットから必要な部分のみ使うために、「トリミング」機能を使います。
項目数の多い入力フォームなど、これを駆使して、既存項目についてはスクリーンショットのみで表現してしまいましょう。
ポイント3：汎用パーツを図形で作成する
新規に作成が必要な部分については、PowerPointの図形機能を使用してパーツを作成します。
webページの汎用パーツ（タブ、画像など）、フォームパーツ（ラジオボタン、プルダウンなど）は最初にひととおり作成しておくと後が楽です。
私が作成したテンプレートファイルをサンプルとしてご紹介します。
- ワイヤーフレームテンプレート（PowerPoint2007、pptx形式をzip形式で圧縮してあります）
パーツを掲載しているスライドは「非表示スライド」に設定して、作成するワイヤーフレームと同じファイルで管理しておくと更新作業の際便利です。
ポイント4：PDF形式でドキュメントを出力する
たくさんのスクリーンショットをトリミングして作成したドキュメントは、パワーポイント標準のファイル形式のままでは、かなり大きなサイズになります。
そこで、完成したワイヤーフレームをPDF形式で出力して利用することをおすすめします。
PowerPoint2007からPDF形式で出力するには、Microsoft Office Onlineが提供するアドインを利用します。
ポイント5：ノート機能を使って更新情報を管理する
ワイヤーフレームは一度作ってしまえば終わりではなく、日々発生する更新内容を反映させることで生きてくるドキュメントです。
内容の修正や追加の詳細を「ノート」部分に記載しておくと、いつどこが変更になったか誰もが把握できます。
このワイヤーフレームテンプレート.pptxではスライドをA4タテに設定し、ノートマスタで「左にスライド、右にノート」のレイアウトとしています。
これにより、PDF出力や印刷時に「ノート」を選択すると、A4ヨコでワイヤーフレームと更新履歴が一枚に表示されるようになっています。
さいごに
ワイヤーフレームという形にしたものがあると、web制作メンバー間で共通認識が持ちやすく、また設計があいまいな部分を見つけやすいなと実感しています。
PowerPointは非常に高機能なプレゼンテーション作成アプリケーションのため、このような図化する作業にはもってこいのツールです。
皆さんもぜひお試しください。
