第三章「ChatGPT神説を信じて突入した、コーディングの迷宮」

AIを使えばサイトが作れる──その信念だけを胸に、私はコーディングの世界へ足を踏み入れました。結論から言うと、そこは思っていた100倍ややこしい場所でした。

まずはデザインを再現するところから：html to FigmaでSTUDIOを「写経」

STUDIOのサイトをFigmaにまるごと移植する

いきなりゼロからコーディングするのは流石に無謀だと思い、まず「デザインのお手本」を用意することにしました。使ったのが「html to Figma」というツールです。STUDIOで作ったサイトのURLを読み込ませると、そのページのデザインをまるごとFigmaに再現してくれるというスグレモノ。

「これをお手本にしてコーディングすればいけるんちゃうか」という算段でした。

Figmaで微調整して「デザインカンプ」を完成させる

Figmaに取り込んだデザインをそのまま使うのではなく、少し手を加えて整えました。
フォントを調整したり、余白を整えたり。

デザインカンプ（コーディングの設計図となるデザインデータ）として使えるよう、画像として書き出す準備を整えました。
ここまでは順調。問題は、この次でした。

Cursorに指示を出そうとしたら、早くも詰んだ

ChatGPTにデザインカンプを渡して、Cursorへの指示を作ってもらう

デザインカンプの画像と要件定義をChatGPTに渡して、「これをCursorに指示してWordPressサイトを作って」という作戦を立てました。
ChatGPTが指示文（プロンプトというやつ）を書いてくれて、それをコードエディタ「Cursor」に流し込む、という二段構えです。我ながらスマートな戦略だと思っていました。

AIくん同士の会話なら私の自然言語より伝わるっしょ！仲良くしてね〜！

無料プランの壁：あっという間にトークン切れ

現実は甘くありませんでした。
Cursorは全然思うように動かないし、試行錯誤しているうちに無料プランのトークン（使える文字数の上限）があっという間に底をつきました。

「課金すれば解決するのかもしれないけど、そもそもこの方向性で合ってる？」という根本的な疑問も湧いてきて、一旦立ち止まることにしました。

救世主か？　Antigravityとローカル環境の構築

以前触ったことのある「Antigravity」を思い出す

焦りながらあれこれ調べていたとき、数ヶ月前に少し触ったことのあった「Antigravity」というAIツールを思い出しました。

当時Xの量産アフィアカウントがこぞって大絶賛してたAntigravity。最近はあんまり話題に上がってない彼。
PC内のローカルファイルを直接操作してくれるのが特徴で、「フォルダの構造とかの知識も怪しい私からしたら、もしかしてこれの方が向いてるんじゃ？」という直感で乗り換えを決意。

とにかく一回触ったことがあるってのが魅力だったし、Google Oneのアカウント登録をすればトークンが増えるしGeminiも無料のものより４倍使えるとのこと。（月額2,900円で、ドライブの容量が５Tになり、しかもYoutube premium lite？がついてくる・・・すごくコスパいいのでマジおすすめ）

Google OneとかProとか

ChatGPTの手順解説を頼りに、ローカル環境を整える

まずAntigravityが作業できる環境を整える必要があります。フォルダを作ってAntigravityに接続し、「Local」というソフトを使ってWordPress環境をローカルに構築する──このセットアップ手順が、また初心者には難解でした。でもここでChatGPTが大活躍。「わからない」と思うたびにスクリーンショットを貼り付けて質問すると、丁寧に次の手順を教えてくれました。おかげでなんとか、自分のPC上でWordPressサイトをプレビューできる環境が完成しました。

最初の出力は「カスみたいな」コーディングだった

環境が整い、さっそくAntigravityに指示を出してコーディングしてもらいました。ドキドキしながらプレビューを確認してみると……正直、ひどかったです。デザインはガタガタ、レイアウトは崩れ放題。
「これ、本当に同じデザインカンプから作ったの？」と疑いたくなるレベルの出来でした。
冷や汗をかきながら、試行錯誤が始まります。

Claude Codeという希望の光、そして断念

Xで話題の「Claude Code」を試したかった

作業を進める中で、SNS（X）のタイムラインにある名前が流れてきました。「Claude Code」。
コーディングに特化したAIツールで、使った人たちが口を揃えて「すごい」「革命的」と絶賛しています。
「これを使えば一発解決なのでは？」と飛びつきそうになりました。

無料プランが存在しなかった

しかし調べてみると、Claude Codeには無料プランがないとのこと。
課金の前にまず今の手札でどこまでできるか試してみよう、と気持ちを切り替えました。
あきらめるのは悔しいけれど、お金をかける前に現状を整理するのも大事です。

行き当たりばったりな人間なので、いろいろ試して自分に合うスキームを見つけたかったのもあり、
いろんなサービスを使ってみたりしました。

ChatGPTにAntigravity用プロンプトを書いてもらうも、また壁

プロンプトを最適化してもらえば上手くいくはず

「Antigravityへの指示の仕方が悪いのかもしれない」と思い、ChatGPTに「Antigravityをうまく動かすためのプロンプトを書いて」とお願いしてみました。
ChatGPTはきっちりプロンプトを作ってくれました。さっそく試してみると──

PCスペックの限界、ふたたび

全然、結果が表示されません。処理がいつまでたっても終わらないんです。
第一章でも登場した9年物MacBook Pro問題が、ここでも牙を剥きました。

ChatGPTがいくら頑張ってくれても、動かすPC側が追いついていない。
PCちゃんを保冷剤に座らせながらの作業。力技。
ツールと私の頭とPCスペック、三つ巴の限界戦争が続いていました。

まとめ：もぐら叩き大戦

デザインカンプを用意して、環境構築して、プロンプトを工夫して……それでも「一歩進んで二歩下がる」の繰り返しでした。
Cursorはトークン切れ、Antigravityの初期出力はひどく、Claude Codeは有料の壁、ChatGPTはMacが熱暴走。
打つ手打つ手に何かしらの壁が立ちはだかりました。

それでも、少しずつ「どこが問題なのか」はわかってきていました。
次の第四章では、そんな状況を打開するためにとったある決断と、
最終的な「あっさり解決」のオチをお話しします。（そんなオチってほどでもないけど）