Web業界で働いている人は一度は聞いたことのある「プロトタイピング」という言葉。
プロトタイピングとは、実際に制作する画面のプロトタイプの画面を作りながら、ユーザーにとってどういったUIやUXが良いかを検討やテストをしながら実際に公開する画面を制作する手法のことです。
昔のWeb制作の流れといえば企画や設計を行いつつワイヤーフレームを作り、デザインを起こして、HTMLやCSSをマークアップ、システムが絡んでくれば最終的に開発を行っていくという上流工程から下流工程の一方通行だったものが、プロトタイピングでプロトタイプを作ることによって、制作社であるチームが全員で画面の共有ができたり、クライアントのチェックがスムーズに行えたり、最終的に作ったものが想定していた仕様と違っていた、なんてリスクを回避できるのが良いところなんですよね。
また、画面を見ながらチーム内で話をしたりどういう動きや画面遷移が良いのかなんて言うディスカッションをすることができるので、コミュニケーションが円滑にすることができるんですよね。
プロトタイピングはアプリ制作やアプリ開発で主流な手法なのですが、Web制作においてもここ数年で導入している会社は増えていると思います。
ただ、アプリとWebサイトでは、アプリは画面遷移の挙動に選択肢がある一方で、Webサイトはリンクをクリックして画面を読み込むだけの遷移がほとんどなのと、UIにおいてもアプリに比べて情報を見せること中心になってくるので（フォームなどの動的なページを除く）、プロトタイピングの使いどころに迷う人も少なくない気がしています。
プロトタイピングツールには大きく分けて3つの種類に分けられるのですが、
- 画面遷移の作成や確認が簡単にできるトランジション型
- 画面内の動きを細かく作れるインタラクション型
- 動きなどのアニメーションを作れるアニメーション型
（参考：アプリ制作でプロトタイピングを導入する前に知っておきたいこと）
Web制作においては、1番目の「画面遷移の作成や確認が簡単にできるトランジション型」が1番相性が良いのではないかと思います。
トランジション型には日本で有名なグッドパッチが開発しているProttや、海外企業で人気なInvisionなどがあるのですが、これらのサービスは画面遷移を中心に作成できるので、よりWebサイトと近い感じで作ることが出来て便利なんですよね。
手書きのもを写真にとってアップロードしたり、Prottなんかではブラウザ上でワイヤーを作成できるので、Webディレクターなんかも重宝するかと思います。
また、まだリリースはされていないものの、Adobe社もCOMET（コメット）と呼ばれるプロトタイピングツールを開発しているので、Web制作でAdobeを使う機会が多ければこちらを使うのも手ですよね。
また、モックアップツールとして高機能なJustinmindというソフトもあるのですが、こちらはかなり高性能にワイヤーを作ることができるのでかなりおすすめです。
プロトタイピング手法を導入している制作会社も多いのですが、その分プロトタイピングツールもたくさんあるので、どのサービスが自分達が使いやすいのかを吟味しつつ、時代に合わせて使うべきサービスを選んでいったほうが後々になって後悔はしないのかとは思います。