目次

ChatGPT Sitesの話をしているとき、ふと思った。

小さなWebサイトやWeb作品を公開するたびに、Cloudflareのようなホスティング基盤や、WordPressのようなCMS・サイト構築環境まで自分で用意してきたけれど、Sitesがあるならそれって毎回は必要ないんじゃないか？

気になったので、確かめることにした。実際にChatGPT Sitesだけで小さなWeb作品を1つ作って、公開までやってみる。それが「積み木ぽいもの」で、CloudflareもWordPressも自分では用意していない。そして触っているうちに話が転がって、気づけば同じ題材で、もっと機能を増やした第2版を自前のLabsに作るところまでいった。

その顛末をまとめておく。

まず「積み木ぽいもの」をSitesで作ってみた

ChatGPT Sitesは、ChatGPTとの会話からWebサイトや軽いWebアプリを作成・プレビュー・公開・共有できる機能だ。現在はパブリックベータで、Web版ChatGPTではWorkから、デスクトップアプリではWorkまたはCodexから使える。デプロイすると本番URLが発行され、プラン別の利用上限がある。カスタムドメインも、利用できる場合は自分が所有するドメインを接続する形で対応している。詳細はOpenAIのヘルプにまとまっている。

お試しなので、依頼した内容は小さめにした。

  • 色や形の違う、ちょっと変な積み木
  • 落とす、積む、触る。それだけ
  • PCとスマホで遊べる
  • DBやログインは不要

これをChatGPTに投げて、会話の中で直しながら、そのままSitesの機能で公開した。今回の制作で、サーバーの契約もCloudflareの設定もGitHubリポジトリの作成も、自分では行っていない。普段は小さな作品でもGitHubとCloudflareに載せて公開している身からすると、会話から公開までがChatGPTの画面の中で完結したのは、かなり不思議な体験だった。

最初の疑問は、この時点で半分くらい答えが出ている。少なくとも今回のような小さなWeb作品なら、公開のために自前の基盤を組む必要はなかった。

「ポップでメンフィスに」で見た目が変わった

最初に出てきたSites版は、生成りの紙っぽい背景だった。

一瞬「ChatGPTに頼むと毎回この色味になるの？」と思ったが、これは冤罪で、最初の指示に「生成り・紙っぽい背景」と自分で入れていた。ぽいもの本舗がそういう見た目なので、癖で書いていたらしい。

そこで「ポップでメンフィスに」とだけ頼んでみた。すると、背景も積み木も装飾も含めて、サイト全体がかなり大きく別のデザインへ変わった。チェッカー柄や波線が飛び、タイトルが2色になり、完全に別の作品の顔になった。

ChatGPT Sitesで公開した積み木ぽいもの。「ポップでメンフィスに」と頼んだ後のデザイン

コードを1行も見ずに、一言でここまで変わるのは面白い。「Sitesはデザイン変更が得意」とまで一般化するつもりはないが、今回は自然言語だけで、サイト全体の見た目を大きく変えやすかった。

動いたけれど、操作は想像と違った

できあがったSites版は、ちゃんとインタラクティブだった。積み木を掴んで動かせるし、空中へ持ち上げることもできる。

ただ、空中でマウスを離しても、積み木はそのまま浮いていた。

最初は「重力で落ちないのか」と思った。しばらく触ってから、右クリックすると落とせる仕様だと気づいた。つまり「左クリックで持ち上げて、右クリックで落とす」という操作体系が生成されていて、それ自体は一貫して動いていた。

これは「Sitesでは物理的なインタラクションが作れなかった」という話ではない。インタラクションは成立していた。ただ、自分が自然に期待していた「掴む→離す→落ちる」とは別の操作仕様が生成されていて、それに自分が後から気づく、という順番になった。仕様を書いて実装するのではなく、生成された仕様を発見する感覚に近い。

同じ題材で、もっと上位のものを作りたくなった

Sites版はここで完成扱いにした。お試しのつもりが、小さな作品として普通に気に入っている。

そして遊んでいるうちに、今度は同じ積み木という題材で、もっと機能やインタラクションを増やした作品も作ってみたくなった。次に作るもの側の目標を上げた、という感覚だ。次の版は最初から「掴んで離したら、その瞬間に落ちる」「積み木同士がぶつかって積み上がる」といった細かな仕様を決めて作る。どうせならぽいもの本舗のキャラクターっぽくもしたい。

その制作先には、すでに持っていたぽいもの本舗のLabs(実験作品置き場)を使うことにした。少し前に第1号としてThree.jsの実験を置いたばかりで、そこへ第2号として並べる。ここで初めてClaude Codeの出番になる。描画はThree.js、物理はRapierだ。

Labs版では、まず操作の仕様を先に決めた。

掴む → 動かす → 離す → その瞬間から重力で落ちる。

右クリックは持ち上げには使わない。PCとスマホで基本操作は同じ。床や積み木同士の衝突、摩擦、自然に止まって眠る挙動まで実装した。見た目は完全な3Dにはせず、薄い立体を1つの面の上で積む2.5Dにして、どのブロックにも、ぽいもの本舗トップページのキャラクターたちと同じような小さな目を付けた。

作っている途中で仕様が増えていった

Labs版が面白くなったのはここからで、最初から完成した仕様書があったわけではない。実物を触りながら「こうしたい」が増えていった。

まず、合体。2個以上のブロックが静かに触れたまま少し静止すると、1つのブロックにくっつくようにした。

次に、色。黄色と水色が合体したとき、混ぜて中間色にするのはやめた。黄色の領域と水色の領域を両方残した1体にする。そこへピンクを落とせば、黄色と水色とピンクを含んだ1体になる。

目は増やさない。合体前はそれぞれに目があるが、合体後は新しい1体として目を1ペアだけ残す。これで「積み木が集まった」ではなく「新しいキャラクターになった」ように見える。

そうなると今度は戻したくなる。合体したキャラクターを右クリックすると、元の小さいキャラクターたちへ「ポンッ」と弾けて分裂するようにした。分裂した子たちは、また掴めるし、また合体できる。

さらに、画面の右側へ3Dのレバーを付けた。引くと、最初の9色にはない新しい色のブロックが3〜5体、上からばらばらと降ってくる。増えすぎるとブラウザがつらくなるので、内部的には合体前のブロック数換算で最大27体という上限も入れた。

ぽいもの本舗Labs版の積み木ぽいもの。目のついたブロックたちと、黄色と水色を引き継いだ合体キャラクター、右端にレバー

書き出すと大層に見えるが、どれも制作途中の思いつきだ。「静止してから何秒で合体するか」「分裂のときどれくらいの勢いで弾けるか」まで、その都度、挙動を見ながら決めた数字で動いている。

Sites版とLabs版で何が違ったか

同じ題材を2回作ったが、そもそも同じ作り方をしていない。今回実際にどう作ったかで並べるとこうなる。

ChatGPT Sites版 Labs版
今回の目的 Sitesを試して公開してみる 同じ題材で機能を増やした作品を作る
指示の粒度 簡単なプロンプト中心 詳細な挙動を一つずつ指定
制作環境 ChatGPT SitesのWork Claude Code + 既存のLabs環境
修正の仕方 会話で大まかに変更 実物を見ながら細かな仕様を追加
完成したもの シンプルな積み木作品 合体・分裂・レバー等を持つ積み木作品

先に書いておくと、この2つは公平なベンチマークではない。Sites版に渡したのはかなり簡単な指示だけで、今回はWorkしか使っていない。Labs版では逆に、挙動を細かく指定しながら何度も仕様を足している。つまり完成したものの差には、ツールの違いだけでなく、与えた指示の量と具体性、作り方の違いが大きく含まれている。同じ要求をSitesへ渡したわけではないので、Labs版のようなものがSitesで作れるかどうかは、今回の制作からは判断できない。

そのうえで、それぞれの体験として残ったものはある。

Sites側の印象は、とにかく公開までの工程が少なかったこと。ホスティングもデプロイも自分で組まずに、作品のURLが手に入った。そして今回は、自然言語だけで見た目を大きく変えやすかった。

Labs側は、細かな挙動を一つずつ指定しながら作る進め方そのものが楽しかった。期待と違えば期待の方に合わせて直し、制作途中の思いつきを仕様として足していく。ただしこちらは、ぽいもの本舗という既存のサイト基盤(GitHubとCloudflareの運用)がすでにあった上での話で、今回ゼロからインフラを組んだわけではない。

Web版とデスクトップアプリで操作感が違った

1つだけ、Sitesそのものではない話を。今回、Web版ChatGPTでSitesの設定変更や管理権限まわりを操作したとき、全体的にもっさりしていて少し面倒だった。ところが同じ操作をChatGPTのデスクトップアプリでやると、かなり良くなった。サクサクとまでは言わないが、Web版ほどのもっさり感はなかった。

原因は分からないし、環境にもよるはずなので、「Sitesが重い」という話ではない。ただ、これから試す人は最初からデスクトップアプリで触ると印象が違うかもしれない。

で、CloudflareやWordPressはいらないのか？

最初の疑問に戻る。

今回のような小さなWeb作品に関しては、Sitesだけで制作から公開まで完結した。サーバーもCloudflareもGitHubも自分では用意していない。WordPressについても、今回はCMSとして使うわけでも、大量の記事を管理するわけでも、複数人で運営するわけでもないので、用意する必要がなかった。「最初から自前の公開基盤を用意しなくてもよいケースは確かにある」というのが、実際に作ってみた実感だ。

一方、同じ題材でもっと機能を増やした作品を作りたくなった今回は、次の制作先として、すでに持っていた自前のLabs環境とClaude Codeを選んだ。

だからこれは、SitesかCloudflareかWordPressかClaude Codeか、という勝敗の話ではない。SitesとClaude Codeの能力比較でもない。渡した指示の量も作り方もまったく違うからだ。今回2つ作ってみて感じたのは、こういうことだ。思いつきを今すぐ形にして公開したいだけなら、基盤の準備から始めなくていいと思った。今回はそのあと、同じ題材でもっと機能を増やしたものを作りたくなり、すでに持っていた自前の環境を使った。作りたいものの段階によって、最初に選べる入口が増えた。

今後すべてこの順番でやると決めたわけではない。ただ、今回はこの転がり方がかなり心地よかった。

2つの「積み木ぽいもの」はどちらも公開中なので、見比べてもらえると面白いと思う。

Labsには他の実験も一覧から触れる。