Webサイト ディレクターのみなさんに質問。画面構成書ってどうやって作っていますか？
Webの世界では、サイトの企画者・発注者が画面構成書もしくはワイヤーフレームという設計図を作る。ディレクターが構成書を作成し、それをもとにデザイナーがUIデザインを作り、プログラマがUIの適用されてないプログラムを作成。コーダー（マークアップエンジニア）がUIデザインをHTML＆CSSにして、プログラムに適用する、という流れでWebサイトを作るという感じ。プログラマ向けにはもっと細かい資料も必要に応じて提供されるけど、サイトマップと画面構成書がサイト制作発注から完成までの土台になる。これは、雑誌作りだと、台割りとラフレイアウトが仕事の土台となるのによく似ている。
画面構成書の例は、たとえば、かなりラフだけど、こんな感じ…
（こんなサイトを作る予定はありません。いまのところ…）
画面構成書を作るツールとしては、PowerPointが一番ポピュラーみたいだが、仕事でこれを使えと指定されたことはない。
それに、ボクはPowerPointとWordの重くて非直感的でセンスのないUIが大嫌いなので、10年以上できるだけ使わないようにしてきた。昔は図やチャートはどんなものでもExcelで作っていたのだが、最近のMac用Excelは、重くてバグだらけで、特に複雑で大量の図の作成用としては使い物にならない（Excelも’95年以降は無駄な機能が増えて重くなるばかり。1985年に発売されたMacintosh用のExcel Ver.1を触ってみると、軽くて、しかも使いやすくて感動的）。
そこで、Mac専用の作図ツール、OmniGraffle Pro（オムニグラフプロ）を構成書作成用に使っていた。Omini Graffleは、Visioみたいに設計図やチャートの作成に特化したソフトウェアだ。マスターレイアウトや複数ページにも対応。Visioほどではないが、フリーのパーツ素材（ステンシル）もけっこう豊富にあって、Macだから簡単にPDFに出力できるなど、仕事用の作図ツールとしては、まあまあ満足できるできだ。
特にWebサイトのワイヤーフレーム関係は、できのよいテンプレートやステンシルがいくつかある。
OmniGraffle UX Template | Konigi
OmniGraffle Wireframe Palette | urlgreyhot
jason sutter _blog: Free Web Wireframe Stencil for Omnigraffle
ただ、営業マンも含めて複数の人で構成書を共有で管理しようとすると、Mac専用のOmniGraffleは不便だ。いちいち、修正の要望をボクが受けて直して、確認をとらないとならない。
やっぱ、画面構成書（とサイトマップ）は、PowerPointで作るべきかな？ と思って最新のPowerPoint 2008 for Macを使ってみたところ、前に比べれば、ちょっとは使える感じになっていた（いや、プレゼン用資料作成ツールとしては、かなりよくできているかも）。 ただ、Web構成書用のフリーのテンプレは、ちょっと探したところ見つからなかった。 なので、自分で作ってみた。
表紙
サイトマップ
画面構成 ：ヘッダとパンクズ付き（パンクズは外せます。サイト名はマスタで設定してください）
画面構成 ：ヘッダとパンクズなし（縦に長い画面の途中以降に使うことを想定）
画面構成のテンプレは、とりあえず右カラム型のみ。
自分で実際に使ってみた感想は、生産性はOmniGraflleの半分くらいかな。まあ、それでもないよりは、だいぶましだとおもう。あとは、慣れの問題か。
一応、誰でも使えるように置いておきます。下記をクリックして、ダウンロード。ダブルクリックでPowerPointを開き、「別名で保存」。個人用テンプレートフォルダに保存してください。以後、新規プロジェクトで、「個人用テンプレート」のカテゴリから使用できるようになります。
PowerPoint 2008/2007用テンプレート（.potx）
PowerPoint 97-2004互換用テンプレート（.pot）
感想とか、要望とかあったら教えてください。ニーズがあればアップデートしていきます。
