ぐんまの教育を元気にする！　教育情報サイト

　プログラミング知識ゼロのローカルメディア編集長が生成AIを相棒に「外注費数十万円レベル」のアプリ開発に挑んだ壮絶なドキュメント。

　画面の向こうで繰り広げられるAIとの地獄のループ、そして相棒の交代劇……。泥臭い試行錯誤の果てに見えてきたものとは。AIに思考を丸投げしない「人間の主体性」と、これからの時代のAIとの向き合い方を考える（全3回）。

◆デジタルなのにアナログな２つの人気記事

　私が編集長を務めるWebメディア『みんなの学校新聞』には、毎年受験生や保護者に重宝されている名物企画がある。「私立高校　学校説明会・オープンスクール情報」と「2026 私立高校入試日程カレンダー」の特集だ。

　特に入試カレンダーは、制作の手間が非常にかかる企画だった。まず、スプレッドシート上にカレンダーを作成する。そして、そのデータをHTML形式で読み込み、一校一校、ホームページに貼り付けていく。

　この方法自体は、6年ほど前にインターネットで調べて身につけたものだった。専門的な知識があるわけではない私にとって、悪戦苦闘しながらようやくたどり着いた境地だった。プログラミングができない自分でもデータベース的に運用できる、かなり画期的な仕組みだった。しかし、学校数が増えるほど作業量は膨大になる。毎年、更新のたびに丸2日ほどの時間を費やしていた。

◆開発費ゼロへの挑戦と「無限ループ地獄」

　「これをもっと使いやすくしたい」

　学校情報をデータベース化し、検索や比較できるような仕組みにしたかった。実は2年ほど前、会社にも相談したことがあった。しかし、外部の制作会社に依頼すれば、それなりの開発費が必要になる。小さなメディアにとって、簡単に決断できる金額ではない。現状で妥協するしかなかった。

　そんな中、転機になったのが生成AIだった。

　この1年ほど、私はAIを使って簡単なHTMLを書いたり、動的な教材を作ったりしていた。「もしかして、AIを使えば理想のシステムが作れるのではないか」と思いついたのだ。

　AIは魔法の杖のように語られるが、実際に使うとそんなに甘くはない。「ドラえもん」の四次元ポケットには到底及ばない。AIは時として嘘をつくし、そして牙もむく。HTMLで教材を作るといっても、待ち受けているのはAIとの格闘だ。

　一度コードを間違えると、こちらが指摘しても「今度こそ大丈夫です」と誤った修正を繰り返し、底なしの無限ループに陥るのだ。無料版のChatGPTは、容量制限もあるので、この「無限ループ地獄」にはまると先に進まなくなる。地獄の淵に落ちると、延々と不毛なやりとりに付き合わされる羽目になる。

　HTMLがまったく分からなければ、AIの書き出すものをそのまま信じるしかない。だから、理想のものを作ろうとしたらAIに突っ込めるくらいの基礎的な知識はマストだということはAIと付き合う中で身につけた。

　今回作ろうとしているのは大規模なシステム。自分はJavaもPHPも知らない。だからこそ地獄の経験が頭をよぎった。

伝えたい情報を言語で指示するのは難しい。画面のイメージや表示するデータをAIに正確に伝えるにはどうすればいいか。あれこれ思案した末、自分の頭の中にある完成形を、できるだけ正確に伝えるため「入力はスプレッドシートをデータベース代わりにして、こんな受験ナビにしたい」という設計図をパワーポイントで作成し、AI（Gemini）に見せてみた。

【画像】自分がパワポで作成した画面イメージ

　すると、Geminiは「スプレッドシートにデータを入れ、Google Apps Script（GAS）でAPI化し、WordPress側のプログラムと連携させれば可能です」と教えてくれた。GAS？　API？　分からないワードのオンパレードだったが、言われるまま制作に入った。

　しかし、ここからが本当の苦闘の始まりだった。 スプレッドシートをデータベース化するには、学校の情報を横1行に並べる必要がある。1校あたり50項目超。これを横へ横へと入力していく作業は想像しただけで挫折しそうだった。

「縦に入力したデータを、自動で横組みに変換できないか？」 私の問いに、Geminiは「TRANSPOSE関数」の存在を教えてくれた。これで入力の問題はクリアだ（下図）。

　そこからAIの指示通りにGASのコードやサイト用のコードを貼り付けていったが、構造が理解できていないため、エラーが出るたびに立ち往生した。ようやくWordPressのプレビューに表示された画面は、お世辞にも見られたものではなかった。UI（ユーザーインターフェース）はめちゃくちゃ、日付も正しく表示されていない。

　それでも、試行錯誤の中で「どういう仕組みでデータが動いているのか」の基本構造（GAS、JavaScript、CSSの関係性）が徐々に頭に入ってきた。AIなしでは、このスタートラインに立つことすら不可能だったろう。

◆　二つの大きな壁

　しかし、ここへ来て二つの大きな壁が立ちはだかる。「プレビューでは映るのに、本番環境だと全く表示されない問題」と、「デザインが理想と程遠い問題」だ。

　前者はAIの助言でWordPress内にプラグインを1つ挟むことで解決したが、後者は言葉の指示だけでは限界があった。パワポを使ったのもそのためだが、AIはそのイメージに縛られる。だとしたら、本当に作りたいイメージをイラストレーターで正確に作りこんでAIに見せるしかないのではないか。Geminiに尋ねると「イラレで正確なイメージをもらえれば、君の作りたいものを作れるよ」という返事。当てにしていいのか分らないその回答を信じて、イラレでのデザインカンプづくりをした。

　ユーザーの視点に立ち、PCとスマホそれぞれの表示を想定して、脳をフル回転させて、どうにかデザインカンプを作り上げた。こうして出来上がった画面イメージがこちら。それをAIに読み込ませ、本格的な実装へと舵を切った。（出来上がりと異なる機能もあるが、それは作り込みながら、付け足したりした部分。大枠、イメージ通りに出来上がっているのが分かる）

（文・峯岸武司）