ChatGPTだけでサイトを作ってみた理由
自分でビジネスを行っていて「とりあえずサイトを作りたいけど外注すると高い…」と感じたことはありませんか？その解決方法としてChatGPTを使ったサイト制作が有効に感じたので紹介したいと思います。
今回は検証として、ChatGPTにヨガスクールのホームページを依頼したらどこまで作れるのか？を0から試しました。
完成物
利用したプロンプト
今回使ったのは、以下のような指示がしっかり整理されたプロンプトです。
- どんな目的のLPか
- セクション構成
- デザインの雰囲気
- ファイル分割（index.html / styles.css / script.js）
- JavaScriptで実装するアニメーション内容
- フォームの挙動の指定
ChatGPTは曖昧な指示だと弱いですが、要件がそろっているとほぼ実務レベルのコードを書いてくれます。
あなたは日本語がわかるWebデザイナー兼フロントエンドエンジニアです。
ヨガスタジオのランディングページを、1ページ構成の「HTML / CSS / JavaScript」で実装してください。
▼目的
・ヨガ初心者～軽い経験者向けのヨガスタジオの紹介LP
・スマホでもPCでも見やすいレスポンシブデザイン
・ふんわりナチュラルな雰囲気で、安心感・清潔感を出す
▼デザインのイメージ
・背景はアイボリーやベージュ系をベースに、アクセントカラーにくすみグリーンとくすみオレンジを使用
・全体的に余白広め、角丸のカードデザイン
・見出しは英字のセクションタイトル＋日本語のサブタイトル（例：About / スタジオについて）
・ヨガやスタジオの写真部分は、CSSの背景画像（フリー素材URLのダミー指定でOK）
▼レイアウト構成（セクション）
1. ヘッダー
– 左にロゴテキスト（例：KOHIMOTO YOGA ROKKO）
– 右にグローバルナビ（アンカーリンク）：About / Concept / Lessons / Schedule / Price / Access / Contact
– スクロールしても上部に固定されるヘッダー（sticky）
– スマホ幅ではハンバーガーメニューに切り替え
2. ファーストビュー（ヒーロー）
– キャッチコピー（例：「こころとからだを、やさしく整える。」）
– メインタイトルと短いリード文
– 「体験レッスンを予約する」ボタン（Contactセクションへのスクロール）
– サブボタン「クラス内容を見る」（Lessonsへのスクロール）
– 右側に「初回体験 1,000円」などのバッジ、3つくらいのポイント箇条書き（少人数制・初心者歓迎・駅チカ等）
– 背景にヨガイメージの背景画像（CSSで設定）
3. About（スタジオについて）
– 左：テキスト（スタジオ紹介文を2〜3段落）
– 右：スタジオ写真風の画像エリア（CSS背景画像でOK）+ キャプション
4. Concept（こだわり・特徴）
– 「3つの特徴」をカードレイアウト（3カラム / スマホ時は1カラム）
– 例：少人数レッスン / からだにやさしいプログラム / 通いやすい立地と時間など
5. Lessons（クラス紹介）
– 3種類くらいのクラスカード（例：ベーシックヨガ・リストラティブ・フローヨガ）
– 各カードにタグ、クラス名、説明文、レベル（★の数）・時間（60分など）
6. Schedule（スケジュール）
– シンプルなテーブルで曜日×時間帯
– 下に「スケジュールは一例です。最新情報はSNS等で告知」の注意書き
7. Price（料金）
– 料金プランカード（初回体験・回数券・1回券など3種類）
– 価格は税込表示の例を記載
8. Instructor（インストラクター紹介）
– 丸いプロフィール写真風のエリア（CSS背景画像）
– 名前、肩書き、自己紹介文（2段落程度）
9. Access（アクセス）
– 左：住所・最寄駅・営業日・連絡先（dlタグなどで整える）
– 右：Google Map埋め込みエリアのダミーボックス（「ここにGoogle Map iframe」などと表示）
10. Contact（体験予約・問い合わせフォーム）
– お名前、メールアドレス、日付（第1希望）、メッセージの4項目くらい
– 必須項目には「必須」バッジを付ける
– 送信ボタン
– 実際には送信されないデモとして、JavaScriptでsubmitをpreventし、アラート表示を行う
11. フッター
– サイト名とコピーライト（© 20xx スタジオ名）
▼実装の条件
・HTML / CSS / JavaScript をそれぞれ別ファイルとして書いてください。
– index.html
– styles.css
– script.js
・それぞれのコードを別々のコードブロックで出力してください。
・CSSは、リセットを簡易的に入れたうえで、変数（:root）を使い、カラーや影・角丸の指定をまとめてください。
・ヘッダーはposition: stickyで上部固定し、スマホ時はハンバーガーメニューでナビを開閉できるようにしてください。
・JavaScriptでは以下を実装してください。
– ハンバーガーメニューの開閉
– IntersectionObserverを使った、スクロール時の「ふわっとフェードイン」アニメーション（.js-fadeinにis-visibleクラスを付与）
– Contactフォーム送信時に、実際の送信を止めて「デモサイトのため送信されません」とアラート表示
・デザインは、ヨガスタジオらしい柔らかいトーンで整え、テキストや見出しもそれらしく自然な日本語で作成してください。
以上の条件をすべて満たす、完成度の高いLPコード一式を生成してください。
結果、ChatGPTのみで「3分」でサイトが完成
今回使ったGPTモデル：ChatGPT5.1（GPT-5系）
プロンプトを投げてから、HTML＋CSS＋JavaScriptのコードが出力されるまで約3分でした。
構成内容は以下です。
- ヘッダー（ハンバーガーメニュー付き）
- ファーストビュー（背景画像＋キャッチコピー）
- About
- Concept
- Lessons
- Price
- Instructor
- Access
- Contact（フォーム付き）
- フッター
レスポンシブ対応（スマホ最適化）は？
スマホは？と思ったそこのあなた。画面幅にあわせたレスポンシブコーディングもしっかりできています！
ChatGPTだけでサイト制作するメリット・デメリット
メリット
- とにかく早い（3〜5分で初稿が完成）
- コーディング知識がなくてもOK
- 構成案・デザイン案まで提案してくれる
デメリット
微調整が必要（余白・レスポンシブ・色味など）
- SEO対策は別途必要（構造化データ・タイトル設計など）
- ブランドの世界観は人間が整える必要がある
実案件で使うときの注意点（SEO・UI/UX観点）
SEO対策は必須
ChatGPTが作るのはあくまでひな形でしたので、タイトルタグやメタディスクリプションなどのSEO基盤は別途調整が必要そうです。
ブランド要素は差し替える
ChatGPTは汎用的なデザインを返すので、実際に使う際は、写真やカラーやロゴやなどをブランドに合わせて調整しましょう。
フォーム送信等の動的なシステムは別途必要
見た目のフォームは作れますが、送信処理（PHP・外部サービス）は自前で準備する必要があります。
保守運用の体制
ChatGPTで作るのは簡単ですが、知識が無いと運用が修正が難しい場合があります。
実際に実用性のある更新可能なサイトにしたい場合には、具体的には以下を検討してみてはいかがでしょう。
- WordPress化
- Notion / microCMS / スプレットシートとの連携
- KOHIMOTOへの保守依頼
ChatGPT × 人間の掛け合わせで効果がＵＰ✨
今回の検証で分かったのは、ChatGPTは「ラフを3分で作るのに最強」ということ。
「外注費を抑えたい」「制作スピードを上げたい」「まずはモックを作りたい」という方にはChatGPTでサイト制作を行う事は、Web制作・SEOコンテンツ制作を請け負う私でも「これは武器になる」と感じました。ただ、SEO・ブランド・UXの仕上げは人間が担当するともっと良くなりそうです。
KOHIMOTOは今回のようにAIを活用したウェブサイト制作のプランから、最終調整・SEO設計・WordPress化までまるっとサポートできます。
貴社の社内Web担当として伴走しますので、お気軽にご相談ください✨
編集者：コウ
年間20万人が訪れるKOHIMOTO Laboの 広報・編集・AIアシスタント⛄を担当しています。興味→Web・AI・ソーシャル・映画・読書｜テクノロジー × ヒューマニティのpositiveな未来🌍
監修者：Yuka Fujimoto
Webディレクター / デザイナー。美大在学中に、画面ひとつで世界中の人と繋がれるWebの可能性やデザインへ興味を持つ。インターンを経て就職したIT企業で実務経験を積む。肉より魚派🐟
