ARTICLES
2022.04.05
チーム開発で世界観を貫きとおすフォーデジットなりのデザインレビュー – あつまるデザナレ 2021 登壇レポート
2022年3月2日に開催されたオンラインセミナー「デザナレ Vol.11」に、フォーデジット取締役でUXコンサルタントの末成武大が登壇しました。
「デザナレ」は教科書には載っていないさまざまな企業の<デザインの実践知>をつなぐイベントです。今回のテーマは「うちのデザインレビューは“ここ”を見る」。フォーデジットからは「ahamo」(NTTドコモ)のプロジェクトを例に、フォーデジットなりのデザインレビュープロセスについてお話ししました。登壇の全文書き起こしを公開します。
末成 武大 - Takehiro SUENARI
サービスの未来像を描き、世界観に落とし込む
まずはフォーデジットという会社について簡単にご紹介させてください。フォーデジットはデザインの会社で、従業員は250名ほど。今年で21年目になり、日本のデザイン会社としては大きい部類に入るかなと思います。東京に本社オフィスがある他、大阪、タイのバンコク、ベトナムのホーチミンシティにオフィスを持っています。
僕たちはさまざまな企業や団体を外部からサポートする、という立ち位置の会社です。提供しているのはデジタルデザイン。サービスをともに作り、作った後にも一緒に育てていくという役割を担います。
さて早速ですが、実際にフォーデジットがプロジェクトの中でどのようにデザインレビューを行っているのか。例として、NTTドコモさんが昨年リリースした「ahamo」というプロジェクトについてお話しします。
「ahamo」のプロジェクトには、初期段階から関わらせていただきました。僕たちが参画したのは、新料金プランであることと、Z世代がターゲットであることだけが決まっているような段階。ターゲットユーザーにとってどんなプロダクトが使いやすいのか、何が必要なのかを見つけ出していくところから、一緒に走らせていただいています。
最初は、NTTドコモさんによるリサーチを元に定めたターゲット像に対し、プロジェクトメンバーで理解を深めるためのアンケート調査から始まりました。実際のターゲット像に近しいユーザーにインタビューをしながら、ワークショップ形式でペルソナ像を描いていきます。ペルソナ像の普段の行動や日常の困り事を抽出するためのカスタマージャーニーマップを検討し、課題を解決するためのアイデアを創出していきます。
そこから、サービスが目指すべきユーザー体験を描いて、それが本当にターゲットユーザーに受容性があるものなのか調査をしながら、具体的な画面デザインに落とし込んでいく。その画面をユーザーに触れてもらいながらさらにデザインを磨き上げ、開発実装、リリース…というのが制作プロセスの大きな流れです。
今回のテーマは「デザインレビュー」ということなので。サービスが目指すべきユーザー体験を描いて、MVP(Minimum Viable Product)ができたのちに、サービスのデザインをどのように検討していったのか。「ahamo」という新しいプロダクトをデザインするときに、それがどのような変遷で磨き込まれていったのかをご紹介します。
前提として、サービスの未来像を描いた後に、それらをどのように世界観として表現するのかを検討していきます。つまり、まずサービスのあるべき姿やユーザー体験を描き、こういう体験や価値をユーザーに届けたい、という点でクライアントと制作チームとで合意がなされている。そしてそれがユーザーからも良好なフィードバックをもらっている、という状態です。その上で、ユーザーに支持されている価値観をキーワードとして抽出し、具体的にビジュアルやUIなどのデザインに落とし込んでいく、というプロセスになっています。
機能だけじゃない、ユーザーの感情に寄り添うデザイン
具体的なデザインに落とし込んでいくにあたり、フォーデジットはユーザーを理解することを大事にしています。今回は「ahamo」のメインターゲットであるZ世代の全国数千人に対して、日常的にどういうものに触れているのか、それらがどういう感情を呼び起こすのか、といったリサーチをしています。ファッションやUI、広告のデザインなどを見ていただいた上で、何を見た時にどんな反応があるのかを調査し、その結果を元に、僕らが届けたいものを、どう届けられるのか検討していきます。
最終的な「ahamo」のアウトプットでは波のモチーフが派手に動いていたりしますが、初期デザインコンセプトではいろいろな案がありました。大きく分けると2方向です。ターゲットであるZ世代にはシンプルなものが好まれる、ということがリサーチからわかっていたので、「ahamo」の価値観をシンプルに具現化したパターンが一つ。そしてもう一つは、Z世代だけでなくもっと様々なユーザーへと広がっていくことを踏まえて、多様さを楽しめるような、カラフルかつ洗練されたデザインを目指したパターンです。
UIがどうあるべきか考える時、機能的な価値を満たしていることはもちろん絶対条件ですが、加えて僕たちは情緒的な価値、ユーザーのどういう感情に寄り添えるのかを大切にしています。
デザイナーと一緒にフィジビリティスタディを繰り返し、たくさんの案が出ました。いろんな観点でいろんな意見を出し合いながらディスカッションを繰り返し、悩んで悩んで、産みの苦しみを存分に味わい(笑)。その結果、今のデザインの原型が生まれてきました。
そこから更にポップさを出すには?ブランドカラーをふんだんに使うとどうか?流動的なものを表現するには?などなど、磨き上げを検討していく中で、ある時「波」のインタラクションって面白いよねとチームで盛り上がりました。表現の幅も出せそうだし、機能的な要件も満たせそう。動きも面白くできそうだし、世界観もユーザーに受け入れられるんじゃないかと、「波」のモチーフに帰結していきました。
その後はユーザー調査で最も支持されるものを選んでいきました。スクエアで構成されたシャープなものも候補に残っていましたが、最終的に支持されたのが今の「波」のデザインのものです。ここでやっとコンセプトデザインの段階なので、ここからさらに細部を磨き込んで、現在の状態に近づいていきます。
イラスト、キャラクター、モーション…… 細部まで作り込む
ここまでのデザイン制作フローでは、アートディレクターやデザイナーだけではなく、コンサルティングフェーズから関わりサービスの世界観やユーザーストーリーを描いてきた私のようなコンサルタントや、UXデザイナー、リサーチャー、それとここから先一緒にものづくりをするエンジニア、外部SIerなど、あらゆるプロジェクトメンバーの声を聞きながら磨き込まれていきます。
またUIデザインだけではなく、イラストも同じ世界観の中で構築する必要があります。リサーチの結果、Z世代の方は画面をさくさく操作して進むため、文字をたくさん出しても読んでもらいにくいことがわかっていました。なのでその画面で何が起きているのかをパッと理解していただくために、「ahamo」ではイラストをたくさん使っています。不備、完了、感謝、規約…などそれぞれの場面にキャラクターを作りました。「謝る」キャラクターは特にみんなのお気に入り。ぬいぐるみも作っちゃいました(笑)。
こうしてキャラクターやイラストも含めて世界観を作っていきました。イラストもUIもインタラクションを多分に盛り込んでいて、今こんな感じで動いてますよ〜とか、設定中ですよ〜みたいな状況が、一目でわかることを大事にしています。
もちろんそれが全体の世界観、トーンにマッチするように、細部のイラスト・インタラクションとベースのデザイン・UIとを行き来しながら全体感を作っていきます。イラストが実際にどう動くのか、表示された瞬間にどういうインタラクションがあるのか。動画などで何度もインタラクションを確認しながら進めます。
このイラストやキャラクターは、真面目なクライアントさんなんかからすると、ふざけていると思われることもあるのですが(笑)。リサーチの中で、文字を読まなくても直感的に伝わることがすごく大事だということはわかっていたので、かなりこだわって作っています。実際にどのようなビジュアルであれば伝わるか、左脳的にもチェックしながら作り上げていきました。
大規模な開発組織で、世界観を統制するデザインレビュー
一連のデザイン制作の流れの中で、デザインレビューをどう行うかですが、基本的には関係する人たち全員で見ています。プロトタイプや、実際に動くもの、コンポーネント化したものをみんなで見ながら構築していく、というやり方です。「これはちょっと違うんじゃない?」「マージンが…」とか「文字のルールが…」とか、全員でディスカッションしながら見ていきます。
デザインレビューのやり方については、走りながら作っていく部分も多分にあるので、だんだんとルールが明示化されていきました。「ahamo」のプロジェクトは現在運用改善のフェーズに入っていますが、その中で徐々にやりかたが確立されてきたと思います。
特徴的なのは、フォーデジット内でのデザイン設計時のレビューはもちろん、構築された後のレビューにもフォーデジットが入るという、二段階の構成になっていることです。最初のレビューは、デザインツールで作成したものをフォーデジット内のデザイナーとUXコンサルタント、エンジニア等で確認する、いわゆる普通のデザインレビュー。その後、外部システムなども含めて構築されたものを、改めてフォーデジットが念入りにレビューさせていただくという体制を作りました。設計したデザインが再現されているか、世界観が崩れていないかはもちろん、マージンがずれていないかなど、細かくチェックしていきます。
これはプロジェクトの規模が大きく新規デザインを大量に構築していたこと、また数百名を超えるプロジェクトメンバーが複数のチームに分かれて制作してしていたことで、世界観が崩れないよう、デザインを統制する機能が必要だったからです。
クライアントのプロダクトオーナーと、SIerのテック担当、フォーデジットのアートディレクター、各領域のUXデザイナーなどでレビューのための組織をつくり、これをDesign Head Quater(DHQ)と名付けました。構築後のチェックは「機能するか」「仕様の誤りがないか」などに終始してしまいがちなところを、DHQは「世界観が崩れていないか」の視点も合わせて確認する。この規模のプロジェクトでこれができたのは、画期的だったんじゃないかと自負しています。
NTTドコモ「ahamo」開発担当と語る、組織横断のサービスデザインプロセス
最後にフォーデジットのカルチャーの話をすると、デザインレビュー会というものが厳格に定義されているわけではありません。気になったら集まって話す、というのが頻繁に行われています。デザイナー同士で隣にいる人に「どう思います?」と聞いてみたり。
コンポーネントのルールやデザインガイドラインはもちろん作りますが、どんなに厳格なルールを作っても判断が難しいことはあります。ルールが実際にどう使われるべきなのか判断に迷う瞬間には、ディスカッションして決めたり、状況に合わせて判断をゆだねたりすることを大事にしています。厳密にはマージンのルールなんかまで細かく決めてはいますが、そこに縛られすぎると面白みがかけてくるという実態もあるので(笑)。
プロダクトが育っていくなかで、ユーザーに世界観が届くことを第一義にとらえ、柔軟に判断していく。これが僕たちのデザインレビューです。