デザインシステム

デザインシステムとは

デザインシステムとは、プロダクトやサービスにおけるデザインの一貫性を保ち、継続的にデザインの品質を高めていくための仕組みです。

一般的には、カラーパレット、タイポグラフィ、余白、ボタン、フォーム、アイコン、レイアウト、コンポーネントなどを整理し、チーム全体で共通のルールとして活用できるようにしたものを指します。

しかし、デザインシステムは単なる「見た目のルール集」ではありません。

なぜこの色を使うのか。
なぜこの余白が必要なのか。
なぜこの言葉を選ぶのか。
なぜこの情報を強調し、別の情報は控えめに見せるのか。

こうした判断基準をチームで共有し、サービス全体の体験を継続的に育てていくための土台が、デザインシステムです。

デザインシステムを構成する主な要素

デザインシステムには、主に以下のような要素が含まれます。

カラーパレット

ブランドの印象やサービスの性格を表す色の体系です。
メインカラー、サブカラー、背景色、テキストカラー、警告色、エラー色などを定義し、画面ごとにばらつきが出ないようにします。

特に医療ヘルスケア領域では、色は単なる装飾ではありません。
注意を促す色、不安を和らげる色、状態を伝える色など、利用者の理解や行動に影響する重要な要素です。

タイポグラフィ

文字の大きさ、太さ、行間、見出しと本文の関係などを定義します。

医療や健康に関する情報は、利用者にとって重要な判断材料になることがあります。
そのため、読みやすさ、誤読しにくさ、情報の優先順位が伝わることが大切です。

スペーシング・レイアウト

画面内の余白や情報配置のルールです。
余白は、単に画面をきれいに見せるためだけのものではありません。

情報のまとまりを伝えたり、重要な操作を見つけやすくしたり、利用者が落ち着いて画面を理解できるようにする役割があります。

コンポーネント

ボタン、入力フォーム、カード、タブ、モーダル、アラートなど、画面を構成する再利用可能な部品です。

コンポーネントを整備することで、画面ごとに異なる表現や挙動が生まれにくくなり、開発効率と品質の両方を高めることができます。

Voice & Tone

画面上の言葉づかいや、利用者への伝え方のルールです。

医療ヘルスケア領域では、同じ情報でも、伝え方によって利用者の受け止め方が大きく変わります。
不安を強めないこと、上から目線にならないこと、必要な行動をわかりやすく支えることが重要です。

アクセシビリティ

年齢、障害、利用環境、デジタルへの慣れにかかわらず、できるだけ多くの人が利用しやすい状態を目指す考え方です。

文字サイズ、色のコントラスト、読み上げ対応、操作のしやすさなどを設計段階から考慮することで、サービスを必要とする人にきちんと届く体験をつくることができます。

なぜデザインシステムが必要なのか

プロダクトやサービスは、時間とともに成長していきます。

新しい機能が追加される。
担当者が変わる。
別のチームが開発に参加する。
複数のサービスを横断して利用者体験を整える必要が出てくる。

このような状況で、判断基準が属人的なままだと、画面ごとに見た目や使い勝手がばらつき、サービス全体の品質が保ちにくくなります。

デザインシステムがあることで、チームは毎回ゼロから判断するのではなく、共通の考え方やルールをもとに設計を進めることができます。

その結果、以下のような効果が期待できます。

・UIの一貫性が高まる
・開発や改善のスピードが上がる
・ブランドの印象が統一される
・利用者が迷いにくくなる
・チーム内の判断基準を共有しやすくなる
・サービス品質を継続的に改善しやすくなる

医療ヘルスケアDXにおけるデザインシステムの重要性

医療ヘルスケア領域のデジタルサービスでは、一般的なアプリやWebサービス以上に、慎重な情報設計が求められます。

利用者は、患者さんや生活者・家族、医療機関や薬局、医師や薬剤師等の医療従事者、自治体、企業など多岐にわたります。
また、扱う情報も、健康状態、服薬、食事、検査結果、生活習慣、医療機関とのやり取りなど、利用者の生活や意思決定に深く関わるものです。また生活者・患者さんと医療従事者の間には大きな知識ギャップがあります。

そのため、医療ヘルスケアDXにおけるデザインシステムでは、単に「きれいな画面を効率よく作る」だけでは不十分です。

大切なのは、利用者の不安を軽減し、必要な情報を正しく理解できるようにし、次の行動につながる体験を設計することです。

たとえば、エラー表示ひとつをとっても、単に赤く目立たせればよいわけではありません。
どの程度の緊急性なのか。
利用者は何をすればよいのか。
不安を煽らずに、必要な行動を促せているか。

こうした視点をチームで共有するためにも、医療ヘルスケア領域に適したデザインシステムが必要になります。

UIの一貫性だけでなく、関係性を設計する

メディエイドでは、医療ヘルスケアDXを、単なるデジタル化ではなく、医療と生活者の関係性を再設計する取り組みだと考えています。

そのため、デザインシステムも、UIパーツをそろえるためだけのものではなく、サービスが利用者に対してどのような姿勢を示すのかを共有するための仕組みとして捉えています。

たとえば、ボタンの色やラベルの文言、情報の強調度合い、画面上の余白、読み込み中の表現、通知の言葉づかいなどは、すべて利用者との関係性に影響します。

わかりやすいけれど、押しつけがましくない。
安心感があるけれど、過度にやさしすぎない。
必要な行動を促すけれど、不安を煽らない。
専門性を保ちながら、生活者にも伝わる。

こうしたバランスを保つためには、感覚だけに頼るのではなく、チームで共有できる判断基準が必要です。

AI時代に求められる「判断基準」としてのデザインシステム

近年、AIは文章や画像、UIデザイン案まで提案できるようになりました。

これにより、制作のスピードは大きく向上しています。
一方で、AIが提示した案をそのまま採用するのではなく、「その案が本当にこのサービスにふさわしいのか」を判断する力がより重要になっています。

特に医療ヘルスケア領域では、見た目のわかりやすさだけでなく、利用者の不安、行動、理解、医療従事者との関係性まで考慮する必要があります。

AIが複数の案を出せる時代だからこそ、チームには次のような問いが求められます。

この表現は、利用者に安心感を与えているか。
この色は、医療ヘルスケアの文脈で適切か。
この言葉は、患者さんや生活者にとって受け入れやすいか。
このUIは、必要な行動を自然に支えているか。
この設計は、メディエイドが目指す関係性に合っているか。

デザインシステムは、AI時代においても人が判断するための基準になります。
効率化のためだけではなく、サービスの思想や品質を守るための仕組みとして、今後さらに重要になっていくと考えています。

メディエイドが考えるデザインシステム

メディエイドでは、医療ヘルスケア領域におけるさまざまなサービス開発やPHRプラットフォームの提供を通じて、生活者・患者さんと医療従事者をつなぐデジタルサービスに取り組んできました。

その中で私たちは、サービスの品質を高めるためには、画面単位の改善だけでなく、サービス全体に共通する考え方を整理し、チームで育てていくことが重要だと考えるようになりました。

メディエイドのデザインシステム「beads」は、こうした考え方をもとに構築を進めているデザインの基盤です。

カラーパレットやコンポーネントだけでなく、Voice & Tone、アクセシビリティ、非言語要素、コミュニケーションのあり方まで含めて、医療ヘルスケア領域にふさわしいデザインの判断基準を整理していきます。

それは、単に効率よく画面を作るためのものではありません。

生活者・患者さんが安心してサービスを利用できること。
医療従事者が必要な情報に迷わずアクセスできること。
企業や自治体が、医療ヘルスケア領域にふさわしいサービスを継続的に育てられること。
そして、医療と生活がより自然につながる体験をつくること。

そのための土台として、メディエイドはデザインシステム「beads」の整備に取り組んでいます。

Mediaid Design Notesでの発信

メディエイドでは、デザインシステムの考え方を、Mediaid Design Notesでも発信しています。

コーポレートサイトでは、デザインシステムの基本的な考え方や医療ヘルスケアDXにおける重要性を整理しています。
一方で、Mediaid Design Notesでは、実際のサービス設計やUI改善の中で、私たちがどのような問いを持ち、どのように判断しているのかについても記録をしていこうと考えています。

デザインシステムを、ルールとして固定するだけではなく、日々の実践の中で育てていく。
そのプロセス自体も、メディエイドらしいデザインのあり方だと考えています。

▶ Mediaid Design Notesで、メディエイドのデザインの考え方を読む

医療ヘルスケアDXにおけるUI/UXデザインのご相談

メディエイドでは、PHRアプリ、患者向けアプリ、医療機関・薬局向けサービス、ヘルスケアアプリなど、医療ヘルスケア領域におけるデジタルサービスの企画・設計・開発を支援しています。

医療ヘルスケア領域に適したUI/UX設計、サービス設計、情報設計、デザインシステム構築に関するご相談がございましたら、お気軽にお問い合わせください。