問題に適したUXツールを選ぶこと
あなたが自宅のキッチンをリノベーションしようとしているところを想像してください。調査をして施工業者を雇いました。初日に彼がやってきます。タフそうなトラックの後ろには大きなトレーラーがついています。あなたはワクワクします。しかし妙なことが起こります。彼が作業している姿を見るたびに、持っているのはハンマーだけなのです。巻尺も、水準器も、のこぎりもありません。ただのハンマー、あるいは2本のハンマーだけです。
その施工業者は自信満々にハンマーを振るいます。釘を打つのはプロ級です。測定もハンマーでこなせるほどになっています。「5ハンマーとヘッド分です」と言ったりします。時には大きなスレッジハンマーまで持ち出してきます。でも、その人にキッチンの再構築を任せたいと思うでしょうか？配管や電気工事を任せたいと思うでしょうか？床を張り替えて、キャビネットを水平に取り付けてほしいと思うでしょうか？
いいえ。間違いなくそうは思いません。
しかし、デジタル体験のデザインでは、こうしたことがしょっちゅう起きています。デザイナーたちがひとつの大きなハンマー――つまりUIレイアウト――を持って問題を「解決しよう」と急ぎます。たとえば、ローファイのワイヤーフレームだったり、Figmaでハイファイのレイアウトにいきなり飛びついたりします。どちらにせよ、四角形をドラッグして、目の前の体験上の問題をなんとかしようとします。そしてその施工業者と同じように、進捗は出しているように見えますし、忙しそうにも見えますが、それは本当に効果的なのでしょうか？
本当に優れた体験をデザインしたいのであれば、ハンマーだけでは不十分です。もっと広範なツールのセットが必要であり、それぞれをいつ使うかを判断する知恵が求められます。
ガレットによる有名なUXの階層構造
Jesse James Garrett の著書『ユーザーエクスペリエンスの要素』では、ユーザー体験を創出するために必要なものについての、時を経ても有効なフレームワークが示されています。
多くの人が「UX」と聞いて思い浮かべるのはユーザーインターフェースです。製品やサービスにおける、より深い構造の上にのる光沢のある仕上がりです。UXに関わる人々にとっては、最も魅力的な視覚的要素です。そしてある意味、UXデザイナー自身がUIレイアウトに過度に依存することで、こうした期待を助長してきたとも言えます。
しかし、ユーザーインターフェースとはあくまで「インターフェース」であり、ユーザーが製品やサービスに内包された価値を体験するための最上層です。インターフェースは非常に重要ですが、それは良い体験の入口に過ぎません。Garrettの言葉を借りれば、これは「表層」にあたり、視覚的なスタイルやブランディングの要素を含みます。そして「スケルトン」――インターフェースのレイアウト構造、ナビゲーション構造やパターン、情報配置や選択などの骨格――も含まれます。
そのきらびやかなインターフェースの下には、以下のような重要な基礎層が存在しています。
構造（Structure）
インターフェースは情報によって支えられています。情報はシステム内のさまざまな場所を移動することでアクセスされます。情報の構造と、システム内の動線設計はしっかりしていなければなりません。そうでなければ、インターフェースは機能しません。ユーザーが必要な情報にたどり着けなければゲームオーバーです。簡単に場所を移動できなければ、ユーザーは離脱します。
スコープ（Scope）
構造を支える下層には、製品や機能のスコープがあります。製品やサービスに含まれるもの、含まれないものを明確に定義する必要があります。機能が意味するもの、そしてそれが価値を持つために必要な要素が明確でなければなりません。
戦略（Strategy）
製品やサービスが成功するためには、ユーザーを念頭に置いて設計されていなければなりません。ユーザーが求めているものと、私たちが何を提供するかの定義が必要です。さらに重要なのは、「何を作らないか」を知っていることです。そして、それを支える堅実なビジネスモデルが必要です。
これらの各層は相互に作用し、下から上へと強固で一貫性のある体験を構築します。表層だけに注目して、下層の構造を無視すれば、根本的な問題解決に失敗する可能性があります。
この層構造の比喩を理解することは、以下の2つの理由から重要です。
- 問題の種類を見極めるため。 常に1層だけに起きるとは限りませんが、たいてい問題の大部分はGarrettの示すどこかの層に属しています。データは整理されているか？正しいユーザーを対象としているか？ワークフローは論理的か？これらの問いの答えが、次の理由へとつながります。
- それを解決するためのツールを選ぶため。 板を切るのにハンマーは使いません（もちろん使えないことはありませんが、非常に面倒ですし、仕上がりも酷いでしょう）。同様に、情報構造の問題をUIレイアウトで解決するのも、やろうと思えばできますが、無理があり、たいてい混乱を招きます。
各層は異なるタイプの問いに対応します。「なぜこれを作るのか？」「何を含めるべきか？」「どう構造化すべきか？」「どう動作すべきか？」といった問いです。
しかし、現実世界の締め切りやプレッシャーの中で私たちは急かされ、「とにかくインターフェースを作ってしまおう」となりがちです。確かに速いです。目に見えますし、「成果を出している」気分になれます。関係者に何かを提示することもできます。でも、これらの層を飛ばすのは、家を建てるときに工程を飛ばすようなものです。どんなに壁が美しくても、基礎がずさんであれば、いずれ崩れます。
UXデザイナーは、すべての層における課題に向き合う覚悟とスキルが必要です。戦略を定義するには忍耐が必要であり、構造を形成するには意図が必要であり、骨格を設計するには先見性が必要です。
よくある落とし穴：UIに頼りがちになること
ここまで層構造について考えてきて、ある種の緊張感を感じているのではないでしょうか。プロジェクトの途中で物事が曖昧になると、UIレイアウトツールを開いて「とりあえず進める」方が楽に感じられます。それは速くて、具体的です。
すぐに情報を並べ始めたり、ボタンを配置したり、コンテンツを入れて、アイコンとタイポグラフィをちょっと加えれば、「何かできた」気になります。
しかし、いきなりUIに飛びついてしまうと、次のようなさまざまな問題を見逃してしまいます。
- ユーザーの本当の目的を明確にする。 ユーザーが最終的に成し遂げたいタスクは何か？それにより選ぶべきアフォーダンスやシグニファイア、視覚的な優先順位が決まります。
- 前面と裏側のプロセスを一致させる。 デジタル体験は、ユーザーには見えないさまざまなデジタル・人的サービスによって支えられています。ユーザー体験とそれを支える仕組みの調和を目指す必要があります。
- 壊れたユーザーフローを解きほぐす。 一連のステップを見直し、より論理的に感じられる別の動線を検討します。
- 欠落している、または混乱を招く情報構造を修正する。 1つの画面だけではなく、全体のワークフローやアプリケーション全体の文脈を見直します。情報量が多すぎたり少なすぎたりする場合は、段階的開示（プログレッシブディスクロージャー）を活用します（ただし「とりあえず何か足せばいい」という考えではありません）。
このような事例を見れば、デジタル体験における課題はさまざまな層にまたがって存在することがわかります。構造の問題もあれば、動線の問題もあります。視覚的な強調の問題もあれば、価値の整合性の問題もあります。他にもここでは書ききれないほど多くのバリエーションがあります。
私の考えでは、UXの問題のうちUIだけに起因するものはごく一部です。では、それを踏まえてどうすればよいのでしょうか？
すべてのデザイナーが使うべきツール
さまざまな種類の課題に取り組む際、Garrettの階層を診断ツールとして活用し、どの層に問題があるのかを見極めることをお勧めします。そしてその問題に適したツールを取り出してください。ネジを打つのにハンマーを使うべきではありません。お気に入りのUXツールや技法を、何でもかんでもすぐに使うべきではありません。
以下は、私が特に愛用している「ディープトラック」なUXツールです。
- クリエイティブ短縮ブリーフ：Jared Spool によるこの手法では、プロジェクトや機能の本当の問題、制約、目的を迅速に定義できます。最終ユーザーとプロジェクト目標との整合性をもたらします。
- オブジェクトマッピング：Sophia V Prater によるこの手法では、概念的要素（オブジェクト）の構成を整理し、それらをユーザーにどう表現するかの基盤を明確にします。OOUX も参考にしてください。
- サービスブループリント：新規または複雑なワークフローに取り組む際、UXと開発をつなぐ非常に効果的な手法です。各ステップでユーザーとシステムに何が必要かを明示できます。
- ワイヤーフロー：ユーザーフローでもワイヤーフレームでもなく、その中間に位置する手法です。ユーザーがどのようにタスクを進めるかを段階的に可視化でき、サービスブループリントとの組み合わせで強力な表現になります。全体のパターンも明確になります。
これらのツールはそれぞれUXの異なる側面に光を当て、UIレイアウトだけでは見逃される、あるいは混乱を招く「見えない要素」を明らかにします。UIレイアウトは依然として有用なツールですが、「UIの問題」に取り組むときにこそ、最も効果的です。
すべてのツールを使う必要はない
ここで誤解されたくないのですが、私は「すべてのツールを使うべきだ」と言っているわけではありません。効果的なデザイナーは、手持ちのすべてのツールを無理に使おうとはしません。彼らは問題解決者です。そのため、最適なツールを選び、他のツールは棚に戻します。必要なツールであれば、それを取り出すだけです。
「デザインプロセスのステップ」として、すべてのツールを一律に使おうとするのはやめましょう。すべてのプロジェクトにサービスデザインの強力な圧縮機が必要なわけではありません。すべてのアプリに画面ごとの完全な監査が必要なわけでもありません。すべてのケースでカードソートが必要なわけでもありません。ときには手描きの簡単なスケッチだけで十分なこともありますし、複数のツールを組み合わせて対応すべき場合もあります。どのツールが本当に役立つかを見極める力を養ってください。問題に応じて「どの」ツールを使うかを判断できることが重要です。
適切なツール選択は、時間を節約し、努力を集中させ、デザインの品質を高めてくれます。
実例：私の就職面接課題
数年前、私はリードUXデザイナーの仕事を探していました。面接プロセスの一環として、デザイン課題が出されました（当時はこうした課題がよくありました）。課題はかなり明確で、目標もはっきりしていました。作業時間はわずか数時間。すぐに取りかかる必要がありました。時間の制約もあり、UIレイアウトに直行して画面を美しく仕上げるという選択肢もありました。
でも私はそうしませんでした。ユーザーがこの仮想プロジェクトで目標を達成するための重要なフローをまずマッピングしました。計画を立て、整理したうえで、考えを示すためにワイヤーフレームをいくつか作成しました。完全なプロトタイプには至りませんでしたし、色や美しいタイポグラフィもありませんでした。結局、私は白黒のしょぼいワイヤーフレームと、クリック可能な要素が少しだけある「なんちゃってプロトタイプ」を提出しました。
なぜこの話をするのでしょうか？それは、この課題で私が解決しようとしていた中心的な問題が、UIの問題ではなかったからです。これは動線設計の問題だったのです。私はユーザーがどのように道を進むかの設計に多くの時間を割き、ユーザーが目にする画面そのものにはさほど注力しませんでした。
その結果、私はその仕事に採用されました。彼らは、見た目だけでなく、根本的な問題に取り組んでいる姿勢を評価してくれました。後に聞いた話では、私と最後まで競っていたもう一人の候補者は、美しいUIを作ったものの、流れや構造に一貫性が欠けていたそうです。どの層の問題に取り組むかを正しく見極めることが、後の複数のプロダクト成功につながったのです。
熟練の職人になろう
UXの仕事において成長したいのであれば、目の前のUX課題をよく観察することです。それが「きらびやかなUIのキャンバス」ではなく、「複雑な構造」であることを理解してください。必要なのは、どの層の問題かを正確に見定めるための精密さです。それには経験も、少しの時間も必要です。何より、意図的であることが大切です。
冒頭の施工業者の比喩に戻りましょう。必要なツールを揃えているだけでなく、「その仕事に何が必要か」を理解し、「適切なツールを正しく選ぶ」職人になってください。
デザインとは、同じツールを強く振るうことではありません。どのツールを使うべきか、なぜそれを使うのかを理解することなのです。
