もっと現場で使える「本気のワイヤーフレームの書き方」を公開しました。
ワイヤーフレームの書き方は、それこそディレクターさんによって千差万別。
手書きが一番だ！と叫ぶ人もいれば、Fireworksラブ！なんて人もいて、使用するフォーマットもマチマチ。
なので、ここでは僕がやっている「使えるワイヤーフレーム」を僕なりのやり方で紹介させていただき、読んでいる殊勝なかたがたのお役に立てばなぁと思います。
僕の場合、ワイヤーフレームを使って脳内シュミレート（サイトが使いやすいかどうか？のテスト）をするので、一般的なワイヤーフレームというよりは、どちらかといえばプロトタイプに近いものを作ります。
ピクセルは等倍で、フォントサイズも大まかには合わせて、原稿はすべて入れてしまいます。
なんでワイヤーでそこまでやるんだって？決まっています。そのほうが楽だからです。
ワイヤーの多くは、「あくまでレイアウトの草案」として作られることが多いのですが、これに上述のように原稿を完成型に近い形で入れておくと、デザイナーにトーン指定を行う際にかなり楽になります。
たとえばワイヤーのバナーエリアに
「初心者ガイドへの誘導バナー」
としか書いていないのと、
「かんたん
初心者ガイド
分からないときはとりあえずClick！」
と書いてあるのとだと、デザイナーが受け取るイメージの量を格段に多くすることができるため、非常に作業の効率化とクオリティ向上が狙えます。
正直言って、ディレクターとしての仕事の大半がこの「ワイヤーフレームを作るまでの工程」に詰まっていると思っているくらいです。
極力本物のサイトと同じサイズ、同じ文言でレイアウトを組んで、
可能な限り「全ページのワイヤー」を作ってしまうことがオススメです。
面倒ですが、やっておくとプロジェクトの管理が非常に楽になります。
・I love wireframes
ワイヤーフレームがどんどんアップされています。とても参考になります。
・Mockingbird
ブラウザ上で操作するタイプ。なれないと結構面倒くさい
・DENIM
タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです
・OpenOffice: Draw
OpenOffice にある Draw というスケッチをするためのプログラムは、ダイアグラムやワイヤーフレームを描くのに最適です。swf 形式に書き出せる機能も付いていたりします
・CmapTools
コンセプトマップというマインドマップにも似たダイアグラムを作るのに特化していますが、ワイヤーフレームやプロトタイピングにも使えます。サーバー経由で共同作業も出来るのが魅力
・Gliffy
ダイアグラムが描ける Web サービスは幾つかありますが、中でも Gliffy は優秀です。ユーザーインターフェイス系のパレットも用意されているのですぐ使えそうです
・Compendium
ダイアグラム制作ツール。データの埋め込みも出来ますし、こちらも CMapTools と同様、共同作業が出来ます
・Serena Prototype Composer
以前は有料でしたが今は無料で配布されています。サイトマップからフレームワークといった制作向けの機能から、要件チェックといった管理系のものまで様々な機能が統合されています
