プロトタイプ

プロトタイプは「試作モデル」という意味で、ソフト開発や技術開発などさまざまなシーンで用いられます。
Webサイトにおいては、開発前の段階で出来上がりのイメージを共有するために「ある程度操作できる状態」にした試作品のことをプロトタイプと呼んでいます。

本番のイメージをそのまま実機で見られるようにした「モックアップ」では、UIまでは確認できますが、UXまでは確認できません。
プロトタイプでは、実機を使って実際に操作しながら画面設計を確認することが可能です。

プロトタイプを推奨する理由

プロトタイプを使えば、ワイヤーフレームでは確認できないさまざまなものを開発前の段階で確認することができます。

  • 本番さながらの確認で認識のズレを軽減できる
  • 完成度をワンランク高めてリリースができる
  • 開発段階で仕様を確認することができる

他にも制作側においてさまざまなメリットがありますが、発注者側が受けられる最大のメリットは設計段階で実物と同じように操作できる状態でWebサイトを確認できることです。

本番さながらの確認で認識のズレを軽減できる

PCやスマートフォンなどの実機を使った画面確認はモックアップでも可能です。
最大のメリットはより「高い精度でイメージを共有できる」という点。
ボタンを押せば次のページへと遷移するため、押しやすさや遷移の前後でのイメージのズレなどを実体験を持って確認できます。

紙やドキュメントを使ってWebサイトの内容をどんなに細かく話し合っても、思い描くイメージには必ず誤差が出てきます。
写真のトリミングや配置された時の画像サイズ、合わせているフォントの色や大きさなど、すべてを「本番と同じ」カタチで確認できれば、その誤差はより少なくなります。
そして、修正・改良も初期段階でできるため、依頼者と開発側の双方が安心して次のフェーズに進むことが可能となります。

完成度をワンランク高めてリリースができる

モックアップと違い、プロトタイプはリンク構造まで忠実に再現したWebサイトの試作品です。
ボタンをクリックすれば指定されたページに遷移するので、本番と同じような感覚で実際に「使ってみる」ことができます。
実機で確認できる環境で、本番と同じように触ってみることができる。
このメリットは「イメージの共有」だけではありません。

例えば、開発に関係しているチーム以外のユーザーに実際に使ってもらって使用感を確かめてもらうことも可能です。
社内にいるスタッフから家族、友人に至るまで、さまざまな人に触ってもらい、気になる点を言ってもらうことでその後の開発に役立てることができます。

ワイヤーフレームやモックアップの場合、第三者の使用感などはリリース後に確認し、修正を重ねていく流れになります。
プロトタイプでは、これをリリース前に実現できるため、一歩前進した状態でWebサイトをリリースすることが可能になるのです。

開発段階で仕様を確認することができる

ワイヤーフレームに比べ、プロトタイプは制作に時間がかかります。
しかし、開発した後の修正には「開発前に分かっておけば半分の時間で済んだのに」というものがたくさん潜んでいます。
これをできる限り洗い出していくことで、リリースしてからでは致命的となってしまう修正も早い段階で対応することが可能になります。

例えば、CMSを使ったWebサイトの開発。
表示されているデザインがシステムと連動しているため、ちょっとした修正が時として重大な修正に繋がることがあります。
仮に、制作した後に予約フォームに項目を増やしたいという依頼があったとします。
見た目ではただ一行増えただけでも、開発側ではフォームだけでなくデータベースやその周辺の関連項目をすべて修正しなければなりません。

5人分のご飯を作ったのに、急な来客があって1人分だけ追加する感覚といえば分かりやすいでしょうか。
「最初から分かっていればまとめてできるのに、後からだとかなり大変」
ということが実はかなり多いのです。

デザインの修正は時としてCMSなどの構造にも影響を及ぼします。
話し合いにおいてどんなに綿密に仕様を確認していても、デザインに落とし込むとイメージとのズレが生じてしまうのはよくあること。
作業前にデザインも含め、できる限り構造や仕様を固めておくことがその後の開発をよりスムーズにしてくれるのです。

プロトタイプが他の試作より優れている点

Webサイトの制作には、ワイヤーフレームやモックアップなどさまざまな施策が用いられますが、プロトタイプはその中でも最も本番に近いものです。
プロトタイプにあって他の施策にないものは「体験」。
今、WebではUIとUXという言葉がよく取り上げられていますが、UXの部分まで確認できる試作はプロトタイプ以外にありません。
「百聞は一見に如かず」という言葉があるように、実際に体験してみなければ実物の価値は伝わりにくいのです。

多くの企業が「ワイヤーフレームに比べてプロトタイプの方が分かりやすい」と言っています。
そこには、見た目や使用感の他に、本番をイメージしやすいという安心感も含まれていると考えています。
その上で、依頼者と開発の双方にメリットがあり、時間がかかるというデメリット以上に受けられる恩恵が大きいため開発段階ではできるかぎりプロトタイプを使うことをおすすめしています。