情報設計（ワイヤーフレーム）
ワイヤーフレームドキュメントをPDFで書き出す
情報設計のフェーズで、クライアントや社内メンバーの共通の資料として作成することの多いワイヤーフレームですが、プロジェクトによって大量のページを扱うことがあります。ワイヤーフレームの作成にIllustratorを利用している方が多いと思いますが、以下のような欠点もあります。
- ページが増えれば増えるほど動作が遅くなる
- ページのコピー＆ペーストをすると、コピー後のファイル上のオブジェクトに小数点以下のピクセル単位で「ズレ」が生じてしまう
10ページを超えるようなファイルをまとめる場合は、Fireworksのほうが動作も軽快で適しているといえます。
例として、タブレット端末で動くフォトビューア＆編集アプリケーションのワイヤーフレームを作ってみます（参考：サンプルファイルの「sample1_WF_base」）。
【1】用途（タブレット、PCブラウザ、デスクトップガジェット、etc）に合わせたサイズのファイルを新規で作成します。よく使うテンプレートを登録してある場合は、新規作成ダイアログボックスの［テンプレート］ボタンを押して新規ファイルを開きます。
【2】表紙ページを作ります（開いたファイルの最初のページを表紙にします）。ページのタイトルを「表紙」にします。
【3】コンテンツのページを作ります。「ページ」プロパティパネルの下のほうにある［ページの新規作成］ボタンをクリックして新しいページを作成します。
【4】コンテンツ用のページを編集していきます。今回はタブレット用のデザインなので、新しく作成したページにタブレットのテンプレートを配置します。テンプレート画像は「タブレットテンプレート」というレイヤーにまとめます。
【5】注釈とコピーライトのレイヤーも同様に各々レイヤーにまとめて配置します。これでコンテンツ用の基本のフォーマットができました。
【6】次にレイヤーの順番を図のように並べ替え、「コンテンツ」というタイトルのレイヤーを新規に作ります。
【7】アプリケーションのログイン画面に必要な要素を「コンテンツ」レイヤー上に描きます。ワイヤーフレーム用によく使うカラーを「スウォッチ」パネルに登録しておくと便利です。
【8】同様に他のページの絵も描いていきますが、コピーライトやタブレットの筐体イメージなどは共通で利用します。表紙には適用させないので、ここでは特定のレイヤーを複数のページで共有することにします。「コピーライト」のレイヤーを選択し、コンテキストメニューまたはレイヤーパネル右上のボタンから［レイヤーを複数ページで共有］を選択後、ダイアログボックス内で適用したいページを選択します。
【9】複数のページで共有されているレイヤーには下図のようなアイコンが表示されます。共有レイヤーに変化を加えると、共有されているすべてのページに反映されるので、デザインの修正時などに時間を大幅に短縮することができます。
【10】必要な画面を描き、最終的に10ページのワイヤーフレームドキュメントができあがりました（サンプルファイルの「sample1_WF」）。
【11】PDFに書き出します。［ファイル］-［書き出し］からダイアログボックスを表示し、プルダウンメニューから書き出し種類を［AdobePDF］、ページで「すべてのページ」を選択し［保存］ボタンを押します。
【12】ワイヤーフレームのドキュメントがPDFで書き出されました。
