AIで作るデザインに統一感を出すには？配色・フォントを決める簡単スタイルガイドの作り方

こんなこと、ありませんか。

• AIにデザインを頼むたびに、色や雰囲気が変わってしまう
• それなりにおしゃれだけど、どこかで見たような仕上がりになる
• クライアントに「統一感を出しました」と言いたいけれど、うまく説明できない

この記事では、AI（Claude）と相談しながら、色・フォント・言葉づかいを決めた「ルール表」を1枚作ります。
Web制作でいう「トンマナ（トーン＆マナー）」を、初心者でも形にできる方法です。5分ほどで読めて、手を動かしても15分くらいで終わります。

• 統一感の正体は「決めごと」
• AIと作るときこそ、決めごとが大事
• デザインアセットとブランドアセット
• Claudeと一緒にルール表を作ってみよう
• STEP1　お店のイメージを伝えて、案を3つ出してもらう
• STEP2　案を選んで、自分で決める
• STEP3　ルール表にまとめて、見本も作ってもらう
• ルール表の使いどころ
• クライアントへの説明に使える
• どこで作っても、同じ雰囲気にそろう
• 迷ったら、ルール表に書き足す
• まとめ

統一感の正体は「決めごと」

統一感のあるお店のサイトやSNSは、「センスがいいから」そう見えるわけではありません。
裏には、たとえばこんな決めごとがあります。

• メインの色はこの緑。アクセントの色はこれだけ
• 見出しはこのフォント、本文はこのフォント
• 文章は「です・ます」で、ビックリマークは使わない

こうした決めごとが、サイトでもSNSでもチラシでも守られている。だから、どこで見ても「あのお店だ」とわかるのです。
Web制作の現場では、こうした雰囲気のルールを「トンマナ（トーン＆マナー）」と呼ぶこともあります。

AIと作るときこそ、決めごとが大事

AIは、頼めばすぐに「それっぽい」デザインを作ってくれます。
ただ、何も決めずに頼むと、AIはその都度「よくある組み合わせ」を選びます。
バナーを作るたびに緑の色合いが違う、フォントが違う……ということが起きやすいのです。

反対に、決めごとを先に渡しておけば、AIはその範囲の中で作ってくれます。
決めごとは、AIに渡す「指示書」にもなるのです。

デザインアセットとブランドアセット

デザインで繰り返し使う素材や決めごとを、まとめて「デザインアセット」と呼びます。
アイコンや写真、ボタンなどの部品も含む、大きなくくりです。

そのうち、お店の「らしさ」をつくるもの（色・フォント・言葉づかい、ロゴなど）を「ブランドアセット」と呼びます。

今回作るのは、ブランドアセットのいちばん小さな形。決めごとを1枚にまとめた「ルール表」です。
完成形は、こんな感じです。

Claudeと一緒にルール表を作ってみよう

題材は、架空のカフェ「こもれびcafe」です。
個人経営の小さなカフェで、オーナーの田中さんから「ナチュラルで温かみのある感じにしたい」と頼まれた、という設定で進めます。

今回はClaude（クロード）を使いますが、ChatGPTなど、ほかのAIチャットでもほぼ同じことができます。

STEP1　お店のイメージを伝えて、案を3つ出してもらう

次の文章をコピーして、Claudeに送ってください。
【お店の情報】を書き換えれば、あなたのお店やクライアントでも使えます。

カフェのWebサイトやSNSで使う「デザインのルール」を一緒に考えてください。

【お店の情報】
・店名：こもれびcafe（個人経営のカフェ）
・雰囲気：木のぬくもりのある内装、窓から緑が見える、BGMはジャズ
・お客さん：近くに住む・働く30〜40代の女性。一人でゆっくり過ごしたい人
・オーナーの希望：ナチュラルで温かみのある感じ。元気すぎる・にぎやかすぎるのは苦手

【お願い】
色・フォント・言葉づかいの組み合わせを、方向性の違う案で3つ出してください。
・色：メイン・サブ・アクセントの3色（カラーコード付き）
・フォント：見出し用と本文用（Google Fontsにある、日本語対応のもの）
・言葉づかい：文章のトーンを一言で
それぞれの案が、どんな印象になるかも一言添えてください。

このプロンプトのポイントは2つです。

• お客さんの姿を書く：「30〜40代の女性。一人でゆっくり過ごしたい人」のように、誰に向けたデザインかを書くと、AIの案がぐっと具体的になります
• 案を3つ出してもらう：1案だけだと、それが良いのか判断できません。方向性の違う案を並べると、比べながら選べます

※ カラーコードは「#7A9E7E」のような、色を正確に伝えるための番号です。Google Fontsは、Googleが無料で公開しているフォント集で、Webサイトでも、Canvaなどのデザインツールでも使いやすいものがそろっています。

送ると、Claudeが3つの案を出してくれます。
色の見本が並んだり、表の形でまとまっていたりと、見え方は毎回少し違いますが、色・フォント・言葉づかいがそろっていれば問題ありません。

雰囲気として「木のぬくもり」というワードを入れていたため、3案すべてに茶系の色が含まれているのが特徴的です。提案されたフォントがよくわからない場合は、そのままチャットで聞くと見せてくれますよ。

私が聞いたときは「フォントの見本、出力できますか？」でも、色を適用した見本を出してくれました。
以下のように聞くと、色も適用した3案の見本を出してくれる可能性は上がります。

それぞれのフォントと色を使って、3案の見本を作ってくれますか？

なお、3案ともピンとこない場合は、「別の組み合わせをさらに3つ作って」や「○○な印象を強めて」のように指示をして、別パターンを考えてもらうことも可能です。

STEP2　案を選んで、自分で決める

同じ文章を送っても、AIの案は毎回少しずつ違います。でも、気にしなくて大丈夫です。
大事なのは、最後に「これでいく」と決めるのがあなただということ。

迷ったときは、次の3つで見比べてみてください。

• お客さんに合うか：一人でゆっくり過ごしたい30〜40代の女性が、はじめてでも入りやすいと感じそうか
• オーナーの希望に合うか：「ナチュラル」「温かみ」から外れていないか
• 長く使えるか：流行りに寄りすぎていないか。サイトもSNSも、何年も使い続けられそうか

今回は、案3「手書きノートのぬくもり」でいくことにしました。

「ナチュラルで温かみのある」から暖色系の色を入れたほうがイメージに近づくこと、ペン字風のきれいな書体（Klee One）には親しみやすさがあり、ターゲット層である「30〜40代の女性」と相性が良いと考えたためです。

気になるところがあれば、遠慮なく直してもらいましょう。
「もう少し明るく」「フォントをもう少しやわらかい感じに」など、ふだんの言葉で伝えれば大丈夫です。

3案目でいきます。
テラコッタは、ボタンやアイコンなどポイントだけに使う前提です。
もう少しくすませて、ボタンの文字が見やすいようにしてください。
ただし、サブのグレージュとの色の違いがわかりにくくならないよう、ほどよい鮮やかさは残してほしいです。
変更前と変更後のカラーコードを並べて見せてください。

上図にも写っていますが、「ちょっと違うんだよな……」というときは、それを伝えれば大丈夫。
一発ですべてを決める必要はありません。

「これでいい」と思えたら、そこで決定です。ここから先は、この決めごとを変えずに使います。

STEP3　ルール表にまとめて、見本も作ってもらう

決めた内容を、2つの形にまとめてもらいます。

※ Markdown（マークダウン）は、見出しや表を記号で書く、ただの文字のファイルです。メモ帳でも開けて、どのAIにもそのまま貼り付けられます。

① ルール表（.md）を作る

ここまでの内容で決定です。
ほかの人やAIに渡しても同じ雰囲気のデザインが作れるように、「ルール表」をMarkdown形式でまとめてください。

・色：メイン／サブ／アクセント／背景／文字（色の名前・カラーコード・使う場所）
・フォント：見出し／本文
・トーン：文章の言葉づかい、写真やイラストの雰囲気
・やらないこと：避ける色や表現

1行目の「ここまでの内容で決定です。」は、調整を相談していた場合は「○○を使います」などのように、チャットでの相談内容に合わせて変えてください。

ここでの指示のポイントは、カラーコードだけでなく「色の名前」と「使う場所」も書いてもらうこと。
「#AC6A51」だけでは、あとから見返したときに、どんな色でどこに使うのか想像しにくいからです。

ルール表に入れてもらうのは、次の4つです。

先ほどのお願いを送信して、少し待ちましょう。
作ったルール表の見本が表示され、.mdファイルがダウンロードできるようになります。

ルール表では、背景と文字の色も決めてもらったので、3色から5色に増えています。Webページを作るときは、背景や文字の色も決めておくと迷いません。
もちろん、3色のままでも大丈夫です。その場合は、プロンプトの「・色：」の行を「メイン／サブ／アクセント」だけにしてください。

ただ、ダウンロードした.mdファイルを開いてみると、テキストのみ。
開いてパッと見たときに、配色などはすぐに思い浮かびません。
自分で確認したり、クライアントに見せやすいように「見本」も合わせて作っておくのがおすすめです。

# こもれびcafe デザインルール

Webサイト・SNS・チラシなど、こもれびcafeのデザインを作るときの基本ルールです。
このルールに沿えば、誰が作っても同じ雰囲気になるようにまとめています。

## コンセプト

**「手書きノートのぬくもり」**
店主の日記をのぞくような、素朴でやさしい雰囲気。
木のぬくもり、窓から見える緑、静かに流れるジャズ。一人でゆっくり過ごしたい30〜40代の女性が、ほっとできる空気をつくります。

---

## 1. 色

| 役割 | 色の名前 | カラーコード | 使う場所 |
|---|---|---|---|
| 背景 | 紙のオフホワイト | `#FAF7F2` | ページ全体の背景、SNS投稿の地の色 |
| メイン | 鉛筆のグレージュ | `#6E6259` | 見出し、ロゴ、区切り線、アイコンの線 |
| サブ | 生成りベージュ | `#EFE8DE` | 囲み枠・カードの背景、セクションの切り替え |
| アクセント | くすみテラコッタ | `#AC6A51` | ボタン、アイコン、強調したい小さなポイント |
| 文字 | こげ茶グレー | `#5C5149` | 本文、説明文、キャプション |

### 色の使い方

- **面積の目安**：背景とサブで約8割、メインと文字で約2割弱、アクセントはごく少し。
- **アクセントは「点」で使う**：ボタン、アイコン、小さな印など。見出しや大きな面には使わない。
- **ボタン**：背景を `#AC6A51`、文字を白 `#FFFFFF` にする（コントラスト比 約4.3 : 1）。文字は16px以上を目安にする。
- **本文の文字は `#5C5149`**：真っ黒 `#000000` は使わない。

---

## 2. フォント

すべてGoogle Fontsで無料で使える、日本語対応のフォントです。

| 用途 | フォント名 | 太さ | 使う場所 |
|---|---|---|---|
| 見出し | Klee One | Regular（400） | ページタイトル、見出し、ボタン、SNS画像の大きな文字 |
| 本文 | Zen Kaku Gothic New | Regular（400） | 本文、メニューの説明、お知らせ、営業時間などの情報 |

### フォントの使い方

- **見出しは手書き風、本文は読みやすさ優先**。手書き風のKlee Oneを長い文章に使わない。
- **本文の文字サイズ**：Webは16px前後、行間は1.8〜1.9倍程度でゆったりと。
- **太字は控えめに**：強調したいときも、太さより色（アクセント）や配置で見せる。

---

## 3. トーン

### 文章の言葉づかい

**「友人への手紙のように」**

- です・ます調で、やわらかく語りかける。
- 季節やちょっとした出来事を、日記のように添える。
- 押しつけず、「どうぞ」「よかったら」と誘う言い方にする。

| よい例 | 避ける例 |
|---|---|
| 秋のりんごが届いたので、タルトを焼きました。 | 新作タルト登場！！今すぐチェック！ |
| 窓ぎわの席で、ゆっくりお過ごしください。 | 大人気カフェで最高のひとときを！ |
| 数に限りがあるので、お早めにどうぞ。 | 限定！売り切れ必至！急げ！ |

### 写真の雰囲気

- **自然光**で撮る。窓からのやわらかい光、木漏れ日の影がある写真。
- **色味は少し暖かく、彩度は控えめ**。フィルムで撮ったような落ち着いた仕上がり。
- **余白を残す構図**。料理やカップを画面いっぱいにせず、木のテーブルや窓の緑を背景に入れる。
- 人を写すときは、手元や後ろ姿など、静かな時間が伝わるカットにする。

### イラストの雰囲気

- **鉛筆やペンで描いたような、手描きの線**。
- 色を塗る場合は、このルールの5色の範囲で、うすく控えめに。
- 題材は、コーヒーカップ、焼き菓子、葉っぱ、窓など、お店にあるもの。

---

## 4. やらないこと

### 避ける色

- 原色や蛍光色（真っ赤、ビビッドな黄色、ネオンカラーなど）
- 真っ黒 `#000000` の文字や背景
- ルールにない色を増やすこと（季節の色を足す場合も1色まで、くすんだ色で）
- グラデーションや、ギラギラした光沢の表現

### 避ける表現

- 「！」の多用、「大人気」「最高」「急げ」などのあおる言葉
- 絵文字や記号の多用（使うなら1投稿に1〜2個まで）
- 斜めの配置、文字の縁取り、派手な影など、にぎやかな装飾
- 画面いっぱいに情報を詰め込むこと
- 加工の強い写真（極端に明るい・鮮やかすぎる・フィルターが強すぎる）
- フリー素材の、お店の雰囲気と合わない写真やイラスト

② 見本のページを作る

ルール表ができたら、続けて見本を作ってもらいます。

このルール表を、クライアントにメールで送れる「見本」にしたいです。
色見本・フォント見本と、見出しやボタンを使ったサンプルを、1つのHTMLファイルにまとめてください。

こちらはダウンロードして、Webブラウザで開くと「見本」としてイメージがつかみやすいです。

カラーコードが並んでいるだけではわかりにくかった色の組み合わせも、こうして並べると、イメージがつかみやすいのではないでしょうか。

2つとも保存しておく

• ルール表（.md）：次の記事で使います。Claudeならファイルとしてダウンロードできます。文字だけが表示された場合は、コピーしてメモ帳などに保存すればOKです（.txtで保存しても中身は同じなので大丈夫）
• 見本ページ：ダウンロードやスクショで残しておくと、クライアントへの提案にそのまま使えます

ルール表の使いどころ

クライアントへの説明に使える

「なぜこの色なのか」「なぜこのフォントなのか」が、もう言葉になっています。
提案のときに、STEP3で作った見本ページを見せながら説明できます。たとえば、こんなふうにです。

「なんとなく選びました」ではなく、理由のある提案になるので、クライアントも安心して任せられます。

どこで作っても、同じ雰囲気にそろう

バナー、SNSの投稿画像、Webサイト。作る場所が変わっても、このルール表を見れば迷いません。
たとえばCanvaでバナーを作るときも、ルール表のカラーコードとフォント名をそのまま指定するだけで、サイトと同じ雰囲気になります。
AIに作ってもらうときも、ルール表を一緒に渡すだけで、あなたが決めた雰囲気に寄せてくれます。

迷ったら、ルール表に書き足す

使っているうちに、「ボタンの角は丸くする？」「ボタンにマウスを乗せたときの色は？」「写真に文字をのせるときの色は？」など、まだ決めていないことが出てきます。

そのときは、決めた内容をルール表に書き足していきましょう。
ルール表は一度作って終わりではなく、使いながら育てていくものです。

HTMLのほうは修正するのが大変ですので、.mdのファイルに書き足すのがおすすめです。
新しい「見本」を作りたいときは、もう一度ClaudeなどのAIにお願いすればできます。

まとめ

• 統一感の正体は、色・フォント・言葉づかいの「決めごと」
• 決めごとを先に渡しておくと、AIが作るデザインもブレにくくなる
• AIには案を3つ出してもらい、最後に「これでいく」と決めるのは自分
• 「ちょっと違う」と感じたら、そのまま伝えて調整すればOK
• ルール表は、AIに渡す「.md」と、目で見て確かめる「見本ページ」の2つで残す
• ルール表は一度で完成させず、使いながら書き足して育てていく

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。