GMOくまポン

要件定義とUIデザインを同時並行　密にイメージを擦り合わせアジャイルに進行

今回のプロジェクトには、GMOくまポン社のエンジニアとCS、そしてA.C.O.のUIデザイナー2名がメインメンバーとして携わりました。メンバー全員が同じ精度の情報をリアルタイムに共有できるよう、クラウド型情報共有ツール「Notion」でタスクチケットや議事録、要件定義書を管理。さらに、週に3回打ち合わせの時間を設け、密な連携をはかりました。

また、一般的には「要件定義書」をしっかりと作成した上でデザインに入るところ、今回はスピード重視ということもあり、荒削りな課題が出てきた段階で、その情報を整理しながらデザイン制作も進めました。

クライアントとディスカッションを重ねながら、toBプロダクトの経験を元にデザインを起こし、そこから細かな部分を擦り合わせるという方法をとることで、アジャイルに、そしてスピード感を持って進めることができました。

デバイスや環境を選ばない「視認性」「使いやすさ」を意識したデザイン

GMOくまポン社が提供している美容医療チケット購入サイト「キレイパス」は、ブランド開発をA.C.O.が担当。今回の「キレイパスコネクト」は、そこから派生したtoBプロダクトです。そのため、「キレイパス」のカラーをベースとし、「明るくモダン」なイメージを壊さず、かつ「視認性」「使いやすさ」を意識した新たなカラーを設定しました。

キレイパスコネクトはクリニック業務を一気通貫で管理するツールのため、必要な機能は多岐にわたります。そのため、最初にフルカラーパレットを用意。文字のコントラスト比を高めるために、各色4段階の濃淡を設定しました。キレイパスコネクトで使用する色は、すべてこのパレット上から選択することをルール化することで、制作段階での迷いが無くなり、クライアントとの認識合わせにも役立ちました。

また、例えばモニターが古く発色の悪いPCや、操作する部屋が暗いなど、最適とは言えない環境で使用されることも想定。どんな環境でも、ある程度の視認性が確保できるデザインを目指しました。

情報を図解して整理し、機能のヌケモレやダブりを排除　「必要な機能」を厳選

今回は、OOUI（オブジェクト指向UI）の原則に則った情報設計を意識しました。機能を検討する場合、例えば「『予約できる』ようにしたい」など「動詞」から入ることが多くあります。しかし、具体的に「何を」操作したいのか、例えば「診察」「施術メニュー」など名詞の部分を整理できていない状態でスタートしてしまうと、機能のヌケモレやダブりが発生しがちです。そのため、画面のデザイン制作に入る前に「UIクラス図」「UIフロー図」などの作成に時間をかけました。そうすることで、例えば「これとこれは同じものを操作しようとしているから同じ画面にまとめよう」といった意思決定が容易になりました。

機能の検討段階では、実際に美容クリニックで働く医師も会議に参加。いま目の前にある機能が「本当にユーザーが求めているものなのか」ということを意識して、ディスカッションを重ねました。

ITリテラシーを問わず「誰もが使いやすいUI」を意識　直感的な操作性が実現

クリニックには、医師、カウンセラー、受付などさまざまな職種があり、ITリテラシーにもばらつきがあるため、その誰もが使いやすいUIを前提にデザインを進めました。

まず、普段使い慣れているスマートフォンアプリのように、直感的な操作性を重視。押しやすいボタンのデザイン、読みやすい文字の大きさ、そして伝わりやすいマイクロコピーにこだわりました。

また、ユーザーが極力スクロールせずに知りたい情報に辿り着けるよう、ファーストビューには本当に必要な情報だけを厳選して表示。シンプルな画面づくりに徹しました。業務アプリは1つの画面に対する情報密度が高くなりがちですが、その上で分かりやすいものにするため、例えばフォントサイズや余白などのディテールを1px単位で細かく調整。無駄なスペースを無くした上で、背景色の切り替えや罫線などを使って視認性を高めました。さらに、タグの色分けやアイコンなども効果的に活用し、感覚的に操作できるUIを目指しました。

多忙な業務のなかでツールを利用される方がアプリ内で迷子にならないよう、指定された操作が完了するまで他の画面に移らない状態にする「モーダル表示」。そして、一覧画面と、その詳細画面が同時に見られる「左右2分割表示」も採用。極力、画面遷移を減らしました。結果、「誰もが使いやすい」UIを実現することに成功しました。

テストクリニックへの導入やヒアリングで、現場が本当に求めているツールへ

今回のプロダクトでは「クリニック側」「患者側」双方の画面を制作しました。また、クリニックの現地調査で、カウンセラーの方々が業務ツールを利用される際、iPadを縦持ちしているケースが多いことが判明。一般的な業務アプリは、PCのみ対応であるものが多いなか、今回はデスクトップPCの大画面からiPadの縦持ちまで、さまざまな環境での使用を想定し、デザインを進めました。

また、当初クリニックが抱えていた課題「業務効率化ツールの横連携ができない」を解消するため、予約管理、電子カルテ、会計など必要な機能をすべて統合。他にも、美容クリニックならではの「コース契約」の消化数、支払い状況の管理。また、膨大な種類の施術メニュー、さらには施術料金の一部をいただく「内金」等の複雑なステータス処理など…丁寧なヒアリングやテスト導入を経て、現場のニーズに対応した機能を搭載することができました。