ガイド
2つの参考サイトを組み合わせて、プロトタイプ用のデザインを1つに
「NotionとStripeを合わせたような雰囲気にしてほしい」。クライアントはよくこんな依頼でプロトタイプを頼んできます。サイトごとのDESIGN.mdがあれば、その一言を1つの具体的な仕様に変えられます。トークンを並べて比較し、どちらのファイルを主にするかを決めて、組み合わせるのです。
Design Extractorが用意するのは2つのファイルです。組み合わせるのはあなた自身で、手作業でもコーディングエージェントでも行えます。このガイドでは両方の方法を紹介します。
プロトタイプを作るデザイナーとエージェンシー向け。更新。
このガイドでわかること
- トークン単位で比較した2つのDESIGN.mdファイル。違いが具体的にわかります。
- 組み合わせの計画：一方のファイルをベースにし、もう一方から名前を挙げたトークングループを取り入れます。
- 手作業で、または下のプロンプトでエージェントが作った、組み合わせ後のDESIGN.md。
- 組み合わせても読みやすさが保たれているかのコントラストチェック。
組み合わせの仕組み
組み合わせは平均ではありません。あるパレットの半分と別のパレットの半分を混ぜると、どちらにも似ていないサイトになります。うまくいくのは、1つのベースファイルに、もう一方から名前を挙げたいくつかの部分を加える方法です。
- ベースは構造を決めます。タイプスケール、スペーシング、角丸、コンポーネントのレシピです。
- アクセントは、primaryカラーの系統やディスプレイ書体など、グループ単位で貸し出します。ばらばらの値を1つずつ借りることはしません。
どちらのファイルもGoogleのDESIGN.md仕様に沿っているため、グループが揃っています。colors、typography、rounded、spacing、componentsです。全体の構造はDESIGN.mdの内容をご覧ください。
手順
両方のファイルを入手する
ギャラリーにあればそこからコピーするか、Design ExtractorのホームページにそれぞれのURLを貼り付けて、それぞれPro抽出を実行します。
並べて比較する
下の表のように、primaryカラー、背景、フォント、文字サイズ、角丸を比較します。
ベースを選ぶ
レイアウトと情報密度がプロトタイプに合うサイトを選びます。
アクセントから借りるものを決める
「primaryカラーの系統」のように、トークングループとして書き出します。
手作業かエージェントで組み合わせる
どちらの方法も下で紹介しています。結果はプロトタイプのリポジトリにDESIGN.mdとして保存します。
コントラストと構造を確認する
組み合わせたファイルを無料のDESIGN.mdバリデーターに貼り付けます。
実例：NotionとStripeの組み合わせ
ギャラリーにある実際の2つのファイル、NotionのDESIGN.mdとStripeのDESIGN.mdを使います。どちらもブランドの公開Webサイトから抽出したもので、公式のブランドガイドラインではありません。
| Notion | Stripe | |
|---|---|---|
| Primary | #0075DE | #533AFD |
| 背景 | #FFFFFF | #FFFFFF |
| 文字 | #000000 | #061B31 |
| フォント | Notion Inter, Lyon Text | Sohne |
| 最大の文字 | hero-display, 96px, ウェイト600 | hero-display, 56px, ウェイト500 |
| 本文の文字 | body, 16px, ウェイト400 | body-lg, 18px, ウェイト300 |
| ボタンの角丸 | 8px | 4px |
| カラートークン | 20 | 21 |
| コンポーネントのレシピ | 14 | 71 |
組み合わせ方の一例
書体、スペーシング、角丸、コンポーネントはNotionをベースにし、primaryカラーの系統（primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft）をStripeから借ります。よくある「レイアウトはうちのまま、勢いはあちらから」という依頼です。
決める前に数値を確認しましょう。Notionの背景に対するStripeのprimaryのコントラストは6.1:1です。新しいprimaryの上に置いたNotionのon-primaryの文字は6.1:1になります。WCAG AAでは、本文の文字には4.5:1以上、大きな文字とアイコンには3:1以上が必要です。
落とし穴が1つあります。Notion自身のprimaryである#0075DEは、ファイル内に65回登場し、その多くはコンポーネントのレシピの中です。冒頭のトークンを置き換えるだけでは不十分で、すべての箇所を変える必要があります。
---
name: Notion and Stripe prototype
colors:
primary: "#533AFD"
primary-focus: "#5452FB"
primary-bright: "#635BFF"
primary-pressed: "#4032C8"
primary-deep: "#2E2B8C"
primary-soft: "#D6D9FC"
on-primary: "#FFFFFF"
ink: "#000000"
typography:
hero-display:
fontFamily: Notion Inter
fontSize: 96px
fontWeight: 600
lineHeight: 1.05
letterSpacing: -4.6px
body:
fontFamily: Notion Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: normal
rounded:
xs: 4px
sm: 8px
md: 12px
full: 9999px
---手作業で組み合わせる
- ベースのファイルをDESIGN.mdとしてコピーし、
nameを変更します。 colorsで、ベースのprimary系統をアクセントの値に置き換えます。- ファイル全体から古いhex値をひとつずつ検索して置き換えます。コンポーネントのレシピはCSSの中で色を繰り返しているため、トークンの一覧だけでは不十分です。
- OverviewとColorsの文章を、どちらかのブランドではなく、組み合わせた結果を説明するように書き直します。
- バリデーターでファイルをチェックし、コントラストの警告があれば修正します。
エージェントで組み合わせる
両方のファイルをプロトタイプのリポジトリ（たとえばdesign/の下）に保存し、ベース、取り入れるグループ、実行するチェックを指定したプロンプトをエージェントに渡します。このプロンプトは、このガイドのために実際のファイル名とトークン名で書いたものです。
Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.返ってきたものは、他の変更と同じようにレビューしてください。差分を読み、ファイルをバリデーターに貼り付けます。入力するのはエージェントですが、プロンプトに込めた判断はあなたのものです。
このガイドで使うファイル
どのギャラリーページにも、ダウンロードできる完全なDESIGN.mdが、パレットとタイプ見本とともに掲載されています。
ソフトウェア・SaaS · Productivity & NotesNotion
Notionのマーケティング向けホームページは、深いネイビー（#02093a）のヒーローセクションと明るい（#f6f5f4）ボディを組み合わせています。全テキストに独自書体のNotionInterを用い、12カラムグリッドと28pxのガターで構成されています。角丸は2種類を使い分け、カードには8px、ピル型の要素には9999pxを適用しています。フローティングUIには複数レイヤーのシャドウを段階的に重ねた影の仕組みを採用しています。ブランドブルー（#2537b1）はCTAやアクセントのハイライトに使われ、gray-200からgray-900までの段階的なグレースケールが、テキストと面の階層を整えています。
金融・フィンテックStripe
Stripeのマーケティングホームページは、可変フォント「sohne-var」を軽めのウェイト（300〜400）で用いた、厳密に管理されたデザインシステム（HDS — Stripe Design System）で構成されています。ブランドカラーは濃いネイビーからインディゴにかけてのパレットで、中核には#533afd（Stripe Indigo）を据えています。特徴的なのは、全面に広がるスペクトラム調のグラデーションを用いたヒーローセクションです。コンポーネントは角丸が小さく（4〜6px）、影はフラットからごく控えめな程度に抑えられ、8pxを基準とするスペーシンググリッドに沿って構成されています。全体のトーンは、権威がありながらも親しみやすく、確かなタイポグラフィと控えめな色使いによって、金融インフラストラクチャーを伝えています。
旅行・交通・物流Airbnb
Airbnbのデザインシステムは、独自のバリアブルフォント「Airbnb Cereal VF」を中心に構成されています。ほぼモノクロームのニュートラルなパレットで、濃いチャコール（#222222）とライトグレーを基調としています。ブランドのシグネチャーカラーである「Rausch」のコーラルピンク（#ff385c）は、プライマリーCTAとロゴにのみ限定して使われています。レイアウトはレスポンシブな写真カードグリッドで、画像とテキストの比率にゆとりがあります。カードには20pxのやわらかな角丸が付けられ、複数レイヤーのアンビエントシャドウによって、強いコントラストを避けながら控えめな奥行きを生み出しています。検索バーは目立つピル型のコンテナで、主要なユーザーアクションをまとめる役割を果たしています。
よくある質問
2つのWebサイトのデザインを1つに組み合わせる：よくある質問
試す前によく寄せられる質問への簡潔な回答です。
いいえ、組み合わせる機能はありません。1回の抽出で返されるのは、1つのサイトのDESIGN.mdです。2つのファイルは手作業で組み合わせるか、このガイドにあるようなプロンプトでコーディングエージェントに頼み、その結果をレビューしてください。
2つ、場合によっては3つです。1つのファイルをベースにして、タイプスケール、スペーシング、角丸、コンポーネントといった構造を決めます。ほかのファイルからは、カラーの系統やディスプレイ書体など、名前を挙げた部分を借ります。より多くのファイルの値を混ぜると、つぎはぎのような見た目になります。
レイアウトと情報密度がプロトタイプに合うほうです。クライアントが、片方のサイトの色を使った落ち着いたドキュメント風のプロダクトを望んでいるなら、落ち着いたサイトをベースにして、もう一方から色を借ります。その逆ではありません。
組み合わせたファイルを無料のDESIGN.mdバリデーターに貼り付けます。構造をチェックし、コントラストが不足している文字色を指摘します。そのうえで、クライアントに見せる前に、実際の画面を1つ作ってみてください。
依頼に必要な2つのファイルを取得
参考サイトのURLをそれぞれ貼り付けて、比較と組み合わせにすぐ使えるDESIGN.mdを取得しましょう。
関連ガイド
Claude CodeとCursorに、Webサイトに合ったUIを作らせる
気に入ったサイトを抽出し、DESIGN.mdをリポジトリに置いてエージェントに参照させます。Claude CodeとCursor用のプロンプトそのままを紹介します。
デザイナーがいなくても大丈夫。実績あるデザインシステムをアプリに借りる
参考サイトの選び方、DESIGN.mdのどこを残してどこを変えれば、コピーではなく自分のものになるかを解説します。
サイトをリビルドするなら、まずデザインシステムを抽出
リビルド、リブランド、フレームワーク移行の前に現在のサイトをDESIGN.mdとして記録し、手で確認すべき点を把握します。
MCPで、必要なときにコーディングエージェントへデザイン仕様を渡す
MCPサーバーを接続すると、エージェントが自らサイトのDESIGN.mdを抽出し、完了を待って、それをもとに構築できます。