AIに作らせたページの見た目を整えるなら、「DESIGN.md」というデザインの指示書をAIに渡す方法があります。ところが最近は入手先が増え、代表的なものだけでも、海外の有名サービスのギャラリー、日本企業版のギャラリー、自社サイトから取り出す拡張機能の3つがあります。「結局どれを使えばいいの？」と手が止まっている方もいるのではないでしょうか。

この記事では、3つの違いと、今の自分に合う1つを選ぶ基準をお伝えします。

▼記事を3分で理解できる！マンガ風スライドはこちら

DESIGN.mdは見た目の決まりごとを書いた指示書です

DESIGN.mdは、色や文字、余白、ボタンの形などの決まりごとを、AIが読める文章にまとめたファイルです。「何を使い、何を避けるか」というルールも書かれています。もとはGoogleのデザインツール「Stitch」で使われていた形式で、仕様はGitHubで公開されています。

3つの入手先は「誰の見た目か」が違います

海外の有名サービスのお手本：Refero Styles

海外の有名サービスを中心に、Webサイト2,000件以上（2026年9月時点）の見た目をDESIGN.mdにまとめたギャラリーです。洗練された画面の雰囲気を目指すときに向いています。詳しい使い方はRefero Stylesの記事で解説しています。

日本企業のお手本：Awesome Design MD JP

日本企業のWebサイト500件以上（2026年9月時点）の見た目をまとめたギャラリーです。日本語の行間や文字の間隔、フォントの指定まで書かれているため、文章の多いお店のページや会社案内に向いています。日本企業版ギャラリーの使い方の記事もご覧ください。

自社のお手本：DESIGN.md Style Extractor

開いているWebサイトの色や文字、余白を読み取り、DESIGN.mdとして書き出す無料のChrome拡張機能です。自社サイトで使えば、今の見た目の決まりごとをAIに渡せます。手順は自社サイトから取り出す方法の記事にまとめています。

選ぶ基準は「借りる段階」か「守る段階」か

どれを選ぶかは、センスの良し悪しでは決まりません。今の自分が、見た目を「借りる段階」か「守る段階」かで決まります。

自社の見た目がまだないなら借りる

決まった色やロゴがまだなく、これからページを作る段階なら、ギャラリーからお手本を借りるのが近道です。

すでに見た目があるなら守る

看板や名刺、今の自社サイトなど、お客さんに覚えてもらっている見た目があるなら、借りる必要はありません。自社サイトから取り出して今の見た目をAIに守らせる方が、お客さんを迷わせずに済みます。

迷ったときの早見表

・自社サイトがあり、見た目を変えたくない場合は、自社サイトから取り出します

・自社サイトがなく、日本語の文章が中心の場合は、日本企業版を使います

・自社サイトがなく、画面の構成や雰囲気を重視する場合は、Refero Stylesを使います

組み合わせて自分用の1枚にもできます

1つに絞る必要はありません。色は自社サイトから取り出し、行間や文字の間隔は日本企業版のお手本にそろえる、といった組み合わせもできます。AIには、たとえば次のように頼みます。

2つのDESIGN.mdを1つにまとめてください。
・色は「自社.md」に書かれたものを使ってください
・文字の大きさ、行間、文字の間隔は「お手本.md」に合わせてください
・まとめた結果は「DESIGN.md」という名前で保存してください

Claude Codeなら、まとめたDESIGN.mdを作業フォルダに置き、CLAUDE.mdに「@DESIGN.md」と1行書いておくと、作業を始めるたびに自動で読み込まれます。

どれを選んでも守りたい2つのこと

有名企業の見た目をそのまま公開しない

ギャラリーのDESIGN.mdは各社の公式ルールではなく、運営側がWebサイトから読み取って整理したものです。お手本のままのページを公開すると真似に見えるおそれがあるため、色やロゴは自分のものに差し替えてください。

無料の範囲は変わることがある

2026年9月時点では3つとも基本の機能は無料ですが、Refero Stylesはベータ版で、AIツールと直接つなぐ機能は有料プランです。使う前に公式サイトで最新の条件を確かめてください。

よくある質問

Q. 3つとも試す必要はありますか？

A. ありません。自社サイトがあるかどうかで、まず1つに絞れます。迷ったら早見表で選んだ1つから始めてください。

Q. Claude Code以外のAIでも使えますか？

A. 使えます。DESIGN.mdは文章で書かれたファイルなので、CodexやCursorなど、ファイルを読めるAIツールで使えます。

Q. 自社サイトがない場合はどうすればいいですか？

A. ギャラリーからお手本を借りて始めてください。そのうえで看板や名刺の色に差し替えると、自分の店らしさが出ます。

まとめ

DESIGN.mdの代表的な入手先は、海外の有名サービスのお手本、日本企業のお手本、自社サイトからの取り出しの3つです。選ぶ基準は、見た目を「借りる段階」か「守る段階」かです。見た目がまだないならギャラリーから借り、すでにあるなら自社サイトから取り出して守ります。

まずは早見表で1つ選び、次にAIへページ作りを頼むときに渡してみてください

▼3分で理解できる！マンガ風スライドはこちら

AI活用について、社内でどう進めるべきか迷っていませんか？
AI-Brainでは、中小企業向けに30分の無料相談を実施しています。
まずはお気軽にご相談ください。

30分無料相談はこちら