プロトタイプって何?

意味・概要

ウェブ制作におけるプロトタイプとは、プロトタイプテストを行うために作られるもので、プロトタイプテストでは、実際にユーザーが閲覧しうる端末で簡易的にレイアウトや操作性を確認することができます。

主にコーディング工程より前に行われるため、実際にコーディングを行った後に、レイアウトの変更などが発生してしまうと、工数のロスに繋がってしまったり、制作期間の関係上で、レイアウトに課題が発見されたとしても、改善できなくなってしまうような場合があります。

プロトタイプはコーディングよりも簡易的に制作できるため、改善点が検出されれば簡易的に修正することが可能なのです。
改善しつくされたプロトタイプからコーディングを行う事で、妥協のないウェブサイトを制作するコトができるのです。

補足説明

プロトタイプを制作するツールをプロトタイピングツールと言いますが、有名なモノとしてはAdobeのXDというソフトウェアや国内プロトタイピングツールのPrott(プロット)というものがあります。

プロトタイプを制作するタイミングは制作方針によって2パターンあります。

デザインを制作する前に、ワイヤーフレームをプロトタイピングして、ざっくりとした印象で操作性やレイアウトを確認するパターンと、
デザインを制作した後に、プロトタイプを制作し、実際のデザインで操作性の確認を行うパターンがあります。

前者の場合は、しっかりとレイアウトや操作性を確認してからデザインを制作できるため、デザインに対して余計なコストが掛かりにくく、効率的に制作を行いやすい一方、実際のデザインとは異なるため、確認する側にある程度の経験値や想像力を求められてしまいます。

一方、デザイン後にプロトタイプを制作するパターンでは、実際のデザインをプロトタイピングするため、実際にコーディングされるイメージに近しい画面でテストすることができます。しかし、デザインをプロトタイプ化するとワイヤーフレームからプロトタイプ化するよりも工数がかかりやすいことと、調整をするたびに、デザイン工程まで戻らなければならないため、時間と費用が嵩みやすくなってしまいます。

確認者のリテラシーや費用と時間を考えながらどのようにプロトタイプを利用すべきかしっかりと考えていく必要があると言えます。