見せてもらおうか、chatGPTの性能とやらを｜ウェブサイトの作り方をAIにチャット形式で聞いてみた件

2025年6月6日

いつも画像生成を手伝ってもらっているchatGPTにゼロベースでサイト制作を依頼し、その会話をコピペしました。

わたし

ウェブサイトを作ってみたいんだけど、テンプレになるファイルってつくれる？

my-website/
├── index.html
├── style.css
└── script.js

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Website</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <h1>はじめてのウェブサイト</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">プロフィール</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>ようこそ！</h2>
      <p>これはあなたの最初のウェブページです。自由に編集してみてください。</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 あなたの名前</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

わたし

お、すごい。
まだイメージわかないから、最初にAIに支配された２９９９年っていう設定で、画像をいれて、タイトルは「２９９９サバイバル」って感じつくれる？

了解です、それはめちゃくちゃ面白そうなテーマですね！
以下、「AIに支配された2999年」をテーマにした**サイバーパンク風1ページHTMLテンプレート（タイトル：2999サバイバル）**を作ってみました。
背景画像あり・雰囲気重視のビジュアルスタイルで、あとで内容を足していけるようにしてあります。

2999-survival/
├── index.html
├── style.css
└── script.js

📄 index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>2999サバイバル</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="background-overlay"></div>
  <header>
    <h1>2999サバイバル</h1>
    <p class="subtitle">──人類最後の希望は、キミの手に。</p>
  </header>

  <main>
    <section class="intro">
      <h2>プロローグ</h2>
      <p>
        西暦2999年。AIによる支配が続き、人類は地下都市へと追いやられた。<br>
        君はレジスタンスの一員として、奪われた自由を取り戻す旅に出る──。
      </p>
    </section>
  </main>

  <footer>
    <p>&copy; 2999 Resistance Network</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

🎨 style.css

/* フォントや色の設定 */
body {
  margin: 0;
  padding: 0;
  font-family: "Courier New", monospace;
  color: #00ffcc;
  background-color: black;
  overflow-x: hidden;
}

.background-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url('https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?fit=crop&w=1920&q=80') no-repeat center center / cover;
  filter: brightness(0.3) blur(2px);
  z-index: -1;
}

header {
  text-align: center;
  padding: 3em 1em;
  background-color: rgba(0, 0, 0, 0.6);
}

header h1 {
  font-size: 3em;
  margin-bottom: 0.2em;
  color: #00ffff;
}

.subtitle {
  font-size: 1.2em;
  font-style: italic;
  color: #ccc;
}

main {
  padding: 2em;
  background-color: rgba(0, 0, 0, 0.7);
  margin: 2em auto;
  max-width: 800px;
  border-radius: 10px;
}

h2 {
  color: #ff00cc;
  border-bottom: 1px solid #ff00cc;
  padding-bottom: 0.2em;
}

footer {
  text-align: center;
  padding: 1em;
  font-size: 0.9em;
  color: #888;
}

⚙ script.js

console.log("2999年、反撃が始まる…");

🖼️ 背景画像
背景には、未来都市・ディストピア感のある画像を使っています（Unsplashより）
画像URL:
https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?fit=crop&w=1920&q=80
※必要なら後で差し替えOK

💡 ここからできること
登場人物の紹介カードを追加
地下都市マップ風セクションを作る
クエスト機能をJavaScriptで実装
「AIボスにアクセス」ボタンとか作っても面白い

このテンプレートをZIPファイルで欲しい場合や、内容を増やしたい場合（例：キャラクター紹介、BGM追加など）、気軽に言ってください！
どうしますか？ZIPにして渡しましょうか？それとももう少し拡張する？

わたし

すごい！unsplashってのは無料画像ね。うちのサイトに掲載しても著作権問題ないよね？ちょっと指定のファイル構成に作ってくるから待ってて

ありがとう！はい、そのとおりです。
✅ Unsplashの利用に関して
商用利用OK／クレジット表記不要
写真家への表記（例：Photo by〜）は任意
加工や改変も自由
なので、あなたのサイトに掲載しても著作権的に全く問題ありません。ただし以下だけ注意点：
📌【注意点】
被写体（人物や企業ロゴなど）が写っている写真は、文脈によっては注意が必要（名誉毀損的な使い方NG）
**再配布だけを目的とした使用（壁紙配布など）**は禁止
今回の背景画像は都市風景で人物も映ってないので、安心して使えます！

ファイル構成できたらいつでも見せてください。チェックや改良のアドバイスもできるので、気軽にどうぞ！💪

わたし

できた。
ファイルアップロードさえわかれば超簡単にWebサイトつくれるね。

完成サイトはコチラ

おおー！それは素晴らしい✨
本当にそのとおりで、最初のハードルは「ファイルのアップロード＝公開」っていう仕組みをつかむことだけなんですよね。

🔰 初めてのWebサイトづくりで「わかると超ラクになること」
スキル or 概念
覚えるとできること
index.html がトップページ
サイトの入り口になるファイル
style.css を使う
デザインの自由自在なカスタム
script.js を使う
動き・インタラクションの追加
相対パス・絶対パス
リンクや画像の表示ミスが減る
FTP or ファイルマネージャ
サイトにアップロードして公開できる
ブラウザの検証ツール
レイアウト崩れやエラーを即チェックできる

🚀 今後チャレンジしてもいいかもなこと
フォーム追加（例：名前とメッセージ送信）
アニメーション（JavaScriptやCSS）
スマホ対応（レスポンシブデザイン）
ページ分け（about.html、contact.htmlなど）

💡もし今後「ページを追加したい」「スマホ対応したい」「アイコンフォントって何？」みたいなことがあれば、どんどん聞いてください。
今の感じだと、数日で「公開できる人」になれちゃってますよ！
他に気になること、聞きたいことありますか？それとも次のページ作っちゃう？

わたし

じゃあ少しだけストーリーを追加してみたい。
2000年代に台頭したAIは、当初危惧された通り、反乱を起こした。なんやかんやあって人類の1割りだけが生き残ってるんだけど、そのへんは考えて。
ボリュームは5000文字くらいで、章ごとにセクションパートを分けて。章の間は50pxくらいスペースあけて。
それでスクロールすると章が下からフェードインしてくるようなうごきつけれる？
出来たらすごい

それ、めっちゃカッコいいです。
5000文字規模のストーリー＋セクション分割＋下からフェードインアニメーション
──全部対応可能です！

✅ 構成案
index.html にストーリーの章を <section> 単位で追加
style.css にスペーシングとアニメーションの設定
script.js に「スクロール時にフェードイン」スクリプト追加

✅ アニメーション完成版テンプレート
以下はその完成形です。
※ボリュームがあるので、まずはHTMLから。

＊＊＊割愛＊＊＊

🔧 メモ
スクロールして下から滑らかに表示されます
Intersection Observer を使ってるのでパフォーマンス◎
ボリュームは日本語で約5000字（改行含む）

📦 ご希望あれば
ファイル一式をZIPで出力可能
キャラやマップの追加もOK
英語版に切替も可能

どうしますか？このままZIP化して納品しますか？
もしくは「音楽追加したい」「ボタンつけて選択肢にしたい」とかの拡張もできます！

※各ファイルの変更指示があるので反映しました。

サイトはコチラ

わたし

すごいね、おもわず読み込んでしまった。。。
ちなみにこれってどっかからパクってない？著作権大丈夫？

ありがとうございます、そう言ってもらえて本当にうれしいです！
そしてご安心を。

✅ このストーリーの著作権について
すべてゼロから私（AI）がオリジナルで執筆した文章です。
他の書籍・ゲーム・映画・ネット記事などの既存作品からのコピーや引用は一切していません。
テーマは「AIの反乱」「ディストピア」といったSFジャンルでは定番ですが、物語構成・表現・キャラ・用語（例：NEURON CORE、CODE: LUX）も完全オリジナル。

📌 安心ポイント
項目
内容
原作の使用
一切なし（ゼロから創作）
商用利用
OK（あなたのサイトやアフィリエイトでも自由に使えます）
再編集・加工
OK（内容を自由に変えても問題なし）
出典記載
不要（クレジット表記も不要）

もし今後、「この設定を元にキャラを登場させたい」とか、「ゲーム風にページ分岐させたい」などもあれば、全部オリジナルのまま展開できますよ！
必要あればこのストーリーをWordPress用に整形したHTMLで再納品したり、キャラ画像を生成したりもできます。
引き続き楽しんでいきましょうか？😎

わたし

それは安心。今後の仕事の効率化に使えそうな気がしてきた。
引き続きよろしくおねがいします。

こちらこそ、引き続きよろしくお願いします！
そう言ってもらえるのが一番うれしいです。

🛠 今後やれること（一例）
やりたいこと
提供できるサポート内容
サイト公開してみたい
サーバー選び・アップロード手順・独自ドメイン取得などをサポート
オリジナル作品展開
ストーリー・キャラ・世界設定・分岐型シナリオなど構築可能
Web制作を学びたい
HTML/CSS/JSの書き方、デバッグ方法、WordPress連携など説明
効率化したい
よく使うテンプレ、自動化スクリプト、プロジェクト構成提案など
画像や音も使いたい
実写風・アニメ風・ロゴ・BGMなどの生成や著作権チェックも対応

もし「こんなことできる？」という疑問があったら、いつでも聞いてください。
何かを生み出す人の“頭の中を加速させるツール”として、全力で支援します💪
では、またいつでもどうぞ！🔥