プロトタイプの基本 Part 1: プロトタイプをつくる理由と紙の力（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

優れたデザインは、以下のような反復プロセスからつくられます。

  1. ユーザー調査を行い、対象となる潜在的なユーザー要件を特定
  2. 調査を元に、今回解決する問題を定義し、仮説を立てる
  3. 定義された問題に対するプロトタイプを作成する
  4. プロトタイプを使ってテストを行い、仮説を検証する
  5. 最初のステップに戻り、考えを見直しつつ、もう一度プロセスを繰り返してさらに最終的な解決案に近づける

このプロセスを繰り返すごと、プロトタイプは本物らしく見えるようになります。早いうちに問題の特定と解決が行えれば、労力も費用も抑えられます。プロセスが先に進むほど複雑さが増すため、変更はより高くつきます。ここがプロトタイプの出番です。

幸いなことに、デザイナーが使用できるプロトタイプ用ツールは、場面に応じて豊富に提供されています。プロトタイプの種類には、簡単にアイデアを示すためのペーパープロトタイプがあり、その対極には、インタラクティブで本物に近い見た目のデジタルプロトタイプがあります。

デジタルプロトタイプは、ユーザーや関係者が何をつくろうとしているのか実感できる、リアルでクリック可能なコンセプト検証用のプロトタイプです。仮説を確かめて徐々に最終的なソリューションに向前進する足がかりになります。

また、操作可能なプロトタイプはユーザーや関係者が実際に試せるため、彼らをデザインプロセスに巻き込んで、情報アーキテクチャ、レイアウトと視覚的な階層、およびインタラクティブな要素のテストが行えます。

まとめると、プロトタイプには次のようなメリットがあります。

  1. 時間と経費を節約する
  2. あらゆる人をデザインプロセスに参画させる
  3. デザイナーと開発者の架け橋となる

それでは、上のポイント少し掘り下げて、デザインプロセスで主要な役割を果たすプロトタイプの役割を確認しましょう。

1. プロトタイプは時間と経費を節約

新しいアイデアを展開する上での鉄則は、早い段階で、かつ費用をかけずに失敗することです。プロトタイプは、デザインプロセスの初期段階から誤解を特定し、対処することを可能にします。問題を解決する段階が早ければ早いほど、時間とお金を節約することができるでしょう。

プロジェクトが進行すると、対応コストも増加します。開発の最後の段階で修正することになるかもしれない箇所を特定できるプロトタイプは、それがペーパープロトタイプでもデジタルプロトタイプでも、コスト効率が高い手段です。

2. プロトタイプはデザインプロセスに全員を関与させる

どんなに簡素なプロジェクトでも、さまざまな人が関与しているものです。アイデアの段階からそれを最終的に構築するまでの行程に、プロジェクトに関わるすべての人を取り込むことは重要です。

デザイナー、開発者、プロジェクト管理者、ビジネス担当者、そしてユーザー。プロジェクトの規模によっては、このリストがごく一部でしかない場合もあるでしょう。

プロトタイプは、デザインプロセスにすべての人を関与させるだけでなく、議論を継続し発展させるためにも役立ちます。複雑な解決案の提案を準備するために、デザイナーがしばらく音信不通になるような事態も発生しません。

3. プロトタイプはデザイナーと開発者をつなぐ

デザイン業界が複雑化する中で、「ユニコーンデザイナー」すなわちデザイナーと開発者のスキルを兼ね備えるという考え方は、幸いにも消えつつあります。今や、すべての分野をマスターするには、物事があまりにも複雑すぎるのです。今は、いろんな分野の専門家で形成されるチームで作業し、個々の専門性の強みを引き出す働き方に変化してきています。プロトタイプは、そうした状況においてメンバーをつなぐ役割を果たします。

製品や機能のデザインが完了し、開発者に構築作業を引き継ぐ際、操作可能で本物に近い見た目を持つプロトタイプは、何をつくればよいのかを開発者が明確に理解する助けになります。

これは、インタラクションをデザインする場合に特に当てはまります。リッチでインタラクティブなプロトタイプは、実際には操作できない一連のビジュアルを並べるよりも、大幅に強力でリアリティがあります。見た目はもちろん、機能する様子も、非常に明確に示してくれます。~~~~

プロトタイプとデザインプロセス

プロトタイプの利点が分かったところで、今度はプロトタイプのプロセスを掘り下げてみることにしましょう。場面に応じて、さまざまなツールを使用し、忠実度が異なるプロトタイプを作成することができます。
プロトタイプの主な種類としては、以下のものが挙げられます。

プロトタイプをいくつか構築する過程を進むにつれて、デザインのより包括的なビジョンを提供できるようになります。その中には、カラーパレット、タイポグラフィ、インタラクションやアニメーションなどの様々な側面が含まれます。つまり、プロトタイプは、ラフスケッチのような忠実度の低いものから、本物のような印象を与える忠実度の高いものまで多岐にわたります。

忠実度のレベルが高まると、ある時点で、実環境に向けたプロトタイプを構築することになるでしょう。例えばWebサイトの最終プロトタイプなら、ブラウザに合わせたカスタマイズができるよう、HTML、CSS、およびJavaScriptを使って作成されたものが理想的です。

プロトタイプのプロセスとは、忠実度のレベルが向上する行程です。プロトタイプは、忠実度の低いもの、中程度のもの、高いものといった分類ができ、デザインプロセスのそれぞれの段階に適したものが使われます。

プロトタイプは、幅広いアイデアを試す初期の作業から、仮説検証用の操作可能なプロトタイプを経て、実装を開始する際にデザイン仕様を伝える詳細なプロトタイプに至るまで、デザインプロセスの一連の段階で利用される

デザイン作業を開始した時点で重要なのは、低コストで素早く実装できるアプローチに注力することです。この段階にぴったりのプロトタイプツールは、紙です。

ペーパープロトタイプを使って何回か初歩的な確認を行ったら、少し忠実度の高い、クリック可能なワイヤフレームに進みます。これは、ユーザーや関係者に、全体としてどのように機能するのかをより明確にイメージさせるために有効です。

最後に、忠実度の高いプロトタイプに進みます。この段階では、ワイヤフレームより本物に近いモックアップに移行して、最終的に開発することになるものを模倣します。インタラクションやトランジションもその対象です。インタラクティブな高忠実度のプロトタイプは、ユーザーと関係者に、明確な最終結果のイメージを提供するでしょう。

もちろん、それぞれのプロジェクトは異なっており、時には、異なる順序でプロトタイプを構築する必要があるかもしれません。例えば、Webベースの複雑なSaaSアプリケーションを構築する際は、プロセスの早い段階における実装とテストができるように、HTMLを使ってプロトタイプ構築を開始するかもしれません。どんなときでも、選択するべきアプローチは、取り組んでいるプロジェクト次第です。

ペーパープロトタイプ

紙は、非常に強力なプロトタイプ用のツールです。非常にコストの低い媒体であるため、期待や重圧に押さえつけられることなく、気楽に取り組めます。また、紙の良さは、共同作業をしやすいという点にもあります。チームとして協力しながらデザインすることができます。コーイ・ビンのDesign Tools Surveyのデータによれば、紙は世界中のデザイナーに利用されていて、64%のデザイナーが、紙を自身の作業に欠かせないものと位置づけています。

すべての作業と同様に、ペーパープロトタイプは、練習すれば上手くなります。インターフェイスのスケッチに多少の時間を費やせば、スキル上達につながるでしょう。最近私は、エヴァ・ロッタ・ラムが指導するインターフェイススケッチの1日ワークショップに参加しました。そこで、私自身のペーパープロトタイプへのアプローチを強化する数多くのアイデアを得ることができました。

中でも私のスケッチを大きく改善した単純なテクニックがあります。インターフェイス (Twitter、YouTube、Kickstarterなど) をできるだけ短時間（わずか1～2分）で描画するという作業でした。このタスクを繰り返し実施することで、自身をスケッチに集中させ、作業を大幅に加速することができたのです。

描く経験を積むことで、思考とコミュニケーション能力が改善されます。そして、それを実施するためにワークショップに参加する必要はありません。単に時間をとって練習するだけで、ペーパープロトタイピングのスキルは飛躍的に上達するでしょう。レース前のアスリートがウォームアップを行うように、デザイナーもペーパープロトタイプに着手する前に、スケッチの練習をすれば頭の中の筋肉をウォームアップすることができます。

コーイ・ビンのDesign Tools Surveyでは、デザインツールとしての紙の重要性が強調されている。回答者の64パーセントが、ブレインストーミングやアイデア出しの作業において、紙を主要なツールとして使用していると報告している。紙は、レイアウトのフェーズで、インターフェイスをスケッチするためにも有効なツール。

私が指導するワークショップでは、学生向けもプロフェッショナル向けも、必ず紙を使って始めています。紙のスケッチは、コンピュータで作業するよりも大幅に速いからです。また、ラフなスケッチで検討することで、フロー定義やインターフェイスのレイアウトに集中することができます。紙は、アイデアを考えて確認するときの最適なツールなのです。

続けて、パート2の『プロトタイプの基本 Part 2: 操作可能なワイヤーフレームと高精度プロトタイプ』をお読みください。

この記事はThe Fundamentals of Wireframing and Prototyping（著者: Christopher Murphy）の抄訳です