Webサイトのモックアップ（ワイヤーフレーム）を作る作業は面白い。実際の開発とは異なり、想像の羽を羽ばたかせてどんどん試すことができる。そうしたツールはこれまでにも幾つか紹介してきた。

Picture 841.png

手書き風モックアップ作成

　

この手のツールはあまり奇麗なインタフェースであってはならない。むしろ雑さが残るくらいがちょうど良い。そこで手書きで作るDENIMを紹介しよう。

DENIMはJavaで作られたモックアップ作成ソフトウェアだ。単一ページだけでなく、Webサイト全体を構築できるのが特徴だ。

DENIMはWindows、Mac OSX、LinuxやSolarisといったマルチプラットフォームに対応したソフトウェアだ。若干特殊なインタフェースで、まるでホワイトボードに書いていくかのようにモックアップを作成できる。

まずすることは鉛筆ツールで四角を描くことだ。これが自動的にページになる。メニューから選んで奇麗な形のページを追加しても良いが、やはり手書きのが味わいがある。そして画面の下にあるラジオボタンやテキストボックスなどを配置していく。もちろん足りない部品は鉛筆で書き込んでいく。

Picture 842.png

専用ブラウザで閲覧、リンクを辿れる

　

作業は一ページでは終わらない。次のページもどんどん書いていこう。そしてある程度終わったら、次に各ページを線で結んでいく。これが言わばリンクのつながりになる。線は自動的に矢印がつき、ストーリーを作っていく。

さらにそれが広がっていくとサイトマップになっていく。そして全体がオーバービューとなる。それらは左側に並んだアイコンを見ても容易に見て取れるだろう。最大限拡大した状態が詳細になる。

何となく書いた手書きの線も自動的に補正されてはっきりとした線になる。テキスト機能はないので、文字が必要なら手書きで書こう。なぜかオブジェクトの移動機能がないので、配置に失敗した場合は右クリックして削除を行う必要がある。

さらに専用のブラウザがあり、リンク等を辿ることができる機能もある。HTMLでエクスポートすれば、ブラウザ上で手書き風インタフェースのモックアップを体験できてしまう。

メニューの出方やアイコンの表示具合が独特で、最初はとっつきが悪いかもしれない。だが慣れてくると非常に楽しく、どんどんページを作りたくなってくるはずだ。ぜひトライして欲しい。

Picture 843.png

HTML出力もできる！

　

DUB - DENIM

　http://dub.washington.edu:2007/projects/denim/

**SourceForge.net: Informal UI’s

　http://sourceforge.net/projects/informal/**