用語集

Glossary

デザイントークン

デザイントークンとは

デザイントークンとは、UIデザインで使用する色、文字サイズ、余白、角丸、影などの値を、再利用しやすい共通ルールとして管理する仕組みです。

たとえば、ボタンの背景色、見出しの文字サイズ、カードの角丸、画面内の余白などは、サービス全体の印象や使いやすさに大きく関わります。
これらを画面ごとに感覚で決めてしまうと、担当者やプロダクトによって見た目や使い方にばらつきが生まれます。

デザイントークンは、こうしたデザイン上の判断を「名前」と「値」の組み合わせで管理し、デザイナー、エンジニア、企画担当者が同じ基準を参照できるようにするための考え方です。

たとえば、以下のようなものがデザイントークンにあたります。

メインカラー
エラー表示に使う色
見出しの文字サイズ
画面内の基本余白
ボタンやカードの角丸
影の強さ

つまりデザイントークンは、単なるデザイン素材の一覧ではなく、サービス全体の一貫性を保つための「判断基準」を整理する仕組みです。

なぜデザイントークンが必要なのか

UIデザインでは、色や文字サイズ、余白などの小さな違いが、ユーザーの理解しやすさや安心感に影響します。

たとえば、同じサービスの中でエラー表示の赤が画面ごとに違っていたり、ボタンの大きさや余白が統一されていなかったりすると、ユーザーは無意識のうちに迷いや不安を感じることがあります。

また、デザインを実装するエンジニアにとっても、毎回個別の値を確認しながら開発する状態は効率的ではありません。
修正や改善のたびに、どの画面でどの値を使っているのかを確認する必要があり、保守性も下がります。

デザイントークンを用いることで、デザイン上の値を共通化し、サービス全体で一貫したUIをつくりやすくなります。

特に複数のプロダクトや機能を継続的に開発していく場合、デザイントークンは「見た目をそろえるためのルール」だけでなく、チームでデザインを育てていくための基盤になります。

デザイントークンで管理する主な要素

デザイントークンでは、UIに関わるさまざまな値を管理します。
代表的な要素は以下の通りです。

色

色は、ブランドイメージや画面のわかりやすさに大きく影響します。

デザイントークンでは、ブランドカラー、背景色、テキストカラー、境界線の色、エラーや注意喚起に使う色などを整理します。

たとえば、医療ヘルスケア領域では、エラー、警告、成功、補足情報などの色を適切に使い分けることが重要です。
色の使い方が曖昧だと、重要な情報が伝わりにくくなったり、ユーザーに不要な不安を与えたりする可能性があります。

フォントサイズ

フォントサイズは、情報の読みやすさや優先順位に関わります。

見出し、本文、補足説明、ボタンテキスト、注釈などに対して適切なサイズを定義しておくことで、画面全体の情報構造が整理されます。

特に医療ヘルスケア領域では、高齢者や視認性に配慮が必要な利用者も想定されます。
そのため、単に見た目の美しさだけでなく、読みやすさや誤解の少なさを考慮した文字設計が求められます。

余白

余白は、画面の見やすさや操作しやすさを支える重要な要素です。

情報同士の距離、ボタン周辺の余白、カード内の余白、セクション間の余白などを整理することで、画面にリズムが生まれ、ユーザーが情報を理解しやすくなります。

余白が不足していると、画面が詰まって見え、情報の優先順位がわかりにくくなります。
一方で余白が大きすぎると、関連する情報同士のつながりが見えにくくなることもあります。

デザイントークンとして余白の基準を定めることで、画面ごとのばらつきを抑え、安定したUIをつくりやすくなります。

角丸

角丸は、ボタン、カード、入力欄、モーダルなどの印象に影響します。

角丸が小さいと硬くシャープな印象になり、角丸が大きいとやわらかく親しみやすい印象になります。
ただし、画面ごとに角丸の大きさがばらばらだと、サービス全体の印象が統一されません。

デザイントークンとして角丸の値を定義しておくことで、ブランドやサービスの印象を保ちながら、UI全体に一貫性を持たせることができます。

影

影は、要素の重なりや階層を表現するために使われます。

カードが背景から浮いて見える、モーダルが前面に表示されている、ボタンが押せる要素として認識されるといった表現に影は関わります。

ただし、影を強く使いすぎると画面が重く見えたり、情報が散らかって見えたりすることがあります。
反対に影が弱すぎると、要素同士の階層がわかりにくくなる場合もあります。

影の強さや使い方をトークンとして整理することで、画面の奥行きや操作感を一定のルールで表現できます。

セマンティックトークンとは

セマンティックトークンとは、デザイントークンに「意味」を持たせたものです。

たとえば、単に blue-500 や red-600 のように色の値を管理するだけでは、その色をどの場面で使うべきかがわかりにくくなります。

一方で、以下のように意味を持たせると、用途が明確になります。

color-text-primary
color-background-surface
color-status-error
color-status-warning
color-status-success
space-layout-section
radius-button-default

このように、セマンティックトークンでは「何色か」ではなく、「何のために使う値か」を名前で表します。

たとえば、エラー表示に使う色を color-status-error として管理しておけば、将来的に赤の色味を変更しても、使う目的は変わりません。
デザイナーやエンジニアは、「この画面ではエラーを表す色を使う」という意味でトークンを選ぶことができます。

セマンティックトークンは、デザインの見た目だけでなく、情報の意味や役割をチームで共有するために重要です。

デザイントークンを使うメリット

デザイントークンを使うことで、UIデザインや開発においてさまざまなメリットがあります。

UIの一貫性を保ちやすくなる

色、文字サイズ、余白、角丸などを共通ルールとして管理することで、画面ごとのばらつきを抑えられます。

サービス全体で同じ基準を使えるため、ユーザーにとっても操作しやすく、理解しやすいUIをつくりやすくなります。

デザインと実装のずれを減らせる

デザイン上の値をトークンとして管理しておくと、デザイナーとエンジニアが同じ値を参照しやすくなります。

「デザインではこの色だったが、実装では別の色になっている」といったずれを減らし、品質を安定させることができます。

修正や改善に対応しやすくなる

たとえば、ブランドカラーを変更する場合や、余白の基準を見直す場合でも、トークンとして管理されていれば変更箇所を整理しやすくなります。

個別の画面をひとつずつ修正するのではなく、共通の基準を更新することで、サービス全体に変更を反映しやすくなります。

複数プロダクトで共通の品質を保てる

企業が複数のアプリやWebサービスを運営している場合、プロダクトごとにデザインの基準がばらばらになることがあります。

デザイントークンを活用すれば、ブランドとして共通すべき部分と、サービスごとに変えてよい部分を整理できます。

これにより、各サービスの個性を保ちながら、企業全体としての一貫した体験を提供しやすくなります。

デザインの判断を属人化しにくくなる

デザインは感覚だけで決めるものではありません。

なぜこの色を使うのか。
なぜこの余白なのか。
なぜこの角丸なのか。
なぜエラーにはこの色を使うのか。

こうした判断基準をデザイントークンとして整理しておくことで、担当者が変わってもデザインの考え方を引き継ぎやすくなります。

医療ヘルスケアUIにおけるデザイントークンの重要性

医療ヘルスケア領域のUIでは、見た目の美しさだけでなく、安心感、わかりやすさ、誤解の少なさが重要です。

患者さんや生活者は、体調や不安を抱えた状態でアプリやWebサービスを利用することがあります。
医療従事者は、限られた時間の中で必要な情報を確認し、判断する必要があります。

そのような場面では、色、文字サイズ、余白、警告表示、ボタンの見せ方などが、ユーザーの理解や行動に影響します。

たとえば、注意喚起の色が毎回違っていると、どれが本当に重要な情報なのか判断しにくくなります。
入力欄やボタンの余白が不十分だと、操作ミスや見落としにつながる可能性もあります。
文字サイズやコントラストが不適切だと、情報を読み取りにくくなることもあります。

医療ヘルスケアUIでは、ユーザーに余計な認知負荷をかけず、必要な情報に自然にたどり着ける設計が求められます。

デザイントークンは、そのための土台となる仕組みです。

メディエイドのデザインシステム beads での活用

メディエイドでは、医療ヘルスケア領域のサービス開発において、デザインシステム beads の整備を進めています。

beads は、色、フォント、余白、角丸などのUIルールを整理するだけでなく、医療ヘルスケア領域における使いやすさ、安心感、アクセシビリティ、情報の伝わり方を考えるための基盤です。

デザイントークンは、この beads を支える重要な要素です。

たとえば、色のトークンでは、ブランドカラーだけでなく、エラー、警告、成功、補足情報などの意味を整理します。
フォントサイズのトークンでは、見出し、本文、注釈などの役割に応じて、読みやすさと情報の優先順位を設計します。
余白や角丸のトークンでは、画面の印象や操作しやすさを整えます。

このように、デザイントークンは単に数値を管理するためのものではありません。

医療ヘルスケアのサービスにおいて、ユーザーが安心して情報を理解し、適切に行動できるようにするための「共通言語」として機能します。

メディエイドでは、こうした考え方をもとに、医療ヘルスケア領域に適したUI/UXデザイン、デザインシステム構築、PHRアプリ開発、患者向けアプリ開発を支援しています。

＊メディエイドのデザインシステム beads について

メディエイドでは、医療ヘルスケア領域に適したUI/UXデザインを実現するために、デザインシステム beads の考え方を整理し、Noteでも発信しています。

色、フォント、余白、角丸などのUIルールをどのように考え、どのようにチームで共有していくのか。
医療ヘルスケア領域におけるデザインの判断基準について、実務の視点から紹介しています。

👉 メディエイドのNoteで beads の取り組みを見る

デザイントークンは、デザインをチームで育てるための仕組み

デザイントークンは、色や余白を管理するためだけの技術的な仕組みではありません。

それは、サービスにおけるデザインの判断をチームで共有し、継続的に改善していくための仕組みです。

特に医療ヘルスケア領域では、ユーザーの不安を軽減し、情報を正しく伝え、行動を支えるUIが求められます。
そのためには、見た目をその場で整えるだけでなく、なぜそのデザインにするのかという判断基準を残していくことが重要です。

デザイントークンを活用することで、デザインと実装のずれを減らし、複数のサービスにまたがって一貫した体験を提供しやすくなります。

メディエイドでは、デザインシステム beads の取り組みを通じて、医療ヘルスケア領域におけるUI/UXデザインの品質向上に取り組んでいます。

医療ヘルスケア領域のUI/UXデザインに関するご相談

メディエイドでは、医療ヘルスケア領域におけるアプリ・WebサービスのUI/UXデザイン支援を行っています。

デザイントークンやデザインシステムの整備だけでなく、患者さん・生活者・医療従事者にとってわかりやすく、安心して使えるサービス設計を支援します。

医療ヘルスケア領域のUI/UXデザイン、デザインシステム構築、患者向けアプリ開発に関するご相談は、以下のページをご覧ください。

👉 医療ヘルスケア領域のUI/UXデザイン支援コンサル

またUI/UXデザイン全般については、以下のページをご覧ください。

👉 医療ヘルスケアのUI/UXデザイン