リリースまで1ヶ月！要件を固めずデザインから検討し「誰もが直感的に操作できる」UIを実現 ー 【キレイパスコネクト】クライアントインタビュー

「DX化」が叫ばれるなか、美容医療クリニックの業界では「それぞれの業務ツールがバラバラで連携ができない」「顧客データを経営に活かしきれない」などの悩みがありました。そんな課題を解決しようと、GMOくまポン株式会社では、美容クリニックの経営支援プラットフォーム「キレイパスコネクト」の開発を決めました。ただし、後発だったためスピード重視。そこで、美容医療チケット購入サイト「キレイパス」のブランド開発をサポートしたA.C.O.に、UIデザインをご依頼いただきました。

時間の無いなかイレギュラーなプロジェクト進行となったにも関わらず、約1ヶ月後には正式にサービスをリリース。クリニックの現場からは「見やすい」「使いやすい」などお褒めの言葉をいただき、直感的に活用いただいています。

今回は、GMOくまポン株式会社エンジニアの浅山さん、CSの藤川さん、そしてA.C.O.からは担当UIデザイナーの石井、牧の4名でプロジェクトを振り返りました。今回、ご依頼からリリースまで約1ヶ月という短期間で、どのようにプロジェクトを進めたのか、そして現場で使われるデザインにするための思考について、詳しくお聞きしました。

美容医療の現場の声から生まれた「キレイパスコネクト」

ーー最初に、GMOくまポン様の事業内容について教えてください。

浅山さん　当社は現在、クーポン購入サイト「くまポン」、美容医療チケット購入サイト「キレイパス」、そして美容クリニックの経営支援プラットフォーム「キレイパスコネクト」の3つの自社開発サービスを展開している企業です。2007年に設立し、現在15年目です。

ーーそもそも、貴社はなぜ美容医療業界に注力されていらっしゃるのでしょう？

浅山さん　当社は「くまポン」というクーポン購入サイトを運営していますが、その中で特に美容医療の分野が伸びていたんですね。そこに着目し、開発をスタートしたのが美容医療チケット購入サイト「キレイパス」でした。

「美容医療」って、ハードルが高いと思われがちです。でも、分かりやすい検索機能と、幅広い価格帯のチケットラインナップを取り揃えることによって、誰もが自分に合う施術を見つけやすくなるはず。そうすれば、消費者の方々にもっと気軽に美容医療を体験してもらえるのではないか、もっと身近なものにできるのではないかと考えました。こちらのブランド開発も、A.C.O.さんと一緒に進めました。

ーー「キレイパス」はtoCのサービスですが、今回toBである「キレイパスコネクト」を開発された背景について教えてください。

浅山さん　一つは「キレイパス」ユーザーの方から「チケットを購入した後に、そのまま予約までできれば嬉しい」という声を多くいただいたことにあります。

また、キレイパスの営業でクリニックの方々とお話するなかで、「業務効率化のためのITツールが、連携できておらず困っている」というお悩みが少なくないことも分かりました。例えば、「予約サービス」「電子カルテ」など、それぞれにツールはあります。ただ、横の連携ができていないため、二重に顧客情報を記入しなければならない、無駄が多いなど、さまざまな苦労があると。あと、お客様がどのような施術を受けたのかという貴重なデータも蓄積されているのに、そこを経営に活かしきれていない、という別のお悩みもあったりして……。

それで、さまざまなクリニックとお取引させていただいていて、かつ自社で開発組織がある当社なら、その課題解決のお役に立てるのではないかと考え「キレイパスコネクト」の開発が決まりました。顧客ニーズからできたサービスですね。

藤川さん　「キレイパスコネクト」は2021年11月にリリースしました。現在、予約、電子カルテ、会計まで一気通貫で管理できるサービスになっています。また、データの分析機能も搭載しているので、経営戦略の立案や施策の評価なども可能で、顧客ニーズをうまく形にできたと思っています。

要件を固めずデザインに進み、それを元にブラッシュアップ　アジャイルに進行

ーー「キレイパスコネクト」プロジェクトのスタートは、2021年10月でしたね。

浅山さん　はい。まず、2021年の9月頃に社内で「キレイパスコネクト」の開発が決まりました。ただ、その時点で他社さんも同様のサービスを開発されていて、いわゆる「後発」だったんですよね……。だから、とにかく「開発を急がねば」というスタートでした。それで「キレイパス」のブランド開発プロジェクトで信頼関係のあったA.C.O.さんに依頼することを決めました。すぐに「今月から始めたいです！」と連絡しましたよね（笑）

石井　はい。さすがに契約や社内調整もあるので「来月からにしてください！」と10月1日スタートにしていただきましたが（笑）

ーー実際に、プロジェクトはどのように進められたのでしょう？

石井　まず「Notion」上に、要件やタスク管理、議事録などすべての情報を集約し、同じ精度の情報がリアルタイムでメンバー全員に共有できるようにしました。そして、基本的にはこの4人で週に3回程度打ち合わせし、密に、スピード感をもって進めました。

一般的には、まず「要件定義書」を作り、ある程度情報を整理してからデザイン制作に入ります。今回はスピード重視だったこともあり、そこは飛ばして「形」から入っていきました。

ただし、UIを作りながら「UIクラス図」「UIフロー図」などを使って、情報整理や認識合わせはしっかり行いましたね。このステップをおざなりにしてしまうと、例えば似たような機能の画面が複数できたり、足りない機能が出てきたりしてしまいます。ここは、しっかり時間をかけた部分ですね。

ーー要件がはっきり決まらない段階でデザインするのは、大変だったのでは？

石井　うーん、そうですね……。でも、まったく画面のイメージが無い状態で、要件を網羅的に検討するのって限界があると思っていて。だから、もし間違っていたとしても、こちらである程度想像してデザインを作ってしまうことで、スピードも担保できましたし、いろんな気づきも生まれましたね。

牧　デザインがあるとディスカッションが進みやすく、意思の統一もスムーズでした。時間も限られていたので、「まずは作ってみる」という方法は有効だったと思います。

ーーちなみに、開発を進めていくなかで「いちばん苦労したところ」は、どこでしたか？

浅山さん　当社にとって「toB」のサービス開発は初めてだったので、最初は手探りでした。これまでやってきた「toC」だと、消費者の方にしてほしい「体験」から機能や仕様を考えられていたんです。でも、「toB」って答えは現場の方が持っていたりするので、その感覚を掴むまでが結構大変でしたね……。

石井　「こういう機能が欲しい」みたいな大きな要件はくまポンさんに出していただきましたが、細かい部分については、チームみんなで考えるという進め方でしたよね。「たぶんこうだろう」というレベルでまずはデザインを起こし、それをブラッシュアップして…の繰り返しで、結構アジャイルに進められたのかなと。

藤川さん　その上で、最後はテストクリニックに導入してヒアリングし、固めていくという流れでしたね。

ーー手探りのなか、そのアイデアはどこから得ていたのでしょう？

石井　振り返ってみると、やっぱりこれまでの経験則みたいな部分が大きいと思います。僕はUIデザイナーとしては5年くらいですが、これまでもtoBのデザインは経験していました。結局、toBのアプリケーションは事業領域が違っても、最終的なUIは基本的なパターンに収束していく部分が大半です。使いやすいアプリケーションを作るには、新しく見慣れない機能をいかに馴染みのあるUIに落とし込むかが重要になります。だから、要件をヒアリングして「これは、あの時のデザインと近いかも…」とイメージして作っていました。

確かに苦労した点でもあるんですが、やっぱりUIデザイナーとしては、複雑で難しいもの、そして新しいものをゼロから作り上げるプロセスはすごく面白かったですね！これまで作ったことのないものを、どうやって見やすく、使いやすいデザインに落とし込んでいくか。そのプロセスを楽しんでいました。

「これこれ！」思った以上のデザインに遭遇する感動が何度も

ーーGMOくまポン様にお聞きします。今回「A.C.O.と一緒に開発ができて良かった」と感じられた出来事はありましたか？

浅山さん　めっちゃ、ありますよ（笑）

石井さんも仰っていましたが、今回は事前に要件をドキュメント化せず「こういう課題があるので、こういうことがやりたい。おそらく、こういう解決策があればできるんだけど…」と口頭でフワッと投げかけることも少なくありませんでした。でも、石井さんから「こういうことですか？」とデザインが出てきたときに「そう！これこれ！」みたいな、自分が思った以上のものが返ってくる感動を何度も味わいましたね！

藤川さん　そうなんです。上げていただいたものを見て「これだったら、すぐにでもクリニックの方々に使っていただけるだろうな」と思えるものばかりでした。大幅な修正をお願いしたことは、一度も無かったです。

ーーそれは、なぜ実現できたのでしょう？

浅山さん　正直これは、個人の経験値やスキルによるのかなと思っています。石井さんは、すごくロジカルなんですよね。いつも相談ベースで投げかけていましたが、僕の話を「それって、要するにこういう事ですよね」と簡潔にまとめてくれて。「そうそう！まさにそれ！」みたいな（笑）こちら側からはすごく「雑」にお願いしているけれど、「綺麗」なアウトプットにして戻してくれました。

ーー石井さん、そして牧さんにも、同じ質問を投げかけたいと思います。

石井　いつも、最終的なユーザー目線で「本当に必要な機能は何なのか」いうことは考えていました。これまでも、クライアントが目の前にある課題を伝えてくださるけれど、「本当の課題は別にあった」というケースは少なくありませんでした。だから、言葉通りに受け取るのではなく「本当にそうなのか」と、いつも疑問を持つようにしているんです。

牧　本当にそうですね。私も、いただいた言葉を額面通りに受け取るのではなく「本当に必要か」という部分は、常に考えるようにしています。

ーーお話を聞いていると、本当に良いチームだったんだろうな、と感じます。

浅山さん　そう思います。藤川さんは直接クライアントと接して、そもそもプロダクトがまだ粗い段階からクライアントにしっかり説明し、何が足りないかヒアリングする。僕はその課題を聞いて「How」を考えるのが得意。そして石井さんはじめA.C.O.の皆さんは、そこから「これだ！」というデザインの解決策を出してくれる。それぞれのスキルが、すごく生きているチームだなと思いましたね。

あと、みんなで「考える」過程も面白かった。藤川さんからクライアントのニーズを聞いて「なんでそうなんだろう？」と、そこからディスカッションし、解像度を上げていく感じが、すごくやりやすかったですね。

石井　クライアントが入れたい機能ではなく、本当にユーザーが求めているものを作ろうとする姿勢がみんなにありました。仕事がスムーズに進む、良いチームだったと思います。

牧　密なコミュニケーションをとっていましたが、どんな時でも明るく和やかな雰囲気でしたよね。良いプロダクトを生み出すのに、最適なチームだったなと感じています。

現場の「Z世代」も直感的に使えるUIデザインに

ーー「キレイパスコネクト」は、2021年11月にリリースされています。実際に導入されているクリニック様からは、どのような評価なのでしょう？

藤川さん　やっぱり「デザイン」をすごく褒めていただけます！例えばクリニックの受付の方や接客の方など、実際にサービスを使われる方はZ世代、いわゆるデジタルネイティブ世代が多いんです。ただ、これまでのツールは、表現が難しいですが「昔のインターネット」というか……。世代的に馴染みの無いデザインが多かったようです。その点、キレイパスコネクトは「見やすい」「使いやすい」という声をいただいています。

また、クリニックは人材の入れ替わりも激しい業界なのですが、直感的に操作ができるので、レクチャーしたりマニュアルが無くてもすぐに慣れてくださるのもありがたいと思います。私が現場でご説明する前に、既に使ってくださっている…という事も少なくありません（笑）

石井　UIの部分を褒めていただけるなんて…素直に嬉しいですね！医療関係の現場で働く方は、例えば「スマホしか使ったことがない」などITリテラシーがさほど高く無い方もいらっしゃると想定しました。それで、医師から受付スタッフまで、誰もが使いやすいUIを念頭に制作しました。作りながら実際のクリニックに試験導入させていただき、意見を聞くこともできたので、現場に即したデザインになったのかなと思います。

ーー最後に「キレイパスコネクト」の今後のビジョンについて教えてください。

浅山さん　A.C.O.さんのお陰で、クリニックの業務を一気通貫に、スムーズに動かせるようになっています。今後は、それらの機能を使って蓄積されたデータを活用し「経営支援」という部分に注力していきたいと考えています。

藤川さん　データからしっかり経営分析をしてクリニックの収益を上げることももちろんですが、それが実現できるということは、必然的にクリニックを利用する患者さんの体験が良くなっているということだと思うんです。だから「キレイパスコネクト」はクリニック、患者さん双方の体験を向上させるシステム。それが、最終的に当社のミッション「インターネットを通じて人々の世界を笑顔で楽しいものに」に繋がってくるのではないか、と思っています。

• #デザイン
• #UX
• #情報設計（IA）
• #事例紹介