Cross Medicine
Cross Medicine

Design System

このWebサイトは、Cross MedicineのデザインをWeb上で可視化し、文章化し、更新していくための作業面です。最初に、現在の成果物をブランド適用ガイドとして位置づけ、完成形のデザインシステムへ進むための境界を固定します。

現在

Phase Aとして、いま作るもの、後で作るもの、今は作らないものを分ける。

完成

デザイン言語、ツールボックス、組織運用がつながり、制作物とプロダクトへ同じ基準を適用できる状態にする。

対象外

この段階では、詳細なプロダクトUI部品や運用体制を完成扱いにしない。

位置づけ

最初に固定するのは、成果物の名前と境界です。現在のWebは完成済みのデザインシステムではなく、VIを実際の制作へ展開するためのブランド適用ガイドを育てる場所です。

現在の成果物 Brand Application Guide

ロゴ、色、文字、余白、レイアウトを、資料やWebへ迷わず適用するための基礎仕様。

完成形 Design System

デザイン言語、トークン、テンプレート、部品、運用がつながり、継続的に改善される仕組み。

対象

VI資料に基づくロゴ、ブランドカラー、タイポグラフィ、余白、横罫線、資料とWebの基本レイアウト。

後続

デザイントークンの運用、Figmaや実装への配布、テンプレート、プロダクトUI部品、変更管理。

対象外

対象プロダクトが決まっていない状態での汎用UI部品集、状態表示、一覧、フォームの詳細仕様。

完了

関係者が、現在の成果物をブランド適用ガイドとして使い、未整備の領域を後続フェーズとして扱える。

Phase Aの判定

名前

現在のWebは Brand Application Guide を中核にした作業面として扱う。

境界

完成形の Design System は、言語、道具、運用がそろった状態として別に定義する。

順序

VI正本と推定仕様を分けたうえで、次は Design Language を整理する。

ソース監査

VI正本から確定できる仕様と、Webや資料へ展開するための推定仕様を分ける。正本に根拠がない値は、後続フェーズで確認するまで標準として固定しない。

正本 CrossMedicine_vi.pdf

Cross Medicine Visual Identity ver.01。2022-12-28作成、A4、6ページ、Adobe Illustrator PDF。

読み取り 画像確認を優先

PDF内の文字はアウトライン化されているため、ページレンダリングを根拠に確認する。

注意 個人情報は再掲しない

VI内の名刺例に含まれる個人連絡先は、派生成果物やWeb上では扱わない。

確定

シンボル、英字ロゴタイプ、日本語社名、スローガン、ロックアップ、PANTONE、CMYK、最小使用サイズ、禁止例。

VI正本に基づく

推定

Web用HEX、Brand Ink、px換算、クリアスペース比率、UIフォント、濃色CTA、ニュートラル、余白スケール。

実装上の拡張

未確定

AI/SVGなどの正式ロゴ原本、公式RGB値、フォントライセンス、faviconやアプリアイコン、変更承認者、対象プロダクト。

確認が必要
Cover

資料名と版

001

シンボル、ロゴタイプ、基本カラー

002

社名ロゴタイプとの組み合わせ

003

スローガン、指定書体、組み合わせ

004

最小使用サイズ、アイソレーション

005

ロゴの使用禁止例

Phase Bの判定

根拠

VIに基づく確定仕様と、実装のための推定仕様を分けて扱う。

保留

正式ロゴ原本、公式RGB値、フォントライセンス、運用責任者は未確定として残す。

順序

次は、根拠を踏まえてCross Medicineらしさの言葉を整える。

ロードマップ

デザインシステムを一度に完成させず、言葉、適用、値、道具、運用の順に整える。Phase Aで境界を固定し、Phase Bで根拠を分けた。次はデザイン言語を整理する。

Phase A

Scope Reset

ブランド適用ガイドとデザインシステム全体を分ける。

完了
Phase B

Source Audit

VI正本と推定仕様を分け、未確定事項を明らかにする。

完了
Phase C

Design Language

ブランド思想、設計原則、語彙、避ける表現をそろえる。

次
Phase D

Brand Application

資料、Web、制作物へVIを展開する判断基準を作る。

計画
Phase E

Tokens

色、文字、余白、罫線、角丸を機械可読な値にする。

計画
Phase F

Templates

表紙、本文、図表、Webページの制作型を整える。

計画
Phase G

Product UI Decision

UI部品を作る前に、対象プロダクトと画面を決める。

後続
Phase H

Component Toolbox

必要な部品をトークンと原則に基づいて整える。

後続
Phase I

Governance

所有者、変更提案、レビュー、履歴、配布先を決める。

後続
Phase J

Adoption

関係者が同じ言葉で使える状態へ普及する。

後続

デザイン言語

Cross Medicineのデザインは、医療を身近に、自然に扱えることを優先する。強い装飾ではなく、正確な情報、読みやすい階層、落ち着いた余白で信頼を作る。

身近である

情報の見つけやすさ、判断のしやすさ、余白の穏やかさを優先する。

正確である

数値、注意、完了、例外は、色だけでなく文言、太字、配置でも識別できるようにする。

自然に広がる

ブランドカラーを乱用せず、ロゴ、文字、罫線、余白の組み合わせで一貫性を作る。

囲いに頼らない

カード、影、強い背景面を標準にせず、フォントサイズ、太さ、横罫線、余白で構造を作る。

避ける要素

サブタイトル、左端の縦線アクセント、ブランドカラー以外の色相、数字から始まる箇条書きは標準にしない。

ブランドカラー

色はBrand Cyan、Brand Yellow、Brand Ink、ニュートラルを中心にする。意味ごとに赤、緑、紫などの色相を増やさず、文言、太字、配置で判断を支える。

良い例

ブランドカラー

シアンは区切り線や短いアクセントに使い、黄色は一箇所の注目に限定する。

悪い例

大量の色面テキスト

広い背景や連続した強調に使い、本文の読みやすさを落とす。

タイポグラフィ

視覚的な強調は、まずフォントサイズと太さで表現する。色面、囲み、影、角丸は補助に留める。

Display

Cross Medicine

40px / 700
Page Title

ブランドカラー

32px / 700
Section Title

選択基準

24px / 700
Body

本文は16px以上を基準にし、行間で読みやすさを確保する。

16px / 400

レイアウト

構造は、ページタイトル、Brand Cyanの区切り線、本文、行、横罫線で作る。左端の縦線やカードの連続を標準にしない。

良い例

資料レイアウト

上部タイトル、区切り線、本文の距離を固定する。
本文行と横罫線で比較や判断を示す。
密度一枚一テーマで読み切れる量にする。

悪い例

資料レイアウト

説明文をタイトル直下へ置き続ける。

情報A 情報B 情報C 情報D

トークン

ブランドとレイアウトの判断を、資料、Figma、Web実装へ渡せる値として管理する。まずは色、文字、余白、罫線を中心に扱う。

--cm-brand-cyan #00a1e9
--cm-brand-yellow #fabf00
--cm-brand-ink #231914
--cm-font-size-page-title 32px
--cm-space-8 32px

運用

正本

ロゴ利用の正本はCrossMedicine_vi.pdf。切り出し画像や古い資料を正本として扱わない。

例外

カード、追加色、サブタイトルなどを使う場合は、理由と利用範囲を記録する。

更新

迷いが出た箇所をWeb上で小さく改訂し、古いPPTXの断片を標準化しない。

展開

基礎が安定した後、対象プロダクトを決めてUI部品とテンプレートを追加する。

参照

VI

CrossMedicine_vi.pdf

監査

design-system/source-audit.md

考え方

「デザインシステム」がよくわからないので、理解の仕方を変えてみる

公開

Cloudflare Workers Static Assets / Custom Domains