※2023年9月5日に開催したオンラインイベント「プロデザ BY RECRUIT VOL.14　　デザイナー×PdM　デザインが魅力を高める『ゼクシィ』新規プロダクトのコラボ事例」から内容の一部を抜粋・編集しています。

【登壇者PROFILE】

・大辻満理弥

株式会社リクルート プロダクトデザイン室（デザインディレクター）

武蔵野美術大学油絵学科を卒業後、新卒でゲーム会社へ入社。その後、Webやアプリの制作会社を経て、2021年リクルートに入社。『ゼクシィオンライン招待状』など新規案件の開発に携わる。現在は『ゼクシィ』のデザインディレクターを担当している。

・牛島菜々

株式会社リクルート プロダクトデザイン室（プロダクトマネージャー）

2019年 神戸大学国際文化学部卒業後、リクルートに新卒入社。中古車メディア『カーセンサーnet』のプロダクト改善を担当後、結婚領域の新規事業『ゼクシィオンライン招待状』の立ち上げに参画。現在はSaaS領域にて新機能の企画・検討を担当している。

カップル・ゲスト・式場の負担を減らす新サービス『ゼクシィオンライン招待状』

今回シェアされたのは、2023年6月から本格提供がスタートした新規サービス『ゼクシィオンライン招待状』における、デザイナーとPdMのコラボレーション事例。

デザインディレクターの大辻満理弥とPdMの牛島菜々が、お互いの強みを最大化し、よりよいプロダクトづくりに活かすために行った、3つの「コラボエピソード」が語られた 。

【プロダクト紹介】

・『ゼクシィオンライン招待状』とは？

オンライン招待状を手軽に作成・送信可能な「WEB招待状」。2つ目がゲストからの出欠回答後、自動でゲストリストを作成可能な「ゲスト情報管理」。3つ目がオンラインでご祝儀を振り込める「オンラインご祝儀決済」。 招待から出欠管理、ご祝儀管理までをWEBで完結でき、結婚式の準備におけるカップル・ゲスト・会場それぞれの負担を軽減できる。

大辻：便利さを追求することはもちろんですが、「結婚式の招待状のワクワク感をアップデートする」ことも、このサービスの大きなテーマでした。おしゃれなデザインを豊富に用意したり、自分たちの写真も載せられるようになっていたり、招待状としての特別感が出るように工夫しています。

 プロジェクトの不確実性の高さをふまえ「スクラム開発」を採用

 牛島：本題の「コラボエピソード」をご紹介する前に、前提の情報として今回のプロジェクトの背景や開発方式、チーム体制について紹介します。

まず、本プロジェクトは非常に不確実性が高いものでした。背景としては、そもそも「結婚式準備支援」のためのプロダクト自体、リクルートとして初のジャンルで、そもそも社内にリソースがありませんでした。また、プロダクトづくりに際しては解決・整理すべき論点も非常に多かった。さらに、言い方は悪いですが、チームも寄せ集めのような形でスタートしたところがありました。私はこのプロジェクトのために他部署から異動し、デザイナーの大辻もリクルートに転職したばかりで、今回が初めてのプロジェクト。メンバー間の知識量もプロセスも、まったく揃っていない状態だったんです。

そこで、不確実性が高い開発にも強いとされる「スクラム開発」を採用することになりました。

 牛島：スクラムチームの構成としては、チーフプロダクトオーナー（PdM）をトップに「カップル（結婚式を挙げる2人）」＆「ゲスト（招待状を受け取る人）」のチーム、「クライアント側（結婚式場）」の2チームに分かれています。各チームを束ねるプロダクトオーナーとしてPdMが立ち、カップル/ゲスト側のチームのプロダクトオーナーを私が担当。デザインマネジメントを担う大辻には、両方のチームに属してもらいました。

前置きが長くなりましたが、ここからは私たちが行った、デザイナーとPdMのコラボエピソードを3つ紹介したいと思います。

Episode1／ビジュアルイメージを先行して作成。直感的なUIUXを実現

 大辻：1つ目のエピソードは、題して「ビジュアルイメージを先行して作成。直感的なUIUXを実現」です。リクルートの案件、特にエンハウス系のプロジェクトの場合、通常はPdMが要件を練った上でワイヤーフレームを完成させ、そのワイヤーフレームをもとにデザインをつくります。つまり、PdM→デザイナーという、一方通行の流れになっていることが多いです。

しかし、今回はそうした通常のやり方ではなく、デザイナーの私が先行してプロダクトの画面イメージをつくりました。そのビジュアルをもとに、牛島さんにPdM観点からの要望や意見、アドバイスをもらい 、それをふまえてブラッシュアップさせていくという方法ですね。

大辻：なぜこうした方法を選んだかというと、PdMの牛島さんがワイヤーフレームの作成の工程で壁にぶつかっていたからです。

結婚式準備はほとんどのカスタマーにとって初の体験で、タスクが分からないから「直感的なUI」が望ましい。でも、社内にも社外にも、参考にできそうな事例はありません。そのなかで大量のワイヤーフレームを作成しなければならず、一つひとつを深く考える余裕はない。とはいえ、PdMがワイヤーフレームを用意しないと次の工程が進まないということで、非常に焦っていたようです。

 そこで、PdMほど細かな諸要件に縛られず、自由にものを考えられるデザイナーが、まずは発散的に画面をつくってしまうのがいいのではないかと考えました。

大辻：トップページと派生するいくつかのページの画面を仮作成し、色々な情報の組み方、見せ方、前後の画面との関係性などを模索した上でチームに提案。チームのメンバー間で「理想の画面」のイメージを共有できるようになったところで、改めて牛島さんが詳細な要件や情報設計を落とし込んだワイヤーフレームを作成してくれました。それをもとに、私のほうで再びデザインの細部を詰めていったという流れですね。結果的に、直感的に操作できるような、体験に沿ったトップ画面を作成できたのではないかと思います。

大辻：このやり方がうまくいったので、トップページ以外についても踏襲することにしました。一方通行型ではなく、相互にキャッチボールしながら一緒に考えていくスタイルですね。私のほうで仮デザインを作成するにあたっては、要件の詳細を知り尽くした牛島さんが「ここは要件として変更できないけど、ここは自由に考えてもらってOKです」といった具合に分かりやすく情報を伝えてくれていたので、とてもやりやすかったです。

大辻：こうした動きができた背景には、リクルートならではの環境もあると思います。デザイナーが上流の情報をインプットできる機会が多く、詳細なワイヤーフレームがなくてもPdMがつくりたいもののイメージを掴みやすいんです。

たとえば、スクラムチームのメンバーが集まる定例会議ではすべての情報を共有した上での議論が行われ、常に情報の透明性が高い状態でした。他にも、競合情報について知る機会が多かったり、デザイナーもユーザー調査に同席して、ユーザーのことを知る機会を豊富に得られたりしたことも、仮デザインを考える際の大きな手がかりになりましたね。

Episode2／改善を重ねるプロトタイピング検証

牛島：2つ目のエピソードは、題して「改善を重ねるプロトタイピング検証」です。

『ゼクシィオンライン招待状』をリリースするにあたっては、最終的に提供しようとしているプロダクトの仕様でユーザビリティ調査を行うことが決まっていました。

 牛島：ただ、ユーザビリティ調査でよくある失敗として「ここでユーザーがつまずくのは分かったけど、どう改善したら良いか分からない……」なんて状態に陥ることがあると思います。リリース直前の最後の検証機会で、そうした事態は避けたかった。

そこで考えたのが、「改善を重ねるプロトタイピング検証」です。

牛島：図のように、PdMとデザイナーが連携しながら「検証」→「議論」→「改善」のループを高速で繰り返しました。まずはユーザビリティ調査で検証を行い、その検証の結果を踏まえて課題やソリューションをリアルタイムで議論。それを受けて修正・アップデートしたプロトタイプを、また被験者を変えてユーザビリティ調査に回すという流れですね。これを行った結果、課題のみならず、確実な打ち手まで発見することができました。

 牛島：このやり方が成功したポイントは2つあります。まずは「プロトタイプ品質の担保」。そして「コミュニケーション設計」です。

 牛島：1つ目の「プロトタイプ品質の担保」ですが、プロトタイプを入念に確認し、細かいバグを解消し切ることを徹底していました。2つ目の「コミュニケーション設計」については、チャットでリアルタイムに議論できる場所を用意していました。チャット形式にしたのは、口頭では言いづらいことも気軽に書き込めますし、goodボタンなどでメンバーの「共感」も可視化されやすいからです。

牛島：実際、PdMやデザイナーだけでなく、プロジェクトに関わるいろいろな職種の人が意見をくれて、アイデアが広がりました。また、goodボタンによって、メンバーも同じ課題感を持っていることや、そのアイデアを良いと思っていることが分かり、アイデアを採択する際の判断に役立ちました。

Episode3／「招待状デザインの大量リサーチ！　スムーズに反映」

 牛島：3つ目のエピソードは、題して「招待状デザインの大量リサーチ！　スムーズに反映」です。今回はオンライン招待状のデザインもイチから制作しましたが、結婚式の招待状って「これ」という明快な答えがないんです。人によって好みもバラバラですし、自分たちの感覚だけで決めてしまうのはリスキーです。そこで、ここでも様々なリサーチを実施することにしました。

ただ、大量にリサーチをかけると、そのぶんコストも嵩みます。そこで、他チームで行なっている調査に相乗りさせてもらったり、社内の人にリサーチを行ったりして、なるべくコストをかけずに実現しました。

牛島：はじめに行ったのは「制作ラインナップ」を決めるための検証です。

牛島：まずは定量調査を行い「ナチュラル」「ゴージャス」「カジュアル」などのキーワードからどのデザインテイストの人気が高いのか把握し、方針を検討するところから始めました。ちなみに、調査結果としては「ナチュラル」「シンプル」「カジュアル」といったテイストの人気が高く、これらを意識して招待状をつくる方針を立てました。

ただ、デザイナー側からは「ナチュラルといっても幅が広く、もう少し具体的にどんな雰囲気のものが好まれるのか知りたい」という意見があり、キーワードの解像度を上げるために社内でアンケート調査を実施。このアンケート結果から「好まれるデザイン」のために重要なニュアンスを解釈し、制作に活かしました。

 牛島：このように調査を活用し、「制作ラインナップ」を決める検証から入念に行ったことで、より多くの人が好むデザインを用意することができました。ちなみに、この時につくった9つの招待状デザインは、その後に追加したデザインと比較しても人気が高いです。それはやはり、「人気のものを把握してからつくる」というプロセスを踏んだ結果だと思います。

牛島：続いて、「招待状デザインの評価に影響する要素の検証」を行いました。

 牛島：はじめに実施したのは、Web招待状利用者への定性調査です。「デザインの選定理由」をヒアリングした結果、様々なことが分かってきました。

 牛島：例えば、年代で好みが分かれる傾向があったり、結婚式を開催する「季節のイメージ」から選んでいたり、目上のゲストの方に配慮して控えめなデザインを選ぶ人がいたり。これらの調査結果から評価観点を抽出し、つくるものに偏りが出ないよう、対応する優先度を調整しました。

牛島：また、招待状デザインの評価に重要な影響を及ぼす「写真」に対する調査も行ったところ、写真の好みはカップルの性格やタイプ、考え方によって大きく異なることも分かってきました。

 牛島：例えば「素敵な新郎新婦が映った写真」を好むのは、“自分たちのため”に結婚式を行いたいカップルと考えることができます。一生に一度の結婚式で理想を叶えたいと考えるタイプと想定できます。

一方、「人が映っていない写真」「人が映っていても顔が出ていない写真」を好むのは、“家族や友人のため”に結婚式を行いたいカップルと考えることができます。あまり目立つのが好きではないというようなタイプと想定できます。

こうした調査結果をふまえ、各招待状をどのタイプ向けなのか整理して、一部の写真のアップデートを行いました。

 牛島：また、これ以外にも「目上の人に対しても適切なデザインになっているか」の調査なども行い、検証結果をデザインに反映させていきました。

このように、あらゆる角度から大量の調査を行い、そこで得たインサイトをスピーディーにプロダクトへ反映していく。PdMとデザイナーで、これをひたすら繰り返していったんです。これができたのは、スクラム開発の土台があったからではないかと思います。

 牛島：最後に、今回お話ししたことのまとめです。

今回の3つのエピソードに共通しているのは、PdMとデザイナーがお互いの強みを活かし、より良いプロダクトづくりにつなげられたこと。デザイナーは「具現化」に強く、PdMは「リサーチ設計」や「社内調整」に強い。それぞれの武器をうまく発揮できるよう工夫した結果、「直感的なUIUXの設計」「精度の高い検証の実現」「より良いデザイン創出」といった、多くの価値・成果に結び付けられたのだと思います。

私たちからの発表は以上です。ご清聴いただき、ありがとうございました。

視聴者からの質疑応答

 Q.ユーザーテストでの仮説検証について質問があります。ユーザーの動き（回答）からインサイトを得る方法や、質問設計のコツなどがございましたら伺いたいです。

 牛島：ユーザー調査からインサイトを得る方法ですが、やはり実際のプロダクトを見てもらい、触ってもらうことだと思います。そうすると、ユーザーがそのプロダクトを使う時の行動が分かり、リアルな評価を得ることができます。実際、年賀状のデザインについてユーザー調査を行った時も、たくさんのデザインパターンを作り、それを見てもらって意見を聞いていました。工数はかかりますが、インサイトを引き出すためには最も有効な手段だと思います。

Q.Episode1で「デザイナーが上流の情報をインプットできる機会が多かったため、作りたいもののイメージが分かって仮デザインを先行することができた」とのお話がありました。例えば、その時点でPdMからはどのような粒度の情報を伝えられていましたか？

大辻：PdMが持っている、ほぼ全ての情報が共有されていたと思います。デザイナーにはほとんど関係がないような裏側の話や、式場の方との細かなやりとり、表面的には見えない動きの話などもミーティングでは色々と飛び交っていましたね。もちろん、最初は理解できないことも多いのですが、ミーティングに参加して耳を傾けているうちに理解が進み、プロジェクトの背景や細部の要件も含めた全体像が、段々と見えてくるようになりました。

Q.弊社（※視聴者が勤める会社）では基本的に、プロジェクトマネージャーがワイヤーフレームを作成してから、デザイナーに依頼する流れでやっています。今回の『ゼクシィオンライン招待状』のように、早い段階でデザイナーに入ってもらい、インタビューにも同席してもらう方法は確かに理想的ですが、デザイナー側からすると負荷がかかります。デザイナーに快く協力してもらうために、何か工夫された点はありますか？

牛島：折にふれて、PdM側から気配りやフォローを行う必要があると思います。例えば、先ほど大辻が言ったように、プロジェクト開始直後はPdMとデザイナーの間で前提の情報量や知識量に差があって、デザイナーが議論についていけなくなることがありました。そこをしっかりフォローし、ミーティングのなかで飛び交う言葉や会話について、改めて時間をつくるなどして丁寧に伝えるようなことは心がけていましたね。

大辻：特に、私の場合はリクルートに転職したばかりだったこともあって、社内でよく使われる言葉についても知らないことが多い状態でした。それでも、PdMの牛島との距離感が近く、気軽になんでも聞ける状況だったので、早い段階で議論についていけるようになりましたね。ミーティングだけでなくユーザー調査などにデザイナーが参加するのも、確かに負荷はかかると思いますが、調査を経て状況が大きく変わることも多く、その情報をキャッチアップしていないと変化についていけなくなりますので、大事なことだと思います。

牛島：もちろん、全てのミーティングやユーザー調査に同席してもらうのは負担が大きいので、場合によってはデザイナー抜きで議論して、噛み砕いた内容や結論だけを伝える場合もありました。そこはバランスの調整が必要ですが、デザイナーが背景の知識を理解したうえでものをつくるのは、やはりポジティブに働くことが多いと思いますので、基本的にはPdMが持つ情報は全て伝えるようにしていましたね。