Webサイト用のベストなプロトタイピングツールはありますか？

What is the best web prototyping tool?

プロトタイピングツール関係の情報を漁っていたらWhat is the best web prototyping tool?なんていうやりとりがあったので、翻訳してみました。

ツール派、アナログ派などいろいろいますねー。

回答は23人に増加！

Balsamiq MockupsとPencil Project（Swaroop C H さん）

Balsamiq Mockups（商用ソフト：$79）か、Pencil Project（オープンソースのFirefoxアドオン）を試してみなよ。

返答：おお、Pencil Projectすげー！ありがとう！

ペンと紙（jpeacockさん）

ペンと紙。マジで。ツールを覚える時間も要らないからデザインに時間かけられる。

最初にページのテンプレートをいくつか作っておいて、それをコピーする。　あとはダイアログとか表示部分とか細かいところを手で描くだけ。 速いしアイデアも浮かんでくるよ。

鉛筆と紙（gregmacさん）

普通の鉛筆と紙で始める。速いし、機能的だし、ツールの使い方を覚えなくて済む。アプリを起動できるようになるより早くデザインが書き終わるよ。　ほんとだよ。

それで、最初のコンセプトが良かったら、デザイナーにPhotoshopで（というか描画ツールはなんでもいいんだけど）モックアップを描かせる。まだHTML化する必要はなし。君がプログラマーだったら、デザイナーではない※1だろうから、専門のデザイナーにまかせよう。

その後は、デザインを実際のHTMLに落としこんで、アプリケーションを書くことができるようになる。

紙と鉛筆で書いたあとのことなんだけど、もし見栄えよりもユーザー・インターフェースについて突き詰めたいんだったら（それを言えるクライアントがいるなんてラッキーじゃないか！）、実際にインターフェースを作ってみよう。　見栄えなんか気にするな。　今はセマンティックな（タグでちゃんと意味付けされた）HTMLを書いてれば、後でほとんどCSSで装飾できるんだからね。

※1 大体において、ほとんどのプログラマーはデザインのことが分かってない。Photoshopの全てのツールがどういうものか分かってないから、デザインを任せられないだろう。

Mockingbird(Pascal Thiventさん)

balsamiqは時代遅れ。　これからはmockingbird！

Mockingbirdはオンラインのツールで、ページ作成・リンク機能・プレビュー、実際のWebサイトやWebアプリケーションとの共有が簡単にできる。

Balsamiq Mockups（Lou Francoさん）

Balsamiq Mockupsは、すげーいいね。

Mockup Screens（Mackaaijさん）

うちのコンサルタントたちはMockup Screens(‘Quick and Easy Screen Prototypes’)を使ってるよ。画面編集が簡単だし、スケッチ機能もデザインに集中できるようになってるしね。

iRise（Krishnaさん）

半年くらい前からiRiseを使ってる。プロトタイピングだけじゃなくて要件定義書も作れるからね。

ForeUI(Codyさん)

ForeUIをオススメする。　すごく使いやすくて、プロトタイプを画像やPDF、HTMLで書き出せる。

いちばんすごいのは、このソフトでは自由にインタラクション（挙動）を定義できることさ！

Balsamiq Mockups(Brendanさん)

Balsamiqはすごいよ。　iPad上で動作するMockingbirdもかなりいいけどね。

「紙とペン（ｷﾘｯ）」なんて言ってる連中は、自分たちが何について話しているのか分かってんの？

「外国の人とコミュニケーションするために船に飛び乗って会話しにいくとしたら何を使う？　あ、電話とかメールはナシで。」って言ってるようにしか聞こえない。　ガセネタすぎ。

99％ハッキリ言えるけど、最近のツールよりも紙とペンのほうがいいって信じてる連中は、MockupsとかMockingbirdを使ったことがないんだと思う。

コンサルタントとして１５年、（Balsamiqを手に入れるまでのあらゆる苦痛ありの）あらゆる方法でモックアップを作ってきたんで、どうして紙とペンがどれだけ劣っているか例を挙げてみる。

最初の例（これが最重要）：コラボレーションと共有。　ユーザー画面のモックアップを作るとしよう。　Balsamiqを使っているときは、（モックアップを）彼らに送信したり、wikiページに投稿する。　私は「いつも」何らかのミスをするが、ユーザーはモックアップ上に直接メモを残したり、モックアップの周りにUIコンポーネント等を配置したりできる。　PCによる簡単な共有で連携できる。　米国周辺の人たちや、世界中の人たちと共同作業ができる。

次に、モックアップがなんらか複雑な画面になっていて、ユーザーがナビゲーション・ツリーを左から右に動かしたいとする。　紙とペンでどうするの？　30分も使って全体の画面を描き直すか、ほんの5秒で全てを選択して左に動かして空間を作るか。

手書きのモックアップを他のオフィスの人たちとどうやって共有する？　スキャンして縮小してメール添付？　wikiページ上で描いたモックアップは保存ボタンを押すだけで共有するよ。

PhotoshopやVisioやHTMLでモックアップを作ると、比較的時間がかかりすぎる。　でもBalsamiqやMockingbirdは完全に違うツール。　Balsamiqがリリースされた2～3年前までは、Balsamiqほどのツールは登場してなかった。

もしBalsamiqが「紙とペン」だとしたら、iPhoneも「糸電話」みたいなもんだろうね。

Axure（Craigさん）

最近会う人みんなAxureがいいって言ってるな。

HTML手書き（Turnkeyさん）

簡単なHTMLとリンクでプロトタイピング。ツールは好きなHTMLエディタでいいよ。クライアントに見せるのが楽。ときどき最初の基本ページを前に作った別アプリから持ってきて「別名で保存」して使ってるけどね。

３種類(Visual Studio, Visio, ペンと紙)を使い分ける（nzpcmadさん）

• Visual Studioを使って基本ページを作る。中のデータはダミーで。そして、できるだけシンプルにそれぞれのページをつなぐ。これで客に見せるプロトタイプが完成。利点は、プロトタイプが実際のコードになっていること。苦労せずに開発とドキュメントを合わせられるよ。
• Visioを使う。ペンと紙よりもキチンとしたものが見せられる。更新が楽なので、クライアントの前ですぐ見せられる。ドキュメントの中に簡単に読み込ませられるし、プロっぽく見える。
• ペンと紙。これはクライアントが「自分たちはどんなものを作って欲しいのか」が分かってなくて、「たぶん多くの変更があるだろう」と君が考えている場合に有用な方法だ。基本をマスターしたら、上のどれかを選ぶといいよ。

なんか大胆（david dickeyさん）

厳密にしないこと。

いろんな色のインデックスカードが入った箱と、それらを（一時的に）ペタペタ貼るためのスプレーのり。黒マーカーをいっぱい。そしてホワイトボードを立てるためのフロアーさ。

Axure（Raymondさん）

ずっとAxureを使ってるよ。安定してるし、役に立つ機能が沢山あるし。中小規模のWeb案件で使ってるけど、かなり助かってるよ。もしJavaScript/Ajax機能をページ内で沢山使うなら、dynamic panelsがウザく感じるかも。そんなときは単純なHTML/JavaScriptを組んだほうがいいかもね。

ここで誰かが挙げたiRiseを見たことあるけど、かなり似てるね。iRiseはもっと規模の大きい案件で使うのがいいかも。　でもAxureはiRiseよりもかなり安いよ:-)

Protonotes（Maxさん）

Protonotesだな。

Protoshare（Andeeさん）

プロトタイピングでこういうのを探してる人ってだいたい社外のチームとかクライアントと協調する必要があるから、Protoshareがいいんじゃないかな。　Axureっぽいけど、複数メンバーでアクセスしたり、コメントしたりできるよ。

Omnigraffle(Joel Sさん)

僕の普段のワークフローは、

• 1. 紙と鉛筆（でスケッチ）
• 2. Konigiのワイヤーフレーム・ステンシルを組み込んだOmnigraffle(Macだけだけど)を使って、クリック可能なモックアップを作成
• 3. Photoshopで完全なデザインを作成
• 4. HTML/CSSに実装する

備考：プロジェクトのタイプ、クライアントや仕事仲間によって、ときどき２番目のステップをやらないこともある。

だから、回答としては…君が紙や鉛筆でのプロトタイピング以上の何かを必要とするならOmnigraffleを使うといいんじゃないかな。（Macユーザーに限られるけどね）

BalsamiqとAxure(iaingilfillanさん)

僕ならBalsamiq MockupsとAxureの併用かな。　Balsamiqのほうはデザインのモックアップ作成機能がすごいし、Axureは機能的なモックアップ作成機能がすごい。

使っていて分かったのは、Balsamiqはクライアントに見せるのに向いていて、見栄えがいいし、ページがどう見えてレイアウトされるのか実感してもらえるんだ。

Axureは機能の連携が良くできていて、バックエンドの開発者にとって役に立つよ。　でもクライアントにとってはAxureのワイヤーフレームや仕様はちょっと見辛かったみたい。

justproto（hefiさん）

http://justproto.com/ サイコー！

iPlotz（さん）

iPlotzが好きだ http://iplotz.com/

FlairBuilder（Jafinさん）

以前にBalsamiqユーザーだったよ。　Balsamiqはすごいツールで、今でもオススメ。

今はFlairBuilderを試してて、Balsamiqよりもプロジェクトに複数ページをより簡単に登録できる機能が気に入ってる。　反応もBalsamiqよりちょっと早い感じ。

FlairBuilderはAdobe Air上で動かすから、軽い。　もう一つFlairBuilderが扱いやすいと思う所は、プロジェクト内の複数ページのシンプルなリンク制御機能かな。

ベンダーによるFlairBuilder vs Balsamiq vs iplotz の記事がここにあるよ。

どの製品も早いペースで進化してるから、意見はそのまま受け入れないようにしよう。

Microsoft Expression Blend の SketchFlowも試してみたけど、あんまり良くなかったな。　BalsamiqやFlairBuilderよりも動作が遅かったよ。