第36回　画面設計書を書くための手法とツール

　画面設計書について，前回に引き続き，それを書くツールや手法について考えてみましょう。

画面設計書の基本

　まずは，画面設計書の中にあるべき情報から見てみましょう。これらすべてがそろっていなければならない，というわけではありませんが，望ましいのではないかと私自身は考えています。

画面設計書に必要な項目

header ページIDやタイトルなど，一目でそのページがどの画面仕様を記述しているかがわかるような「ヘッダー」部分。細かく書くならば，文字コードや対象ブラウザまで記述する場合もある。また，プロジェクトの名前（プロジェクト・コード）や版番号なども記し，似たようなドキュメントの中からも引き出せるようにしておく。 footer 制作サイドのコピーライトやページ番号などを記す。最終的には，クライアントのコピーライトに置き直して，最終納品とする場合もある。 Page Layout 画面内に配置する「ユーザー・インタフェース（UI）部品」を記す。記述する画面設計書が，どの段階のものかにも依存するが，あまりグラフィックデザインの細かな指定を記述するよりは，もう少し概念的なものを書く場合が多い。例えば，ボタンの形状は別途決定するとして，「ここにボタンがある」ということだけが，誰にもわかればよい。 Note UI部品の配置だけでは，実装（プログラミング）部隊に指示できないような事柄や，犯しやすいミスに対しての注意を記す。 Reference CSSなどの外部参照しているファイルなどについての注意や，URLを記す。ここに書くことによって，何か修正が入った場合に，どの程度影響範囲があるのかを概算できる。

　次に，こうした要素を記述する「ツール」に求められる機能を考えてみましょう。下図は，効率よくドキュメントを生成して行くために必要と思われるものです。

1. 部品テンプレート
   UI部品の細部にわたるグラフィック指示を書くのでない限り，こうした仕様書は「凡例」的に，端的な「記号」によって，「指示を伝えるドキュメント」としたほうが，効率良いと思います。指示自体を的確に伝えれば，きちんと実装できるという体制ができているなら，シンプルなほうがドキュメントのメンテナンスなど何かと助かるからです。そのためには，UI部品を表す「記号」はどこかにあらかじめ定義しておいて，それを貼り付けていくような形が望ましいでしょう。
2. ページ・テンプレート
   ドキュメントとしてのヘッダーやフッターは，複数ページに共通フォーマットで記載されるべきです。そうしたほうが参照が楽だからです。同じフォーマットに統一された情報は，どこに何が描いてあるかを推測しやすくしてくれます。個別に定義（記述）するのではなく，一括に修正できるような形で定義できることが望ましいです。
3. ページ
   UI部品の配置を重視すると，複数ページを簡単に生成できるツールを使いたくなります。各ページごとを，別ファイルに保存していくこともできますが，あまり多いファイルを正確に管理するのは難しいので，「ページ」という概念は必須です。
4. PDF出力
   趣味的な部分も強いのですが，PDFへの出力にはこだわりを持つべきだと思います。Microsoft Office形式のドキュメントを，そのままメールで配布するケースをよく見かけますが，いつでも編集（修正）できるような「モード」で，仕様書系のドキュメントを参照するのにはいささか抵抗があります。間違って，変更されたものが伝言ゲーム的に回覧されていく可能性があるためです。
   　また，検索などのしやすさの点でも，せっかく圧倒的な搭載率を誇る「Adobe Reader」があるのだから，それを活用すべきでしょう。

　では次に，これらの機能を有したツールや手法を見てみましょう。

●Microsoft　Excel

　まずはExcelを用いた例です。Excelを使うメリットは，ほぼ誰もが持っている，「シート」によって階層的な複数ページが記述できる，表形式の資料作成は操作に慣れていることが多い，といったところでしょうか。

　下図は，私的Flash技術共有セミナー「F-site」主催のSIHO氏が公開しているノウハウです。Excelのカラムをグリッド（格子状の配置基盤）に見立ててUI部品を配置し，「Note（注意書き）」を記しています。

実際のExcelファイルも公開しているので，ぜひダウンロードしてみてください。

●Microsoft Visio＋GUUUI Prototyping Tool

　Visio 2003を使う場合には，便利な「部品テンプレート」が公開されています。元々，Visioは「ステンシル（部品）」を貼り付けていくことで，“均一”な図を効率よく描画できるようにするツールです。この「GUUUI Prototyping Tool for Visio 2003」のようなステンシルがもっと充実していけば，Webサイト構築に必要な標準UI部品を効率よく組み合わせ，構築できるようになるでしょう。

　Visioはネットワーク構成図を描く機能も充実しており，下記のページには各種ハードウエア・ベンダーなどが無料提供しているステンシルがまとまっています。画面設計書だけでなく，こうしたものも付け加えると，クライアントの信頼を増す資料を作りやすくなるかもしれません。

• Visio 無料ステンシル・シェイプ リンク集

●Adobe製品：Illustrator＋InDesign＋DBパレット

　少々複雑なフローになってしまうので，万人にお薦めできないかもしれませんが，Adobe製品を活用した以下のような方法もあります。

　基本的な図は，Illustratorで作成します。その際，Visioのステンシルにあたるものとして，DBパレットを活用します。自作の「部品」をいくらでも登録して再利用できるので，均一な絵を生産するのが非常に楽になります。

　できあがった「絵」は，Illustratorネイティブ（拡張子は「.ai」）のファイル形式ではなく，PDFとして保存します。こうすることで，単体でこの絵を使いたいときにすぐに送ったりできるようにするためです。そして，それらのPDFを，InDesignでドキュメント化していきます。設計書としてのヘッダーやフッターはInDesignで作成し，適切な書式設定をしてやれば，目次作成も容易にできます。

　同じ絵を，別のドキュメントに貼り付けることも容易です。しかも，InDesignは，配置されたファイルに修正が発生した場合，それを通知する仕組みを持っているので，素材としての「絵」を更新していくことも可能です。

　この方法は，絵を一枚づつ個別ファイルにしていくので，管理すべきファイル数はかなり増えます。絵を体系的にまとめなくてはならないため管理コストは上がるのですが，一つひとつの絵を再利用できることから，全体としてのコストは比較的下がります。私自身は，最近ではこの方法に頼ることが多くなっています。

▼まとめ

　もちろん，画面設計書を記述するには，PowerPointやWordを用いる場合も多いでしょう。変わったものでは，DENIMのような，手描きのラフスケッチを設計書にしてしまうものもあります。

　しかしポイントは，こうしたドキュメントは，企画サイドと実装サイドの間の指示書であり，制作サイドとクライアントの間の一種の議事録のようなものだということです。つまり，「配布・修正・管理」という側面が大切になるのです。

　どのツールが優れているかは，プロジェクト・チームに依存します。どういった指示を残せば効率よく開発作業が進むのか。そういった点を含めて，開発作業の狭間などで立ち止まって考えてみるのも，長く良いWebサイトを開発していくためには必要なプロセスだと思います。

三井 英樹（みつい ひでき） 1963年大阪生まれ。日本DEC，日本総合研究所，野村総合研究所，などを経て，現在ビジネス・アーキテクツ所属。Webサイト構築の現場に必要な技術的人的問題点の解決と，エンジニアとデザイナの共存補完関係がテーマ。開発者の品格がサイトに現れると信じ精進中。 WebサイトをXMLで視覚化する「Ridual」や，RIAコンソーシアム，日刊デジタルクリエイターズ等で活動中。Webサイトとして，深く大きくかかわったのは，Visaモール（Phase1）とJAL（Flash版：簡単窓口モード/クイックモード）など。