BAsixs(ベーシックス)

「あたりまえ」をアップデートしつづける

プロトタイプとは?Webサイト制作工程で使う必要性・メリット・デメリットから、開発における注意点まで徹底解説!

読了目安 : 5

  • 投稿日 :
  • 最終更新日 :

この記事を書いた人

プロフィールアイコン(イラスト):BAsixs編集部
BAsixs編集部

BAsixsは、社会課題の解決と新たな価値創出をBAグループ全体で目指すためのサービスブランドです。

Webサイト開発での検証手法の一つ、プロトタイプ。

今回はプロトタイプの特徴やメリット・デメリットをはじめ、どのようなプロジェクトが向いているのかなど、他の検証の手法と比較しわかりやすくお伝えします。

プロトタイプとは?Webサイト制作工程で使う必要性・メリット・デメリットから、開発における注意点まで徹底解説!

プロトタイプとは:発注者がイメージや使用感を確かめるための試作品のこと

プロトタイプとは、「原型」という意味をもつ「prototype」という英単語が元になっている言葉です。

Web開発の分野では発注者がイメージや機能・操作性を確かめるための「試作品」のことを指しています。

本格的に製造する前の初期段階としてまずは試作品を作ってから、問題があれば修正し、本格的な製造に移行するという手法がプロトタイプの主な活用方法です。

プロトタイプの特徴:あくまでも「製造前の試作品」という位置付け

プロトタイプは開発の初期段階で試作品を制作し、検証を重ねてから本格的な製造に移行する手法のことです。

前述のとおり「試作品」を意味する言葉ですが、それがどのような試作品のことを指すのかはケースによって多種多様です。

プロトタイプは「アジャイル開発」とよく混同されがちですが、双方の性質は少し違っています。

プロトタイプは試作品の段階で改良を重ねてから本格的な製造を開始しますが、アジャイル開発は小さな単位で開発を繰り返しながら実装と評価を重ねる手法で、リリース後に手を加えるという部分においてプロトタイプとは異なります。

プロトタイプの主な分類は3種類

プロトタイプには、

  • ファンクショナルプロトタイプ
  • デザインプロトタイプ
  • コンテクスチュアルプロトタイプ

の主に3種類があります。

ファンクショナルプロトタイプとは、実際の動作をシミュレーションすることが可能なプロトタイプです。

例えば、ECサイトを立ち上げるにあたって商品をカートに追加してから決済を済ませて購入を完了するまでの流れをシミュレーションするなど、具体的な動作を検証できます。

デザインプロトタイプは、ファンクショナルプロトタイプにデザインや設計などの要素を加えたプロトタイプで、より完成品に近いイメージを検証できます。

ファンクショナルプロトタイプはあくまでも開発中の試作品の操作感や動き方を検証するものですが、デザインプロトタイプではさらに完成形に近いイメージを表現することができます。

コンテクスチュアルプロトタイプは、動画を活用してユーザーに実際にその試作品を利用しているかのような体験をもたらすプロトタイプです。

一本の動画の中で試作品を利用するイメージを追体験することで、より具体性のある問題点や改善点の指摘を受けることが可能になります。

新サービスやブランドを出すときに顧客満足度やUXを高めるのに最適なプロトタイプ

プロトタイプの活用が適しているのは、UX(ユーザーエクスペリエンス)を重視した新サービス・ブランドを立ち上げたいと考えている局面です。

プロトタイプでは試作品の段階で製造と評価を繰り返し、時にはユーザーの声も取り入れながら完成形へと近づけます。

製作途中でフィードバックが受けられるため、ユーザーの希望や要望を反映した満足度が高い製品やサービスを作り、UXの向上を実現させやすくなります。

新しいサービスやブランドが市場に浸透するためには、ユーザーニーズを満たした製品を作ることが必要不可欠です。そのため、プロトタイプを活用してユーザーが求めている製品やサービスにあらかじめ近づけた状態で完成させることが、顧客満足度やUXの向上につながります。

Webサイト開発も上記の例に漏れず、プロトタイプを活用して試作段階で多方面のフィードバックを受けながら開発を進められるところが何よりの特徴といえます。

プロトタイプのメリットとは?リスク・デメリットはある?

あらためて、プロトタイプを作成するメリットとはどのようなものなのでしょうか。加えて、リスクやデメリットがあるのかについても解説します。

プロトタイプのメリット:リリース前に成果物の質を高められ、後々の手戻りが少ないこと

プロトタイプの最も大きなメリットは、リリース前に成果物の品質を高められることにあります。

仮に制作側が発注側に成果物を納品するような場面では、制作側があらかじめプロトタイプを作成して発注側に提示しておくことで、認識のずれを早い段階で修正できます。

プロトタイプを作らずに成果物を納品する場合、ある程度開発が進んだ段階で制作側と発注側の認識にずれが出ていることが発覚し、大幅な手戻りにつながるリスクがあります。プロトタイプはそのような手戻りを防止し、成果物の品質も引き上げる効果が期待できます。

プロトタイプのデメリット:ずばり「コスト」。作り直しが何度も発生し、スケジュールが伸びるリスクも

プロトタイプの持つ大きなデメリットは、「コストがかかる」という点です。

評価を重ねるたびに発注側の要求が増え、細かい部分を修正するために何度もプロトタイプを作り直すと、その分だけ開発費用は膨らんでいきかねません。

さらに、プロトタイプを何度も作り直すことによって、制作スケジュールが伸びる可能性もあります。

修正箇所が膨大になり、大幅なスケジュール遅延を引き起こすリスクがあることから、多数の関係者が動く大規模プロジェクトには不向きな手法であるともいえます。

他の画面検証の手段は?プロトタイプと比較して、最適な手法を選ぼう

プロトタイプの他に、Webサイト開発において開発画面を検証する手段にはどのようなものがあるのでしょうか。

プロトタイプを含めてそれぞれの手段をコスト面やプロジェクトの進行のスムーズさ、プロジェクトの目的に応じて比較し、自社にとって最適な手法を選ぶことが大切です。また、以下の3つの手段とプロトタイプと組み合わせるケースも当然あります。

1.ワイヤーフレーム:最もメジャーでスピーディー

ワイヤーフレームは、画面検証の手段の中でも最もメジャーな検証手法です。Webページのレイアウトを設計するための構成図で、ページ全体にどのような情報を配置するかがひと目で分かるように図解されています。単に「ワイヤー」と呼ばれることもあります。

構造が単純なので、さまざまな画面検証の手段の中で最もスピーディーにできるのがメリットです。パソコン上で再現することもできますが、手書きであればさらに作業スピードを上げられます。

2.カンプ:デザイン要素の確認もしっかりできる

カンプとは、ワイヤーフレームにデザインの要素を付加したものです。「デザインカンプ」と呼ばれることもあります。

ワイヤーフレームはWebページ全体の構成図であり、デザインの要素を含みませんが、カンプはデザインを含めてWebページ全体の構成図を表します。

ワイヤーフレームよりも作成には時間がかかりますが、より完成図に近い具体的なイメージを持たせられるのがメリットです。

3.画面仕様書:デザインも部品の構成も全て含まれているのでイメージが明確

画面仕様書とは、Webページ全体の構成図やデザイン、配置されるボタンの内容なども含めて全ての構成を詳細に記した設計書です。ワイヤーフレームやカンプを作り、関係者に大体の方向性を確認してから追加で作られることも多いです。

構成やデザインのほかにもさまざまな要素を詳細に記述する必要があることから、3つの中では最も時間がかかります。

しかし、全体のイメージを比較的事細かに共有できるため、クライアントとのイメージの齟齬を減らしやすいというメリットがあります。

プロトタイプでWebサイトの開発を進めたい場合、どんな流れで、何に注意すべき?

プロトタイプでWebサイトの開発を進める場合の開発の流れはどのようなものになるのでしょうか。

ここでは、プロトタイプで開発を進める際の大まかな流れと、それぞれどのような点に注意すべきなのかについて解説します。

1.要件定義:開発の目的や方向性をはっきりと定めて共有する

まずはどのようなWebサイトが必要なのかを明らかにするために、要件定義を行います。この工程をやることで、開発の目的を関係者全員で明確に統一します。

ただしここではあまり詳細な内容を詰めすぎずに、あくまでもWebサイトを作成する目的と条件、必要な機能を具体化し、大枠をぶらさないのがポイントです。

最初から枝葉末節まで詳細な内容を詰めすぎてしまうと、かえって後の工程で問題が発生した時に硬直的になり、うまくイメージを具体化できなかったり手戻りのコストが増えたりする可能性があります。

2.設計:全体像の把握のために手堅く設計していく

要件定義の内容に基づいて、設計を行います。

設計では、要件定義で定義したWebサイトの目的を実現するためにどのようなコンテンツ・機能・デザインが必要になるのか、ひとつひとつ明確にしていきながら、ゴールに向けて必要なドキュメントを作りながら全体像を設計していきます。

3.プロトタイプ開発:体験も含めた「試作品」として作る

設計が固まったら、設計に基づいてプロトタイプを開発していきます。「試作物」として、本番さながらの機能を持つように作っていきます。

4.プロトタイプ検証:ポイントは「多方面」「ユーザーに近い人」の意見をもらうこと

プロトタイプが完成した段階で、クライアントやチーム内など多方面から意見・要望・フィードバックを受けます。関係者のみではなく、実際のターゲット・ペルソナに近いユーザーを検証者として募るのも手段のひとつです。

プロトタイプの代表的な検証ポイント

  • 情報は正しく伝わるか
  • 離脱ポイントは無いか
  • ストレスはかからないか
  • サイト内の必要なところに迷わずに行けるか
  • ボタンなどの仕掛けは正しく動作しているか

5.プロトタイプ修正:合意が取れるまで修正を繰り返す

評価で明らかになった修正点を反映して、修正版のプロトタイプを作成します。

この後も「開発・検証・修正」の流れをクライアントとの合意が取れるまで繰り返して、最終的なプロトタイプが完成します。

プロトタイプが完成したら、これをもとに実際のWebサイトを開発していきます。

まとめ:Webサイト開発時の検証は「プロトタイプ」も選択肢の一つに。質を高めて、プロジェクトを成功させよう

BAsixsでは、UXを考慮したWebサイト開発は、効果の高いプロトタイプを活用して行うことをおすすめします。丁寧な検証と改修を重ねることによって品質を高めて、プロジェクトを成功へと導きましょう。

プロトタイプを導入すべきかお悩みの際は、BAsixsにぜひお気軽にご相談ください。