「AIっぽいデザイン」にしないために｜AIでつくるWebサイトをかっこよく仕上げるコツと、DESIGN.mdの書き方

01「AIっぽいデザイン」の特徴

「AIっぽい」と感じるサイトには、いくつか共通点があります。どれも一つひとつは悪いものではありませんが、理由なく全部そろっていると、とたんに既視感が出ます。

紫〜青のグラデーション

背景やボタンに、とりあえず青紫のグラデーション。業種やブランドの色と関係がない。

角丸カードの3列並び

アイコン＋見出し＋2行の説明、が3つ並ぶ「特徴」セクション。どの会社でも成り立つ内容になりがち。

中央寄せの大見出し

大きなキャッチコピー、その下に小さな説明文とボタン2つ。構図がいつも同じ。

意味のない装飾

キラキラや矢印の絵文字、ふわふわ浮かぶ球体、すりガラス風のパネル。伝えたい内容とつながっていない。

どこにでもある画像

笑顔で握手する人、光るネットワーク、つるっとしたAI生成の人物。その会社の現場が見えない。

抽象的なコピー

「未来をつくる」「価値を最大化」「シームレスな体験」。誰が言っても成り立つ言葉。

02なぜ似たデザインになるのか

AIは、たくさんの事例から「いちばんよくある答え」を出すのが得意です。指示が「おしゃれなトップページを作って」のようにあいまいだと、AIは無難な平均に寄っていきます。その平均こそが、前の章の特徴です。

つまり、AIっぽさの原因はAIそのものではなく、決めるべきことを決めずにAIに渡していることにあります。逆に言えば、色や文字、写真の方向性、言葉のトーンを人が先に決めてから渡せば、AIはその決まりに沿って、速く正確に形にしてくれます。

03AIに任せる前に、デザインの基本を知っておく

AIは「それらしいもの」をすぐに出してくれます。でも、出てきた案のどこが良くてどこがおかしいのかを判断できなければ、修正の指示も出せず、結局AIの平均的な案をそのまま使うことになります。そこで大切なのが、デザインの基本を知っておくことです。

デザイナーでない方にまずおすすめしたいのが、ロビン・ウィリアムズ著『ノンデザイナーズ・デザインブック』です。デザインを学んだことがない人のために、見た目を整える基本を4つの原則にまとめた定番の入門書で、CODE4でもデザインの基本として大切にしている考え方です。

近接

関係のあるものは近づけ、関係のないものは離す。見出しと本文、写真と説明の距離がそろうだけで、情報のまとまりが伝わります。

整列

すべての要素を、見えない線にそろえて置く。なんとなく中央寄せにせず、左端や軸をそろえると、ぐっと引き締まります。

反復

色・書体・線・余白のルールを、サイト全体でくり返す。ページごとにバラバラにしないことで、ブランドらしさが生まれます。

コントラスト

違うものは、はっきり違えて見せる。見出しと本文の大きさ、強調する色とそうでない色に、中途半端な差をつけない。

この4つを知っているだけで、AIの案を見たときに「見出しと本文が離れすぎている」「左端がそろっていない」「強調の差が弱い」と、具体的な言葉で直してもらえるようになります。AIを使いこなす力は、実はデザインの基本を知っているかどうかで大きく変わります。

04AIに渡す前に、人が決めること

CODE4では、AIで画面をつくり始める前に、次のことを先に決めています。どれも、デザイナーがいちばん時間をかけるところです。

1. ひとことで言うと、どんなサイトか「霧の中から現場を見渡す」「地元の常連が集まる、木と鉄の店」のように、世界観を一文で。これが判断の軸になります。
2. 誰が、何のために見るか見る人と、見たあとにしてほしい行動（予約・問い合わせ・来店）を決めます。
3. トーンを表す言葉と、避けたい言葉「静か・誠実・少し無骨」と「かわいい・ポップ・未来的」のように、なりたい方向と、なりたくない方向をセットで決めます。
4. 色・文字・余白のルール色は役割ごとに3〜5色、書体は見出しと本文の2種類まで、余白は決まった数値の倍数で。
5. 写真と画像の方針実際の現場・人・商品を撮るのか、イラストにするのか。素材写真やAI画像をどこまで使うか。
6. 参考にするもの、しないもの好きなサイトや雑誌、看板、パッケージなど。Webサイト以外から参考を持ってくると、ぐっと独自性が出ます。

05デザインの設計書（DESIGN.md）を書く

決めたことは、頭の中に置いておかず、ファイルに書いてAIに渡します。Claude CodeやCursorなどのAIは、フォルダの中のテキストファイルを読んで作業します。そこで、デザインのルールをまとめたDESIGN.mdを用意しておくと、毎回同じ説明をしなくても、AIがルールに沿って作業してくれます。

Claude Codeの場合は、毎回自動で読まれるCLAUDE.mdに@DESIGN.mdと1行書いておくと、DESIGN.mdも一緒に読み込まれます（書き方はClaude Codeで始めるWebデザイン入門で紹介しています）。CODE4が実際に使っている項目をもとにした例です。

# DESIGN.md ‥ 〇〇珈琲（仙台・定禅寺通り）

## コンセプト
- ひとことで：「朝の光が入る、木と鉄の小さな焙煎所」
- 見る人：30〜50代。通勤前や休日の朝に、落ち着ける店を探している
- 見たあとの行動：店の場所と営業時間を確認して、来店する

## トーン
- なりたい：静か、誠実、手仕事、少し無骨
- なりたくない：かわいい、ポップ、未来的、高級ホテル風

## 色（役割で決める）
- 背景：#F4F0E8（生成りの紙）
- 文字：#2A2724（焦げ茶に近い黒）
- アクセント：#9A4A2B（焙煎した豆の赤茶）※ボタンと強調だけに使う
- グラデーションは使わない

## 文字
- 見出し：明朝体（太さは1種類だけ）
- 本文：ゴシック体 16px、行間 1.9
- 英字の飾り見出しは使わない。見出しはすべて日本語

## 余白とレイアウト
- 余白は8の倍数（8 / 16 / 24 / 40 / 64 / 120）
- 左寄せを基本にする。中央寄せは店名とお問い合わせだけ
- 「アイコン＋見出し＋説明」のカードを横に3つ並べる構成は使わない

## 写真・画像
- 店内・豆・手元の実写真を使う（img/photo に入っている）
- 素材サイトの人物写真、AIで生成した人物は使わない
- 角丸・影・すりガラス風の装飾はつけない

## 言葉
- 「最高の」「こだわりの」「至福の」は使わない
- 具体的に書く：「毎朝7時に焙煎」「豆は3種類だけ」

## 動き
- フェードインだけ。0.4秒以内。スクロールで要素が飛んでくる演出はしない

## 迷ったら
- このファイルに書いていないことは、勝手に決めずに質問すること

ポイントは、「やること」だけでなく「やらないこと」も書くことです。前の章で挙げたAIっぽい特徴を「使わない」と書いておくだけで、仕上がりは大きく変わります。また、最後の「迷ったら質問すること」の1行で、AIが平均的な答えで穴を埋めるのを防げます。

06「平均」から離れる指示の出し方

DESIGN.mdを用意したうえで、指示の出し方でも差がつきます。

1. 最初の案で決めない「方向性の違う案を3つ。うち1つは思い切った案にして」と頼み、比べてから選びます。最初の案は、たいてい一番「平均」に近い案です。
2. 見本は画像で渡す参考サイトや雑誌、看板の写真を貼り、「この余白の取り方」「この文字の大きさの差」のように、どこを参考にするかまで伝えます。
3. 理由と一緒に頼む「写真を大きく」ではなく「店の空気が伝わるように、写真を画面の幅いっぱいに」。理由があると、AIは周りの部分もそれに合わせて整えます。
4. 気になったら、すぐルールに足す「この影はいらない」と直したら、DESIGN.mdにも「影はつけない」と書き足します。同じ修正を何度もしなくて済みます。

07仕上げで人が手を入れるところ

AIが形にしたものを、最後に人の目で整えます。かっこよく見えるかどうかは、この細かい仕上げで決まることが多いです。

• 文字組み：見出しの改行位置、句読点（、。）のあとの空きを詰める、数字と英字の大きさをそろえる。
• 余白のリズム：セクションの間、見出しと本文の間が、画面全体で一定のリズムになっているか。
• 写真の切り抜き：顔や商品の位置、スマホで見たときにどこが切れるか。
• 言葉：抽象的な言葉を、その会社にしか言えない具体的な言葉に置き換える。
• スマホの実機確認：パソコンの画面を縮めただけでは分からない、指での押しやすさや読みやすさ。

08公開前のチェックリスト

「このサイト、AIっぽく見えない？」を確かめるための質問です。

1. 社名を隠しても、どこの会社か分かる？ロゴを消して見たとき、同業の別の会社のサイトだと言われても違和感がないなら、まだ平均に近い状態です。
2. 使っている色に、理由を言える？「なんとなくきれいだから」ではなく、ブランドや業種とつながっているか。
3. 写真に、その会社の現場が写っている？素材写真やAI画像だけでつくっていないか。
4. コピーを、競合の社名に入れ替えても成り立たない？成り立ってしまう言葉は、具体的な言葉に書き換えます。
5. スマホで、最後まで読みたくなる？パソコンだけでなく、実際のスマホで上から下まで見て確認します。

09まとめ

• AIっぽさの原因は、決めるべきことを決めずにAIに渡していること。
• 近接・整列・反復・コントラストなど、デザインの基本を知っておくと、AIの案を判断し、具体的に直せる。
• コンセプト・トーン・色・文字・写真・言葉を、人が先に決める。
• 決めたことはDESIGN.mdに書き、「やらないこと」と「迷ったら質問」も入れる。
• 最初の案で決めず、最後は人の目で文字組みや余白を仕上げる。

CODE4では、オーダーメイドの制作でも、月額制ホームページでも、デザインはデザイナーが決め、AIはそれを速く正確に形にする道具として使っています。AIのスピードと、デザイン会社の仕上げ。その両方で、「AIでつくったのに、AIっぽくない」ホームページをお届けしています。

※この記事は2026年11月時点の情報をもとにしています。