Web Extension Lab

デザイントークンとは？Webサイトのビジュアル設計を抽出・再利用する方法

2026年4月29日

優れたデザインのWebサイトには、表面の下に隠された構造があります。ボタンの正確な青色。見出しの特定のフォントサイズ。セクション間の一貫した24pxのパディング。これらの値はランダムではなく、意図的なデザイン上の決定です。それらが生の数値ではなく名前付き変数として保存されるとき、それをデザイントークンと呼びます。

デザイントークンをわかりやすく

デザイントークンとは、デザイン上の決定に名前をつけた値です。ブランドの青を使うたびに #1D4ED8 と書く代わりに、color-primary という名前をつけ、その名前をどこでも参照します。ブランドの青が変われば、1つのトークンを更新するだけで、それを使うすべての要素が自動的に更新されます。

ペイントの色名に例えるとわかりやすいでしょう。ホームセンターはペンキ缶に16進コードを書きません。「オーシャンブリーズ」や「ミッドナイトブルー」のような名前を使います。デザイントークンも同じで、視覚的な値に人間が読める名前を付け、チームが明確にコミュニケーションし、1か所で変更できるようにします。

デザイントークンが保存するもの

トークンはWebサイトで見るあらゆる視覚プロパティをカバーします：

• 色 — ブランドカラー、背景色、テキストカラー、ボーダーカラー、ステータスカラー
• タイポグラフィ — フォントファミリー、サイズ、ウェイト、行間、文字間隔
• スペーシング — マージン、パディング、要素間のギャップ（4px、8px、16px、24px等のスケール）
• ボーダー — 太さ、角丸（border-radius）、色
• シャドウ — 奥行きや立体感のためのbox-shadow値
• モーション — アニメーションの持続時間、イージングカーブ

これらの値は通常、デザイナーと開発者の両方が参照できるJSONファイルに保存されます。

デザインシステムを作らなくても役立つ理由

大企業でデザインシステムを構築していなくても、トークンは実用的です。3つの具体的なシナリオを紹介します。

既存ブランドに合わせる

会社の既存Webサイトに合わせたランディングページを作る場合。色を目で合わせてスペーシングを推測する代わりに、既存サイトからデザイントークンを抽出します。近似値ではなく正確な値が得られます。

デザインの一貫性を監査する

サイトの異なるページでボタンが微妙に異なる青を使っていたり、見出しサイズが不統一だったりすることに気づいた場合。トークンを抽出すると、実際に使われているすべての値が明らかになり、不整合が一目でわかります。

開発者への引き継ぎ

注釈付きスクリーンショットのPDFを送る代わりに、トークンのJSONファイルを渡します。値は正確で、機械可読で、コードですぐに使えます — 推測も計測も「14pxか16pxか？」の議論も不要です。

既存Webサイトからデザイントークンを抽出する方法

トークンをゼロから作る必要はありません。いくつかのツールがライブサイトからリバースエンジニアリングできます：

ライブページから抽出した色の値 — hexコードとプレビュースウォッチで素早く確認

抽出したトークンの活用法

トークンを手に入れたら、役割に応じた活用方法があります：

• デザイナー：Figmaにスタイルや変数としてインポート。コンポーネントライブラリの基盤に。
• 開発者：JSONやCSSカスタムプロパティをプロジェクトに組み込み。ハードコードした値の代わりにトークン名を参照。
• マーケター・コンテンツ制作者：プレゼンテーション、SNSテンプレート、メールデザインで正確なブランドカラーとフォントを使用。スクリーンショットからhexコードを推測する必要なし。

重要なのは、すべてのWebサイトにはすでに暗黙のトークンがあるということです — CSSに埋め込まれているだけで、名前付けされ整理されていないだけです。抽出することで暗黙を明示に変え、サイトのビジュアルDNAを文書化・共有・再利用可能なものにします。

まとめ

デザイントークンは複雑な技術概念ではありません。色・フォント・余白といった視覚的な値の名前付き変数で、デザインの決定を再利用可能にし、一元管理できるようにするものです。ゼロからトークンシステムを構築する必要はなく、ブラウザ拡張やCLIツールで既存Webサイトからトークンを抽出し、ブランドの一致、一貫性の監査、開発者への正確な値の引き継ぎに活用できます。