ド素人の私が、AIとCloudflareで、簡単なWebサービスを5時間で作ることができました。

私も開発にチャレンジしてみよう！

最近、こんな話題を目にしました。

アイドルがAIと配信のシステムを全部作った話
https://ameblo.jp/miyamotokarin-official/entry-12974432505.html

宮本佳林限界ヲタク「佳林ちゃんがAIで拡張しているのは技術ではない。ファン体験だ」https://note.com/embed/notes/n38ff653dc899

アイドルの宮本佳林さんが、自分でAIを活用しながら配信システムを構築したという話題です。

これに触発されて、自分でも何か作れるかもしれない、勝手に自分の適正や限界を決めてはダメだ、と思いました。

じゃあ、何を作る？

とはいえ、AIやWebサイトはあくまでもツールでしかありません。
作ることそのものがゴール・目的になってしまっては意味がありません。
そこで、「今の自分にとって本当に必要なウェブサービスは何か」をまず考えました。

そこで頭に浮かんだのが、最近リリースしたロジカルシンキングのオンライン研修のことです。

https://sites.google.com/view/logicalbook

この研修では、Zoomを使い、私が解説やファイル共有をしながら進行します。
進行に合わせて、受講者の皆さんにPDF資料をその場で送ります。

ところが実際に運用してみると、企業によってはセキュリティ制限が厳格で、
「PCでPDFファイルをダウンロードできない、開けない」
場合があることがわかりました。

・事前に一括で資料を配布しておく
・受講企業の担当者経由で転送してもらう
といった方法も検討したのですが、どうもスムーズではありません。
また、PDFが送れる・開ける環境であっても、一気に何枚ものPDFがチャット欄に並び、受講者はそれらを逐一画面上に開く、というのも、見た目としてあまりスマートではないと感じていました。

PDF配付、ではなくブラウザで見る！

「このPDF配付、Webブラウザ上で同じ体験を作れないだろうか？」

そう考えて思いついたのが、こんな仕組みです。

・受講者はまず、専用のWebページにアクセスします。
・講師の私が口頭やZoomのチャットでパスワードを伝えます。
・受講者がそのパスワードを入力すると、第1章の資料や情報が画面上に表示される。
※従来はPDFで配付していたもの
・そして第1章が終わったら、講師が次のパスワードを伝え、入力して第2章のページに移行する。

これならセキュリティの問題を回避しつつ、ブラウザさえあれば、研修の進行に合わせて必要な情報だけを受講者に届けることができます。

Geminiとのやり取り（ざっくり）

構成が固まったところで、Geminiに相談してみました。
超簡略化するとこんな感じです。

私 今まで～で進行している研修を、Webブラウザ上で展開したい。具体的には…（やりたいことを説明）。ただし、私はウェブやシステム、サーバーなどの知識はほとんどありません。そんな私でもAIなどを活用しながら、このようなサービス、システムを構築できないかと考えています。初心者である私にアドバイスをください。

Gemini 非エンジニアの方でも、生成AIを活用すれば上記のようなWebシステムを十分に構築可能です！

おお、うれしいこと言ってくれるじゃないの。

G 全体像…3つのおすすめ構築アプローチがあります。
アプローチ1：ノーコードツール
アプローチ2：AIエージェントによる完全自動作成（最もおすすめ）、ホスティング（公開場所）: Vercel または Cloudflare Pages（無料で安全にWeb公開できるサービス）
アプローチ3：Google Workspace
それから流れは…

私 Cloudflare Pagesってやつ使ってみたい（実際には何なのかよくわかっていないけど冒頭のブログで紹介されていた）から、アプローチ2でお願い

G わかりました、じゃあAIへの指示用プロンプトを作成します。これでサンプルコード作りますか？

私 はい

G コード作りました（HTML）

…微調整…

G クラウドフレアの使い方はこうです

じゃあやってみよう…

いきなりほぼ理想形ができた

えっ、できてしまった。

 

※上記は最初の作成サイトの一部です

「こういうのが欲しいなあ」の理想にほぼ合致するサイトを、一発で作ってくれました。

指示されるまま、出力されたテキストをファイルにしてCloudflareへドラッグ＆ドロップする。
そして公開する。
たったそれだけで、ほぼ自分の思い描いたサービスがネット上で実現しました。

仕組みや細かい専門用語は正直よくわかりませんが、この手軽さにはちょっと感動してしまいました。
静的なサイトなら費用もかからず、クオリティも必要十分です。

その後、見た目を微調整したり、ファイルの名称や見え方を整理したりと、AIと対話しながら作業を進めました。

５時間でサービス完成

Geminiへの最初の問い合わせから、かかった時間はトータル5時間ほど。
これだけで、自分が「欲しい」と思ったWebサービスが形になりました。

https://logical-training.tofusha.workers.dev

※といっても、やりたいこと・完成形がある程度は明確で、さらに画像ファイル等はもともとあったので、それらの材料がそろった上でのサイト構築が5時間、です。

※完成形は白ベースのシンプルなものにしました

完成すると、達成感と同時に「じゃあ、こんなこともできるのでは？」「あんな演出も追加できるかも」と、次々にアイデアが溢れてくる感覚がありました。

もちろん、私はプログラマやエンジニアではありません。
この手のシステム開発を本業にするつもりはありませんし、複雑で本格的なシステムは絶対にプロに任せるべきだと思っています。

ただ、今回のように「ブラウザ上で安全に情報を届ける」といったレベルの仕組みであれば、自分の手でサクッと作れてしまう、というのが感動でした。
これまではZoomやPowerPointといった「誰かが作った既製品」の枠内でどうにかするしかない、というよりも、それが当然の前提条件、という認識でした。
それが、「自分で仕組みを作る」という選択肢を持てたことは、大きな発見でした。

自分の可能性を決めない！

私は技術そのものを極めたいわけではありません。
ではなく、このようにAIなどを活用しながら、自分の可能性を少しだけ広げられたことが、今後の発奮材料にもなりました。
大げさですが。

冒頭で触れた宮本佳林さんのような高度なシステムを作るつもりはないものの、これからも色々と試してみたいと思っています。