モックアップ。プロトタイプとかともいうのでしょうか？　動く前の企画段階の時にプレゼン、もしくはそれをもってコミュニケーションするために用意しなければならないもの。
このモックアップの制作において、整ったイメージを作成してしまうと、そのイメージに固執したり、また、その良く出来ているイメージの細かいところに目が行ってしまい（たとえば、フォントが適切ではないとか、ボタンはもっと大きいほうがいいとか）、大事なこと、つまりユーザービリティーや、コンテンツがちゃんと配置されているか、文言が適切か、その時点でアイディアに付加すべきことに目がいかなくなるので、初期のモックアップは手書きのような、ジャストアイディアを形にしているというのが、伝わるような、手書きっぽい作りのものがよく使われてます。モックアップ作成ツールもこの手書きテイストでアウトプットするものが多い。あくまでも最終系を目指すコミュニケーションのツールであるべきということなのかな？

ということで、そんなモックアップを作れるツールを

ナプキンに書いたような感じでモックアップが作れるnapkin look and feel

ナプキンにアイディアを書いている時って、なんかいいですね。 JAVAアプリケーションなので、JAVAのインストールが必要。

※OSX で起動できませんでした。

手書きな感じで導線設計とかが作成できる balsamiq

やはり、企画段階のモックアップは、手書きの感じなんですね。


日本語の詳しい詳しい開設がidea-ideaで

Mockup Screens

サイトマップ、各ページも簡単に生成してくれる。79ドルから。有料だけあって、機能が豊富です。

Web page designer

シンプルなブラウザインターフェイス。ブラウザなので、ちょっとした時に、サックと使えそう。

OmniGraffle

Macのみですが、 自分もつかっています。omni outlinerを愛用しているので、outlinerで箇条書きした後に、グラフィカルなイメージにインポートしてくれるので、いい感じです。

OmniGraffle日本語
Ominigraffle英語

モックアップを作る動画

gliffy

サービスの種類によって、無料、有料あり。

weebly

そのうち使えるようになりそうですけど、safari、firefox３が使えませんでした。

モックアップに使えるブラウザの外観をまとめてダウンロード

Designers toolbox
まっさらな状態のブラウザの外観って、レイアウトデザインや、サイトのモックアップ作成するときには、イメージを伝えるの重宝します。プレゼンとかにはうってつけですね。 それぞれ、1024x 768 800 600 のテンプレートが用意されていて、すべて無料でダウンロードしてつかえます。 favicon、ページのタイトル、スクロールバーなんていうパーツもすべてレイヤー毎にわかれいるので、結構使いやすいかも。

そろっているのは、
Windows

• Firefox 1.0
• Firefox 1.5　/　XP
• Opera 8.5
• Netscape 8
• Netscape 4.8
• Netscape 5

MacOS

• Firefox 1.5
• Camino
• Opera 8.5
• Netscape 7.1
• Safari 2.0
• Explore 5.2

ほか、Mac OS9 クラシックのブラウザもあって、少し懐かしい気分にさせられます。 ちなみに、CS3でこうした機能を搭載したfireworksCS3でいいじゃんっていうこともありますが、細かく作成できてしまうというところが少し考えものです。