既存サイトからデザインシステムを逆算する

デザインシステムがないサイトのリニューアル

クライアントワークでサイトリニューアルを担当したとき、既存サイトにデザインシステムがありませんでした。

ページごとに微妙に色が違う、フォントサイズがバラバラ、余白の規則性が見えない。リニューアルするにも、まず「今のルール」を把握しないと、何を残して何を変えるか判断できない。

逆算というアプローチ

通常、デザインシステムは「最初に定義して、それに沿って作る」もの。でも今回は逆。既にあるサイトから「使われているルール」を抽出して、後からシステムとして整理する。

Claude Code にサイトの URL を伝えて、「このサイトのデザインシステムを抽出して」と依頼しました。

抽出したもの

カラーシステム

サイト全体で使われている色を収集し、パレットとして整理しました。

• ベースパレット（背景・テキスト・ボーダー）
• アクセントカラー（プライマリ・セカンダリ）各5段階の濃淡
• ステータスカラー（成功・警告・エラー・情報）

ページごとにバラバラだった色が、実は数色のバリエーションだったことがわかりました。

タイポグラフィ

フォントファミリー、ウェイト、サイズを一覧化。見出しから本文、キャプションまで、使われているサイズを段階的に整理しました。

結果、9段階の Type Scale に収束。Display サイズから Micro サイズまで、規則的な階段状になっていました。無秩序に見えて、実は暗黙のルールがあった。

スペーシング

余白を分析すると、8px グリッドに近い体系で使われていることがわかりました。xs（4px）から 3xl（80px）まで7段階のトークンに整理。

Figma に落とし込む

抽出したトークンをもとに、Figma のデザインシステムファイルを構築しました。

• カラースタイルの登録
• テキストスタイルの登録
• スペーシングのガイドライン
• 主要コンポーネントの定義（カード、テーブル、バッジなど）

Claude Code が Figma Plugin API のヘルパーコードまで生成してくれたので、手作業でスタイルを登録する手間が大幅に減りました。

デザイン原則も言語化

単にトークンを抽出するだけでなく、「このサイトが暗黙的に守っているルール」も言語化しました。

• マージンは左右均等
• 1セクションにアクセントカラーは1回まで
• 8px グリッドに沿う
• コントラスト比は WCAG AA 準拠

これらは「誰かが決めたルール」ではなく、「結果的にそうなっていた」もの。でも言語化することで、リニューアル後も一貫性を保てます。

逆算の価値

デザインシステムを「ゼロから作る」のは大変です。でも、既存サイトから逆算すれば、すでにある資産を活かせる。

• クライアントにとっては「今のブランドの延長」として受け入れやすい
• デザイナーにとっては「何を変えて何を残すか」の判断基準になる
• エンジニアにとっては「既存コードとの整合性」が取りやすい

ゼロからの理想論より、現実から積み上げたシステムの方が、実は運用に乗りやすい。

Claude Code との役割分担

• 人間（自分）: サイトの目的理解、ブランドの方向性判断、最終的な採用/不採用の決定
• Claude Code: 色・サイズ・余白の網羅的な収集、トークンへの変換、Figma用コードの生成

手作業だと数日かかる分析を、Claude Code との対話で数時間に圧縮できました。