「AIにお店のホームページを作ってもらったら、なんだか野暮ったい」。

Claude CodeやChatGPTで試した人の多くが、同じ感想を口にします。文章は自分で書いたから悪くない。写真も店のものです。それなのに全体が、どこかで見た無料テンプレートのように見えます。原因の多くは、文章でも写真でもなく、文字の間隔と行間、そしてフォントの指定にあります。

この記事では、その原因を1枚のファイルで解消する「DESIGN.md」と、日本企業508サイト分のファイルを見比べて選べる「日本企業版DESIGN.mdギャラリーサイト」の使い方を、コードを書かない人向けに説明します。読み終わる頃には、自分の店の雰囲気をAIに渡す手順がわかります。

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

DESIGN.mdとは「デザインの発注書」

DESIGN.mdは、Googleのデザインツール「Stitch」のチームが提唱したファイル形式です。2026年4月21日にGoogleがその仕様をオープンソースとして公開し、Stitch以外のツールでも使える形になりました。

中身は、色・フォント・余白・ボタンの形などのルールを書いた、ただのテキストファイルです。Claude Codeを使っている人なら、CLAUDE.mdと同じ発想だと思えばわかりやすいでしょう。CLAUDE.mdが「仕事の進め方の指示書」なら、DESIGN.mdは「見た目の指示書」です。

私はこのメディアで「アプリやホームページをAIに作らせるのは、コードを書くことではなく発注の段取りです」と書いてきました。DESIGN.mdは、その発注書のデザイン欄にあたります。

日本語のホームページがAIで野暮ったくなる理由

海外にはすでに、有名サービスのデザインルールをDESIGN.mdの形にして集めたリポジトリがあります。ただし、そのまま日本語のホームページに使うと、うまくいきません。日本語には、欧文とは違う組版のルールがあるからです。

日本企業版ギャラリーの公開元は、日本語のホームページに必要な仕様として次の項目を挙げています。

・和文フォントを優先する指定と、無い場合に使う代わりのフォントの並び

・欧文より広い行間（欧文の1.4〜1.5に対し、和文は1.5〜2.0）

・本文に0.04〜0.1em程度の字間

・句読点や括弧を行頭・行末に置かない禁則処理

・和文と欧文を混ぜるときの組み合わせのルール

AIは何も指定しなければ、欧文向けの詰まった行間で日本語を組みます。それが「読みにくい」「安っぽい」と感じる正体です。逆にいえば、この数値を渡すだけで印象は大きく変わります。

日本企業版DESIGN.mdギャラリーサイトで何が見られるか

2026年9月、X（旧Twitter）でデザイナーの方が紹介して話題になったのが「Awesome Design MD JP」というギャラリーサイトです。日本語のサービス508サイトのホームページから抜き出した配色・フォント・行間を、カードで見比べられます（サイト数は2026年9月時点の公開元の記載です）。

できることは3つです。

・カテゴリで絞り込む（SaaS＝業務用のクラウドサービス、メディア、消費者向け、制作会社）

・カードのプレビューで、そのサイトの雰囲気を目で確かめる

・気に入ったらDESIGN.md本体をそのまま開いて、自分の作業フォルダに持ち帰る

収録の中身が面白いところです。誰もが知る大手の通販や家電メーカーだけでなく、地方の老舗の酒蔵、工芸ブランド、美術館、宿まで入っています。金沢のブランドも複数見つかります。地方の店が参考にできる「らしさ」の見本帳としては、私が知る限り一番の規模です。

使い方は3ステップ、インストールは不要

ギャラリーはただのWebページで、DESIGN.mdはただのテキストファイルです。何かを入れる必要はありません。

ステップ1：近い雰囲気のサイトを選ぶ

自分の店に近い業種、または「こういう空気にしたい」と思うカードを1つ選びます。似た業種より、目指す雰囲気で選ぶ方がうまくいきます。

ステップ2：作業フォルダに置く

DESIGN.mdの中身をコピーして、Claude Codeで開いているフォルダに「DESIGN.md」という名前で保存します。CLAUDE.mdがある人は、次の1行を足しておくと毎回自動で読んでくれます。

ホームページやUIを作るときは、必ず DESIGN.md のルールに従うこと。

ステップ3：いつもの言葉で頼む

あとは、こう頼むだけです。

DESIGN.md に沿って、架空の和菓子店のトップページのたたき台を作ってください。
店名は「ことほぎ堂」、載せるのは季節の菓子3つと、店舗案内と、電話番号です。

同じ依頼をDESIGN.mdなしでも試して、2つを並べてみてください。行間と余白と色の落ち着きの差は、一目でわかります。このビフォーアフターを自分の目で見ることが、いちばんの理解になります。

自分の店用に作り直すときの注意

ここが一番大事な点です。ギャラリーのDESIGN.mdについて、公開元自身が注意書きを載せています。各社の公式のデザイン資料ではなく、公開されているページのCSSから抜き出したものであり、サービス名や商標は各社に帰属する、という趣旨です。

つまり、他社のDESIGN.mdをそのまま使ってお店のホームページを作ると、その会社にそっくりなページができてしまいます。練習や比較には最適ですが、実際に公開するホームページには向きません。

実際に使うときは、同じリポジトリに入っているテンプレート（template/DESIGN.md）を土台に、自分の店用のファイルを作ります。テンプレートは9つの項目に分かれています。

・全体の雰囲気とキーワード

・色の役割（主役の色、注意を引く色、地の色）

・文字のルール（和文と欧文のフォント、大きさの段階、行間、字間）

・ボタンや入力欄やカードの形

・余白と幅の決まり

・影の深さ

・やっていいこと、やってはいけないこと

・スマホでの表示

・AIへの指示のまとめ

全部を自分で埋める必要はありません。看板や名刺、包装紙の写真をAIに見せて「この店の色とフォントの雰囲気を、DESIGN.mdのテンプレートに沿って言葉にして」と頼めば、たたき台は出てきます。ギャラリーで選んだ1枚は、そのたたき台の答え合わせとして横に置いておく使い方が安全です。

老舗らしさは、数値でできている

ギャラリーを眺めていて気づいたことがあります。老舗や工芸のブランドは、明朝体、生成りに近い地の色、広めの字間という共通の傾向を持っています。逆に、勢いのある新しいサービスは、ゴシック体、白い地の色、詰めた字間に寄ります。

「うちの店の雰囲気を伝えたい」という願いは、今までは感覚の話でした。ギャラリーは、それが行間や字間という数値でできていることを見せてくれます。数値になれば、AIに渡せます。渡せれば、次に作るチラシやSNS画像にも同じ空気を引き継げます。地方の店の「らしさ」を伝わる形に編集する道具として、私はこのギャラリーを使っていくつもりです。

よくある質問

Q1. デザインの知識がなくても使えますか

使えます。行間や字間の意味がわからなくても、ギャラリーのカードを好きか嫌いかで選べば十分です。数値の意味はAIが理解します。

Q2. Claude Code以外でも使えますか

使えます。DESIGN.mdはただのテキストなので、ChatGPTやGeminiに貼り付けて「このルールでページを書いて」と頼む形でも動きます。ただし毎回自動で読んでくれるのは、CLAUDE.mdのような指示書の仕組みがあるツールです。

Q3. ホームページを制作会社に頼んでいる店でも意味がありますか

あります。自分の店用のDESIGN.mdを1枚持っておくと、制作会社との打ち合わせや、チラシ・SNS画像をAIで作るときの共通言語になります。「うちの色はこれ、フォントはこれ」を毎回説明しなくて済みます。

Q4. 選んだDESIGN.mdをそのまま公開するホームページに使ってもいいですか

おすすめしません。前述のとおり、他社のページにそっくりになります。練習と比較に使い、公開用はテンプレートで自分の店用に作り直してください。

まとめ

・AIが作る日本語のホームページが野暮ったいのは、行間・字間・フォントの指定がないからです

・日本企業版DESIGN.mdギャラリーサイトで、目指す雰囲気を見て選び、ファイル1枚でAIに渡せます

・公開用は他社のファイルを丸ごと使わず、テンプレートで自分の店用に作り直します

まずはギャラリーで1枚選び、DESIGN.mdあり・なしで同じ依頼を試してみてください。

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

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

30分無料相談はこちら