LnadingPageと申込フォームをバイブコーディングでつくってみる〜中小企業診断士のための生成AI活用講座5/3

2026年4月3日

1. 5/3の定例会でのセミナーの募集ページを作りたい
2. 一から作ってみるか
3. 完成したページ

5/3の定例会でのセミナーの募集ページを作りたい

中小企業診断士のデジタル研究会を運営しています。　PITです。ホームページはあるので、告知はもちろんホームページ内で、作っていました。Wordpressなので、ContactForm７での申込ページです。ただ今回はもうちょっとデザインにも気を使って作ろうかと思い、（デザインセンスは無いですが）CanvaでWebが作れるので、LPを一枚作ってみました。申込フォームはCanvaのフォームがあるので、それを作ってみました。ただ、初回アクセスの時に申込フォームが表示されるまでに結構時間がかかりました。１０秒とは言わないけど、５秒以上はフォームがグレイのままだったので、作りかけて諦めてしまいました。

Canvaで作った申込ページ（現在は申し込みできません）

一から作ってみるか

ということで、たまには一から作ってみようかと思いました。HTMLとCGIで作ったのはきっと３０年以上前の話ですが。今回はもちろんAIでデザインもお願いしながら、LandingPageを作ってもらいます。Claudeで。フォームの部分はGoogleFormでもいいかなあとは思ったのですが、デザインもあいにくいし、今回は広告もつかってコンバージョンとか、計測もしたいなと思い、フォームも作ってもらうことにしました。

HTMLでLPをつくってもらい、申込内容はスプレッドシートに溜まって、申込者にメールで通知してもらうところをGASでお願いしました。

お願いした内容

以下のプロンプトで、画像を３枚つけてお願いしました。

セミナの実施内容と、主催である研究会の紹介と、講師の紹介、そして申込フォームの４つですね。

以下の内容で落ち着いたランディングページを作ってください。
青をベースカラーにしてください。
ーーー
セミナータイトル：中小企業診断士の生成AIの使い所
キャッチコピー：中小企業診断士にとっての生成AI活用を徹底解説
実施内容：
・生成AIの最近の変遷
・生成AIの使いどころを考える
・中小企業診断士としての生成AIの活用方法
・生成AIの近い未来はどうなる？
画像をいれてください　aiseminar.jpeg

実施日時：2026年5月3日（日）10時〜12時
開催方法：Zoomオンライン　
参加費：無料

主催：実践IT研究会（PIT) 
PITは中小企業診断士のIT・デジタル研究会です。
毎月第1日曜日に、デジタル関連の情報交換の場をオンラインで提供しています。
参加費　無料
参加資格：中小企業診断士の資格を保有していること。（試験合格後でOK)
Webサイト：　https://pit.bz

講師紹介：村上知也
13年のIT企業勤務の後、2008年中小企業診断士登録
商工会議所等の公的な場で多数の生成AI関連セミナーを実施している。
講師の写真：koushi.jpg
講師の実績画像：jisseki.jpg
セミナーの実績
https://ngy.notion.site/tomoya-Murakami-aeba26acce9549dd97e24df8a6cb0592

参加申込フォーム
・氏名（必須）
・メールアドレス（必須）
・中小企業診断士合格年
・聞きたい内容を教えて下さい
・働き方を教えて下さい（プルダウン）独立診断士、企業内診断士、その他
・申込ボタン

アップロードした写真は以下の３つです。セミナー実績と、自分の写真と、セミナ資料の表紙

追加でお願いしたプロンプト

上記のプロンプトと３枚の写真で動きました。ただ色々改善点もでて修正しました。以下の内容です。

・申し込んだ後にTHANKSページで移動して、持ち物とか告知するページの作成をお願い。

・そのあと、申し込んだ内容を、申込者にメールで通知するようにお願い。

・申込みがあったらGoogleChatに通知してください。

・GoogleAnalyticsの設定をしてください。

苦労した点

わりとスムーズに動いて、おおできた！と喜んでおりましたが、色々追加でお願いしていると動かなくなったりしました。やはりソースプログラムの全体像とか細かいことを把握しているわけではないので、ちょっとて修正で追加項目を追記しているうちに、間違えて消しちゃったりとか、していました。

後はテストしている時に、うまくスプレッドシートに書き込んでくれる時と失敗するケースがあって、なんだろうと思ってAIに尋ねているうちに、どんどん動かなくなりました。Fetchが失敗するからiFrameにしたらいいよとか、THANKSページへの移動に失敗するからページ作らずにTHANKSページの内容を出力にしろとか色々言われました。言われるがまま、わかってないまま変更しているとなかなかにどツボですね。

そうすると、やはりClaudeCodeからGitHubでちゃんと版数管理していくことが必要なのでしょうね。そこまで開発的なものたくさんするのであれば。

また、あとから気づいて困ったのは、PCでテストして、スマホでテストして動いたのに、友人にFacebookメッセンジャーでURLを伝えたときにはうまく動かなかったことです。FBメッセンジャーで開くブラウザはCSPや何やらの制限が厳しいから失敗すると。

メッセンジャーアプリ内でリンクを開くと、通常のブラウザではなくFacebook独自のアプリ内ブラウザが使われます。このブラウザはCSPやネットワーク制限が厳しく、外部のGASへのfetchがブロックされることがあります。タイムスタンプだけ書き込まれるのは、GASにリクエスト自体は届いているがパラメータが消えている、またはfetchが失敗して別の挙動になっている可能性があります。

この問題の解決をClaudeにお願いして、完成しました！　（まだ、ちょっと不安ですが）