A.C.O.のカルチャーとノウハウを伝えるオウンドメディア

気に入ったらいいね!してね

A.C.O.のカルチャーとノウハウを伝えるオウンドメディア

10年続くサービス初のリニューアルにデザインが必要な理由ーAskDoctorsの事例

VOICE

10年続くサービス初のリニューアルにデザインが必要な理由ーAskDoctorsの事例
KOYAMAKAZ

KOYAMAKAZ

KOYAMAKAZ

KOYAMAKAZ

 

デザインを支える、土台。「コンセプト」と「ガイドライン」

日本最大級の医療従事者専門サイト『m3.com』など医療系Webサービスを展開するエムスリー株式会社。同社が手がける、医師に相談できるQ&Aサービス『AskDoctors』は、2005年のリリースから十数年に渡り、同社を支える事業の1つとして進歩してきました。

A.C.O.では、エムスリーが2016年に実施したAskDoctorsのデザインリニューアルにおいて、「デザインコンセプト」「デザインガイドライン」「サービスロゴ」の策定を担当。A.C.O.が制作した上記納品物を元に、エムスリー社内のデザイナーが実際のデザインを作成、開発を経て10月より順次リニューアルされました。

今回、本リニューアルプロジェクトを担当された、AskDoctorsのサービスプランナー・江波拓郎さんと、AskDoctorsのデザイナー・堤翔さんをお招きし、A.C.O.で本プロジェクトを担当した満尾、James、小山を加えた5名でプロジェクトの振り返りを実施。

コンペからスタートしたプロジェクトから、納品したコンセプトやガイドラインが現場でどのように使われているかなどをお伺いしました。

アスクドクターのリニューアル前のUIとリニューアル後のUI
リニューアル前とリニューアル後のトップページのUI

江波さん AskDoctorsはサービス開始からの約10年間、一度もデザイン面でのメジャーアップデートをしてきませんでした。

見た目的にも古くUI的にも使いづらい状態であることは理解していたものの、建て増しを続けサービスを成長させていくなかで、これ以上改善を繰り返しても限界があるという状態まできてしまった。それが1つのきっかけでした。

エムスリー株式会社・サービスプランナーの江波拓郎さんの写真
エムスリー株式会社・サービスプランナーの江波拓郎さん

しかし今の時代にあわせたビジュアルやUIにアップデートするにしても、AskDoctorsに携わってきたメンバーにはメジャーアップデートの経験がありません。無論、改修や改善は繰り返してきたものの、この規模のアップデートは初めて。

何から取りかかるべきか、リソース上そこまで確保ができるのか、クオリティや善し悪しは判断できるのかなど、懸念事項を挙げ出すと切りがない。であれば、経験やノウハウを持つ外部のプロにお願いしたほうがクオリティ的に高く、リソース的にもメリットがあると考え、外部パートナーにお願いする方向で動き始めました。

土台としてのデザインコンセプト

満尾 コンペの際には「デザインコンセプト」の提案という要件でしたが、何故デザインコンセプトで提案を求められたのでしょうか?

江波さん デザインコンセプトという要件を導くにあたっては、サイト自体の使い勝手やAskDoctorsのロゴについてのユーザーヒアリングや、競合のサイトや媒体資料のリサーチを行いました。

リサーチのなかで分かってきたのが、表面的なアウトプットとしてのデザインではなく、サービスやデザインにおける一番深層のコンセプトをしっかりと持っているサービスが評価されているということでした。せっかくのフルリニューアルですから、効果を最大化させるためにはまずコンセプトを固めねばと考えデザインコンセプトという要件になりました。

満尾 正直なところ、社内的にデザインコンセプトは難しい課題だなと当時思っていました。といいますのも「コンセプト」と言う言葉で想定されている範囲や内容が人によって少しずつ違うからです。当時はどれくらいのものを想定されていらっしゃったのでしょうか?

江波さん 明確にイメージを持てていなかったと思います。さまざまなリサーチから重要性は見えましたが、どのようなものを内包しているかはリサーチでも導き出せていません。とにかく「デザイン」のなかで一番「土台となる部分」を固めようという思いでしたね。

A.C.O. 取締役兼CCO/Creative Director・Jamesの写真
A.C.O.取締役兼CCO/Creative Director・James

James ご提案では、結構ロジカルに導いていくストーリーのお話しをさせていただいて、デザインの話はそこまで多くなかったのですが、参加された方々の反応は正直なところいかがでしたか?

江波さん コンペのご提案もそうですし、制作を進めて納品いただいたものも含め、極めて好評でした

満尾 これ大丈夫ですか。すごく嘘くさい感じの記事が仕上がりそうで…。(笑)

江波さん でも、結構事実です。我々も明確なアウトプットのイメージがそもそもなかったので、ロジカルなストーリーのおかげで余計にすとんと入ってきた部分もあるかなと思います。

堤さん うちの会社のカラー的にも、割とロジックを重視する文化があるので、そこにマッチした部分もあったと思いますね。

ブランドカラー「メディカルグリーン」

A.C.O.  取締役兼COO/Producer・満尾の写真
A.C.O.取締役兼COO/Producer・満尾

満尾 今回、コンセプトワードとして、「モダンスタンダード」という言葉をつくりました。「スタンダード」に込めたのは、エムスリーという会社の医療系Webサービス業界での、ある種の王道的強さや、安定感。ただ、それだけでは保守的に寄ってしまうところに、プラス新しさを担う言葉としての「モダン」を加えました。

このキーワードをベースの考え方に据え、デザインを通して伝えるべき事象やユーザーに与えるべき印象などを整理。コンセプト内の各要素に落とし込んでいきました。

最終的にはカラーパレットから、感情設計、ピクトグラムまで、様々な要素に落とし込みましたが、中でもエムスリー社内でデザインを展開していくにあたって特に役に立っているものはありますでしょうか。

堤さん 感情設計のシートはイメージがわきやすく、デザインを進める上でも役立っています。サービスを通しユーザーにどのような変化を与えたいかが一目で分かるので、よく参考にしています。

小山 ブランドカラーに関しては反応いかがでしたでしょうか。

ブランドカラー
アスクドクターの新しいブランドカラー

今回我々が「メディカルグリーン」と名付けた色は、手術衣等で使われる医療系では比較的「標準的な色」です。当然競合のサービスなどでも近しい色がキーカラーとして多く使われている。微妙な色味や配色で個性を出すよう心がけたとはいえ、提案させて頂く中で、あえてこの競争率の高い色に至ったことに関して、社内的には議論になったりしなかったのでしょうか。

江波さん 実はわたしもこの色に関しては最初気になったんです。

ただ最終的には「AskDoctors」が競合と比べ後発で順位的にも劣るものであれば恐らく選ばないけれど、現状はおかげさまで医師相談サービスの中では1位を取っています。であれば、堂々とあるべき姿を追った方が良いのではないかという議論に落ち着いたんです。

James 我々としても「モダンスタンダード」というコンセプトの上で色を考えたときに、やはり最もスタンダードな色を使うべきだろうという結論になったんです。ここはある意味正解だったんですね。

デザインコンセプトが背骨になる

A.C.O. Designer・小山の写真
A.C.O. Designer・小山

小山 今回「デザインコンセプト」に加え「デザインガイドライン」「サービスロゴ」も担当させていただきました。 「コンセプト」をより具体化した「ガイドライン」があることでエムスリー社内でデザインを量産される際には一気にデザインをしやすくなるのかなと思いますが、いかがでしょうか。

堤さん そうですね、「デザインコンセプト」ではイメージカンプを2枚作成いただきましたが、結局あの2枚で全ページを網羅するテンプレートパターンは構築できないので、あくまで世界観の共有が限界です。実際にデザイナーが迷いなく手を動かすには「デザインガイドライン」は必須でした。

James 逆に「ガイドライン」だけでなく「コンセプト」まであって良かったと思ったことはありましたか?

小山 サービスロゴを作ったときにはコンセプトレベルまで一回戻って考えて議論したりしましたね。

堤さん 確かに。A.C.O.さんからロゴを複数提案頂いて、選ぶフェーズでは「デザインコンセプト」に沿っているか否かという議論はありましたね。

サービスロゴのアイデア
サービスロゴのアイデア

江波さん 最近は運用フェーズに入り、よりデザインコンセプトが生きてきている印象があります。デザイナーから提案された内容に対し、デザインコンセプトに沿っているか否かを1つの判断基準として自分の中で持てるんです。フィードバックを返すときもデザインコンセプトに沿っていないと言えば、「確かにそうだ」と理解してくれる。コミュニケーションの上でも1つの役割を果たしてくれています。

AskDoctorsのように改善され続けていくサービスにおいては「デザインコンセプト」 は背骨のような存在だと思いますね。サービス自体ではサービスコンセプトを持っていたのですが、今回のデザインコンセプトを作るプロセスを経ることで改めて明確化できたなと思います。

デザインガイドラインのレベル感

満尾 デザインガイドラインの制作依頼はよくいただくのですが、レベル感に決まりはなく、実際にそのガイドラインを扱う体制や現場の方のリテラシーに合わせて調整をしています。

結構ラフでいいと言う方もいらっしゃいますし、細かいコーディングレギュレーションまで用意し、そのまま組めるぐらいまで作ってほしいという方もいる。そういった意味で今回のレベル感が合っていましたでしょうか。

江波さん AskDoctorsは社内でPDCAを回すために変更をよくするので、我々としては肉付けもしやすく、運用しやすい、ちょうど良いバランスかなと思っています。

エムスリー株式会社・Webデザイナー堤翔さんの写真
エムスリー株式会社・Webデザイナー堤翔さん

堤さん デザインのなかでも幹の部分を作っていただいた印象で、デザインについて話すとき話の進め方や話す内容のレイヤーがリニューアル前と比べると今は少し変わっているかもしれないですね。

小山 ではもっと戻って、デザインコンセプトの方まで戻って議論することはありますか?もしかしたら少ないのかなとは思うのですが

江波さん ちょうど昨日ありましたね。医師と患者ユーザー様がやりとりをする画面の改善を検討する議論の中でコンセプトの話が出てきたんです。

堤さん 具体的には余白やテキストの大きさを議論したのですが、提案された内容的には結構ぎゅっと詰めて余分なものを減らしたものでした。しかしそこは、コンセプトとしてこういうものがあるから、一部分だけでもそのコンセプトを体現できない要素は入れるべきではない。もう一度デザインを再考しようとなりました。

コンセプトを支えるリニューアルされたデザインガイドライン
コンセプトを支えるリニューアルされたデザインガイドライン

中長期的な成長へ

James 新しいデザインに対し、社内外から賛否意見はありましたか?

堤さん 他の部署の結構よくしゃべるデザイナーからは、うちの会社が抱えているサイトがどちらかというと古いものが多いので、その中で唯一今っぽく、読みやすさも担保されたデザインになったという話はもらいましたね。

江波さん 全体的には好評だと思います。私は営業の方もやっているので社外の得意先の方とお会いするのですが「リニューアルして見やすくなりましたね」といった声はいただいています。

James でもユーザーのなかには、よく使うサイトであればどんなに小さな変化でも、変化を嫌がる人もいるのでは?

江波さん そうですね、当然リニューアルした瞬間は反対の声というか、使いにくくなったとか見にくくなったというユーザーの声もありました。ただ、それはそもそも絶対あると思っていたので、その瞬間の声は気にしていません。ただ、それを機にアクティブが下がるとか辞めてしまう人が増えると問題だと思っていたんですけど、それはなかったですね。

満尾 定量的なデータに変化はありましたか?

江波さん 実は、数値的な変化はほとんど出ていないです。分析のようなユーザーデータやフィードバックも含めて、殆ど変化していません。

満尾 出ていないというのが不思議ですね。サービスイメージを一新したすぐのタイミングだと、ユーザーも急な順応が難しく、一旦は下がってしまうこともあり得ると思ってましたが……。

江波さん 確かに、仰る通りかと思います。我々としては、AskDoctorsはSNSのように毎日頻繁に使うサービスというよりは、どちらかというと困ったときに集中して使う性質が強いゆえに、変化が大きくないのではと考えています。

私は前職でSNSアプリとかをやっていたので、デイリーアクティブなユーザーをたくさん見てきました。彼らの場合、大きく変えると膨大な声が集まり、当然数値も大きく振れていました。それがなかったので、おそらくはそこの違いかなと。

堤さん なので我々としては、上がらなかったことよりも下がらなかったことを、ポジティブに捉えています。数字はさておきビジュアル面やデザイン面はブランド的にも早々に変えなければいけなかったので、悪い影響なく変えられたのは良かったなと。

小山 構成要素は変えず、インターフェースのみを変えたからという理由もあるかもしれないですね。単純にインターフェースが変わっただけなので、ユーザーが迷わなかったと。

江波さん それは1つありますね。我々としても構成要素に課題感を持っておらず、古いUIやビジュアルを変えて、ちゃんと今の時代に沿ったサービス、ブランドであることを訴求することが目的でした。どちらかというと中長期的にブランドイメージが向上することに寄与してくれることに期待したいですね。

集合写真

CLIENT

  • Hengtee

    エムスリー株式会社

    日本最大級の医療従事者専門サイト『m3.com』など医療系Webサービスを展開するエムスリー株式会社

    https://corporate.m3.com/

WRITER

kazu

小山 和之

KAZUYUKI KOYAMA
PROJECT MANAGER / EDITORIAL DIRECTOR

A.C.O. Journal編集ディレクター。明治大学理工学部建築学科卒業。建築設計事務所を経て、現在に至る。在学中より、ウェブメディアのライターとして活動。編集ディレクション、プロジェクトマネジメント担当。グロース・マネジメント部所属。

KAZU'S POSTS

 Photo Shooting 佐坂和也

A.C.O. JOURNAL by A.C.O. Inc.

A.C.O. のカルチャーとノウハウを伝えるオウンドメディア

A.C.O. Journal

気に入ったら
いいねしてね!

Facebook で A.C.O. の最新情報を配信中です!

A.C.O. パートナーカモン!

BACK TO HOME