こんにちは、Commerce Designチームです。私たちのチームはオンライン診療サービス「LINEドクター」の業務を担当しています。今回はUIを担当した花岡と、イラストを担当した柳井で、「LINEドクター」の新機能のデザインについてご紹介したいと思います。

「LINEドクター」とは？

「LINEドクター」とは、LINEアプリ上で診療の予約、無料ビデオ通話での診療、決済を完結することができるサービスです。LINEユーザーであれば、新たにアプリをダウンロードすることなく、体調不良時にオンライン*で医師とつながり診療を受けることが可能です。

*医師の判断により、対面診療が必要な場合がございます。

2022年12月より「お薬の配送」が可能に！

リリース当初より「時間の有効利用ができて、すごく便利」「診療後から会計までの待ち時間がなくて楽」などというご意見をいただいていた一方で、「いつも飲んでる薬が欲しいけど、感染対策のため病院に行きたくない」「薬の配送が可能な薬局との連携をしてほしい」など、薬の配送に対するご要望をいただいたという背景から、今回の新機能リリースにより、お薬の配送サービスを利用することが可能になりました。

新たに誕生したホーム画面から欲しい薬などを設定し、患者・支払い情報などの登録をすると予約が完了し、医師と薬剤師とのオンライン通話を経て、最短で当日中に薬を自宅に配送*することができます。

*即日配送のエリアにお住いの方、かつ受付時間帯にご利用いただいた方のみ、配送料1,050円にて対応が可能となります。即日配送については、診療時間や配送距離によって当日受け取りができない場合もございます。

デザインコンセプト

今までは20~40代の方を中心に利用していただいていましたが、新型コロナウィルス感染症の拡大を機に、以前にも増して幅広い年齢層の方に使っていただくことが増えたため、「シンプルで迷わない」デザインになることを意識しました。また医療サービスというとどうしても堅苦しいイメージがあるので、「親しみやすい」デザインになることも心掛けています。

デザイン的にこだわったポイント

シンプルで迷わず、親しみやすいUI

ホーム画面は、設定に必要な情報を緑のカードに全て配置し、「何を選択したら次に進めるのか？」がパッと見で分かるようなデザインにしました。

また、はじめに登場する女性のイラストは、実際に病院に足を運んだ時と同じ状況を想起してもらい、親しみやすさを感じてもらいたいという思いを込めて、病院の受付のスタッフをモチーフにしています。「ボタンが沢山並んでて、まずはじめにどこを押したらいいかわからない」という意見が企画チームからでたこともあり、このスタッフが「薬を選択してね！」と語りかけてくれているようなレイアウトにしました。

薬を選択するモーダル画面でも、症状別のイラストと組み合わせることで全体的な雰囲気を柔らかくしています。また花粉症などの季節性の強い薬は、流行の時期に合わせて上のほうに表示させるなど、選択しやすさも意識しています。

患者情報・保険証などを登録する予約フローは長くて煩雑という印象を与えたくなかったため、上部にステップバーを配置したほか、各ステップごとのタイトルやサブテキストの見せ方を統一し、画面を行き来しても違和感を感じさせないような工夫をしました。また、予約が終わるまで「スタッフが連れ添ってくれている」というイメージをして、ここでも受付のスタッフを登場させています。

問診票は入力項目が最も多い画面なので、必須項目は初めから選択された状態にし、なるべくタップ数が少なくて済むような配慮をしました。

オンライン診療はまだ一般化されていないサービスのため、予約後もユーザーに「次になにをすればいいのか」という負担を与えないよう、予約直前には今後の流れが細かく把握できる画面を用意しました。診療する医師と薬剤師の確認画面も兼ねているのでレイアウトのバランスが難しかったですが、ステップにはイラストを入れてボリュームを出しつつ、医師や薬剤師の情報も読み飛ばされないようフォントサイズ等に気をつけてデザインを細かく調整していきました。

何度も作り直した薬ごとのイラスト

今回、HOME画面で選択する薬のイラストを作りました。それぞれ工夫を凝らし何パターンも作っては作り直しを繰り返して今の形でGOが出ました。結果的にオリジナリティある特徴的なイラストになったと思います。

中でも苦労したのはAGAです。当初は頭皮に薬を塗布するイラストでしたが、飲み薬の治療もあるため違和感があると言う話が出て、「若者が髪を触って気にしている」ようにフィードバックをもらいました。身近に感じてもらえるイラストになるように調整を重ねました。

FIXするまで道のりは長く、アイディアで煮詰まっていると「おしゃれな男性誌にいそうな感じのイメージ」とか「カッコつけすぎてるから、自然な感じとか」イメージ画像を色々提示してもらい非常に助かりました。やりとりを重ねて、マネージャーと納得のいくまで、あーでもないこーでもないとテストを繰り返したのは記憶に新しいです。

最後に沢山作った、没案（苦労）をご覧ください。

細部までこだわったアニメーション

アニメーションのアイディアはデザインテストする当初からありました。そのため、動かす前提の構図を念頭にイメージを考えました。「各疾患特有の特徴」を強調し、イラストだけで大体どんな症状か分かるようにしました。全体を通して気をつけたのは「激しすぎず、さりげない動き」を目指しました。

ありがたいことに、モーショングラフィックスを得意としている韓国のデザイナーが別のチームにいるので、その方にイメージを伝えて作って頂きました。アニメーションの動きを韓国語にして、同じチームの韓国語話者のメンバーに間違っていないかチェックをしてもらったりと、コミュニケーション面でも苦労しました。私が動きのイメージをまとめ、チームメンバー全員でディスカッションをして、お互いの想い描く動きを細かく決めました。出来上がったイラストを実際に見て、修正を何度かしてもらいイメージ通りのもので嬉しかったです。

医療サービスならではの苦労

医療サービスでは法務からの依頼でどうしても記載する必要のある長い注釈があり、文言を削って良いぎりぎりのラインを企画チームと擦り合わせるのが大変でした。注釈にはユーザーを不安にさせないため、ミスや誤診、トラブルを防ぐためなど様々な理由があるため、そこを理解し寄り添った上で「シンプルで親しみやすい」デザインを模索する必要がありました。ホーム画面に10行分ほどの注釈をいれたいという依頼があったとき全員がざわざわしていましたが、最低限入れないといけない文言を粘り強く探りながら、最終的にはUIを阻害しないような見せ方に辿り着くことができました。苦労を経た甲斐あって、注釈用のフォントサイズやカラー、位置もデザインルール化することができたので、経験して良かったなと思います。

リリース後の評判

リリースして約2ヶ月ほど経ちましたが、すでに「自宅で全て完結できるため、同じ薬が欲しい人にはとても便利だと思った」や、「花粉症のために病院に行くのが面倒だったので、それがなくなっただけでとても快適」など、温かいご意見やご感想をたくさんいただいています。今後もより一層、安心・快適にサービスを利用いただけるようなサービスづくりを目指していきたいと思います。　

プロジェクトを振り返って

大きなプロジェクトだったので、複数人のデザイナーで（特にホーム画面は！）何案もデザインを検討し、企画と擦り合わせては再検討し、を繰り返しました。そのため、他のデザイナー方の考え方やデザインでのこだわり・アイディアを間近で感じることができてとても勉強になりました。その甲斐あって最終的にはシンプルで使いやすいデザインにすることができ、自信を持って提供できるようなサービスになって大変嬉しく思います。（花岡）

今回はイラストを主軸に携わらせて頂きましたが、自分の作り出したイラストで「LINEドクター」に携われたのは凄く嬉しかったです。絵を書く事が趣味の一つなので、そのスキルが役に立ったと思います。いく度となく作り直して煮詰まっても最後まで諦めずに作り込んで良かったと思いました。（柳井）

こちらもあわせてご覧ください