プロトタイプの作成について

Webサイトやアプリ制作で使われるプロトタイプ（prototype）という言葉は、「試作品」や「試作モデル」という意味です。

プロトタイプは元々ゲームやソフトウエア開発の初期段階や、工業製品の開発途中などで作成されていましたが、Webサイトやアプリ制作でもプロトタイプを作成するケースが増えてきています。

プロトタイプを作成することのメリットは、開発や制作の早い段階で、問題点や改善点を確認することができることです。

また、ユーザー目線を大切にしたUI（ユーザーインターフェイス）や、ユーザーが得られる体験UX（ユーザーエクスペリエンス）を高めることにもつながります。

プロトタイプを作成する目的とは？

そもそもゲームやソフトウエア開発の初期段階や、工業製品の開発途中などでプロトタイプを作成する目的は、開発途中の早い段階で完成品を確認するためでした。

Webサイトやアプリ制作でも、開発前には発注者がデザイナーや開発者に対して、希望するイメージを伝えてはいます。

しかし、発注者のイメージや希望を正確に伝えるのは、なかなか難しいものなのです。

そのまま途中での確認を行わずに最後まで完成させてしまうと、希望するイメージとは違うものができてしまうことや、使いにくい部分が見つかってしまうことも少なくありません。

しかし初期段階にプロトタイプでデザインや操作性が希望に合っているかを確認すれば、デザインや使いやすさを完成までに改善することも可能になるのです。

初期段階でプロトタイプを作成して、完成イメージや仕様について、発注者とデザイナーや開発者が調整していくことで、無駄な工程や修正を減らすことができるのです。

無駄な修正が多くなると、発注者やデザイナー・開発者のモチベーションも低下してきます。

スムーズに気分よく仕事を進行させるためも、プロトタイプは双方の役に立ってくれます。

ユーザが希望するものになっているか？

Webサイトもアプリも最終的には、ユーザーが支持をしてくれるものになっていなければなりません。

近年は特に、ユーザーの口コミの評価が、購入を判断するときに重視されるようになってきています。

「見込み客」にWebサイトやアプリのプロトタイプを開発途中で体験してもらえれば、ユーザー目線での意見を取り入れてリリース前に改善することができます。

システムや使い方は理解しやすいか、デザインは好ましいか、操作性はどうか、など「見込み客」の率直な意見を反映していき、ユーザーに支持されるものにしていくことが必要です。

プロトタイプの種類や忠実度

プロトタイプは、3種類に分類することができます。

「ファンクショナルプロトタイプ（実用的、機能的プロトタイプ）」

「デザインプロトタイプ」

「コンテクスチュアルプロトタイプ（文脈的プロトタイプ）」です。

ファンクショナルプロトタイプ

「ファンクショナルプロトタイプ」は、動作のシミュレーションが行えるプロトタイプです。

例えば、WebのECサイト構築であれば購入までのシミュレーションをすること、アプリ開発であればアプリの動きをシミュレーションすることなどに使います。

デザインプロトタイプ

「デザインプロトタイプ」は、「ファンクショナルプロトタイプ」にデザインを加えたものです。

「ファンクショナルプロトタイプ」は動作や操作感を確認するものであり、「デザインプロトタイプ」はより完成品に近いものになります。

コンテクスチュアルプロトタイプ

「コンテクスチュアルプロトタイプ」は、動画でユーザーに疑似体験をさせるプロトタイプです。

動画を見ているユーザーが、実際に使っているかのように感じることができるように作られています。

低忠実度・高忠実度プロトタイプのそれぞれの特徴

どのようなプロトタイプを選ぶべきかは、プロトタイプの目的や開発段階・開発内容によって変わってきます。

完成に近く完成品と同じようなデザインや操作性ができるものが、「高忠実度プロトタイプ」です。

そして「低忠実度プロトタイプ」は、もっと簡略化したプロトタイプです。

例えばデザインであれば、細部は作りこまずに雰囲気が確認できるものにします。

機能的なものであれば作りこまずに、動き方が理解できる程度にとどめます。

操作性などのテストをするためには、「高忠実度プロトタイプ」のほうが常に望ましいようにも思えますが、そのようなことはありません。

「高忠実度プロトタイプ」を作るためには、それなりに時間と手間がかかるためです。

スピーディに開発を進めたい場合や、デザイン・機能を試行錯誤しながら進めていきたい場合には、「低忠実度プロトタイプ」のほうが短時間で変更が可能なため、適していることもあるのです。

プロトタイプの作成手段やツール、似た試作について

紙面でのアナログなプロトタイプやデジタルなプロトタイプなど、プロトタイプの作成方法は様々です。

またプロトタイプを作るための、便利な「プロトタイピングツール」も開発されています。

プロトタイピングツール

「プロトタイピングツール」には、画面の遷移操作性を確認できる 「トランジション型」。アニメーションやスクロールの動きを確認できる「インタラクション型」 。「トランジション型」と「インタラクション型」の両方を使うことができる「複合型」があります。

プロトタイプを作成すすれば、完成までに的確な改善を行うことができるため、プロジェクトを成功に導きやすくなります。

しかし、よりスピーディーに手間をかけずに進めたい場合には、「プロトタイプ」と以下のような「似た試作」を組み合わせるという方法もあります。

スケッチ

「スケッチ」は箇条書きや言葉だけでは伝えにくいイメージを伝えることができます。

紙に手書きで描きます。

ワイヤーフレーム

「ワイヤーフレーム」はWebサイトやアプリのレイアウト配置を確認するための設計です。

デザインプロトタイプよりも短時間で作成することができ、修正も比較的容易にできるのがメリットです。

カンプ（モックアップ）

「カンプ（モックアップ）」は、 ワイヤーフレームに実際に写真や色などのデザイン要素を加えたものです。

全ページを作成するのではなく、トップページや代表的なページを作成して、デザインなどの確認を行います。

案件に適したものを、臨機応変に活用していきましょう。

（画像は写真ACより）