プロトタイプとは

プロトタイプとは完成前のWebサイトやアプリを、実際にクリックしたり画面を切り替えたりして使い心地を確かめられるようにした試作品のことです。

プロトタイプは「試作品」という意味です。Web制作ではワイヤーフレームやデザインの画面どうしをつなぎ、ボタンを押すと次の画面に移るといった動きを再現したものを指します。Figmaなどのデザインツールには、コードを書かずにプロトタイプを作れる機能があります。アプリ開発では仕組みの一部だけを実際に動かして確かめるものをプロトタイプと呼ぶこともあります。

作るメリット

静止した画面を見るだけでは、ページのつながりや操作の流れまでは想像しにくいものです。プロトタイプを実際に触ると、「このボタンが見つけにくい」「ここで迷う」といった問題に、実装する前に気づけます。完成してから直すよりも手間が少なく済み、依頼した側と制作する側のイメージのずれも小さくなります。実際に使う立場の人に触ってもらい、意見を集めることもあります。

似た言葉との違い

ワイヤーフレームは情報の配置を決める線と箱の設計図、デザインカンプは完成に近い見た目を確かめる静止画です。プロトタイプはそこに動きを加え、使い勝手を確かめるためのものです。目的に応じて、ワイヤーフレームの段階で簡単なプロトタイプを作ることもあれば、デザインが固まってから細かい動きまで作り込むこともあります。