ベースのデザインシステムは「そのまま使わず」、組織向けのローカルデザインシステムに落としてから使う
デジタル庁デザインシステムのようにブランド中立な土台は、導入先の色・余白・角丸に置き換えた「ローカル」を作る前提で使う。
どんな問題を解決するか / いつ使うか
公開デザインシステムや社内共通DSを、自社ブランドや特定プロダクトに合わせて運用するとき。アクセシビリティを壊さず見た目だけ変えたいとき。
やり方（手順の例）
- ベースのFigmaデータを取得し、ファイル名・カバー・版番号を導入先用に変える。
- ブランドアセットに基づき、キーカラー等のトークン差し替えルールを決めてから編集する。
- 使うコンポーネントだけ残し、不要なものは削除か退避。
- コンポーネント単位で角丸・余白を調整する。
- よく使うボタン文言などは、あらかじめ入れた状態でコンポーネント化する（文言の揺れ防止）。
- 定番の組み合わせはセットとして定義する。
- 並行して画面仕様を組み、そこで出た調整をコンポーネント定義に戻す。
編集してよい範囲の例: キーカラー、タイポの段階、余白スケール、角丸、エレベーション、リンク色、カラム／ブレークポイント。
注意点・対応状況（アクセシビリティの骨格は維持）
- テキスト対比 4.5:1以上、非テキスト 3:1以上。セマンティック色の「意味」は変えない。
- 本文・UIは16 CSS px基準、14未満は原則避ける。読み物の行高は1.5倍以上。
- フォーカスインジケーターや強制カラーモード対応など、コンポーネント内蔵のa11y仕組みは外さない。
- コードスニペットはサンプル。WAI-ARIA指定を消さない。
出典
- 投稿者: @seikei_kin
- 投稿: @seikei_kin · 2026-10-09
- 公式: design.digital.go.jp
- 収集日: 2026-10-10（JST）