「それっぽいAIサイト」で終わらせないための7つのTips

「30分でサイトができた。だけどいまいちな気がする」「AIにサイトを作らせたら、なんだか他のAI生成サイトと同じ見た目になった」「一見それっぽい。でも、どこかチープで量産型に見える。」——AIでサイトを作った人の多くが、一度はこの違和感を経験します。プロンプト一発で出てくるサイトは、便利な反面どれも似ていたりチープになることが多々あります。

AIコーディングツールは「作れる」段階から「クオリティを制御できる」段階に進化しています。
本記事では、デザイン・ドキュメント設計・素材調達・アニメーション・ツールの使い分け・フォーム実装という6つの技術的な切り口から、AI製サイトを「量産型」から一歩抜け出させるための具体的な指示の出し方を解説します。読み終える頃には、次にAIへ投げるプロンプトが一段階、具体的になっているはずです。

1. デザインクオリティを上げる指示と参考サイトの使い方

AIが作るデザインが平凡になる最大の原因は、指示が抽象的すぎることです。
「おしゃれにして」「モダンな感じで」は、AIにとって解釈の余地が広すぎる指示であり、結果として最も無難な(=どこかで見たような)デザインに着地します。
抽象的な指示をやめ、具体的な参照と数値で制御することが最重要です。

参考にしたいサイトのスクリーンショットを直接渡し、「配色はこのサイトの通りに」「レイアウトの余白感をこのサイトに合わせて」と、言葉ではなく画像で伝えることができます。さらに精度を上げるなら、1サイトだけでなく複数の参考画像を組み合わせたムードボード(配色はA、レイアウトはB、雰囲気はC)を渡すと、単一サイトの模倣にならず独自性を生み出すヒントにすることができます。

参考サイトのURLを渡すことでAI自身に分析をさせて構成を検討することもできます。
ただAIが読み取れる視点や観点はあなたが気にする部分と違うことがあるので、具体的な指示に落とし込んで参照してもらうことが重要です。

数値化できる要素は数値で指定しましょう。「余白は広めに」ではなく「セクション間の余白は96px」、「文字は大きめに」ではなく「見出しは40px/太字」のように伝えると、AIの解釈のブレが大幅に減ります。この考え方をさらに進めたのが、色・余白・角丸などをCSS変数(デザイントークン)として先に定義し、「このトークン以外の値を使うな」と制約する方法です。8pxグリッドのようなスペーシングルールを固定するのも同様の効果があります。

見落とされがちなのが「状態」の設計です。ボタンの通常状態は作っても、hover・active・focus・disabledといったインタラクション状態や、空状態・エラー状態・ローディング状態まで手が回らないことがよくあるため注意が必要です。「各ボタンにhover/active/focus状態も実装して」と明示的に依頼しましょう。

そして最も効果的なのが、AIに自分の生成物を見せて振り返らせるループです。ブラウザプレビューでスクリーンショットを撮り、「このセクションの余白が詰まりすぎている」「ボタンの角丸が他と揃っていない」とAI自身に見せてフィードバックすることで、一発生成では得られない精度に近づけます。ページを一括生成させず、コンポーネント単位で反復修正するのも同じ理由です。

最後に、AIが生成しがちな「いかにもAI」なパターン——過剰なグラデーション、紫系カラーの多用、汎用的すぎるヒーロー画像——は、気づいた時点で名指しで回避を指示するのが効果的です。

2. DESIGN.mdでクオリティのベースラインを作る

デザインの指示を毎回チャットで説明し直すのは非効率なだけでなく、セッションやページが変わるたびに一貫性が崩れる原因になります。そこでおすすめしたいのが、コーディング規約を書くルールドキュメントと同じ発想で、デザインの基準となるDESIGN.mdを用意しておく方法です。

DESIGN.mdに書いておくべき項目の例は次の通りです。

トンマナ:サイトの世界観を一言で(例:「信頼感のある士業事務所らしい、落ち着いたデザイン」)
カラーパレット:プライマリ・セカンダリ・アクセント・背景・テキストの各色をHEX値で明記
タイポグラフィ:見出し・本文それぞれのフォントサイズ・ウェイトの段階
コンポーネントルール:ボタンの角丸半径、カードの影の付け方、余白の基準値
モーションルール:アニメーションのduration・イージング・使ってよい場面(後述の4章と連動)
禁止事項:「グラデーションは使わない」「絵文字をUIに使わない」など、AIが暴走しやすいポイントへの歯止め

ルールドキュメントが「どう実装するか」のルールブックだとすれば、DESIGN.mdは「どう見せるか」のルールブックです。役割を分けておくことで、AIに対して「実装は自由に任せるが、見た目のルールだけは厳守してほしい」という指示が一貫して通るようになります。

一度作ってしまえば、新しいページを追加するときも、別のプロジェクトを始めるときも、DESIGN.mdを読み込ませるだけで同じクオリティのベースラインからスタートできます。ゼロから毎回トンマナを説明する手間を考えると、この初期投資は十分に回収できます。

またインターネット上ではさまざまな実用的なDESIGN.mdが公開されています。
有名サイトや企業サイトを参考にしたDESIGN.mdも公開されているため、自分が作成したいサイトに近いものを取得してAIへの指示として利用することができます。

「AIサイト DESIGN.md」といった検索キーワードで関連情報やダウンロードできるサイトを調べることができます。
DESIGN.md を共有・検索するためのサードパーティ製コミュニティサイトには下記のようなものもあります。

https://designmd.ai/

見つけたDESIGN.mdをAIに渡すことでベースとなるデザイン構成を取り入れた状態で検討を進めることができます。

ただDESIGN.mdがあれば作り込まれたサイトが自動生成できるわけではなく、具体的な指示とトライ＆エラーをやり込むことが大事です。
AIはあくまでツールであり、最終的な品質は人間側のディレクションに大きく依存します。

3. 画像素材をどこから手に入れるか

デザインがどれだけ整っていても、画像のクオリティが低ければサイト全体の印象は一気に安っぽくなります。画像調達の選択肢は大きく「AI生成」と「既存素材の活用」の2つに分かれ、用途に応じた使い分けが重要です。

AI生成が向いているケースは、世界に一つだけのイメージカットが欲しいとき、特定のブランドイメージに完全一致する画像が必要なときです。プロンプトのコツは、構図・光の当たり方・被写体・雰囲気を具体的に言語化すること。「おしゃれな写真」ではなく「柔らかい自然光が差し込むオフィスで、木製デスクに置かれたノートPCを斜め上から撮影したような写真」のように書くと精度が上がります。

既存素材(ストックフォト・無料素材サイト)が向いているケースは、汎用的なシチュエーション(オフィス風景、人物の笑顔など)で十分なとき、そして何より予算とスピードを優先したいときです。ただし商用利用時のライセンス条件(クレジット表記の要否、加工の可否、AI生成画像自体の利用規約)は素材サイトごとに異なるため、公開前に必ず確認しましょう。

開発途中で本番用画像がまだ決まっていない段階では、プレースホルダーサービス(ダミー画像を返してくれるURL)を使って仮組みを進め、後から本番画像に差し替えるワークフローも実務的です。
特に人物写真では「AI生成特有の違和感（手や指の崩れ、視線の不自然さ）」が出ることがあるため、採用前に必ず実画像として通用するか確認しましょう。

コード生成では圧倒的な評価を得るClaudeですが、画像生成は専用ツールを併用するケースが一般的なため、AIで画像を作る場合は専用ツールとの連携が必要になります。
必要な素材を人間側で集める、または画像生成が得意なツールと連携させることが必要になります。

4. アニメーションの指定方法

「いい感じにアニメーションをつけて」という指示がうまくいかないのは、動きの解釈がテキストの読み手(AI)によって大きくばらつくからです。静止画のデザイン以上に、時間軸を含むアニメーションは言葉での伝達精度が問われます。

具体的に伝えるべき要素は次の4つです。

トリガー:何をきっかけに動くか(ページロード時/スクロールで要素が画面に入ったとき/hover時)
イージング:動きの緩急(ease-in-out、easeOutのように滑らかに止まるのか、弾むのか)
duration:何秒で完了するか(0.3秒など)
方向・変化量:どの方向から、どれくらいの距離・角度・透明度で変化するか

言葉で伝えきれない場合は、参考にしたい動きのGIFや動画、あるいは実在するサイトのURLを渡して「この動きを再現して」と依頼するのが最も確実です。

実装方法はライブラリの指定有無で変わります。シンプルなフェードやスライドはCSSのTransition/Animationだけで十分ですが、複雑な演出をReact/Vue環境で行うならFramer MotionやGSAPの指定、スクロール連動アニメーションにはIntersection Observerの利用を明示すると、AIが適切な実装方針を選びやすくなります。

そして、DESIGN.mdに「モーションルール」の項目を作っておけば、「hoverは0.2秒のease-out」「ページ内アニメーションは基本フェードイン+8pxの上方向スライドのみ」といったルールを毎回説明せずに済みます。

最後に注意点です。
明示的に制御しない場合、アニメーションが過剰になるケースもあります。すべての要素が動くサイトはかえって落ち着きがなく読みにくくなるため、「動かす場所」だけでなく「動かさない場所」も明示しておくとバランスの取れた仕上がりになります。

5. 1つのAIでできることと、他のツールを使うべきケース

AIツールを使いこなす上で重要なのが、「何でも一つのツールに任せようとしない」という発想です。

例えば一部のAIコーディングツール（例：Claude）は、コーディングそのものに強みを持っています。
複数ファイルにまたがる実装やリファクタリング、DESIGN.mdのような設計ドキュメントの言語化、SVGやダイアグラムといったコードベースのビジュアル生成、既存画像を読み取って改善提案を行うVision機能などが該当します。

一方で、Claudeは主にコード生成や設計に強みを持ちますが、画像生成は専用ツールを併用するケースが一般的です。この点を理解していないと、「アイキャッチ画像を作って」と頼んでうまくいかない、という誤解が生まれがちです。画像生成にはMidjourney・Stable Diffusion・DALL-E・Adobe Fireflyといった専用ツールを使う必要があります。同様に、動画生成やモーショングラフィックスが必要な場合はRunwayやSoraのような動画生成に強いAIの領域になります。

つまり実務的な結論は、「AIコーディングツールは、コード生成と設計の司令塔として使い、素材生成は専用ツールに任せる」という住み分けです。実際のワークフローとしては、Claudeでサイトの骨組みとコードを生成し、必要な画像は外部の生成AIツールで作成、それをClaudeに読み込ませて配置・トリミング・最適化を調整する、という分業が現実的です。

ツールを1つに絞り込もうとせず、それぞれの得意領域を理解した上で組み合わせることが、結果的に制作スピードとクオリティの両立につながります。

6. フォーム送信を実際に機能させる方法

見落とされがちですが非常に重要なのがこのポイントです。AIに「お問い合わせフォームを作って」と頼むと、見た目の整った<form>タグは出来上がりますが、送信先(バックエンド)の指定がなければ、ボタンを押しても何も起こりません。静的なHTML/CSS/JSだけでは、メールを送る仕組みそのものが存在しません。

実際にメッセージを送信できるようにするための主な選択肢は次の通りです。

共有レンタルサーバーのPHP:さくらのレンタルサーバーのような共有サーバーではPHPが標準で使えるため、mail()関数を使った簡易な送信スクリプトをAIに書かせるだけで動作します。サーバー知識が少なくても比較的手軽な選択肢です。
フォームバックエンドSaaS:Formspree・Getform・Basin・Formcarryなどのサービスでは、<form>の送信先URLをサービスの発行するエンドポイントに向けるだけでメール通知を受け取れます。サーバーを持たない完全な静的サイトでも利用できるのが利点です。
EmailJS:クライアントサイドのJavaScriptだけでメール送信を完結できるサービスで、バックエンドサーバーを一切持たない構成に向いています。
Googleフォーム連携:Googleフォームを埋め込む、またはGoogle Apps Scriptと連携させる方法で、無料かつスプレッドシートへの自動保存まで完結できます。

導入時の注意点も押さえておくことが重要です。スパムメール対策としてreCAPTCHAやハニーポット項目(人間には見えないが、ボットだけが入力してしまう隠しフィールド)の設置が有効です。個人情報を扱うフォームである以上、SSL化とプライバシーポリシーの表記も必須です。
メール送信スクリプトを自作する場合は、不正な入力（スクリプトインジェクション）対策としてバリデーションとエスケープ処理を行うことが重要です。

そして何より、AIに依頼する際は「フォームの見た目を作って」ではなく「送信先も含めて実際に動く状態にして」と明示することが重要です。加えて、ローカル環境やAIツールのブラウザプレビュー上ではフォームの実送信テストができないケースもあるので、外部サービスを利用する場合は、実際に契約しているサーバーやサービスに接続した状態で最終確認する必要がある点も大切です。

レンタルサーバーのようなフロント部分しか配置できない環境の場合は、上記で紹介したような提携サービスを利用するのがポイントです。

7. その他、押さえておきたいTips

ここまでの6つに加えて、地味だがクオリティを底上げする小技を紹介します。

実機・複数ブラウザでの検証を組み込む:生成されたコードをプレビューで確認するだけでなく、実際のスマートフォンや複数ブラウザで崩れがないかチェックする工程を制作フローに組み込みましょう。
コピー(文言)のクオリティも担保する:デザインだけに気を取られがちですが、キャッチコピーやCTAの文言もAI任せにせず、「誰に」「何を」伝えたいのかを先に固めてから依頼すると精度が上がります。
アクセシビリティとSEOの最低ラインを仕込む:alt属性、適切な見出し階層(h1→h2→h3)、metaタグの設定は、DESIGN.md側にルールとして明記しておくと抜け漏れを防げます。
差分レビューを習慣化する:AIの出力を一括で丸呑みせず、変更点ごとにレビューする癖をつけることで、意図しない改変や「暴走」を早期に食い止められます。
参考にする実サイトを複数提示する:1章のムードボードとも重なりますが、抽象的な指示より実例URLや画像を渡した方が圧倒的に精度が上がります。
パフォーマンス(画像最適化・軽量化)も忘れない:クオリティは見た目だけでなく表示速度も含みます。画像の圧縮やフォーマット(WebP等)の指定もあわせて依頼しましょう。

まとめ

AIサイト制作のクオリティを左右するのは、モデルの性能そのものよりも「どれだけ具体的に、どれだけ仕組み化して指示を出せるか」です。数値やトークンでデザインを制約し、DESIGN.mdでルールを資産化し、画像やアニメーションは要素分解して伝え、AIと専用ツールを適材適所で組み合わせ、そしてフォームのような「見た目の裏にある動作」まで含めて完成させる——これらはどれも特別なテクニックではなく、AIへの伝え方を一段具体化するだけの工夫です。
また納得がいくまで指示と修正を繰り返すことが特に大事です。
支持する人間側の知識やスキルにも大きく依存するため、Webサイトの仕組みやデザインのノウハウを勉強することも効果的です。

AIに任せるだけでは、良いサイトはできません。
「どう作るか」を考えるのは、あくまで人間の役割です。
しかし、そのディレクションを正しく行えれば、AIはこれまでになかったスピードで「実務でも通用するクオリティのアウトプット」を生み出せる強力なパートナーになります。