イヌコミ（inucomi）

デザインシステム

運用と品質

公開後に崩れないための管理範囲、検証、更新ルールを定義します。

見た目だけでなく、更新手順、品質確認、責務分担まで含めて継続的に管理します。

更新日
2026-07-10
対象
テーマ、コンポーネント、品質確認、変更履歴
01

公開ページ構成

概要、基礎、部品、体験、ブランド、運用、履歴を同じ階層で整理します。

  • 概要から各領域へ迷わず移動できる導線を保つ
  • 現在地と前後のページを一貫したナビゲーションで示す
  • デスクトップとモバイルで同じ情報へ到達できるようにする
02

トークン運用

色、文字、余白、角丸、影、動きを変更可能な契約として管理します。

  • 色、文字、余白、角丸、影、動きを名前付きの共通トークンで管理する
  • 変更した値が関連する部品へ一貫して反映される状態を保つ
  • ページごとの個別値を増やさず、既存の意味付きトークンを優先する
03

テーマ方針

ブランド色と表示モードを、部品の意味を保ったまま切り替えられるようにします。

  • ブランド主色は選択状態、補助導線、フォーカスへ一貫して使用する
  • ライト、ダーク、ハイコントラストへ拡張する場合も、色の直値ではなくセマンティックトークンを追加する
  • テーマ変更時は本文、境界、状態色、フォーカスの可読性をまとめて確認する
04

クイックスタート

新規画面や改善作業で最初に確認する順番を固定します。

  • 既存の部品と体験パターンで表現できるかを先に確認する
  • 色、余白、角丸、影は既存のトークンを使い、ページだけの値を増やさない
  • 新しい導線は前後の移動、空状態、エラー、完了まで含めて確認する
05

コンポーネント検証

表示状態、アクセシビリティ、画面幅、視覚差分を変更時に確認します。

  • 初期、選択、無効、読込、エラー、完了の代表状態を確認する
  • キーボード操作、読み上げ、コントラストを自動確認と手動確認で補完する
  • デスクトップとモバイルの画面差分で意図しない崩れを止める
06

貢献ガイド

部品追加、例外追加、既存UI変更のレビュー観点を揃えます。

  • 新規部品は既存コンポーネントで代替できない理由と再利用範囲を残す
  • 例外的な装飾やトークン外の値は、理由、期限、取り除く条件を明確にする
  • UI変更は表示、操作、アクセシビリティ、画面幅の確認結果とセットで扱う
07

変更レビュー

見た目の好みではなく、利用ルールと証跡に基づいてレビューします。

  • 新規UIは既存部品で表現できるかを先に確認する
  • 例外は理由と再利用可否を記録する
  • デザイン変更はユーザー導線、SEO、パフォーマンスまで含めて確認する
08

検索性と発見可能性

デザインシステム自体を見つけやすくし、参照漏れを防ぎます。

  • 概要と各領域はサイト内の案内から辿れる状態を維持する
  • 共通部品は個別仕様ページを持ち、追従ナビとモバイル横ナビから直接移動できるようにする
  • 長いサイドナビは領域内でスクロールし、ページを動かさず末尾まで参照できるようにする
  • トークン配布物は色や寸法を実装へ適用できる形式で提供する
  • ページ追加時は一覧、ナビゲーション、サイト内案内への反映を同時に確認する
09

変更履歴と採用判断

いつ、何を、なぜ採用したかを残し、将来の改善で判断を再利用します。

  • バージョン、更新日、変更履歴を同じ変更単位で更新する
  • 変更理由、影響範囲、確認結果を同じ変更単位で残す
  • 破壊的変更や例外は、利用者への影響と代替手段を明記する

デザイントークン

イヌコミ共通トークン台帳

色、文字、余白、角丸、影、動きを共通の名前と値で確認し、画面ごとの実装差を防ぎます。

配布形式
JSON / CSS
グループ
5
トークン
70

カラー

ブランド、背景、状態色を意味ごとに分け、装飾色としての流用を防ぎます。

ブランドアクセント

color.brand.accent
種別
色
CSS
--color-st-accent
値
#007fa8

ブランドアクセントホバー

color.brand.accentHover
種別
色
CSS
--color-st-accent-hover
値
#007094

リンク

color.brand.link
種別
色
CSS
--color-st-link
値
#007fa8

共有主アクション

color.action.sharedPrimary
種別
色
CSS
--primary
値
#2563eb

共有主アクションホバー

color.action.sharedPrimaryHover
種別
色
CSS
--primary-hover
値
#134fd2

共有主アクション前景

color.action.sharedPrimaryForeground
種別
色
CSS
--primary-foreground
値
#f8fafc

クチコミ投稿アクション

color.action.reviewSubmit
種別
色
CSS
--color-st-review-action
値
#0f8284

クチコミ投稿アクションホバー

color.action.reviewSubmitHover
種別
色
CSS
--color-st-review-action-hover
値
#0d7274

クチコミ注意見出し

color.action.reviewGuidelineHeading
種別
色
CSS
--color-st-review-guideline-heading
値
#b02222

クチコミ促進リンク

color.action.reviewPromptLink
種別
色
CSS
--color-st-review-prompt-link
値
#0079ad

クチコミ固定導線

color.action.reviewFloating
種別
色
CSS
--color-st-review-floating
値
#b45309

クチコミ固定導線ホバー

color.action.reviewFloatingHover
種別
色
CSS
--color-st-review-floating-hover
値
#92400e

写真投稿アクション

color.action.photoSubmit
種別
色
CSS
--color-st-photo-action
値
#4f46e5

写真投稿アクションホバー

color.action.photoSubmitHover
種別
色
CSS
--color-st-photo-action-hover
値
#4338ca

フレームボックスプラン見出し

color.action.framePlan
種別
色
CSS
--color-st-frame-plan-action
値
#4f46e5

フレームボックスプラン箇条書き

color.action.framePlanBullet
種別
色
CSS
--color-st-frame-plan-bullet
値
#818cf8

補足文字

color.content.muted
種別
色
CSS
--muted-foreground
値
#636e7e

投稿者表示見出し

color.content.postIdentityHeading
種別
色
CSS
--color-st-post-identity-heading
値
#312e81

フレームボックスプラン操作文字

color.content.framePlanControlText
種別
色
CSS
--color-st-frame-plan-control-text
値
#4f46e5

お問い合わせ確認見出し

color.content.inquiryConfirmationHeading
種別
色
CSS
--color-st-inquiry-confirmation-heading
値
#312e81

お問い合わせ確認補足文

color.content.inquiryConfirmationBody
種別
色
CSS
--color-st-inquiry-confirmation-body
値
#4338ca

お問い合わせ確認項目名

color.content.inquiryConfirmationLabel
種別
色
CSS
--color-st-inquiry-confirmation-label
値
#3730a3

ページ背景

color.surface.canvas
種別
色
CSS
--background
値
#ffffff

補助背景

color.surface.muted
種別
色
CSS
--secondary
値
#f1f5f9

投稿者表示背景

color.surface.postIdentitySurface
種別
色
CSS
--color-st-post-identity-surface
値
#eef2ff

投稿者表示境界線

color.surface.postIdentityBorder
種別
色
CSS
--color-st-post-identity-border
値
#e0e7ff

フレームボックスプラン背景

color.surface.framePlanSurface
種別
色
CSS
--color-st-frame-plan-surface
値
#eef2ff

フレームボックスプラン境界線

color.surface.framePlanBorder
種別
色
CSS
--color-st-frame-plan-border
値
#e0e7ff

フレームボックスプラン操作境界線

color.surface.framePlanControlBorder
種別
色
CSS
--color-st-frame-plan-control-border
値
#c7d2fe

お問い合わせ確認背景

color.surface.inquiryConfirmationSurface
種別
色
CSS
--color-st-inquiry-confirmation-surface
値
#eef2ff

お問い合わせ確認境界線

color.surface.inquiryConfirmationBorder
種別
色
CSS
--color-st-inquiry-confirmation-border
値
#c7d2fe

お問い合わせ確認区切り線

color.surface.inquiryConfirmationDivider
種別
色
CSS
--color-st-inquiry-confirmation-divider
値
#e0e7ff

クチコミ注意背景

color.surface.reviewGuidelineSurface
種別
色
CSS
--color-st-review-guideline-surface
値
#fdfdfd

フッター背景

color.surface.footer
種別
色
CSS
--color-footer-bg
値
#f8f8f8

目盛り軸

color.visualization.chartAxis
種別
色
CSS
--color-st-chart-axis
値
#888888

補助目盛り

color.visualization.chartAxisMuted
種別
色
CSS
--color-st-chart-axis-muted
値
#9ca3af

グリッド線

color.visualization.chartGrid
種別
色
CSS
--color-st-chart-grid
値
#e5e7eb

補助グリッド線

color.visualization.chartGridSoft
種別
色
CSS
--color-st-chart-grid-soft
値
#f3f4f6

増加・好調

color.visualization.chartPositive
種別
色
CSS
--color-st-chart-positive
値
#10b981

減少

color.visualization.chartNegative
種別
色
CSS
--color-st-chart-negative
値
#f43f5e

危険・異常

color.visualization.chartDanger
種別
色
CSS
--color-st-chart-danger
値
#ef4444

主要系列

color.visualization.chartPrimary
種別
色
CSS
--color-st-chart-primary
値
#3b82f6

健康記録の推移

color.visualization.chartHealthTrend
種別
色
CSS
--color-st-chart-health-trend
値
#0284c7

補助系列

color.visualization.chartPurple
種別
色
CSS
--color-st-chart-purple
値
#a855f7

広告表示回数

color.visualization.chartImpressions
種別
色
CSS
--color-st-chart-impressions
値
#8884d8

広告クリック数

color.visualization.chartClicks
種別
色
CSS
--color-st-chart-clicks
値
#82ca9d

広告クリック率

color.visualization.chartCtr
種別
色
CSS
--color-st-chart-ctr
値
#ff7300

ページビュー面

color.visualization.chartPageViewsSurface
種別
色
CSS
--color-st-chart-page-views-surface
値
#ede9fe

ページビュー

color.visualization.chartPageViews
種別
色
CSS
--color-st-chart-page-views
値
#8b5cf6

ページビュー移動平均

color.visualization.chartPageViewsTrend
種別
色
CSS
--color-st-chart-page-views-trend
値
#7c3aed

破壊的操作

color.feedback.destructive
種別
色
CSS
--destructive
値
#dc2626

破壊的操作ホバー

color.feedback.destructiveHover
種別
色
CSS
--destructive-hover
値
#b91c1c

クチコミ評価星

color.feedback.reviewStar
種別
色
CSS
--color-st-review-star
値
#f59e0b

クチコミ評価空星

color.feedback.reviewStarEmpty
種別
色
CSS
--color-st-review-star-empty
値
#e5e7eb

タイポグラフィ

日本語の読みやすさを優先し、本文、見出し、コードの責務を分けます。

本文フォント

typography.family.body
種別
文字
CSS
--font-sans
値
Noto Sans JP, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif

コードフォント

typography.family.code
種別
文字
CSS
--font-mono
値
Geist Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace

本文行間

typography.lineHeight.body
種別
行間
値
1.7

コンパクト行間

typography.lineHeight.compact
種別
行間
値
1.45

寸法と角丸

余白、操作領域、角丸を部品ごとに再利用します。

ページ左右ガター(SP)

dimension.space.pageGutter
種別
余白
CSS
--ic-page-gutter
値
1rem

ページ左右余白

dimension.space.pageX
種別
余白
CSS
--ic-space-page-x
値
1rem

セクション上下余白

dimension.space.sectionY
種別
余白
CSS
--ic-space-section-y
値
3.5rem

カード間隔

dimension.space.cardGap
種別
余白
CSS
--ic-space-card-gap
値
1.25rem

タッチ操作領域

dimension.target.touch
種別
余白
CSS
--ic-target-touch
値
2.75rem

ポインター操作領域

dimension.target.pointer
種別
余白
CSS
--ic-target-pointer
値
1.5rem

操作部品角丸

dimension.radius.control
種別
角丸
CSS
--ic-radius-control
値
0.375rem

カード角丸

dimension.radius.card
種別
角丸
CSS
--ic-radius-card
値
0.75rem

影と階層

影は装飾ではなく、情報の階層を伝えるためだけに使います。

カード影

shadow.card
種別
影
CSS
--ic-shadow-card
値
0px 1px 2px 0px rgb(0 0 0 / 0.05)

モーション

短く予測可能な動きだけを使い、操作結果を分かりやすくします。

高速

motion.duration.fast
種別
動き
CSS
--ic-duration-fast
値
150ms

標準

motion.duration.base
種別
動き
CSS
--ic-duration-base
値
300ms

標準イージング

motion.easing.standard
種別
動き
CSS
--ic-ease-standard
値
cubic-bezier(0.2, 0, 0, 1)
前へブランド次へ変更履歴