UXプロトタイプを愛するようになったデザイナーが語る理由 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
私が初めてプロトタイプを作成したのは6年前でした。それは、デザイナーを職業として選択したのが正しかったのか自信をなくすような状況から抜け出すための、土壇場の試みでした。そのときは、幾度となくプレゼンと議論を重ねたのにもかかわらず、クライアントからの了解か得られなかったのです。その理由は、完成したデザインのイメージが掴めないというものでした。そこで、クリック可能なモックアップが曖昧さを緩和できるかもしれないと考えたのです。
そのクライアントは私のプレゼンを見たときから、あるデザイン要素が期待通りに動作しないのではと懸念を示していました。私は、従来にない新しい役割を持つ要素であることを説得しようかとも考えました。彼らは態度を軟化させたかもしれませんが、やがてまた不安になったことでしょう。堂々巡りの始まりです。（このようなアプローチはお勧めしません）
そこで私はプロトタイプを用意しました。状況を打開できることを期待して。それは、特定の問題に対処するための、このプロジェクトだけの追加作業のはずでした。
ところが、プロトタイプの提示は、目からうろこが落ちるような体験でした。クライアントの疑念を晴らすことができただけでなく、彼らとの関係を深める、新しい方法を手に入れたのです。いくつもの貴重な知見や意見を得ることができ、チームは新たな力と共に目的に向かって前進できるようになりました。
それ以来、私にとってプロトタイプは「良いアイデア」から、UXデザインプロセスにおける「欠くべからざるもの」へと変わりました。プロトタイプ作成のための使いやすいツールが普及して、デザイン要素やインタラクションのライブラリも提供されています。今ではAdobe XDのようなツールを使えば、これまでにないほど簡単に、すばやくプロトタイプを作成できます。
今の私にとっての問題は、「どのようにプロトタイプを作成するべきか」であって、「プロトタイプを作成すべきか」ではありません。しかし、いまでも多くのデザイナーは使いこなすのが困難なツールや機能不足のツールに足をとられたり、厳しいスケジュールにさらに作業を追加することへの抵抗を感じています。
そこで、まだ踏み切れていない人々のために、ユーザーエクスペリエンス（UX）プロトタイプが、いかに有用であるかをこの記事ではお伝えします。またプロトタイプを最大限に活用するための、私の考えも併せてお伝えしたいと思います。
なぜプロトタイプを作るべきなのか
1. 心の平和を見つけ、デザインを改善する
UXプロトタイプの記事といえば、関係者へのデザインの売り込みやすさやテストの効果を利点として押しているでしょう（もちろん、私も以下で同じことをします）。ですが、デザイナー自身へのメリットについて述べているものは少ないのではないでしょうか。
もし私と同類なら、UIをデザインするとき、頭の中にちょっとした映像を浮かべているでしょう。PCの画面に見えているのは静的なワイヤーフレームやモックアップであっても、頭の中では、インタラクションや次の画面へのトランジションが流れるように動いていませんか？そうしたイメージを思い浮かべる能力は、インタラクションデザイナーが持つ強みです。インターフェイスをデザインする時、その力に頼って判断することになるでしょう。
しかし、その映像が示す方向は誤りかもしれません。なぜなら、それは（間違っているかもしれない）仮説、（楽観的過ぎるかもしれない）過去の体験を根拠とした成功へのレシピ、（見当違いかもしれない）モニタ上のデザインの完成度を根拠にしているからです。
プロトタイプをつくることで、デザインを細部まで確認し、頭の中のイメージに間違いが無いかを検証できます。経験豊富なUXプロフェッショナルでさえ何か問題を見逃して、開発段階の後期になってようやく露呈することがしばしばあります。プロトタイプは、外部からの容赦のない批判を浴びる前に、間違いや選択の過ちを特定し修正する助けになるのです。
2. ビジョンを余さず捉えて伝える
UXデザインに本質的に伴う断絶が存在します。一般的な制作物（ワイヤーフレーム、ユーザーフロー、モックアップ）と、デザインしようとしているものの特性（ユーザーのアクションに反応し動的に変わる）の間のギャップです。静的なドキュメントにどれだけ思慮深く注意書きを加えても、デザインがどのように動作することを意図されているのかを伝えるには不十分です。
もちろん、シンプルなインターフェイスであれば静的なドキュメントでほぼ表現できるかもしれません。しかし、デザインが複雑になるほど、デザイナーのビジョンと伝統的な納品物が伝えられることとの差は広がる一方です。プロトタイプを使えばその距離は縮まります。自分の意図をより具体的かつ正確に定義できるようになるでしょう。
出典：Adobe Stock / Blacksalmon
3. 関係者からの信頼と支持を得る
既に説明したように、プロトタイプは、デザインの背後にある意図をより正確に伝える役に立ちます。それに加え、より構造的な問題をプロトタイプは解決します。デザイナーであれば、いったんデザインを納品した後に、いらだたしいことに差し戻しが発生し、スケジュールが台無しになった体験があることでしょう。
一般的に作業を脱線させるのは、「説明を聞いて想像していたのと違う」という苦情です。しかも、その言葉は、詳細なワイヤーやモックアップを何度も提示し、それらがどのように最終的なデザインを構成するかについて詳細な議論を重ねた後に言われることが大半です。数え切れない電子メールのやり取り、際限なく増え続ける関係者、デザインの（さして重要でない）細部の分析、それらすべてをデザイナーはなんとかまとめます。そうして、皆が納得します。ところが、やがて、すべてが空中分解し始めるのです。
多くの場合、この手の手戻りは、デザイナーとクライアントの間の誤解に由来します。承認の際のコミュニケーションがより明快であれば、その可能性を減らせます。デザイナーは、制作初期の段階から最終的にどのように動作するかを推定することに長けていなければなりません。資料をレビューするクライアントの多くは、そのようなスキルを所持していないからです。プロトタイプは、デザインを最終形態の側に近づけます。それにより、提案を理解するときのズレが抑えられるでしょう。その後の承認ならば（少なくとも理論上は）変更が起きにくくなるはずです。
（私はこれまで何度か、クライアントは一定額を第三者に預託するべきで、主要な承認後の差し戻しによる追加費用にはその預託金を充て、文書化された正しい振舞いを完遂した発注者にのみ払い戻しされる仕組みを提案したことがあります。さまざまな理由でそれはうまく行かないと説明を受けました。私はいまでも、そのアイデアは時代を先取りしすぎただけで、より文明が進んだ世の中になれば称賛をもって受け入れられると信じています）
4. デザイン中にユーザーテストを実施する
テストにはいろんな種類があります。デザインへのインプットを得るためのテスト（既存インターフェイスの改善や拡張が必要な箇所を特定）、デザインを洗練させるためのテスト（新しく開発したインターフェイスの明白な過ちや不足の発見、ローンチ前の調整）と様々です。しかし、コンセプトからリリースに向けた駆け足の中で軽視されがちなのが、コンセプト検証のテストです。これをプロジェクトの十分に早い段階に実施すれば、デザインの方向性に大きな影響を与えるでしょう。
問題は、そのようなテストには、何かテストするものが必要だということです。そして、その「なにか」は、開発が始まるずっと前に必要です。軽量なプロトタイプはこの問題を解決します。フロー、インタラクション、用語体系、構造などについて、フィードバックを得るためには、プロジェクト初期または中期におけるプロトタイプを用いたテストが理想的です。プロトタイプは完全である必要はありません。提案したインターフェイスの大部分は、ほとんど議論されることは無いでしょう。追加の検証作業がプラスになると考えられる要素に集中すればよいのです。
出典：Adobe Stock / Blacksalmon
5. デザイナーと開発者の橋渡し
デザイナーと開発者の関係は、ときとして緊張感と対立をはらんだものとなります。その理由は、この記事に収まりきらないほど膨大かつ複雑です（とはいえ、多くのデザイナーのように、私も最新に更新された問題のメモを整理して頭の中に収めています）。そこには「ライオン対ハイエナ」のような立場の違いもあるでしょうが、多くの摩擦は貧弱なコミュニケーションから発生します。
原因は双方にあります。開発者は、デザイナーが十分と考える以上の詳細なスペックや指示を期待しがちで、反対にデザイナーは、開発者が資料から行間を読みとり理解する能力を過大に期待しがちです。
この緊張を緩和する手助けにもプロトタイプが使えます。粗いプロトタイプでも、開発者にとっては、潜在的な問題や実現可能性を指摘する機会になるでしょう。特定の環境で実現できない仕様、開発に時間がかかりすぎる機能、予算に収まらないソリューションの導入が必要になる可能性、といった項目です。そうした問題を早期に発見することが、その後の時間と労力の大幅な節約に繋がります。
プロジェクトの初期から開発者と密接に連携すると、コンセプトに潜む問題の特定に役立つだけでなく、改善のための機会にもなります。私自身の経験では、一般的にはデザインフェーズとされる期間中の開発者との二人三脚は、常に重要な洞察をもたらしてくれました。最近、開発中のアプリに新しく追加する機能をデモするため、プロトタイプを共有しました。思い通りの出来ではなかったので、全幅の信頼をおく親しい開発者に使ってもらいました。「これは全部実装できるね」と彼は考え込んだ様子で言いました。「でもこういうAPIを使えばこことここをもっと良くできるかな」。開発の成功には、この手のコラボレーションが初期の段階に必要です。開発が実際に始まる前にプロトタイプを用いることにより、それはとても容易に実現できます。
よくあるプロトタイピングについての思い違い
私はプロトタイプのことをまったく知らない
実のところ知っているはずです。それは、いかなるデザインにおいても不可欠です。コンセプトづくり、反復作業、モックアップ作成など、違う呼び方をしているかもしれません。広告やポスターなど、インタラクティブではないものをデザインをしていると仮定しましょう。ある時点に達したら、発注者の反応を確認するため、なにかを提示しなければならなくなります。
その時に見せるものは完成したデザインではないはずです。というのは、無駄になるかもしれない作業に時間をかけ過ぎる前に、反応を知ることが目的だからです。画像もテキストも配置のためだけのものかもしれません。それでも重要な側面は押さえているでしょう。フォントの種類、カラーパレット、全体的なレイアウト、相対的な位置関係など、デザインの意図を十分に伝えられれば、意味のあるフィードバックを得て、必要に応じて方向修正が可能です。
これがまさにプロトタイプです。UXプロトタイプはインタラクティブである点が異なりますが、それは、それがUXデザインでは伝えなければならない側面だからです。しかし、ポスターのモックアップや広告のコンセプトスケッチの考え方の根底にあるものは、そのままプロトタイプ作成につながっています。目的も共通です。十分な情報を早期に得て方向性を修正し、後に生じる可能性のある無駄な作業時間とトラブルを省くことです。デザイナーはずっとプロトタイプを作成してきたのです。
プロトタイプの作成は難しい
正直なところ、プロトタイプツールの多くは、習得にそれなりの時間と労力が求められます。特に、データ駆動のシミュレーション構築を想定した本格的なツールは、プロトタイプと最終的なコードの境にあるものです。そして、個人契約で働いている人達は、プロジェクトごと、いろいろなツールの使用を求められることでしょう。
幸運なことに、現在は、コードが苦手なクリエイター（私も含め）のためのツールも数多く存在します。それらの軽量なツールは習得がずっと容易で、デザイナーの多くが慣れ親しんだ他のクリエイティブツールと同様な操作感とコンセプトを持っています。インスタントラーメン作りに真空調理器を求められるような状況には抵抗し、目的に適ったツールを選択すべきです。
プロトタイプ作成は貴重な作業時間を無駄にする
前述したように、最新のデザイナー向けのプロトタイプツールは、デザイナーが極端な短納期を課されている状況を理解して設計されています。過去に苦い経験があったとしても、最新のツールを試して同じ問題につきあたるか確認することを勧めます。正しいツールを選択すれば、プロトタイプ作成に理不尽な時間をとられることはないでしょう。
現実的には、いくつかの要因で制作時間が増大します。あるツールでつくる最初または2回目のプロトタイプは、慣れた後につくるよりも時間がかかるでしょう。とはいえ、最初に余計にかかる時間は、将来短い時間で構築できるようになるための投資でもあります。
複雑なインターフェイスも、プロトタイプ作成における作業時間の増大を招きます。複雑な要素を組み上げる手間だけでなく、本物らしくするために必要なUIコンポーネントやインタラクションを特定する時間もかかります。しかし、複雑なデザイン作業には、より多くの時間が割り当てられているものです。そうであれば、プロトタイプ作成の時間を確保する余地は見つけやすいでしょう。
最後に、プロトタイプ作成の時間を、プロジェクトスケジュールへの単純な追加と考えるのはやめましょう。その時間は、承認を得るための余分なデザイン作業を省き、開発者への引き渡し時に発生する時間を前倒しにし、プロジェクト全体としては時間を節約する効果を生むからです。使用するツールによっては、デザイン仕様作成の一部を、開発側に委ねられるかもしれません。
このプロジェクトにプロトタイプは適さない
高い確率でその考えは間違いです。確かに、プロトタイプ作成の時間や、フィードバックを適用する余地のないスケジュールが組まれたプロジェクトもあるでしょう。また、インターフェイスがとてもシンプルで素直なために、プロトタイプが付加価値を生みにくい場合もあると思います。それでも、一般的には、プロトタイプは大半のUXデザインに適用可能で有用なツールです。
私は、デザインプロセスにプロトタイプを組み込まないデザイナーに向かって、意識が低いと言うタイプではありません。自身の過去の経験から学んだことがあるとすれば、デザインに絶対は無いということであり、最終的には当事者の判断を信じるべきだということです。それでも、プロトタイプがプロセス改善の助けになる可能性に賭けてみる価値はあると、私は考えています。
私からのアドバイス
適切なレベルを見つける
やりすぎないようにしましょう。最終的なアプリ開発をしているわけではありません（最終デザインですらありません）。プロトタイプで達成したい目的を見失わないよう努め、なにを伝えたいのか？具体性が必要なのはどの点か？余分なのはどこか？を考えましょう。プロトタイプの目的は、そもそも「何が正解らしいか」を見つけ出すことなのに、「この正解には厳密さが足りない」という落とし穴にはまるのはあまりに簡単です。
ユーザージャーニーや遷移フローの可能な組み合わせすべてを初期段階から捉えようとするのは、報われない自滅的な行為です。まずは中核となるユーザージャーニーに注力して、アプリまたは体験の骨格を構築し、その後プロジェクトの進行に応じて徐々に詳細を追加します。このようにすれば、階層構造やフローに変更が生じても、すべてをやり直す必要はありません。
Adobe XD
1つのプロトタイプですべてを解決しようとしない
最終的なインターフェイスが種々の異なる体験を含む可能性がある場合（異なるペルソナそれぞれに独自のパスが用意されている等）、プロトタイプにそれらをすべて詰め込む必要はありません（おそらく、すべきではありません）。それぞれのパスごとにプロトタイプを構築する方がよいやり方です。更新への対応が容易になり、また、必要に応じて個別に説明することが可能になります。
ユーザー主導で操作させる必要がある場合は、統合ホーム画面を用意しましょう。最初に表示されるホーム画面は、通常のインターフェイスからは独立した画面で、複数のジャーニーへの入り口を表示することで、ユーザーに任意のジャーニーの選択を可能にします。その際、ホーム画面に戻るリンクを固定表示し、どのパスを選んでも最終ステップの次はホーム画面に戻れるようにしましょう。
プロトタイプの共有方法を熟慮する
ツールによっては選択肢が限られているかもしれません。それでも、作成したプロトタイプの共有方法については検討しましょう。対面で提示して、自由に操作してもらいその場でコメントをもらうのか？各自が独力で操作して個別に体験できる環境を用意するのか？操作の様子を録画してレビューしてもらうのか？
さらに、プロトタイプ自身にガイドや注意書きを組み込む必要があるか、どのようにフィードバックを収集するかについても考慮するべきです。
一人で取り組まない
他のデザイナーのおかげで、プロトタイピングツールの活用法、ベストプラクティス、ヒントやちょっとしたコツなどの情報が数多く提供されています。私のオススメは、プロジェクトファイルと一緒に提供されるハンズオンチュートリアルです（例えば、スターターキット）。動画を見るのも多くを得る手段ではありますが、実際に手を動かし能動的に取り組むほうが常に効果的です。
おわりに
UXプロトタイプを作成すべきあらゆる合理的かつ論理的な理由が存在します。しかし、プロトタイプの究極の目的は何でしょうか？それがたまらなく楽しいものとなり得ることです。デザインに命が吹き込まれるのを目の当たりにし、そこに動きを付ける当事者であることには、深く本質的なやりがいがあります。映画「ヤング・フランケンシュタイン」ばりに舞台口調で「これは生きている！」と大声で叫ぶまではいきませんが、私がかなり近い感情を持ったことは確かです。
この記事はHow I Learned to Love the UX Prototype（著者:Steven Sassaman）の抄訳です