noteに記事を公開しました：ChatGPTの新機能「Sites」で驚きのインタラクティブ3DウェブサイトをAIだけで作成・公開

hantaniさんのnoteで公開された最新記事「ChatGPTの新機能「サイト」でWEBページを作って公開してみる」を紹介します。

2026年7月22日公開の新着noteです。この記事では、ChatGPTの新機能「Sites」（Workモード）を使って、詳細なプロンプトだけで本格的な3Dインタラクティブウェブサイトを生成し、公開するまでの全プロセスを詳しく解説しています。npmやビルドツール不要、ブラウザだけで完結する驚きの体験です。

主なポイント

• ChatGPT左メニューから「Sites」機能を選択し、Workモードで高品質な完成品サイトを生成
• プロンプト例として「NEON CIRCUIT LAB ― AIと電子工作が融合した未来の研究室」という架空プロモサイトを詳細に指示
• キー技術: Three.js (3Dオブジェクト、粒子、光のアニメーション)、GSAP + ScrollTrigger (スクロール連動演出)、Lenis (滑らかなスクロール)
• ページ構成: ローディング演出 → ヒーローセクション (3Dオブジェクト) → 研究分野カード → インタラクティブ3D展示 → タイムライン → 数値カウントアップ → 未来メッセージ + ENTERボタン
• デザイン: サイバーパンク風ネオン、半透明ガラスパネル、高級感、PC/スマホ両対応
• パフォーマンス・アクセシビリティ・エラー回避まで考慮した実装指示
• 完成後、プレビュー確認 → 共有設定（リンクを知っている全員）で公開

印象に残ったところ

記事内のプロンプトは非常に具体的で、以下の要素を網羅しています：

- デザイン方針（サイバーパンク、色使い、ガラス効果）
- 3D表現の詳細（回転チップ、粒子、光のライン、マウス追従）
- ページ構成の全セクション仕様
- アニメーション要件（パララックス、フェードイン、カウントアップ）
- パフォーマンス最適化（粒子数調整、prefers-reduced-motion対応）
- 実装制約（CDNのみ、npm不要、ブラウザ完結）
- 最終確認項目（3D正常動作、スマホ対応、JSエラーなし）

このレベルの詳細指示により、AIが「ただの静的ページ」ではなく、本当に動作するインタラクティブ体験を生成できた点が秀逸です。ChatGPTが「完成品メーカー」へと進化したことを象徴する事例です。

学べること・実践Tips

• プロンプトの質が全て: 抽象的な指示ではなく、具体的なデザイン・技術要件・ユーザー体験・制約条件をすべて記述
• 3D/WebGLに詳しくなくても、ライブラリ指定＋詳細要件で高品質出力が得られる
• 「Sites」機能は従来のチャットとは異なり、Workとして調査・分析・完成品生成に特化
• 公開後の共有設定を「リンクを知っている全員」にしてテスト

Pitfalls: プロンプトが曖昧だと低品質な出力になる可能性。3D負荷が高いのでモバイルテスト必須。CDNバージョンを明示的に指定。

この新機能を使えば、アイデアさえあれば誰でも印象的なウェブサイトを短時間で作れます。詳細な手順とスクリーンショットは本編のnoteでぜひご確認ください！

---

関連記事

• AIの答え、本当に信じて大丈夫？ AIに「セカンドオピニオン」を頼む仕組みを作り始めた
• 4つのAI CLIにワンナイト人狼をさせたら、AIエージェントのオーケストレーションが見えてきた（近日公開予定）

新着noteをチェックしてブログに反映するcronワークフローの一環として作成しました。ご参考になれば幸いです。