視点は違えど、同じ結論にたどり着く──UIとUX、専門家のタッグが生むデザインの「精度」【Design Cats in Goodpatch_Vol.01】

UIデザイナー、UXデザイナー、エンジニア、デザインストラテジスト──グッドパッチのクライアントワークでは、さまざまな専門性を持ったデザイナーがチームとなって協力し、顧客の課題を解決していきます。

時に手分けして、時に膝を突き合わせて。デザイナー同士がどのようにコラボレーションをして仕事を進めているのか、「Design Cats in Goodpatch」と題し、インタビューを通じてそのリアルに迫っていきます。

初回となる今回のテーマは「UIデザイナー」と「UXデザイナー」。1人のプレイヤーが両方の役割を担う会社が存在する一方で、GoodpatchではUIデザイナーとUXデザイナーが、それぞれの専門性を生かし、異なる観点をもってプロジェクトに取り組みます。

今回は、事業会社が提供する法人向け業務ツールのリニューアルプロジェクトを例に、UIデザイナーの栃尾とUXデザイナーの江原にプロジェクト内での動き方を聞きました。Cats（キャッツ）とは、ジャズを愛するミュージシャンへの愛称として使われるスラング。偶発性を楽しみながら、共にデザインに向き合う様子を感じてもらえれば幸いです。

リニューアルの「意思決定」の支援に、UIデザイナー・UXデザイナーがタッグで挑む

今回お聞きするプロジェクトは、事業会社の法人向け業務ツールのリニューアルとのことですが、どのような案件だったのでしょうか。

江原（UXデザイナー）：
このプロジェクトは少し特殊で、「リニューアルすること」を意思決定するための支援をすることが目的でした。

使いづらさに対する改善の要望がユーザーから挙がる中、リニューアルに必要な予算取りを社内で進めるべく、「そもそもリニューアルすべきか？」「するとしたらどんな方向性でリニューアルすべきか？」という2つの問いに答えを出す必要がありました。

ツールが使われないのは、事業者視点で大きな損失です。リニューアルすべきという現場の肌感に、ユーザー目線で根拠を持たせ、リニューアル後のあるべきUIまでを提示することがゴールでした。

このプロジェクトはどのような体制とプロセスで進められたのでしょうか。

栃尾（UIデザイナー）：
Goodpatch側は私と江原の2人だけです。プロジェクト全体としては、最初の1カ月でインプットと初期仮説としてのプロトタイプ作成、2カ月目にユーザビリティ検証を行い、3カ月目で最終的なUIデザイン作成と報告を行いました。

なるほど、UIとUXで手分けして進める部分と、協力して進める部分があるんですね。今回のプロジェクトのようにUIデザイナーとUXデザイナーが同時にアサインされることは、Goodpatchではよくあることなのでしょうか？

栃尾（UI）：
はい。ほとんどのプロジェクトでUIデザイナーとUXデザイナーが顔を合わせる時期がありますね。もちろんプロジェクトのフェーズや規模によって、UXデザイナーとデザインストラテジストだけがアサインされる時期があったり、UXデザイナーとUIデザイナーがエンジニアやPMとともに複数アサインされるような場合もあったりします。

ここから、今回のプロジェクトの詳細について伺います。最初は業界の知識も乏しい中で進めたと思いますが、どのように仮説を作ったのでしょうか。

江原（UX）：
私はまず、ユーザー視点と事業者視点双方での課題を洗い出しました。クライアントのPOにみっちりヒアリングし、各機能に紐づく利用シーンとビジネス観点で重視する点を整理しました。該当の法人向け業務ツールを利用したことがある身近な人にも、既存サービスの利用状況や使いづらい部分などを聞いています。

栃尾（UI）：
並行してUIデザイナー側では、仮説立案のスピードを上げるために「ヒューリスティック評価」を進めました。既存の自社サービスや競合他社のサービスをUIのセオリーと比較したり、ユーザー目線でひたすら分析し、どこが使いづらそうなのか。また、業界におけるスタンダードなUIはどのようなものか、などを把握していきました。

今回のデザイン対象が法人用業務ツールだったこともあり、サービスをすばやく理解するという意味も込めて進めていました。

2人がそれぞれの視点で分析すれば、ユーザーを捉えるスピードと精度は「2倍以上」

仮説までの情報集めも、UIとUXそれぞれの視点で進めたというわけですね。

栃尾（UI）：
その後、このプロセスで得られた仮説をUXデザイナーのヒアリング結果と突合することで、「やっぱりここは使いづらいんだ」「意外とユーザーはこの機能を使っているらしい」と答え合わせをする感覚で、仮説の精度を高められました。

江原（UX）：
双方の視点が加わった仮説を踏まえ、理想の体験コンセプトの案出しを行いました。クライアント含め、常に情報共有をしながら進めてきたので、コンセプトの方向性をすぐに合意でき、プロトタイプの作り込みと検証の設計に移ることができました。

UIとUX、それぞれの視点で情報を集めながらも、結論は同じところに行き着いて精度が高まるというのが面白いですね。同時並行で進める際に支障はなかったんですか？

江原（UX）：
コミュニケーションを密にとっているというのが大きかったと思います。毎日朝に進捗を確認する短めの会議をしていましたし、Slackでもお互いが仕入れた情報や思ったことを随時共有していました。2人とも独り言が得意なので（笑）。結果として、お互いの知識量が、早い段階でプロトタイプを作ることができるレベルに達したのだと思います。

栃尾（UI）：
あとは、週に一度クライアントのオフィスに伺って、先方も含めて最新の情報や新たな気付きを互いに共有できていました。一方的な進捗報告ではなく、一緒に手を動かしながら「ああでもない、こうでもない」と悩む、理想的なプロジェクトを築けていました。

その後は「ユーザービリティ検証」に向け、手分けして調査やプロトタイプ設計を進めたわけですよね。工夫した点などがあれば、教えてください。

江原（UX）：
調査設計するにあたって、経験豊富な社内のリサーチャーに壁打ちをお願いしたことですね。調査の特性を踏まえた具体的な質問設計をブラッシュアップしたり、本番実施前のパイロットテストにも付き合ってもらったりしました。

最終的なUIでより精度の高い情報設計を行うために、ユーザーの視線の動きを捉える「アイトラッキング手法」をユーザビリティ検証で採用することも決めました。社内のメンバーに気軽に相談できる環境にはいつも助けられています。

ユーザビリティ検証でユーザーに操作を依頼するタスクが固まったあとは、UIデザイナーと、そのタスクの成功／失敗の判定をするための操作手順の洗い出しを一緒にしました。

栃尾（UI）：
私の方では、ひたすらプロトタイプを修正していた記憶があります。ヒューリスティック評価で出た仮説を基に、すでに情報設計を終えていたので、理想の体験コンセプトに合わせて修正を加えていました。また、調査後の分析効率を高めるための作り込みも行いました。

UIデザイナーとUXデザイナー、2人で検証に立ち会うことで「完璧」なUIができた

調査のクオリティを上げるためのアプローチもまた、それぞれの専門性が生かされているんですね。ユーザビリティ検証は2人で進めたのでしょうか。

江原（UX）：
2人で実際のユーザーに直接会いに行きました。一緒に関東中を駆けずり回ったのがいい思い出です。体力的にかなりハードだったので、1人だったら心が折れていたかもしれません（笑）。

UIデザイナーとUXデザイナー、両方が検証に立ち会うことで、ユーザーの反応に対する共通認識ができ、スピード感を持って、その後の改善に移れたと思います。

栃尾（UI）：
そうですね。こうした検証はUXデザイナーに任せてしまいがちですが、私はできるだけ参加するよう心がけています。現場に行くことで、視線の動きや迷った箇所などを直接観察できるので、後から調査結果だけを受け取るのに比べて、得られる情報量が段違いです。

また、私の想像がつかないような使い方をされる方もいらっしゃいます。この業務ツールはPC向けなのですが、スマートフォンで「強引に」PCサイトを使っている方がいて。スマートフォン向けのWebサイトも必要なのだと気付くことができました。

江原（UX）：
私が調査結果を集計するより前に、栃尾さんは検証結果の概要を把握して、すぐに最終的なUI作成に向けて手を動かし始めてくれていました。インタビュー直後にご飯を食べていたとき「できたよ〜」とブラッシュアップしたものを見せてくれたときは、早すぎて感動しましたよ（笑）。

栃尾（UI）：
インタビューが全て終わった日にはもう、改善の方向性をクライアント含めて確認できていました。その合意を経て最終的なUIを作り始め、調査結果の分析や得られた示唆は、答え合わせ的に使っていた感じです。

検証を経て、UIデザインの仕上げに進んだと思いますが、成果物に対して気をつけたポイントなどはありますか？

江原（UX）：
納品資料が誰の手に渡っても「だからリニューアルが必要なんだ、この画面がユーザーやビジネスにとって理想的なんだ」と納得していただく必要があったので、ユーザー起点のエビデンスをきちんと残し続けることを意識して分析と資料作りを行いました。

例えば、分析結果を抽象化して改善点を提示する際にも、ユーザーの実際の発言を引用して補足するなどしていました。

栃尾（UI）：
細かいUIに関わる部分でも、分析結果をうまく活用・反映できた案件でした。アイトラッキングの「ユーザーは操作を始めるとき、無意識に画面の中央を見ている」という結果を基にコンテンツの配置順を変更したり、操作時間やミスの集計結果を踏まえてアイコンと文字サイズの関係もアップデートしたりしました。

最終的には「なぜこのUIなのか？」と聞かれたときに、全てユーザー起点で説明できる状態まで仕上げられました。これは良い検証ができた上で、検証結果をきちんと画面に反映しきれていたということだと思います。

互いの専門領域に集中しながら、肌感覚を同期する──UIデザイナーとUXデザイナーの理想の関係

プロジェクトを振り返って、印象的だったことはありますか？

栃尾（UI）：
社内はもちろん、クライアントとも密にコミュニケーションをとって進めていたからこそ、役割分担やプロセスがとても柔軟だったことが印象に残ってます。

前職では、まずディレクターがクライアントと打ち合わせを行い、企画や方針が決まった後にデザイナーに降りてくることが多く、仕組み上、進め方に違和感が生じても決まったプロセスの中で作るしかありませんでした。一方、Goodpatchではクライアントと直接話すため、ゴールに向かって臨機応変に最適なプロセスを検討でき、当事者意識を持って取り組みやすい感覚があります。

江原（UX）：
私も同感です。サービスやプロダクト作りと同様に、プロジェクトの進め方もどれだけ検証と改善を回せるかが成功のカギだと思っています。感じ取ったことをメンバー同士でフラットに相談し、すぐにプロセスに組み込める環境はとてもありがたかったです。

栃尾（UI）：
精緻な定量・定性両面でのユーザビリティ分析を通じて、私だけの視点では気付けない発見があったことも印象的でした。ユーザーの「使いやすい印象を受けた」という言葉と実際の操作効率のギャップや、そこに潜む原因などが、分析によって明らかになっていくのは楽しかった思い出です。

江原（UX）：
プロジェクトを通して、UIデザイナーの情報設計力・伝達力に助けられたことも印象深いですね。サービスのUIはもちろんですが、検証用のアンケート画面や最終報告書など、ユーザーやクライアントにとってのインターフェースとなる、すべてのアウトプットのクオリティに責任を持って伴走してくれたことにとても感謝しています。

UIデザイナーとUXデザイナー、互いがもう一方の働きに助けられた部分があるということですね。クライアントワークにおける、両者の理想の関係って、どういうものだと考えていますか？

江原（UX）：
お互いの専門領域にしっかりと時間と頭を使いながらも、考えていることを常に共有・同期していることで、それぞれが得意なことで視点を引き上げ合う関係でしょうか。面と向き合って言うと、なんか恥ずかしいですけど（笑）。

栃尾（UI）：
でも、本当にそうですよね。Goodpatchに所属しているUIデザイナーは、UXデザインの視点も持ちながらアウトプットを磨き込んでいくことに長けています。自分のやりたいことに集中できる、いい意味で任せられる背中合わせの関係は、モノづくりに打ち込みたい人にとって理想的な環境ではないでしょうか。

UIデザイナーとUXデザイナー、2人の専門家がタッグを組むことで、ユーザーのニーズも最終的な成果物も早く、そして高い精度で仕上げられる──Goodpatchならではのコラボレーションの一端が垣間見えたインタビューでした。

現在Goodpatchでは、他職種の専門家とコラボレーションしながら価値を創造するデザイナーを募集中です！ 日々ユーザーとクライアントに向き合うGoodpatchのデザインチームで、日常で長く愛されるプロダクトづくりに関わってみませんか？両職種の詳細は以下のリンクからどうぞ。

UIデザイナー

UXデザイナー

写真右　栃尾 行美 （とちお いくみ）／UIデザイナー：
神戸芸術工科大学ビジュアルデザイン学科卒業後、リクルートのデザイン制作部隊であるニジボックスに入社。新規事業開発を中心にキャンペーンサイトやブランド、ECサイト、さらに印刷媒体、ロゴデザイン、など幅広いデザインの制作を経験。Goodpatchにジョイン後はUIデザイナーとしてクライアントワークに従事。主にブランディングを軸にしながら、リニューアルプロジェクトから0-1の新規App開発、既存サービスの改善・グロースなど幅広い案件に携わる。

写真左　江原 美佳 （えはら みか）／UXデザイナー：
大学でサービスデザインを学んだのち、新卒で株式会社電通に入社。内閣府をはじめとしたパブリックセクターから国民に発信するコミュニケーションデザインのプロデュースに従事。その後、フリーランスとしてギルド型デザイナー組織でのアシスタントや事業会社での体験設計・UIデザイン業務を約1年間勤めたのち、Goodpatchに入社。大手化粧品会社のCXデザイン、アプリリニューアル、組織デザインと幅広い範囲のUXデザインとプロジェクトマネジメントを担当。

執筆　Keita Yamane （a.k.a JAKE）
京都工芸繊維大学 デザイン経営工学課程を卒業後、同大学 デザイン学専攻を修了。 2021年にUXデザイナーとしてGoodpatchに新卒で入社。好奇心旺盛な雑食系デザイナーです。