マーケティング用語集カテゴリ:Web制作

プロトタイピング

Prototypingぷろとたいぴんぐ

英語表記
Prototyping
カテゴリ
Web制作
難易度
★★☆(実務者向け)
関連サービス
Webサイト制作

プロトタイピングとは、完成品をつくる前に、確かめたいことに絞った試作をつくって実際に見せ、反応を得ながら設計を固めていく進め方。狙いは早く作ることではなく、直すコストがまだ小さいうちに、思い込みのずれを見つけることにあります。

Why it matters

「できてから直す」がいちばん高くつく

サイトやサービスの制作でいちばん費用がかさむのは、追加の要望が出たときではありません。できあがったものを見て、前提そのものが違っていたと分かったときです。この段階では、デザインもコーディングも実装済みで、公開日も決まっています。直すには全部を戻すしかありませんが、時間も予算もすでに使っています。結果として、違うと分かっているものをそのまま公開し、あとから小さな修正を重ねていくことになります。作り直しにかかる手間は工程が進むほど大きくなり、紙の段階なら数分で済んだ変更が、実装後には数日になります。プロトタイピングは、このコストの傾きを利用して、判断を前倒しするための方法です。

ずれが生まれる原因は、多くの場合、能力ではなく言葉にあります。打ち合わせで「見やすくしたい」「信頼感を出したい」と合意しても、その言葉が指しているものは人によって違います。ある人は文字を大きくすることを想像し、別の人は事例を増やすことを想像し、また別の人は写真を差し替えることを想像している。言葉のうえでは全員が合意しているのに、頭の中の絵はそろっていない。この状態のまま制作に入ると、初稿を見た瞬間に「思っていたのと違う」が発生します。プロトタイプは、この見えていない差を早い段階で可視化する道具です。目の前に具体物があれば、議論は「どう思うか」から「これで合っているか」に変わります。抽象的な議論より、たたき台への指摘のほうが、はるかに具体的で速い。

もうひとつ、社内の合意だけでは埋まらないずれがあります。作り手にとって当たり前の言葉や順序が、初めて見る人には通じないという問題です。自社の商材を毎日扱っている人には、説明の順番も用語も自然に見えます。しかし顧客は前提知識を持たずに来ます。この差は、社内で何度レビューしても見つかりません。全員が同じ前提を共有しているからです。だからプロトタイプは、社内で回して終わりにせず、前提を知らない人に一度触らせるところまでを含めて考えます。触ってもらえば、どこで手が止まるか、何を探しているかが数分で分かります。これは公開後のアクセス解析でも分かることですが、公開後に分かるということは、作り直しのコストを払う位置で分かるということです。

Our perspective

完成させてから直すのではなく、いちばん自信のない前提から、いちばん安い形で確かめる。

顧客心理の視点で見ると、プロトタイプで確かめているのは操作性だけではありません。顧客がその画面の前で何を感じ、何を不安に思うかです。たとえば料金ページで手が止まる人は、値段が高いと感じているとは限りません。「自社の場合いくらになるのか判断できない」ことに戸惑っている場合が多い。問い合わせフォームの前で離れる人も、興味を失ったわけではなく、「連絡したら営業されるのではないか」という警戒が働いていることがあります。こうした感情は、社内のレビューでは絶対に出てきません。前提を知らない人に触ってもらい、手が止まった場所と、そのときに口に出した一言を拾うことでしか見えない。プロトタイピングの価値は、デザインの良し悪しを決めることではなく、顧客がどこで迷い、どこで安心するかを、公開前に知ることにあります。迷う場所が分かれば、そこに説明や安心材料を置ける。売り込みを強めなくても、顧客は自分で先に進めるようになります。

仕組み化の視点では、プロトタイピングは「センスのある人がやること」ではなく、手順として回せる作業です。5つの型で組み立てます。①この制作でいちばん自信のない前提をひとつ書き出す(例:この順番で説明すれば伝わるはず) ②その前提だけを確かめられる最小の試作をつくる(紙でよい場合は紙で終わらせる) ③前提を知らない人3〜5人に触ってもらい、手が止まった場所を記録する ④直す・やめる・そのまま進めるのどれかを、その場で決める ⑤決めた内容と理由を1行で残す。重要なのは④と⑤です。確かめたのに決めないと、プロトタイプはただの資料になります。また⑤を残しておくと、次の制作で同じ議論を繰り返さずに済み、判断が社内に蓄積していきます。人数も3〜5人で足りることが知られており、ユーザビリティ研究の分野では少人数でも主要なつまずきの多くが見つかると整理されています。大がかりな調査を組む必要はありません。小さく確かめ、その場で決め、記録を残す。この3つを繰り返せる形にしておくことが、属人的なセンスに頼らない仕組みになります。

AI活用の視点では、3つの使い方が現実的です。1つ目はたたき台の量産で、画面の要件を渡して構成案や文言案を複数出させる。ゼロから考えるより、出てきた案を捨てるほうが速く進みます。2つ目は触る前の粗探しで、試作の画面構成や文言を渡し「この業界を知らない人が読んで、意味が分からない箇所・不安になる箇所を挙げて」と依頼する。社内では気づけない前提の飛躍が出てきます。3つ目は反応の整理で、複数人に触ってもらったときのメモをまとめて渡し、共通して手が止まった箇所を抽出させる。人数が増えるほど手作業では追えなくなる部分です。さらに、公開後にARGASのような顧客追跡の仕組みを入れておけば、プロトタイプの段階で立てた仮説が実際に当たっていたかを、後から検証できます。ここまでつながると、プロトタイピングは一回きりのイベントではなく、次の制作の精度を上げる循環になります。ただし、AIが出すのはあくまで候補と指摘です。実際の顧客に触らせる工程は省けません。ここを飛ばすと、社内の思い込みがAIの出力で補強されるだけになります。

Diagram

図解:試作の4段階と、直すコストの上がり方

下の図は、試作の粗さの段階と、それぞれの段で確かめられること、そしてその段でやり直した場合のコストを対応させたものです。右にいくほど分かることは増えますが、直す費用も上がります。原則は、いちばん左で分かることは、いちばん左で片づけることです。

確かめたいことに対して、いちばん安い試作を選ぶ 右にいくほど分かることは増えるが、やり直しの費用も同時に上がる ① 紙に描く 手描き・箱と文字だけ ② 画面をつなぐ 遷移だけ再現する ③ 触れる試作 見た目と操作を再現 ④ 実装 本番の仕組みで動く この段で確かめられること 話の順番と過不足 要る情報・要らない情報 迷わずたどれるか 行き止まりがないか 入力できるか 言葉が伝わるか 速度・実データ 実機での見え方 ここでやり直すと 数分で描き直せる 捨てても痛くない 数時間でつなぎ直す まだ引き返せる 数日かかる 判断に迷いが出る 数週間と追加予算 たいてい直さず出す 左で分かることは、左で片づける 進め方の原則 ① 確かめたい前提を1つに絞る(全部を確かめようとすると、何も決まらない) ② その前提を確かめられる最小の形で止める(きれいに作り込まない) ③ 前提を知らない人に触らせる(社内レビューでは同じ前提の人しかいない) ④ 見せた日のうちに、直す・やめる・進めるのどれかを決めて1行残す よくある失敗 ・作り込んでから見せる ── 手間をかけた分、指摘を受け入れにくくなる ・社内だけで回す ── 全員が前提を共有しているので、通じない箇所が見えない

Case studies

事例で見る:国内・海外

海外

IDEO ── 議論より先に、粗い試作を机に置く

デザインファームのIDEOが、早い段階で粗い試作をつくり、実際に見せて反応を得ながら設計を進めるやり方を広めたことは、デザイン思考の文脈で広く知られています。特徴的なのは、試作の完成度をあえて上げないところです。手描きのスケッチ、段ボールの模型、動かない張りぼて。完成度が低いほど、見た人は遠慮なく指摘できるという性質を利用しています。きれいに仕上がったものを見せられると、人は「よくできていますね」と言ってしまう。粗い試作は、その社交辞令を発生させません。もうひとつは、会議で言葉を交わす前に、まず具体物を机に置くという順序です。言葉だけの議論は、参加者それぞれの頭の中で別々の絵が描かれたまま進みます。目の前に同じものがあれば、少なくとも同じものについて話せます。中小企業がこの考え方を取り入れるのに、専用のツールも研修も必要ありません。次の打ち合わせに、紙に手描きした画面を1枚持っていくだけで、議論の質は変わります。なお、この手法による具体的な成果指標は案件ごとに異なり、公開情報から一般化できないため、ここでは扱いません。

How to use

現場での使い方:5ステップ

  1. いちばん自信のない前提を1つ書き出す「この順番で説明すれば伝わるはず」「この言葉なら通じるはず」など。全部を確かめようとせず、外れたときに最も損害が大きいものを選ぶ。
  2. その前提だけを確かめられる最小の試作をつくる順番を確かめたいなら紙で足りる。操作を確かめたいときだけ画面をつなぐ。作り込みたくなったら、目的を思い出して止める。
  3. 前提を知らない人3〜5人に触ってもらう業界の外にいる人を選ぶ。横で見て、手が止まった場所と、そのとき口に出した言葉を記録する。助け舟は出さない。
  4. その日のうちに、直す・やめる・進めるを決める確かめたのに決めないと、試作はただの資料になる。判断を持ち帰ると、また社内の意見の話に戻る。
  5. 決めた内容と理由を1行で残す「トップの説明順を用途起点に変更。外部5人中4人が業種を判別できなかったため」。次の制作で同じ議論を繰り返さずに済む。
Related terms

関連用語

Summary

まとめ:早く作るためではなく、早く間違えるために試作する

プロトタイピングは、完成品をつくる前に、確かめたいことに絞った試作で前提を検証する進め方です。目的は制作を速めることではなく、直すコストが小さいうちに思い込みのずれを見つけること。紙で分かることは紙で片づけ、操作を確かめたいときだけ形にする。社内レビューは同じ前提の人が集まっているので、必ず業界の外の人に触ってもらう。聞くのは感想ではなく、手が止まった場所と、次に何をしたくなったか。そして見せた日のうちに、直す・やめる・進めるのどれかを決め、理由を1行残す。たたき台の量産や粗探しはAIに任せ、実際の顧客に触らせる工程だけは省かない。この順序を守れば、公開したサイトは推測ではなく確かめた設計になり、顧客は説得されなくても自分で次の一歩に進めるようになります。

関連サービス:Webサイト制作 — 構成案の作成から試作づくり、社外の方に触ってもらう検証の設計と実装まで支援します。
カテゴリ:Web制作

この内容を御社で実践したいとお考えですか?

Webサイト制作で実現できます

詳しく見る →

まずはお気軽にご相談ください