まず結論：コピーではなく「設計のたたき台」に使う
Awesome DESIGN.mdは、公開Webサイトから読み取れるデザインの特徴をDESIGN.md形式で整理したGitHubコレクションです。パッケージやUIフレームワークではないため、インストールして実行するものではありません。
使い方の要点は次の3つです。
- 作りたいページと目的が近い参考例を選ぶ
DESIGN.mdとプレビューで、色・文字・余白・部品のルールを確認する- ブランド固有の要素を除き、自分のプロジェクト用に書き換える
「このブランドと同じ画面を作る」ためではなく、AIエージェントに一貫した判断基準を渡すための資料として使うのが安全です。
参考例の探し方：色よりページの役割を見る
好みの色だけで選ぶと、自分のサイトに合わない情報量や操作方法まで持ち込みやすくなります。まずページの役割を合わせてください。
- SaaSの管理画面なら、表・フィルター・状態表示が多いダッシュボード系
- 商品やサービスの紹介なら、見出し・事例・CTAの流れが近いランディングページ系
- 技術文書なら、目次・コード・検索・階層が明確なドキュメント系
- 作品紹介なら、画像比率・余白・閲覧順序が近いポートフォリオ系
候補を2〜3件に絞ったら、preview.htmlで文字の読みやすさ、カードの密度、モバイル時の構成を比較します。見た目が派手な例より、自分のコンテンツ量に耐えられる例を選ぶ方が実装後の修正を減らせます。
GitHubから使う手順
- 公式リポジトリの
design-mdフォルダーを開きます。 - 目的が近いサイトのフォルダーを選びます。
- 最初に
preview.htmlがあれば確認し、方向性が合うか判断します。 DESIGN.mdを読み、使いたい原則と不要なブランド要素を分けます。- 参考ファイルをそのまま本番ルールにせず、自分用の
DESIGN.mdを作ります。 - プロジェクト直下へ置き、AIエージェントに参照範囲を明示します。
ダウンロード方法にこだわる必要はありません。少量なら必要な項目だけを書き直し、複数例を比較するなら別の調査用フォルダーへ保存してから統合すると混同を防げます。
自分のDESIGN.mdを作る最小構成
最初から長い仕様書を作る必要はありません。次の骨組みから始め、実装で確定した内容だけを増やします。
# DESIGN.md
## Product goal
- 誰が、何を完了する画面か
## Visual direction
- 明るさ、密度、印象
## Color roles
- 背景、本文、強調、成功、警告
## Typography
- 見出し、本文、補助テキストの階層
## Layout and spacing
- 最大幅、グリッド、余白の基準
## Components
- ボタン、カード、入力欄、ナビゲーションの状態
## Responsive behavior
- 狭い画面で隠すもの、積み重ねるもの
## Do / Don't
- 維持する原則と避ける表現色コードだけを並べるより、「どの役割に使う色か」「モバイルで何が変わるか」「ボタンの通常・hover・focus状態はどう違うか」まで書くと、AIがページごとに異なる判断をする問題を減らせます。
AIコーディングへ渡すプロンプト例
参考ファイルと自分のルールを混同させないよう、優先順位を短く指定します。
参考フォルダーのDESIGN.mdは、情報階層と余白の考え方だけに使ってください。最終的な色、コンポーネント、文言はプロジェクト直下のDESIGN.mdを優先します。ロゴ、画像、ブランド固有の形状はコピーせず、キーボード操作とモバイル幅も確認してください。
ページを生成した後は、見た目だけで完了にしません。リンク、フォームラベル、フォーカス表示、文字コントラスト、長い見出し、狭い画面での横スクロールを確認します。
previewを正しく使う方法
preview.htmlは完成サイトのテンプレートではなく、デザイン規則を目で確認するカタログです。次の項目を比較すると役立ちます。
- 背景色と本文色のコントラスト
- 見出しと本文のサイズ差
- ボタンの通常・hover・disabled状態
- カードの枠線、影、角丸
- 余白のリズムと情報密度
- ダークモードでの表面階層
プレビューとDESIGN.mdの説明が食い違う場合は、どちらかを無条件に採用せず、自分の画面で実際に使うルールを明文化してください。
コピーしないための境界線
参考にしやすいのは、余白の段階、文字階層、カード密度、ナビゲーション構造、レスポンシブ時の優先順位などの一般的な原則です。
一方、次の要素は自分のものへ置き換えます。
- ロゴ、商標、サービス名
- 写真、イラスト、アイコン素材
- キャッチコピーや説明文
- ブランドを強く識別させる固有の形状や演出
- 参考サイトだけで使われる製品固有の情報構造
また、分析ファイルに書かれた色やフォントがアクセシビリティを保証するわけではありません。自分の文字量、対象ユーザー、対応端末で読みやすさを再確認します。
Awesome DESIGN.mdには何が入っている？
公式リポジトリでは、サイト別のフォルダーにデザイン分析が整理されています。公式READMEが案内する主なファイルは次のとおりです。
| ファイル | 確認できる内容 | 使う場面 |
|---|---|---|
DESIGN.md |
雰囲気、色、文字、部品、レイアウト、レスポンシブ規則 | AIへ設計条件を渡すとき |
preview.html |
色見本、文字階層、ボタン、カードなどの視覚例 | 参考方向を選ぶとき |
preview-dark.html |
ダーク背景での部品と配色例 | ダークモードを比較するとき |
各DESIGN.mdは、公式ブランドガイドそのものではありません。公開画面をもとにした分析なので、数値や挙動が現在の実装と異なる可能性もあります。
getdesign.mdとの使い分け
Awesome DESIGN.mdはGitHub上でファイル構造や変更履歴を確認しながら使えるコレクションです。getdesign.mdは参考例をWeb画面から探したいときに便利な関連サービスです。
- GitHubでファイルを直接確認・比較したい：Awesome DESIGN.md
- ブラウザで参考例を探し、プレビューを見たい：getdesign.md
- 自分のプロジェクトの設計判断を残したい：自分専用の
DESIGN.md
適用後の確認リスト
- 参考ブランドの名前や素材が残っていない
- 色が役割名で定義されている
- 見出し、本文、補助文の階層が一貫している
- ボタンと入力欄にfocus・disabled状態がある
- 320px前後の狭い画面でも横スクロールしない
- 長い日本語見出しでもレイアウトが崩れない
- 実装で変更した判断が自分の
DESIGN.mdへ反映されている
この確認まで終えて初めて、参考例が単なる模倣ではなく、更新できる自分のデザインルールになります。