December 13, 2003

パワーポイントで画面設計する人って非プログラマーの人に多いと思うんですが、パワポは基本的に紙に出力するツールなので、ピクセル単位でのサイズが把握しにくい。また、サイズの単位がcmというのは、いただけない。

デザイナーがコアを握るデザイン主体のサイトではなく、情報ポータルのデザインをデザイナーマターで、やらせるわけにはいかない。画面上の要素、特に表の要素が、どういう長さ／フォーマットで表示され、画面に入るのかデザイナーに投げる前の設計フェーズで完了しておく必要がある。すなわち、ヘッダサイズから、スクロールしない範囲で表示されるべきものなどと言った、デザインにも直結する要素も、この段階で決まっておく必要がある。

しかしながら、ここのところをきっちり設計しようと思ったらパワポでは役不足で、もっとCAD的な能力が欲しい。

今回、Visioで設計してみる。
まず、なによりコンピュータに表示する画面の設計はピクセル単位で行うべきだろう。

Visioは画面の単位系が変えられるので、ポイント単位にする。72dpiなら1ポイント＝1ピクセルになる。
ただし、そのままだとA3縦の印刷範囲（A4じゃ足りない）に占める実画面サイズが大きすぎて、設計するWebの画面およびコメントや仕様記述が入りきらないので、図面の縮尺を1/2にする。

この状態で、図面の表示を150%にすると、ウインドウズ上のサイズと、図面上のサイズが同じ大きさで表示されるので、文字の大きさを考えながら画面設計することができる。

（・・・書いてて違和感、実は96dpiでやってるかも。縮尺1/2なら200%表示が実寸では？96dpiなら133%がほぼ実寸表示ですかね？（こちら参照））

Visioの不満点は、フォーム部品をネイティブにサポートするパーツが揃っていないと思われること。今回使ったのはVisual Studio 2003 Enterprise ArchitectについてくるVisioで、一番最新の奴と思うが、Windowsフォームの部品の流用ではイマイチ物足りない。縮尺や単位系変えると、テキストフィールド、オプションボタンなどが、うまく拡大できずに役立たず（理由は謎）

あと、そういえばCSSなどでの文字間、行間のレンダリングまで意識しては設計してないです。あまりやりすぎるとDreamWeaverになってしまいますが、できる限りWYSIWYGで設計できることが理想ですね。

他に良いWebの画面設計のツールないのかな？Webのアーキテクトを肩書きに持つ人って、何使ってるんでしょうか。