目的を見失わないために！プロトタイピングの間違った手法とは
Webサイト、アプリを作っていく上でプロトタイピングは非常に重要です。ただ、単にプロトタイプを作れば良いというわけではなく、目的やタイミングが合わないとユーザーにとって使いにくいものになります。事例とともに正しいやり方を身につけましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はUXPinのUXデザイナーであるMarcin Treder氏によって投稿されました。
プロトタイピングの間違ったやり方は、あなたが思っている以上にUXデザインを損ないます。
そして、プロトタイピングを実行する段階が早すぎることがなぜ危険なのか、私の経験を基に説明します。
急成長するUXデザイン
10年前にはUXデザインは、デジタル製品の開発プロセスの一部で使われているだけでした。それが2000年代以降に広まり始め、今や全ての製品開発においてUXデザインは重要な役割を果たしています。
次のGoogleトレンドによる分析グラフも、UXデザインの急成長を示しています。
リーン開発、アジャイル開発、ウォーターフォールモデル（上流から下流への開発工程）などの数々のシステム開発のタイプの実例を見たところ、多くの会社ではプロジェクトの時間節約のために、プロトタイピングを早すぎる段階で実行していることに気づいたのです。
その結果、短期的にはチームにとって時間節約になるかもしれませんが、長期的には修正や故障が数多く起こるために、かえって時間がかかるのです。
これでは、デザインの間違いを修正する過程で正しいアイデアを見つけるという、UXの真の価値が失われてしまいます。
間違ったプロトタイピングの危険性
私は、プロトタイプはその良さが生かされないまま、いわば現実離れしたおもちゃになりつつあるのではと思っています。
実際にプロトタイピングは、ものを良く見せるためだけに使われることも多くなっています。その結果としてデザインプロセスは、高い費用がかかり、肥大化し、バラバラに分離した、混乱するようなものになってしまうのです。
私が過去に、ビジュアルデザインのバックグラウンドを持つUXデザイナーと一緒に、eコマースのデザインの仕事をしたときに、まさにこの罠に陥っていました。Photoshopに慣れている彼らは、いきなり実際のサービスをイメージしたモックアップからデザインを始めました。
デザインに問題があれば、サービス責任者からフィードバックを受けたり、インタラクションモデル（ターゲットとするユーザーと共同でデザインを考える手法）においてユーザーから問題を指摘されることもあります。
もちろん、実際のサービスに寄せたプロトタイピングから始める方法が役立つこともあるのですが、それをデフォルトにするのは良くありません。
製品のデザインに、PhotoshopやSketchなどを使うのは、デザインプロセスのもっと後の段階でいいのです。
何よりもまず、そもそものプロトタイプの存在意義について考えてみましょう。
プロトタイピングの3つのコスト削減効果
プロトタイピングは実は古くからある概念であり、またインタラクションデザインにおける唯一の手法ではありません。
Michael Guggenheim氏の記事『The Long History of Prototypes』によると、
「プロトタイピングは開発における「原型」として理解されるべきものではなく、またインダストリアルデザインにおけるベータ版（サンプル製品のソフトウェア）のようなものでもありません。プロトタイピングは開発を進めるための手法です。つまり、仮のモデルであり、ブリコラージュ（使えるものを何でも利用して作ること）や、ユーザーの参加、製品の修正などの「オープンな革新」を可能とするものです。決して見知らぬユーザーのために、閉鎖的な実験室で完成度の高い製品を作るための手法ではありません。」
プロトタイピングは、ユーザーに製品への最短経路を提供するものであるべきです。プロトタイプは製品開発の初期において、製品のアイデアをそれを受け取る人（顧客）に示すことができます。これこそプロトタイピングの真の価値です。
プロトタイピングを効果的に使うと、次のようなメリットがあります。
- 製品のアイデアを検証する
- 製品の詳細を修正する
- 製品のアイデアを拡張する
デザインの検証、修正、拡張をプロトタイピングで実行すれば、製品開発のコストを大幅に削減できます。
またエンドユーザーにプロトタイプを試用してもらう時期が早いほど、後々高いコストがかかるエラーが発生する可能性も低くできます。これこそプロトタイプを初期から作成するべき理由です。
初めに最もコストのかからないプロトタイプを作成し（ファイデリティを柔軟に変更できて、一応使える代物であれば、プロトタイプとしては完璧です！）、ユーザーのフィードバックを受けた後でイテレーション（反復型の短期の開発サイクル）を行えばいいのです。
外観のデザインの完成度を高めるために多くの時間を費やしたり、プロトタイピングで使うためだけにスクリプト言語でアニメーションを作成するとしたら、時間とエネルギーの無駄です。ユーザーに最初に製品を紹介したときに、良く評価されないリスクが高くなります。
多くのケースにおいて、わざわざグラフィックデザインのツールを使って作成したモックアップから、プロトタイプを作るメリットはありません。最初に完成度の高いデザインに陶酔してしまったら、ユーザーに製品のアイデアを検討してもらうのも、製品を改良するのも難しくなるというデメリットがあるだけです。
つまり、イテレーション（反復型の短期の開発サイクル）の精神が失われてしまうのです。
プロトタイプを最大限活用するには、素早く実践し、チームで共同作業を行い、ユーザー調査に基づいてイテレーション（反復型の短期の開発サイクル）を行うべきです。
プロトタイピングが役立つケース
しかしながら、モックアップのプロトタイピングが非常に役立つケースも存在します。
既存のアセットを変更するケース
既存のアセットに小さな変更を加えるだけであれば、効率的です。
グラフィックやコードから小さな操作（要素の再配置など）をするだけで十分なので、わざわざデザインし直すメリットはありません。
顧客向けのプレゼンテーションを行うケース
グラフィックで作られたプロトタイプは、顧客向けのプレゼンテーションを行う場合に役立ちます。逆に、完成度の低いプロトタイプをプレゼンテーションで使っても、顧客の関心を引くことはできないでしょう。
すでにユーザーに製品を試用してもらっていて、製品の最終的なインターフェースに自信を持てるとしたら、顧客向けに完成度の高いプロトタイプを作成してもいい段階です。
優れたプロトタイプを顧客に示すことで、より契約獲得の可能性が高まると思います。
複雑なプロジェクトのケース
現実世界のシミュレーションをプロトタイプに反映しなければならないような場合を考えてみてください。
このような複雑なプロジェクト（または「重要度」は高いが「緊急度」は低いプロジェクト）では、現実の変動するデータにアクセスできるプロトタイプを作るのが有効です。
コストは高くつくかもしれませんが、目的を達成するには必要です。しかし他のケースでは、プロトタイプに時間を投資する価値があるかどうか考えましょう。
実際のイテレーションの例
UXPinの方針では、プロトタイピングは迅速に共同作業で行われるべきであるとしています。そして私たちはすでに述べた基準も実践しています。
最近の事例（デザインエディターのインターフェースの再設計）を紹介します。
全体のプロセス
カスタマーサポートに寄せられたユーザーからのフィードバックを検討した後、チームでデザインの原則を考えました。例えば、「気を散らすものの排除」、「予測できるアーキテクチャ」、「一貫性のある外観」などです。
次に、2日間かけてアイデアをまとめ、最終的にUIのプロトタイプを作成しました。そしてプロトタイプを20人のユーザーに試用してもらった後に、イテレーション（反復型の短期の開発サイクル）を行い、ここでやっと最終的な製品をデザインするための準備が完了しました。
以上は外観デザインだけのプロセスです。全体ではユーザーテストを含めて2週間近くかかりました。
新しいUIを再設計するために作成した、初期のプロトタイプの例を次にご紹介します。
プロトタイプの3つのバージョン例
バージョン1
インターフェースの主要な構成部品（ナビゲーション要素など）の、一番良い配置位置を考えるために、多数の可能性を試してみました。上の画像は、試したUIデザインの1つです。サイトマップは右下に置いています。これらのテストを行う中で、幸運なことに私たちは、元々の要素の配置はユーザーのニーズと一致していないことに気づきました。
バージョン2
デザインエディタをデザインする上で大変なのは、高機能を搭載しながら、インターフェースはシンプルにわかりやすい設計にしなければならないことです。
上の画像は、編集モードごとに切り替えができる、タブのようなシステムです。すっきりした外観で、ユーザーからも「切り替えをしやすい。」というフィードバックをもらえましたが、欠点も見つかりました。
- アイコンの名前の表示がないため、各機能を見つけにくい。
- 小さな画面上では、約80pxの余白部分を見つけにくい。
このバージョン2は、バージョン1を基にして30分ほどで作成したものですが、テストを一巡させた後に破棄しました。
バージョン3
このプロトタイプの最終的なバージョンは、実際に製品化したサービスのデザインに近いものです。バージョン1とバージョン2での反省を生かしています。
もしバージョン1 のプロトタイプを作成していたら、ユーザーにとってサイトマップが見つけにくいデザインのままだったと思います。また、私たちがバージョン2で満足していたら、さらに悪い事態になっていたかもしれません―ユーザーはエディタの機能のアイコンを見つけるのが難しいままだったと思います。
どちらのケースでも、後々の修正に高いコストがかかるだけではなく、粗悪な製品を売り出すことになっていたでしょう。
最後に
UXデザインも他のデザインと同様に、プロトタイピングが必要です。
車のデザインから建築に至るまで、プロトタイピングなしには良いデザインを生むことはできません。しかし、プロトタイピングを全体のデザインプロセスから独立したものと考えるべきではありません。
プロトタイピングはその本来の目的―製品のアイデアの検証、製品の修正、製品開発の拡張などに役立てるべきです。そして製品を使うユーザーを中心として、チームでデザインの共同作業を進めるべきです。
正しい段階で、正しい理由で、正しいプロセスを実行しましょう！
[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートを受けながら学びたい場合はご参加ください。
