エムスリーが運営する、日本最大級の医療情報プラットフォーム、 m3.com。提供開始から約20年、20以上の子サービスからなる大規模なサービスにおいて、デザインシステムの構築・運用を進めてきました。
「使われるデザインシステム」を目指して試行錯誤を重ねた結果、適用プロジェクト数は目標の200%を達成。今後もチーム全員で使い、育てられる状態になってきています。
デザインシステム導入に際し、特に心がけていた以下の3点を中心にまとめることで、使われるデザインシステムをつくるヒントが得られる内容になっていれば嬉しいです。
m3.comは、日本最大級の医療従事者専用サイトです。エムスリーが創業当初から提供しており、国内の医師登録率は約9割、33万人以上の医師が利用する、歴史ある大規模サービスです。(※2024年12月時点)
現在、m3.comが展開しているサービスは20以上 。医師や薬剤師、製薬企業などに向けて、臨床を支える最先端のニュースを伝えるメディアや、医師同士のコミュニケーションを活性化させるUGC、転職や開業、経営支援など、多岐にわたるサービスを提供しています。
このような大規模なサービスに対し、デザイナーは約10名、エンジニアは約30名という比較的小規模な体制でプロダクト開発を行っています。
それぞれが担当サービスを持ち、大きな範囲を担う分、デザイナー間で協業する機会は比較的少なく、デザインの統一感を担保することはなかなか難しい状況にありました。
特に、20年以上の歴史の中で蓄積されたデザインが混在し、無法地帯のようになってしまっていたことが、今回のデザインシステム構築の大きなきっかけとなっています。
例えば、ボタンのデザイン一つをとっても、昔から残っているレガシー感のあるデザインや、10年以上前に作成されたスタイルガイドに基づくデザイン、新規サービスが立ち上がる度に増えていったものなど、運営メンバーですら全貌を把握できないほどになっていました。
ページが変わればトンマナも変わってしまうという統一感の課題に加え、新規開発や改善を行う際に「どのデザインを正とするか」を判断しづらく、デザインや開発効率の低下も課題となっていました。
このままでは、今後も新しいデザインが都度追加され、さらに負債が増えていくことも想定されます。
当時、m3.comのトップページリニューアルプロジェクトが進められていたこともあり、この機会に合わせて、デザインシステムを構築・運用を開始し、上記の課題を解決できないかと考えました。
とはいえ、m3.comのような大規模サービスへのデザインシステム導入は一筋縄ではいかないことは明白でした。
私自身、前職でデザインシステム導入を担当したことがありましたが、m3.comよりはるかに小さなデザインシステム・チームでさえ運用は困難でした。
まして、m3.comのように様々な性質のサービスが混在し、部署をまたいで多くのメンバーが関わる環境では、デザインシステムに圧倒的な価値がなければ、運用されず、使われないものになってしまいます。
せっかく時間をかけてつくるならば、m3.comのプロダクトや開発に携わるメンバーにとって確実に価値があり、しっかりと「使われるデザインシステム」にしたい。そこで、以下の点を意識しながらデザインシステム構築を進めていきました。
1つ目は、作る側と使う側の対立構造を避け、チームとして作ることです。
制作だけを考えれば、1人で作る方が早いかもしれません。しかし、それでは現場の課題や優先順位を十分に把握できず、運用に耐えないデザインシステムになってしまう可能性があります。
チームの意見を積極的に取り入れることは、より良いデザインシステムを構築するうえで欠かせません。また、プロセスからチームを巻き込むことで、共通認識が生まれやすくなり、結果的に運用もしやすくなると考えています。
そのため、m3.comでは、現状のデザイン・開発に関する課題の洗い出しや、プロダクトとして大切にしたい価値観をを引き出すワークショップを開催しました。
これにより、現場への理解が深まるとともに、参加者に自分ごととして感じてもらえるようになり、その後レビューをもらうハードルが下がったり、使ってもらうきっかけが生まれたように思います。
具体的なデザインシステムの検討は、私を含めた5名のメンバーで実施しています。普段は担当サービスが異なるメンバーが集まり、デザインやコーディング、タスク整理やレビューなども分担しながら進めることで、納得感の高いデザインシステムが出来上がっていきました。
2つ目は、使われる場面を徹底的に突き止めることです。
デザインシステム作成に着手する際、今後の色々な場面に対応できるようにと、スタイルやコンポーネントを多く作りたくなるかもしれません。しかし、本当に必要か分からないまま増やしてしまうと、複雑化し、誰も使い方が分からなくなってしまう可能性があります。
そこで、m3.comのサービスで本当に必要なものに絞り、スタイルやコンポーネントを定義するように心がけました。
例えば、カラーについて。当初は以下のようなカラーパレットを定義していましたが、人によって何にどの色を使うか意見が分かれる可能性がありました。
そこで、色の用途を徹底的に議論していった結果、5〜7段階に厳選することができ、過不足なく迷わない配色ルールが実現できました。
また、影についても、一般的にはエレベーションによって4種類ほど使い分けることが多いようですが、m3.comのサービスは、コンテンツや情報量は多いですが、ナビゲーションや複雑な操作を必要とするUIはあまり必要ないため、コンテンツと明確に分離させたい場合にのみ影を使うことができれば十分だと分かりました。そのため、思い切って1種類に限定しました。
一方、選択肢を減らすだけでなく、あえて余白を残した部分もあります。
例えば、色展開です。m3.comでは青をプライマリーカラーとして使用していますが、若手医師向けにはフレッシュな青緑を、女性向けにはピンクを使うなど、サービスやコンテンツの世界観に合わせた柔軟なデザインができるように色展開を残しています。
3つ目は、最初から理想を追い求めすぎず、現実的な範囲を見極めて運用を開始することです。
理想的には、今後必要となる各種コンポーネントを最初に取り揃え、モダンな環境で開発基盤も整え、一気に全サービスに適用したくなるかもしれません。しかし、現実的にはそれは難しく、最初に詰め込みすぎるとタスク過多になって運用も破綻しやすくなります。
そこで、前述の課題洗い出しを踏まえ、課題感が特に強いコンポーネントから順に作成するよう優先順位をつけて進めました。
コード基盤については、HTML/CSSのコンポーネント集を作成し、Docusaurusというツールを用いてドキュメントサイトを構築しています。
一般的には、ReactやVueなどで利用できるStorybookにまとめる方法が主流ですが、m3.comではすべてのサービスがモダンな開発環境に移行しているわけではないため、まずはHTML/CSS集で運用を開始し、徐々に開発環境を更新していく形に落ち着きました。
また、Docusaurusは低コストでサイトを構築でき、マークダウンとHTMLを混ぜた形式で記述できるので、デザイナーだけで運用もしやすい状態になっています。
デザインシステムを適用するにあたっては、小さな範囲から始め、フィードバックをもらいながら改善を重ねることを心がけていました。
例えば、初めはキャンペーンLPなど切り出しやすい場面で、テキスト・色・ボタンといった最小限の要素を適用し、使用感を確かめました。
いきなりサービス全体で適応させるとなると、どうしても検討事項も多くなってしまいます。そのため、ペライチなど気軽に使える場面で試してみたり、サービス改善の施策を進めるときに 部分的にデザインシステムの利用を提案してみたりと、徐々に適用範囲を広げていくようにしました。
このようなプロセスを経てデザインシステムの構築・運用を進めた結果、適用プロジェクト数は目標の200%を達成し、今後もチームで運用可能な状態になりました。
実際にデザインシステムを活用しているメンバーからは以下のような声が寄せられています。
もちろん、メンバーからのフィードバックを基に各所見直しを行うなど、デザインシステムを運用しながらブラッシュアップを重ねるサイクルも回せています。
例えば前述の色に関しても、リリース後、メンバーのフィードバックを基に大幅に見直しを行いました。
m3.comの全サービスやページに新たなデザインシステムを適用するには、まだ道のりは長い状況です。最小限の構成で運用を開始しているため、今後取り組んでいきたいことはまだたくさんあります。
例えば、開発環境の整備（Vue/Reactのライブラリ対応など）、ページテンプレートの作成、レスポンシブへの配慮、m3.comのブランド価値を高めるコンポーネント（イラストなど）の充実にも、チームで取り組んで行きたいと思います。
プロジェクトを通して実感したのは、デザインシステムはチーム全員で使い、育てることで磨かれるということです。
そもそもデザインシステムの構築は、既存の開発ラインと並行で進める場合も多く、優先度が下がりやすい性質にあると考えています。
そのような状況で、誰か一人だけが張り切ってデザインシステムを作ろうとしても、その意義や使い方が共有されにくく、結局誰も使えない...という状態に陥りがちです。特に、規模が大きく、関わるメンバーも多いサービスではなおさらです。
課題はどこにあるのか、本当に必要な構成は何か、どのように運用すると良いのかを、独りよがりにならず、チーム全員で考えながら進めることが何より重要だと学びました。
現在は、m3.com全体で使われるデザインシステムへの足がかりができた状態です。
国内の医師登録率は約9割、33万人以上の医師が利用するサービスだからこそ、デザイナーとしても現状維持にとどまらず、さらなる使いやすさや提供価値の向上に取り組んでいきたいと思います。