デザイナーがいなくても大丈夫。実績あるデザインシステムをアプリに借りる

参考サイトの選び方#

借りるサイトによって、アプリの印象のほとんどが決まります。ここには10分かけましょう。良い参考サイトには次の特徴があります。

• 同じ種類のプロダクト。ダッシュボードなら、ファッションストアではなく別のダッシュボードから借りるとうまくいきます。
• 似た情報密度。アプリがフォームとテーブル中心なら、大きなヒーローが1つあるだけのサイトではなく、フォームとテーブルのあるサイトを選びましょう。
• 明確なアクションカラーが1つ。クリックする場所を1色で示しているなら、リブランドはその色系統を差し替えるだけで済みます。
• 読みやすい書体。スマートフォンでサイトを開き、段落を1つ読んでみてください。快適に読めるなら、そのタイプスケールは取り入れる価値があります。
• 希望どおりのライトかダーク。ダーク前提のシステムをライトに変えるのは、微調整ではなくリデザインです。
• ブランドそのものではない見た目。色だけでそのサイトだとわかるようなら、変えなければならない部分が多すぎます。

DESIGN.mdギャラリーはカテゴリーで絞り込めるので、いくつかの候補を手早く比較できます。

手順#

1. 1

   候補を2、3サイトに絞る

   上の特徴を参考にしてください。気に入った画面のスクリーンショットがあると、あとで判断しやすくなります。

2. 2

   一番気に入ったサイトのDESIGN.mdを入手する

   ギャラリーページからコピーするか、Design ExtractorのホームページにURLを貼り付けてPro抽出を実行します。Proはサイトの主要ページをサンプリングし、カラー、タイポグラフィ、スペーシング、角丸、コンポーネントのレシピをまとめた1つのファイルを返します。初めての方はDESIGN.mdとは何かをご覧ください。

3. 3

   自分のものにする

   ブランドカラーの系統、商用であればフォント、名前、トーンを変更します。下のプロンプトなら一度に行えます。

4. 4

   リポジトリに置いてエージェントに参照させる

   リポジトリのルートにDESIGN.mdとして保存します。追加する参照はClaude CodeとCursorのガイドに載っています。

5. 5

   確認する

   編集したファイルを無料のDESIGN.mdバリデーターに貼り付けます。構造をチェックし、コントラストが不足している文字色を指摘します。

実例：Notion#

たとえばNotionの雰囲気が気に入ったとします。ギャラリーのDESIGN.mdに記録されたそのデザインシステムと、残すもの、変えるものは次のとおりです。

残すものと変えるもの

### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

1つのプロンプトで自分のものにする#

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

ブランドを丸ごとコピーしてはいけない理由#

このガイドで使うファイル#

ギャラリーからのおすすめの出発点です。各ページには、完全なDESIGN.md、パレット、タイプ見本があります。

• 
  ソフトウェア・SaaS · Productivity & Notes

  Notion

  Notionのマーケティング向けホームページは、深いネイビー（#02093a）のヒーローセクションと明るい（#f6f5f4）ボディを組み合わせています。全テキストに独自書体のNotionInterを用い、12カラムグリッドと28pxのガターで構成されています。角丸は2種類を使い分け、カードには8px、ピル型の要素には9999pxを適用しています。フローティングUIには複数レイヤーのシャドウを段階的に重ねた影の仕組みを採用しています。ブランドブルー（#2537b1）はCTAやアクセントのハイライトに使われ、gray-200からgray-900までの段階的なグレースケールが、テキストと面の階層を整えています。

• 
  旅行・交通・物流

  Airbnb

  Airbnbのデザインシステムは、独自のバリアブルフォント「Airbnb Cereal VF」を中心に構成されています。ほぼモノクロームのニュートラルなパレットで、濃いチャコール（#222222）とライトグレーを基調としています。ブランドのシグネチャーカラーである「Rausch」のコーラルピンク（#ff385c）は、プライマリーCTAとロゴにのみ限定して使われています。レイアウトはレスポンシブな写真カードグリッドで、画像とテキストの比率にゆとりがあります。カードには20pxのやわらかな角丸が付けられ、複数レイヤーのアンビエントシャドウによって、強いコントラストを避けながら控えめな奥行きを生み出しています。検索バーは目立つピル型のコンテナで、主要なユーザーアクションをまとめる役割を果たしています。

• 
  ビジネス・専門サービス

  Shopify

  Shopifyのマーケティング用トップページは、全面に広がるドラマチックな動画ヒーローを採用しています。ほぼ黒に近い背景色 #02090a が、上部の白いナビゲーションバーと鮮やかなコントラストを生み出しています。ブランドのアクセントカラーは鮮やかなミントグリーンの #36f4a4 で、ハイライトやインタラクティブな状態の表示にアクセントとして控えめに使われています。タイポグラフィは、ディスプレイ用や編集的な見出しに NeueHaasGrotesk、UIの本文に Inter-Variable を組み合わせています。CTAには完全な角丸のピル型(border-radius: 9999px)が用いられています。全体の設計システムは、自信に満ち、コントラストが高く、理想を感じさせる印象で、訪問者を加盟店へと転換させることを目指して作られています。

DESIGN.mdのサンプルをすべて見る