【ITニュース解説】JSON prompts bring more control to vibe coding

AI（人工知能）がWebサイトやアプリケーションの見た目、つまりフロントエンド部分を作る手助けをする開発は、近年注目されている分野である。これまでの一般的なアプローチでは、開発者は手書きのワイヤーフレーム（画面の設計図）をAIに渡し、それにテキストで補足説明を加える方法が主流だった。しかし、この方法は単純な画面構成であれば問題ないものの、ページが複雑になったり、特定の細かい部分を強調して指示する必要がある場合、非常に扱いにくく、間違った結果が出やすいという課題があった。

この課題を解決するため、プログラミング言語のレイアウト形式からヒントを得て、JSONというデータ形式に基づいた新しいアプローチが提案されている。この方法の核心は、現在のAIモデルが画像よりもテキスト形式の情報をはるかによく理解するという点にある。テキストによる説明は、画像だけでは伝わりにくいような細かなニュアンスや詳細な情報も正確に伝えることができる。さらに、JSON形式の指示は、特別なマルチモーダル（画像とテキストの両方を理解できる）機能を備えたAIモデルでなくても、どんなAIモデルでも利用できるという大きな利点がある。

JSONとは、JavaScript Object Notationの略で、人間にとっても読み書きしやすく、コンピューターにとっても扱いやすいデータ交換フォーマットである。データを「キー」と「値」のペアの集合として表現する。このJSON形式を使ってAIへの指示（プロンプト）を構造化することで、開発者はより細かく、正確にAIを制御できるようになる。

具体的な例として、ChatGPTのようなチャットインターフェースをJSONプロンプトで構築するケースが挙げられている。

Copy
1{
2  "elements": [
3    {
4      "type": "container",
5      "name": "Sidebar",
6      "prompt": "Left sidebar containing new chat button and chat history list",
7      "bounds": { "x1": 0, "y1": 0, "x2": 25, "y2": 80 },
8      "children": [
9        {
10          "type": "button",
11          "name": "New Chat Button",
12          "prompt": "Button to start a new conversation, positioned at top",
13          "bounds": { "x1": 2, "y1": 3, "x2": 23, "y2": 7 }
14        },
15        {
16          "type": "custom",
17          "name": "Chat History List",
18          "prompt": "Scrollable list of previous conversations with titles",
19          "bounds": { "x1": 2, "y1": 10, "x2": 23, "y2": 77 }
20        }
21      ]
22    },
23    {
24      "type": "container",
25      "name": "Main Chat Area",
26      "prompt": "Main chat interface with header, messages, and input",
27      "bounds": { "x1": 25, "y1": 0, "x2": 120, "y2": 80 },
28      "children": [
29        {
30          "type": "input",
31          "name": "Message Input",
32          "prompt": "Text input with embedded send button on right side",
33          "bounds": { "x1": 32, "y1": 70, "x2": 113, "y2": 74 }
34        }
35      ]
36    }
37  ]
38}

このJSONの例では、「elements」というキーの中に、画面を構成する様々な要素がリストとして定義されている。例えば、最初の要素は「Sidebar」（サイドバー）という名前の「container」（入れ物）であり、「Left sidebar containing new chat button and chat history list」（新規チャットボタンとチャット履歴リストを含む左サイドバー）というプロンプト、つまりAIへの具体的な指示が与えられている。また、「bounds」というプロパティは、その要素が画面上のどこに、どれくらいの大きさで配置されるかを示している。サイドバーの中には、「New Chat Button」（新規チャットボタン）や「Chat History List」（チャット履歴リスト）といった子要素がさらに定義されており、それぞれに具体的な指示と配置情報が与えられている。このように、JSONを使うことで、画面全体の構造から個々のコンポーネント、そしてそれらの位置や機能までを階層的に、かつ明確にAIに伝えることができる。

このアプローチは、単に画面の見た目だけでなく、裏側の処理（バックエンドロジック）まで含めた指示を一つのプロンプトにまとめることも可能にする。例えば、チャットの「送信ボタン」に対しては、「入力の検証を行い、現在のメッセージを/api/chatエンドポイントに送信し、ローディングスピナーを表示し、エラーがあればトースト通知で処理し、AIの応答をチャット履歴に追加する」といった、フロントエンドとバックエンドの連携に関わる一連の動作をまとめて指示することができる。これにより、開発者はシステム全体の連携を意識した指示をAIに与えやすくなる。

さらに、より詳細な制御が必要な場合でも、JSONプロンプトは強力なツールとなる。例えば、メッセージ入力欄に対しては、「複数行のテキスト入力で自動的にサイズが調整され、『メッセージを入力…』というプレースホルダーを表示し、Enterキーで送信、Shift+Enterで改行、最大2000文字で文字数カウンターを表示する」といった、非常に具体的な機能要件を指示として含めることが可能だ。これは、従来の画像と簡単なテキストによる指示では実現が難しかったレベルの制御である。

このような構造化されたアプローチを採用することで、開発ワークフローは大きく改善される。まず、ページ全体の構造をJSON形式で最初に設計する。次に、各プロンプトを段階的に実行していき、アプリケーション全体を構築していく。このプロセスは、開発の予測可能性を高める。AIが一部のプロンプトを誤解して、画面全体のレイアウトが崩れてしまうといった心配がなくなる。各コンポーネントに対して明確な仕様が与えられるため、AIはそれに一貫して従い、より信頼性の高い結果を生み出すことが期待できる。

JSONを手書きで作成することは可能だが、Fronamiのような視覚的なインターフェースを提供するツールも登場している。Fronamiでは、コンポーネントをドラッグ＆ドロップで配置するだけで、自動的に対応するJSON構造が生成される。また、ワンクリックでフロントエンドのコードを生成する機能も提供されているが、実際の実装には、筆者のようにCursorやRoo Codeといった既存の成熟した開発ツールを好む開発者もいる。

このように、JSONを用いたプロンプト管理方法は、AIを活用した開発をより制御しやすく、信頼性の高いものへと進化させる。システムエンジニアを目指す上で、AIとの連携や新しい開発手法は今後ますます重要になるため、このようなアプローチの理解は大きな助けとなるだろう。