なぜAIでWebサイトを作ってもダサくなるのか｜仕事で使える品質にする14のコツ

こんにちは！SiiD代表エンジニアのセイトです。

AIに「かっこいいWebサイトを作って」と頼むと、何でも良ければそれっぽいものは数分で出てきます。
ところが、いざ実用的なサイトを作ろうとするとショボくなる。
なぜなのか？

SNSでは「AIにこんなすごいサイトを作らせた」という投稿がよく回ってきますが、その多くは、そのままでは仕事に使えないと僕は思っています。
「何でもいいからクオリティの高いサイトを」と頼んで作っているからです。
仕事で使うサイトなら、どんなページ構成で、どんな文章を載せて、どんな雰囲気にするかを決めないといけません。

一方、この記事で紹介するやり方で僕が実際に作ったWebサイトの一部をお見せするとこんな感じ。
これらは実際に先日クライアントさんに提案したデザイン案の一部です。（その後納品までしました）

要望を取り入れつつJSアニメーションで派手めに作りました。

僕は以前Web制作会社に勤めていましたが、その経験からすると人間ならこのレベルを作るのに数ヶ月はかかるでしょう。
でもこれを制作した期間は初回打ち合わせ〜納品までで、ざっと3日間くらい。
どうやったらそんなことができるのか？

この記事では、AIで作ったサイトを仕事で使える品質に上げるためにやることを、14個にまとめました。
考え方はClaude Code、Codex、Claude Designのどれでも同じです。

この記事の内容は、YouTubeの動画でも解説しています。
動画で見たい方はこちら（YouTube）、記事で読みたい方はこのまま続きへどうぞ。

公式LINEで「AIでWebサイトを作るプロンプト・DESIGN.mdのひな形・公開前チェックリスト」を無料配布中

記事で紹介するプロンプトのテンプレート、DESIGN.mdのひな形、公開前にチェックする48項目のリストを、1つの資料にまとめました。SiiDの公式LINEに登録して、メッセージで「AIデザイン」と送ると、無料で受け取れます。

AIで作ったWebサイトがダサくなるのは、ディレクションをする人がいないから

まず大前提からお話しします。

実際のWeb制作会社では、Webディレクターが企画・設計・進行を担当し、デザイナーやエンジニアに指示を出してサイトを作ります。
ディレクター自身は、デザインもしないし、コードも書きません。
それでも品質の高いサイトができるのは、次の3つを担当しているからです。

1. 何を作るかを決める
2. それを正確に伝える
3. 上がってきたものを検品する

AIで作るときも、同じ体制で考えてください。
あなたがディレクターで、AIがデザイナー兼エンジニアです。

AIで作ったサイトが安っぽくなるのは、この3つをやる人がいないからです。
ここから紹介する14個は、すべてこの3つを具体的な作業にしたものです。

AIでWebサイトを作るコツ1：参考にするサイトを1〜3つ選び、スクショとURLの両方を渡す

頭の中の「こういう感じにしたい」を、言葉だけでAIに伝えるのは難しいです。
プロのデザイナーに発注するときも、参考サイトをいくつか渡すのが基本。AIも同じです。

参考サイトは、優れたWebデザインを集めたギャラリーサイトで探すと早いです。

• MUUUUU.ORG
• Web Design Clip
• SANKOU!

選ぶときのポイントは2つあります。

• 日本語のサイトを作るなら、日本語の参考サイトを選ぶ。海外のサイトは英語のフォントが前提のデザインなので、日本語を流し込むとバランスが崩れます
• 雰囲気（トンマナ＝トーン＆マナー。デザインの一貫した方向性のこと）が近いものを選ぶ。系統が違いすぎるサイトを混ぜると、AIが混乱します

同じ業界や競合のサイトを参考にするのは避けてください。
仕上がりが似すぎて、パクリだと言われかねません。

渡すときは、スクリーンショットとURLを両方渡します。

• スクショ：パッと見の見た目が伝わる
• URL：AIがソースコードを読んで、アニメーションの動き・フォント・色の数値まで、ある程度読み取れる

AIでWebサイトを作るコツ2：「上のほうのデカい画像」ではなく、デザイン用語で指示する

AIへの指示は、一般的なデザイン用語を使うほど正確に伝わります。
「上のほうのデカい画像のところ」より「ヒーローイメージ」と言ったほうが、AIは一発で何のことか分かるからです。

最低限、このあたりを押さえておくと指示が楽になります。

ヒーローイメージの背景にWebGLのパーティクルを置いて、テキストはイージング付きでフェードインさせて

このように指示できるようになると、AIの出力の精度が上がります。

AIでWebサイトを作るコツ3：色・フォント・余白のルールを、DESIGN.mdにまとめる

デザインのルールは、チャットで都度伝えるのではなく、DESIGN.mdという仕様書ファイルにまとめ、チャットに添付するか、プロジェクトのフォルダに置いて読ませます。
毎回チャットで伝えていると、出力の雰囲気がぶれて、修正が終わらなくなります。

書くのは次のようなことです。

• トンマナ、配色、フォントの種類とサイズ
• 余白のルール
• 「明るい」「エレガント」「信頼感がある」といったイメージの言葉

意外かもしれませんが、「エレガント」のような抽象的な言葉も、仕様書に書いておくとちゃんと反映されます。

特に大事なのが余白です。
デザインの美しさの大部分は、余白がそろっているかで決まります。
ルールが無いと、AIはセクションごとにバラバラの余白を使います。

DESIGN.md自体は、AIに作らせればOKです。
コツ1の参考サイトのスクショを添付して、ClaudeやChatGPTの入力欄にそのまま貼ってください。

AIでウェブサイトを作成するのに必要な仕様書 DESIGN.md を作りたい。
モデルとなるWebサイトのスクショ画像を添付するので、これを元にDESIGN.mdを作成してください。

参考サイトの色やフォントを、URLを入れるだけで取ってきてくれる無料ツールもあります。
例えばcontext.devでは、参考サイトのURLを入れると、ロゴ・配色・フォントなどのブランド情報とスタイルガイドが取得できます。
これをAIに渡してDESIGN.mdのたたき台を作り、自分好みに直していくのも早いです。
（context.devには、ドメインを入れるとDESIGN.mdを直接作るDesign.md Generatorもあります）

URL欄に参考サイトのURLを入力 → タブ「Brand」を選択 → Brand, Styleguideにチェック → 「Get brand」をクリック。
その後「Copy」を押して情報をコピーしたらAIに貼り付けて共有します。

AIでWebサイトを作るコツ4：サイトに載せる文章は、CONTENTS.mdに分けて書いておく

DESIGN.mdと並ぶもう1つの指示書が、サイトに載せる文章をまとめたCONTENTS.mdです。
サイトに載せる文章（キャッチコピー、サービス紹介、会社概要の社名や住所など）を、ページごと・セクションごとに分けてまとめておきます。

文章をチャットに混ぜて渡すと、AIが生成のたびに勝手に要約したり書き換えたりするからです。
会社概要の住所が変わっていた、ということも普通に起きます。
「文言の正解はCONTENTS.mdにある」と決めておけば、これを防げます。

会社案内のPDFや今のサイトがあるなら、それを添付して、同じく入力欄にこう貼れば数分でできます。

この資料からCONTENTS.mdを作ってください。
ページごと、セクションごとに分けて構成してください。

画像を入れたい場所には「＜画像を入れる＞」と書いておいてください。
AIがダミー画像を置いた状態でレイアウトを組んでくれるので、写真がそろっていなくてもデザインを先に進められます。

AIでWebサイトを作るコツ5：最初のデザインは最高性能のモデルで、ページの上半分を3案出させる

DESIGN.mdとCONTENTS.mdができたら、デザインを作ります。

最初に作るのは、ページの上半分。
ファーストビュー（ページを開いて最初に見える範囲）を含む部分です。
サイトの印象を決める一番大事な場所なのに、頼む内容が抽象的なので、作るのがいちばん難しい。

なのでここだけは、使えるAIの中で一番性能の高いモデルに任せてください。
それ以外の工程は、モデルのグレードを落としても十分作れます。
最初の案を出すツールは、WebGLのような動きのある表現ならClaude CodeやClaude Design、写真やイラストを多く使うサイトならCodexがおすすめです。

もう1つのポイントは、1案で当てようとしないこと。
プロのデザイナーも、提案は複数案が基本です。
3案あれば、「1案目のここはいいけど、この部分は2案目のほうがいいから、1と2を足して2で割って」のような指示が出せます。

ただ、「3案作って」とだけ頼むと、色違いの3案が出てきがちです。
方向性そのものを変えて指示します。
DESIGN.mdとCONTENTS.mdを添付して、入力欄にこう貼ります。

プロのWebデザイナーとしてコーポレートサイトを作成してください。
見比べたいのでまずは3案作成してください。

# 参考データ
* CONTENTS.md: サイト内に記載する全テキストの情報
* DESIGN.md: デザインのトンマナを言語化したもの

# 3案の内容
1. デザイン優先でシンプル寄り。CONTENTS.mdのテキストは必要に応じて改変OK
2. 情報に忠実寄り。CONTENTS.mdのテキスト優先で必ず要素を入れる
3. 1と2の中間

まずはページ全体の上部50%だけ作成してください。
最も良いものを残して残りを仕上げてもらいます。

最後の「まずはページ全体の上部50%だけ」もポイントです。
いきなり全ページを3案作らせると、使わない案に時間とトークン（AIが処理する文字量の単位。使った分だけ料金や利用枠を消費する）を無駄に使うことになります。
トップ以外のページも、まず1ページ作って確認してから残りに広げます。

AIでWebサイトを作るコツ6：イメージは言葉でなく、画像とURLで伝える

デザインの雰囲気は、言葉より画像で伝えたほうが正確です。
アイコンやロゴ、イメージ図などの素材を作らせるときも同じです。

「シュッとした感じ」「高級感のある感じ」と言葉で伝えると、あなたとAIで思い浮かべるものが全然違うことがあります。
画像を添えれば、見た目の期待値が合います。

Codex / ChatGPT にサイトで使う素材の画像を作ってもらったときの比較です。
プロンプトは同じで、左はテキストだけ、右は参考画像を添えて頼みました。

参考画像を添えたほうが、狙いどおりの雰囲気で返ってきます。

画像だけでは動きやフォントの種類までは分からないことが多いので、その場合はURLもセットで送ります。
修正を頼むときも、気になる箇所のスクショに印をつけて「ここをこうして」と伝えます。

AIでWebサイトを作るコツ7：サイト全体のデザインはClaude、素材の画像はChatGPTに分ける

ChatGPTの画像生成はかなり優秀なので、「サイト全体のデザインもChatGPTでよくない？」と思うかもしれません。
僕もいろいろ試しましたが、これはうまくいきませんでした。

ChatGPTの画像生成が強いのは、バナーやイラストなど、パーツ単体のクオリティです。
「何でもいいからかっこいいものを」のような頼み方なら応えてくれますが、「このテキストを入れたい」「この雰囲気に合わせたい」と注文を増やすと、途端にクオリティが落ちます。

理由は2つあります。

1. 部分的な修正が苦手。画像生成は毎回まるごと描き直すので、「ここだけ直して」と頼んでも、ほかの部分まで変わってしまうことがよくあります
2. コストが高い。画像生成はテキストやコードの生成よりトークンを多く使うので、修正のたびに描き直すやり方は効率が悪いです

なので、役割はこう分けます。

AIでWebサイトを作るコツ8：ロゴ・アイコンはコードで描かせ、背景の透過はClaudeかCanvaでやる

画像素材は、種類によっても得意なAIが分かれます。

ロゴやアイコンを画像生成AIに任せないのがポイントです。
文字や直線、図形の正確さはまだ不安定で、細部が崩れることがあります。
コードで描かせれば線はまっすぐで、色の変更も一瞬です。

背景の透過は、僕が何度試しても、ChatGPTやGeminiではうまくいきませんでした。
Claudeに画像を渡すと、意外と透過できました。
最初からClaudeにSVGで作らせれば、背景は透明のまま作れます。

予算が許すなら、Canvaの有料プラン（Canvaプロ）がおすすめです。
背景の除去がボタン1つでできて、商用利用できる素材や動画もたくさん使えます。
MCPサーバー（AIから外部のツールを操作するための仕組み）もあるので、ClaudeからCanvaを操作してデザインを作ることもできます。

AIでWebサイトを作るコツ9：予算と手間は、最上部の大きな画像（ヒーローイメージ）に集中させる

ヒーローイメージは、訪問者が最初に見る場所です。
訪問者はここを見た数秒で、そのサイトを信頼するか、離れるかを決めます。

見栄えを良くする定番の形があります。
背景にWebGLのアニメーションかループ再生の動画を置いて、その上に短いキャッチコピーを大きく置く。
情報を詰め込まないことがポイントです。
WebGLのアニメーションは、コツ2の用語で指示すればAIが作ってくれます。

手元に30万円あるなら、30万円で三流の制作会社に全ページを作ってもらうより、一流のデザイナーにヒーローイメージだけ作ってもらって、残りをAIで作ったほうがクオリティは高くなります。
実際、僕がAIで作って運用しているサイトの一部も、一流のデザイナーさんに頼んだヒーローイメージを使って、残りをAIに作らせています。

AIでWebサイトを作るコツ10：デザインの癖を消すプラグインと、ブラウザを操作するツールを入れる

デザインをClaude Codeのようなコーディングエージェント（指示に沿ってAIが自分でコードを書き、ファイルを編集するツール）で実装する前に、道具をそろえます。
素の状態で使うより、プラグイン（Claude Codeの追加パーツ）やMCPを入れたほうが、品質が上がります。

僕がWebサイト制作で必ず入れているのは、このあたりです。

• Frontend Design：いかにも「AIが作った風」のデザインの癖を減らしてくれる
• UI UX Pro Max：ボタンやカードなどの部品や、レイアウトの定番パターンをまとめたスキル集（AIに手順やノウハウを教える追加ファイル）
• GSAP（Webのアニメーション用ライブラリ）の公式スキル（gsap-skills）：スクロールに合わせて動くアニメーションの実装を手伝ってくれる
• Playwright：AIが自分でブラウザを操作して、表示崩れやリンク切れを確かめられる
• デプロイ用のMCP（Vercel、Netlifyなど）：サイトの公開作業までAIに任せられる。使うサービスに合わせて選ぶ

入れ方は、Claude Codeの入力欄でコマンドを打つだけです。
例えばFrontend Designはこの1行です。

/plugin install frontend-design@claude-plugins-official

UI UX Pro Maxなら、この2行を1行ずつ実行します。

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

AIでWebサイトを作るコツ11：デザインのルールを、コードを書くAIにも引き継ぐ

デザインを作るAIとコードを書くAIは、分かれることが多いと思います。
例えば、Claude Designでデザインを作って、Claude Codeでコーディングする場合です。
人間のデザイナーからコーダーに仕事を渡すときに仕様書が要るのと同じで、AIどうしでも引き継ぎが要ります。

Claude Designなら（2026年11月時点の画面）、右上の「Export」から「Handoff to Claude Code」を選ぶと、デザインをそのままClaude Codeに送れます。
そのうえで、DESIGN.mdとCONTENTS.mdをプロジェクトのdocs/フォルダに置き、2つを添付して、Claude Codeの入力欄でこう指示します。

/init このプロジェクトはClaude Design経由で作った弊社のウェブサイトのプロジェクトです。
添付ファイルにコンテンツとデザインのルールも書いてありますので、
これらの情報をもとにCLAUDE.mdを作り、プロジェクトを認識してください。

/initは、Claude Codeにプロジェクト全体を把握させて、CLAUDE.mdという説明書を作らせるコマンドです。
こうしておくと、コーディング中にAIが「このボタンの色は？」「この文言はどれが正しい？」と迷ったとき、仕様書を見にいってくれます。

AIでWebサイトを作るコツ12：スマホでの見え方を、AIにブラウザで確認させる

制作中はPCの画面ばかり見てしまいますが、公開すると、スマホで見る人のほうが多いことはよくあります。
サイトのジャンルによっては、7〜9割がスマホということも普通です。

見るのはこの3つです。

• 文字の読みやすさ：PCと同じ文字サイズ・行間だと、スマホでは詰まって読みにくい
• ボタンの押しやすさ：指で押す前提で、十分な大きさと間隔をとる
• 表示の速さ：スマホはPCより性能が低かったり、回線が不安定だったりする。画像を軽くする、あとから読み込むなどで対応する

PCの見た目はデザインツールで固めて、スマホ対応（レスポンシブ）のコーディングはClaude Codeに任せるのがおすすめです。
コツ10のPlaywrightを入れておけば、スマホの幅での表示チェックまでAIが自分で進めてくれます。

ただし、制作にかけられる時間が限られているなら、PCは後回しにして、スマホを優先して作って公開したほうがいい場合も多いです。

AIでWebサイトを作るコツ13：タブのアイコンや写真、検索結果での見え方など、素人感が出る細部を直す

プロっぽさと素人っぽさの差は、細部に出ます。

デザインで見るところ。

• ファビコン：ブラウザのタブに出る小さなアイコン。初期状態のままだと、一発で素人感が出る
• フリー素材の写真：ビジネスマンが握手している写真のような、どこかで見た素材は、それだけでサイト全体を安っぽく見せる

人や商品をAIで作った画像も、安っぽく見えます。
会社の人や商品、オフィスなど、実物の写真はできるだけオリジナルを用意してください。
スマホで撮ったものでも、フリー素材よりずっと説得力があります。
イラストや図解はAIで作ってもなんとかなりやすいので、コツ8の使い分けで作ればOKです。

コーディングで見るところ。

• https：httpsになっていないサイトは、ブラウザに「保護されていない通信」と警告が出る
• metaタグ：検索結果に出るタイトルや説明文、SNSでシェアされたときの見え方を決めるタグ

どれも、自分では見落としやすいのに、外の人がアクセスすると一発で見える部分です。

AIでWebサイトを作るコツ14：公開前チェックリストで、AIに全ページを検品させる

見た目ができても、そのまま公開してはいけません。
制作会社では、納品前に必ず検品をします。
そしてこれは、AIに任せると一番はかどる仕事です。

公開前のチェックリストのファイルを添付して、入力欄にこう貼るだけです。

リリース前のチェックリストがあるので、これを用いて全ページで
全ての項目に合格しているか確認してください。
追加素材無しで修正可能な部分は修正を完了させ、
できないものは項目をピックアップしてください

僕が実際に使っているチェックリストは48項目あります。
分類だけ紹介すると、こうです。

• メタ情報・SEO：タイトルタグ、ディスクリプション、sitemap.xml、構造化データなど
• OGP・SNS：シェアされたときの画像や文言
• パフォーマンス：画像のWebP化、遅延読み込み、Lighthouseのモバイルで90点以上
• アクセシビリティ：画像の代替テキスト、文字と背景のコントラスト、見出しの階層
• 計測・解析：GA4やSearch Consoleの設置
• セキュリティ、フォームの送信確認、リンク切れ、404ページ、法務まわり

人間がやると丸1日かかるうえに、見落としも出ます。
AIなら数分で全ページを見て、直せるものはその場で直してくれます。
このチェックリストは公式LINEの特典として配っているので（記事末尾で案内しています）、ぜひ使ってください。

AIでWebサイトを作るなら、まずこの3つから始める

AIで作ったサイトがダサくなるのは、何を作るかを決めず、伝え方を工夫せず、検品をしないまま公開しているときです。
14個を一度に全部やる必要はありません。
次にサイトを作るときは、参考サイトを選ぶ（コツ1）、DESIGN.mdとCONTENTS.mdを用意する（コツ3・4）、公開前にチェックリストで検品する（コツ14）の3つから始めてみてください。
参考サイトと2つの仕様書を用意すれば、何を作るか決めてAIに伝える準備がそろい、チェックリストを使えば最後の検品をAIに任せられます。

公開前チェックリスト48項目を、AIにそのまま渡せる形で配布中

記事では分類しか紹介できなかった48項目の全文を、DESIGN.mdのひな形・記事内のプロンプトと1つの資料にまとめています。チェックリストは、コツ14のプロンプトと一緒に、AIへそのまま渡せます。SiiDの公式LINEに登録して、メッセージで「AIデザイン」と送ると、無料で受け取れます。

AIプログラミングスクール「SiiD」について

AIプログラミングスクール「SiiD」は、未経験からITエンジニア転職を目指す方向けのオンラインスクールです。

SiiDの特徴

• 現役エンジニアでYouTube登録者約13万人の「セイト先生」が代表兼主任講師
• 採用側の実務知見（2,000人以上の選考・150名以上のエンジニア採用）にもとづく指導
• 生成AIを取り入れた学習設計と、実務レベルのフルスタックWeb開発スキル
• Workship CAREER（株式会社GIG）と連携した無料の転職伴走支援
• 経済産業省認定のReスキル講座で、給付金の条件を満たせば実質105,600円〜
• 学割あり（35%オフ）

こんな方におすすめ

• 未経験・文系・社会人からITエンジニア転職を本気で目指したい方
• 独学に限界を感じている方
• 費用を抑えながら実務スキルと転職サポートを両立したい方

「未経験だから」とあきらめる必要はありません。採用する側を知り尽くしたプロが、給付金で負担を抑えながら内定まで伴走します。