※この記事は2023年11月29日に更新されたものです。内容が古い可能性があります。
アプリやWeb制作では、製品の設計において、プロトタイプを作成することで開発を進めます。
この記事では、プロトタイプに注目し、その役割やメリット・デメリットを紹介していきます。
プロトタイプとは
プロトタイプとは、「原型」を意味する言葉で、アプリなどの試作品を指すことが多いです。
WEBサイトやアプリの視認性や、使い勝手、デザインの品質向上を目的として作られます。
一般的にプロトタイプは、プログラミングなどを行わずに作成されることが大半です。
そのため、開発者に依頼をせずに、クリックやスクロールなどを行うことが可能な試作品が作成されます。
開発者に依頼をすると、コストや打ち合わせなどの手間がかかり、多くの工数を消耗します。
しかし、プロトタイピングツールなどを活用すれば、開発の経験が浅かったり、知識が乏しい人でも比較的容易にプロトタイプを制作することができ、高品質な完成品を作成できます。
プロトタイプが必要な理由
ここでは、プロトタイプが必要となる理由を解説します。
製品の仕様を適切に伝えるため
ソフトウェア、アプリ、システムエンジニアが、デザイナーや他の開発担当者に、制作物のイメージを伝えることは簡単ではありません。
特に外部委託する場合は、開発アプリの全ての要件を列挙し、ゴールとなる形態を過不足なく伝えるには、莫大な時間と労力がかかることになります。
また、感覚や感性だけでは伝わらない部分もありますが、それらが上手く開発関係者に伝わらないと、イメージしていたものとは、別のものが出来上がってしまう可能性が拭いきれません。
そのため、戻り作業が多くなり、完成までに膨大なコストがかかってしまいます。
これらを解消するため、イメージがつきやすいプロトタイプを作成し、共通した意識を共有することが、結局は、コスト削減と短期制作に繋がることになります。
目指す方向が、お互いに一致していれば、モチベーションの維持にもなることでしょう。
ユーザーの意見を伝える必要があるため
インターネットが確立している社会においては、ユーザーの意見が非常に重要なファクターとなります。
例えば、アプリの使用感や使い勝手などは、社内では把握しきることはできません。
これを解決するためにも、プロトタイプを実際にユーザーに使ってもらうことで、社内では気付くことができない問題点や課題などを洗い出し、完成版のリリースに繋げる必要があります。
これは、アプリやWEB制作に限らず、洗剤や柔軟剤などの製品にも同じことが言えます。
ネット社会では、ユーザーの意見が第一であることを改めて意識しましょう。
プロトタイプの種類
プロトタイプにも3種類あります。
ここでは、プロトタイプの種類について解説します。
ファンクショナルプロトタイプ
ファンクショナルプロトタイプとは、動きのシミュレーションを実施する時に用いるプロトタイプです。
例えば、ユーザーがアプリの画面をスクロールしたり、ボタンを押下したりした時の動作が正常であるかを確認するためのものです。
デザインプロトタイプ
デザインプロトタイプとは、プロトタイピングツールを利用したリアリティを持たせたプロトタイプです。
ファンクショナルプロトタイプにさらにデザイン面を特化させたプロトタイプで、見た目を完成形に近づけたものになります。
コンテクスチュアルプロトタイプ
文脈的なプロトタイプを意味します。
製品やサービスのイメージ動画を作成し、ユーザーが実際に利用していることを想起させる狙いがあります。
それにより、実際の使用感に近い感覚をユーザーに体験してもらい、問題点や課題点などの洗い出しに役立つプロトタイプです。
クラウドファンディングでもよく使われる手法です。
プロトタイプを作成するメリット
ここでは、プロトタイプを作成するメリットについて解説します。
製品やサービスの品質を高める
例えば、プロトタイプをユーザーに使ってもらうことで、想定していなかった問題点が浮き彫りになったり、思ってもみなかった使い方を発見できたりと、製品やサービスの品質を高めることに役立ちます。
段階的に仕様を決定して開発を進めることができる
制作前に仕様を全て固めて開発を進めると、やり直しが効かないことが往々にしてあります。
仕様の決定は、最初に大枠を決めた後は、細かい部分に関しては、後工程になってもある程度変更が効くように、開発を進めるとより理想に近いアプリを開発することができます。
発注側と受注側で仕様にズレがないように開発を進めるためにも、プロトタイプがあると便利です。
開発関係者同士の認識のズレを減らせる
開発者やデザイナーなど、開発関係者が共通の感性を持っているとは言えません。
なので、同じ言葉でも、違った印象を持つ方もおられます。
そのような齟齬が、打ち合わせの段階で積もると、完成版に対して、違う方向を向いていることに気づかずに開発が進んでしまいます。
このような、お互いの認識のズレを解消するためにも、プロトタイプがある方が、同じ方向を向いて、開発を進められているのだなと実感を持って、作業を進められます。
プロトタイプに似た試作手法
ここでは、プロトタイプに似た試作手法をご紹介します。
スケッチ
スケッチは、紙に手書きで絵を描いていく手法で、アプリ開発以外にもよく使われる方法です。
紙とペンがあれば、簡単に実施できる方法なので、コストがかからず、専門性もありません。
ワイヤーフレーム
サイトやアプリなどのレイアウト作りに用いられる手法です。
「広告はここで、マイページはここ」などのように、各機能のレイアウトを手を使いながら設計できます。
カンプ・モックアップ
カンプはワイヤーフレームに色や画像の指定を行ったものです。
全画面を作る訳ではなく、代表的なメイン部分を作り込んでいきます。
ワイヤーフレームよりもわかりやすく、かつ、プロトタイプよりも短時間でコストを抑えて制作することができます。
Web制作におけるプロトタイプの活用の流れ
ここでは、WEB制作におけるプロトタイプの活用の流れについて解説します。
目的と方向性の決定
最初は、どのような目的でWEB制作を行うのか、その目的にあったWEBサイトはとはどのようなものか、目的と方向性を決定しましょう。
目的を定めることで、完成品のイメージが湧きやすくなります。
モックアップの設計と活用
次に、モックアップの制作をします。ボタンの配置や配色、さしいれる写真などを盛り込み完成像をイメージしやすくします。
プロトタイプの作成
次にプロトタイプを作成します。
モックアップがデザインのサンプルであるのに対して、プロトタイプはWEBサイトの動作をシミュレーションするのに役立ちます。
検証
プロトタイプが完成したら、それを用いて開発関係者の間でレビューを行います。
自分自身や制作サイドだけでなく、各担当からの意見を募ることで、多様な意見の収集が可能です。
修正と仕上げ
検証を行い、意見を収集したら、それらをもとにプロトタイプをさらに改良し、修正を数回繰り返します。
そして、完成形に近づけていきます。
プロトタイプの作成ツール
ここでは、実際に使われているプロトタイプの作成ツールについて解説します。
Prott
画像引用：Prott
Prottは、株式会社グッドパッチから提供されている、ワイヤー・UIデザインのプロトタイピングツールです。
使える機能に制限はありますが、無料で利用できるプランもあり、多くの企業で導入されています。
Sketch
画像引用：Sketch
Sketchは、マック専用のプロトタイピングツールです。
外部サービスとの連携が豊富で、やりたいことは、ほぼ全てプラグインで解決します。
まとめ
いかがでしたでしょうか。
ここまで、プロトタイプの役割や、作成する目的、活用の仕方などについて解説してきました。プロトタイプにもさまざまな役割があることが分かっていただけたでしょうか。
無料E-Bookダウンロード
アカウント無料診断
お問い合わせ