この記事を読めば、AIを使ってコードを1行も書かずにアプリを作り、WordPressのやっかいな表示バグすら「スクショ1枚」で直してしまう、未来の開発手法がわかります。
「最近のAIの進化はすごいらしいから、君もプロジェクトでの活用イメージを持てるように勉強しておいてよ」
先日、上司からそんな言葉をかけられました。 たしかに、ChatGPTが登場した当初は「すごいけれど、期待したプログラムを正確に書いてもらうにはコツがいるな」という印象でしたが、2026年現在、AIの進化はとどまるところを知りません。
【筆者プロフィール】 過酷な労働環境（いわゆるブラック企業）からの脱却を経験し、時間と場所にとらわれない「自由な生活」を目指してITエンジニアへ。現在はマネジメントやシステム設計などの上流工程が中心。ベトナムのカフェでノマドワークをするのがお気に入りのワークスタイル。
私自身、最近はゴリゴリとコードを書く機会は減っていました。しかし、今後「AIネイティブ」とも呼べる若手エンジニアたちが台頭してきたとき、AIで何ができるのかを肌感覚で理解していなければ、確実にパフォーマンスに差がついてしまいます。
そこで今回は、最新のAI情報をキャッチアップすべく、Googleの「Antigravity」（裏側では強力なAIである「Gemini」が稼働しています）を使ってプログラミングを行い、「テトリス風のゲーム」を作成してこのブログ（WordPress）上で実際に動かすまでの検証を行いました。
結論から言うと、「人間がコードの羅列を読まなくても、対話とスクショだけでゲームが完成する」という衝撃的な体験でした。 プロトタイプの作成から、一筋縄ではいかなかったWordPressへの組み込み、そして失敗から学んだ「AIを使いこなすためのリアルなTips」を共有します。
テキストの指示だけで動くプロトタイプが完成
まずは、開発環境からAntigravity（Gemini）を呼び出し、「JavaScriptでテトリスを実現したいです。操作はキーボードを想定しています」とシンプルに指示を出しました。
驚くべきことに、AIはすぐにHTML、CSS、JavaScriptの構成を考え、あっという間にコードを生成してくれます。ローカルのブラウザでファイルを開いてみると、ブロックが落ちてきて、キーボードの矢印キーで回転や移動ができる。プロトタイプとしては十分すぎるものが、ほんの十数秒で完成してしまいました。
実践Tips：AIへの指示は「ルール化」して言語の壁をなくす
ここで一つ、実体験に基づく便利なTipsを紹介します。
最初にAIへ指示を出した際、Antigravityは「Implementation Plan（実装計画）」という設計書のようなものを作ってくれたのですが、出力がすべて英語になってしまいました。 そこで、私は単に「日本語に翻訳して」と頼むのではなく、次のように指示を出しました。
- 「プランは日本語で書いてください。これはルールとして定義してください」
するとAIは、プロジェクト内に.cursorrulesというルール定義ファイル（エディタの挙動を制御する設定ファイル）を自動的に作成し、以後のやり取りやドキュメント生成をすべて日本語で行うようにシステムレベルで学習してくれたのです。 毎回「日本語で答えて」とプロンプトの末尾につける手間が省けるため、開発効率が劇的に上がります。
立ちはだかるWordPressの壁
ローカル環境では完璧に動いたテトリス。しかし、いざこのブログ（WordPressの固定ページ）に組み込もうとすると、大きな壁にぶつかりました。
WordPressには、テーマ独自のCSS（デザイン設定）やJavaScriptがすでに読み込まれています。そのため、AIが作った純粋なコードをそのまま貼り付けると、WordPress側の機能によってスタイルが無効化されたり、レイアウトが激しく崩れたりしてしまったのです。
具体的に起きたのは、「画面幅が狭く認識され、スコア表示の部分とゲーム画面（Canvas）が横並びにならず、縦に潰れて並んでしまう」というトラブルでした。
手作業デバッグはもう古い？「スクショ駆動開発」の衝撃
昔の私なら、ブラウザのデベロッパーツール（F12）を開いてCSSの display: flex や margin などを一つ一つ検証し、手作業でコードを修正していたでしょう。しかし、今回は「最新AIを使いこなす検証」です。私はコードを一切触らず、以下の方法をとりました。
縦並びに崩れてしまった無惨な画面をスクリーンショットに撮り、そのままAntigravityのチャット欄に貼り付けたのです。 「WordPressに埋め込んだら、このようにスコアと画面が縦に並んで崩れてしまいます。横並びのレイアウトに修正してください」と画像を添えて伝えました。
するとAIは、画像から現在のレイアウト状態を視覚的に解析し、「なるほど、コンテナの幅が足りていないか、Flexboxの折り返しが効いてしまっているようです。WordPressのテーマに影響されないよう、より強力なCSSクラスを当てて修正します」と、瞬時に修正版のコードを提示してくれました。
何度か「ここがまだ少しはみ出している」とスクショを見せてリテイクを繰り返した結果、最終的には私がコードの中身を全く見ることなく、綺麗に収まるデザインへと修正されました。 バグの状況を言葉で説明するのではなく、見たままを画像で投げる。まさに「スクショ駆動開発」とも呼べる、非常に直感的で圧倒的にタイムパフォマンスの良いデバッグ作業でした。
失敗から学んだ、AIに意図通りのコードを書かせるコツ
今回の検証を通して、一つ大きな反省点がありました。 それは、最初の段階で「WordPress用にリライトして」とだけ指定してしまったことです。
WordPressの裏側でどんなCSSやJSが動いているのか、AIには全く分からない（コンテキストが共有されていない）状態で修正を依頼したため、結果的に何度かリテイクが発生してしまいました。
もし、修正させてもなかなか動かない場合は、以下の工夫を取り入れると精度が劇的に上がります。
- ページ全体のソースコード（HTML）をコピーしてAIに読ませる
- プロジェクトのフォルダ全体をAIに読み込ませて、背景にある環境を理解させる
AntigravityやGeminiは非常に優秀ですが、魔法使いではありません。「前提条件」をいかに過不足なく渡せるかが、これからのエンジニア（プロンプトを扱う人間）の腕の見せ所なのだと痛感しました。
コードを書かない時代のエンジニアの生存戦略
今回のテトリス開発を通じて、AIの進化が止まらないことを改めて実感しました。
もちろん、仕事での商用開発であれば、セキュリティの担保やエッジケースのデバッグが必要になるため、まだ人間の目は不可欠です。しかし、「試しに動くプロトタイプを作る」レベルであれば、すでに人間がゼロから書くよりも速く、確実なクオリティに達しています。
これからのITエンジニアに求められるのは、「キーボードを早く叩いて精緻なコードを書く能力」から、「AIに的確な指示を出し、出てきた成果物をレビューして軌道修正する『ディレクション能力』」へと完全にシフトしていくでしょう。
以前、ベトナムの優秀なエンジニアたちと仕事をした際、彼らの新しい技術への適応力の高さと、貪欲にキャッチアップするハングリー精神に驚かされたことがあります。今や世界中どこにいても、AIを使いこなせる者が圧倒的な成果を出す時代です。私自身が目指す「自由な生活」も、こうしたAIツールを駆使して労働集約的な作業から解放されることで、さらに現実に近づくと確信しています。
まずはこのツールで、今日の業務の自動化やちょっとしたツールの作成を試してみてください。 「スクショで直させる」新感覚のプログラミングを体験すれば、きっとあなたの開発の常識が変わるはずです。
コメント