ここでいうプロトタイプは、最終製品を作る前に失敗しないよう試行錯誤や検証を行うために作る試作品、他の人とコミュニケーションをとるために形にした即席品程度で考えています。ペーパープロトタイプ、WYSIWIG的なツール、HTMLプロトタイプ、Flashプロトタイプなど精度や目的によって色々な形態があると思います。
なお、書籍『モバイルフロンティア』では、プロトタイピングを体験的プロトタイピングと戦術的プロトタイピングの2種類に分けています。体験的プロトタイピングはユーザの体験をシミュレートして評価し（ストーリーボーディング、ボディストーミング）、戦術的プロトタイピングではUIをスケッチして評価します（スケッチ、ペーパープロトタイピング、HTMLプロトタイピング）。ここではその両方について見ていこうと思います。
- サービスプロトタイピングってどうやるのか？がわかる動画 - Think Social Blog
- ペーパープロト、デスクトップ・ウォークスルー、ビジネスオリガミなどいろんなメソッドの紹介
- Amazon流の開発術では、まずプレスリリースを作る
- AmazonのWorking-Backwards法の紹介
- ゲーム作りに役立つ！ デジカメ・プロトタイピング
- 2012年のCEDEC（ゲーム関係のカンファレンス）での講演。ゲームのコンセプトを評価するために、デジカメのムービーでそれっぽいコンセプトムービーを撮影する方法。サイトに無料登録すればスライドと動画がダウンロード出来る。
- ペーパープロトタイピングならぬペーパービデオ
- ペンと紙でコンセプトビデオを作成
- モバイルUI設計プロトタイピングツール
- 価値マップでまず提供価値を明確にして、エクスペリエンスマップで行動に落として、各行動をUIに落とすという流れ。そのUIプロトタイピングにはペーパープロトを使っている
- Why we skip Photoshop - Jason Fried of 37signals
- "When designing a UI we usually go right from a quick paper sketch to HTML/CSS. We skip the static Photoshop mockup."
- これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） - MEMOPATCH
- "デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています"
- これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（後編） - MEMOPATCH
- "デザイナーがするべき雰囲気のデザイン、また具体的なワークフローについての話をまとめていきます"
- なぜ "Designing in the browser" ワークフローへの移行が必要なのか - Zerobase Journal
- "“Designing in the browser” はウェブというメディアの技術的特性を活かしたデザイン・アプローチです。ウェブというメディアの技術的特性が大きく変わらない限り、有効であり続けるでしょう "
- 柔軟性あるデザインプロセスへ移行するためのヒント - Ascii.jp
- "ワイヤーフレームはWebデザインに必要か？" / "機能・仕様を正確に詰めためにワイヤーフレームを使う場合もありますが、抽象的な図であるがゆえにミスコミュニケーションの発端になることもあります。"
- 触れる・動くによって変わるデザインプロセス - could
- "青森のセミナーで、プロトタイピングの基礎を解説しました。アイデアを伝えるときに発生するであろうミスコミュニケーションをどのようにしたら埋めることが出来るのでしょうか。Webサイトやアプリのデザインにおいては、静的な絵ではなく、触れたり動いたりするプロトタイプが有効です"
- Web制作フローの再考とDesigning in the browser
- "多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。"
- Prototyping - Rosenfeld Media
- ウェブ制作向けの書籍、突っ込んだ内容はあまりない。"With this book, Todd Zaki Warfel shows how prototypes are more than just a design tool by demonstrating how they can help you market a product, gain internal buy-in, and test feasibility with your development team."
- 深津貴之氏が語る「使ってもらえるアプリの考え方」- スマホデザイン忘年会義 ～UI/UX ここだけの話 大放出～
- ATMアプリを例にとってプロトタイプする時の様子を説明。必要な機能とOSのナビゲーションパターンを洗い出した上で、パターンごとにメリット・デメリットを検討。よさそうなものに対してプロトタイプを作成し、利用シーンにそって評価を行なって決める
- INFOBAR A02 iida UI Virtual Touch
- iida UI設計者の中村勇吾さん曰く、"かなりの精度で実機の動きが再現されています。というか逆に、このデモを手本にして実機のUIが実装されてるんです。iida UIのトップ画面のUIはFlashをデモにして作られた"そうです。インタラクティブ性の高いものをどう形にして、どう伝えるかの一つの解
- AppleのUXデザイナーはどんなプロトタイピングツールを使っているのか？ | (mshk) ブログ
- Slicy - MacRabbit
- Macアプリ。Photoshopのスライス作業が簡単にできる、らしい（未使用）
- Sketch
- Macアプリ。グラフィックツールで、日本ではポストFireworksの文脈で注目された。解説記事
- WebZap
- Photoshopプラグイン。PhotoshopにUIコンポーネントを集めたパネルを用意し、簡単にサイトのモックアップが作れる、らしい（未使用）
- UIデザインの動きまで共有できるモックアップ作成ツールまとめ
- いろいろ載ってます
- Adobe Edge Rwflow CC
- クロスプラットフォームなアプリケーション。RWD向けのプロトタイピングツール。他のプロトタイピングツールは画面幅を固定していて幅を変えても要素は動かないのですが、このソフトではブラウザで見るように画面幅に応じて要素が伸縮するので、狭小画面時・ワイド画面時のUIを一体で検討できますし、また実際に近い状態で検討することができるのが良い所
- Indigo Studio - Infragistics
- AdobeAIRで動作するアプリケーション。ストーリーボードとワイヤーフレームを統合し、インタラクションやアニメーションなども簡単につけて表現できるのが特徴
- Axure RP Pro
- Windows/Macアプリ。条件分岐、マスターモジュールなどプロトタイピングツールとしては比較的高機能（ただし、十数ページ程度が一覧性・保守性を良好に保てる限界か）。スマートフォン向けに作ることも可能。専用サーバがあり、作ったプロトタイプをホストしてくれる。
- Jetstrap
- ウェブサービス。モジュールはTwitter Bootstrapベース。
- Webydo.com - Online Website Design Software for Graphic Designers
- WYSIWIG モックアップ制作ウェブサービス、ボタンひとつでデザインを大胆に変更できる
複数のブラウザ・プラットフォームに向けての制作を前提とする場合に、表示確認を行いやすくするためのツール
- Ghostlab
- Macアプリ。複数ブラウザでの状態を同期。スクロール量・フォーム入力・クリックなどの状態も同期される。
- 解説記事（Ghostlab でブラウザの動作確認）
- Adobe Edge Inspect CC
- Macアプリ。複数ブラウザでの状態を同期。Ghostlabと異なり、表示中のURLだけが同期される。
- Skala / Skala Preview
- Mac/iOSアプリ。Macで表示しているものを切り取ってiOSにリアルタイムに表示。グラフィックソフトでささっとプロトを作って、iOSに表示してイメージを確認するような感じ。
- 解説記事（Skala Preview – iOSデバイスでフォトショップのキャンバスをリアルタイム表示できるアプリ）
- CSS Front-end Frameworks with comparison - By usabli.ca
- CSSフレームワークの比較
- Twitter Bootstrap
- みんな大好きTwitter Bootstrap（雑）。読みこむだけでHTMLに綺麗な見た目とインタラクションをつけることができる
- Yeoman
- 統合ライブラリ群？。フロントエンド開発を行いやすくするツールが整備されている、らしい（未使用）。 HTML5 Boilerplate、Gruntfile.js、Bower.jsなどが使われている、らしい。「ヨーメン」って言います
- 解説記事1（WEBアプリケーションビルド・ テストツール YEOMAN）
- 解説記事2（Yeomanのあれこれ - Qiita）
いずれもMacアプリ、詳細は割愛。
ブラウザの自動更新を行う単機能アプリ
- Adobe Brackets
- Adobeがオープンソースで開発を行なっているエディタ。HTML/CSS/JSのフロントエンド技術で作られている。Creative CloudユーザにはAdobe Codeという名前で提供されている。
- 解説記事
- Sublime Text2
- Mac用エディタ。パッケージで機能拡張が行える。
- 解説記事
- Emmet
- 略記でHTML/CSSが楽に早く入力できるプラグイン。様々なエディタ向けに開発されている。昔はZen Codingという名前でした。
- 解説動画（Zen-coding入門 (全11回) - ドットインストール）
- Hayaku for Sublime Text 2
- 略記でCSSコードが楽に早く入力できるSublime Text2プラグイン
- POP - Prototyping on Paper
- iOSアプリ。ペーパープロトタイプをiPhoneのカメラで撮影して取り込み、アプリ上でリンク設定などを行い、簡易プロトタイプを作ることができる
- ProtoSketch
- iOSアプリ。上記POPと似たようなアプリ
- コンセント社のCHIKUWA
- インタラクションを伝えるペーパーホワイトボードプロトタイピング