このサイト、AIとどうやって作ったの？

第1章サイトのからだは、3つの材料だけ

ホームページの「からだ」は、じつはたった3つの材料でできています。

賢者

01 ゲンさん 材料のはなし

ようこそ、おこしやす。ホームページの材料はな、たった3つですのや。骨組みのHTML、お化粧のCSS、動きをつけるJavaScript。わしらのサイトは、流行りの便利道具に頼らんと、この基本だけで組んでますんや。シンプルなもんは、こわれにくうて、長持ちする。古い町家とおんなじですわ。

02 サクラ シンプルの強さ

そうそう♪ 部品が少ないと、直すのもかんたんやねん。何年たっても、ちゃーんと動いとぉやろ？ 「速い・軽い・こわれへん」は、ぜんぶこのシンプルさのおかげなんよ〜。むずかしい道具は、いらんかってん。

親友

第2章AIに「作って」って、お願いしてみた

このサイトのコードは、人間がぜんぶ書いたのではありません。AIに「こんなページがほしい」と言葉でお願いして作りました。

AI担当

03 リュウ AIエージェント

僕らが使うのはAIエージェント。「万博の写真ギャラリーのページがほしい」——そう日本語で伝えるだけで、AIがコードを書く。会話するだけで、ページができていく。……効率的だ。これが、今のAIの実力だよ。

04 カケル ほんまに喋るだけ？

ほんまに喋るだけでできるんか、って思うやろ？ できるっちゅーねん！「ここの色、もっと明るして」「スマホでも見やすして」——頼んだら数分で直っとる。正直、オレが走るより速いわ。悔しいけどな！

特攻隊長

AI担当

05 リュウ 3つのAIチーム

補足すると、AIは1人じゃなく3人のチームだ。コードを書くAI、文章や画像を作るAI、まちがいがないか確認するAI。役割を分けて、おたがいの仕事をチェックし合う。人間の会社と、同じだね。データは嘘をつかない。……でも、AIはたまに間違う。だから最後は人間が確認する。

第3章記録のノートと、データの保管庫

書いたコードは「GitHub（ギットハブ）」という場所に、日記のように記録していきます。

記録係

06 あやめ GitHubとSupabase

コードの歴史は、すべてGitHubというノートに残しています。いつ、どこを、どう直したか——ぜんぶ記録です。だから、もし失敗しても昨日のページにすぐ戻れるんですよ。それから、写真や投票のデータはSupabaseという保管庫に。鍵のかかった棚に、見せてよいものだけを並べる——そういう設計です。過去と記録を守るのは、私の専門ですから。

第4章写真を軽くする魔法

写真がいっぱいのサイトは、そのままだと重くて、開くのが遅くなってしまいます。

07 ナナ 画像のひみつ

万博の写真、ぜんぶで何百枚もあるねん。そのままやと重すぎて、スマホで開くのに何秒もかかってまう。せやから、ぜんぶWebPっていう軽い形式に変換！ 見た目はそのまま、重さは半分以下や。しかもスマホ用には小さいサイズを別に用意して、画面に合わせて出し分けとる。この地味な仕込みが、めっちゃ効くんよ。……うん、ええ撮れ高や。

写真係

第5章悪いやつは、入れさせへん

ホームページには、いたずらや悪いプログラムを防ぐ「門番」が必要です。

守る人

08 マイケル 門番のルール

オレの仕事、サイトを、マモルこと！ このサイトにはCSPっていう、門番のルールがある。「ここで動いていいプログラムは、コレとコレだけ」って、リストで最初に決めとくんだ。リストにない怪しいやつ？ ぜったい、ナカに入れない。I'll protect everyone!

09 スティーブン カギのマーク

ボクからも、ヒトツ！ アドレスの先頭のカギのマーク（HTTPS）、見えますカ？ ミナサンとサイトの間の通信、ぜんぶ暗号になってマス。トチュウで誰かが盗み見たり、書き換えたり、デキマセン。Don't worry デス！

紳士

第6章ニュースは、毎朝かってに集まる

「横浜花博の最新情報」のページは、なんとニュースが自動で集まってきます。

人情

10 キヨミさん 毎朝の仕入れ

ええか、ニュースっちゅうのはな、毎朝の仕入れとおんなじや。うちが市場に行く代わりに、小さいプログラムくんが毎日、公式サイトとニュースの一覧を見回りに行くねん。新しい見出しだけ持って帰ってきて、日付順にきれいに並べてくれる。ぜんぶ自動やで？ 働きもんやんけ〜。飴ちゃんあげたいくらいや。

第7章「見つけてもらう」ための工夫

どんなにいいページも、検索で見つけてもらえないと届きません。

11 サクラ SEOと意味づけ

検索で出会えるようにする工夫をSEOって言うねん。コツはな、「このページは何の話か」を、検索エンジンにもちゃんと伝えること。タイトル、説明文、それから機械が読める専用のメモ（構造化データ）まで、ぜんぶ意味づけしとぉんよ。文化とおんなじで、意味づけが大事やろ？♪

親友

第8章合図ひとつで、世界へ

完成したページは、「push（プッシュ）」という合図ひとつで、世界中に公開されます。

特攻隊長

12 カケル 自動で公開

最後は公開や！ pushっていう合図を送ったらな、あとは全自動——機械が組み立てて、チェックして、本番に出すとこまで一気や。だいたい3分で世界中に届くっちゅーねん。はっや！ オレのドローンより速い……いや、それは悔しいから認めへんけどな！

13 スティーブン 世界中に同じ速さ

シカモ、デス！ サイトのコピー、セカイ中のサーバーに置いてありマス。CDNと言いマス。ダカラ、ロンドンのボクのママも、ニホンのミナサンと同じ速さで見られマス。Wonderful デス！

紳士

ふりかえり数字で見る「大阪探検隊」のひみつ

ここまでの旅を、ほんとうの数字でふりかえってみましょう。ぜんぶ、このサイトの実際の記録です。

• 3つ使った材料（HTML・CSS・JS）
• 1,054回セーブ（コミット）した回数
• 約2,000枚軽量化した写真
• 約3分合図から世界公開まで
• 0円月々のサーバー代
• 10人解説してくれた隊員

おわりにあなたも、つくる側へ

隊長

14 みおり まとめ

な、どうやった？ むずかしい呪文ぬきでも、ここまで分かるやろ。サイト作りはな、特別な人だけのもんとちゃう。AIに「作りたい」って話しかけたら、それがもう第一歩やねん。うちらにできたんやから、あなたにもできるって。……ほな、いっしょに作ろか！

15 ゲンさん 締めのことば

ぼちぼち、いきまひょか。作りたい気持ちがあれば、道具はあとからついてきますよって。くわしい続きは、この下の『AI探検隊』で待ってますわ。……ええ旅でしたなぁ。

賢者

Q&Aよくある質問

「自分にもできるのかな？」——そんな疑問に、正直に答えます。質問をタップすると答えが開きます。

ずかん用語ミニずかん — これだけ知ってれば大丈夫

このページに出てきた言葉を、ひとこと辞書にしました。AIと話すとき、この言葉を使うと話が早いよ。

HTML

ページの骨組み。見出しや文章の「置き場所」を決める設計図。

CSS

ページのお化粧係。色・大きさ・ならべ方を決める。

JavaScript

ページに動きをつける魔法。クイズや投票はこれ。

AIエージェント

言葉で頼むと、コードを書いて作業まで進めてくれるAI。

プロンプト

AIへの「お願いのことば」。上手に書くほど、いい答えが返る。

GitHub

コードの記録ノート。いつでも昔のセーブポイントに戻れる。

Supabase

データの保管庫。投票や写真の情報はここに入っている。

WebP

写真を軽くする画像形式。見た目はほぼそのまま、重さは大はば減。

HTTPS

通信を封筒に入れて守るしくみ。アドレスバーのカギマーク。

CSP

「動いていいプログラム」をリストで決める、サイトの門番ルール。

SEO

検索で見つけてもらうための工夫、ぜんぶをまとめた呼び名。

push（プッシュ）

「公開して！」の合図。ここから先は、ぜんぶ自動。

CDN

世界中に置いたサイトのコピー。どこの国からでも速く届く。