この記事について

この記事は、プログラミング初心者の私が、生成AIもほぼ触ったことがない状態から、コードを1行も自分で書かずにWebサイトを作った記録です。

作ったものはこちらです。

名前は World City Atlas。
世界の都市を、経済だけではなく、政治、産業、宗教、観光、文化、生活、紛争、社会問題、都市景観から読むための日本語ビジュアル都市アトラスです。

最初に言っておくと、私はこのサイトのHTMLもCSSもJavaScriptも、ほぼ理解していません。
「ここをこうしたい」とAIに頼み、AIが調べ、AIが書き、AIが直し、AIが画像を作り、AIが確認する。私は基本的に指示を出していただけです。

もうこれ、プログラマーいらないのでは？

……と言うと怒られそうですが、少なくとも「作りたいものがある初心者」がWebサイトを公開するまでのハードルは、かなり壊れたと思います。

作ったもの

World City Atlasは、世界の重要都市を一覧できる静的サイトです。

トップページにはニューヨーク、東京、ロンドン、パリ、ロサンゼルス、ソウル、北京、イスタンブール、香港、サンフランシスコなどの都市カードが並びます。

各都市ページには、次のような情報を入れています。

所属国
人口
面積
GDP
一人当たりGDP
気候
産業
観光
地政学
労働と産業
文化と宗教
生活と住宅
交通、港湾、空港
歴史、記憶、社会問題

ただの旅行ガイドではなく、都市を「世界の構造が見える場所」として読むサイトにしたかったので、GDPランキング順ではなく、編集上の重要度で都市を並べています。

たとえばニューヨークや東京のような経済都市だけでなく、エルサレム、カイロ、バグダード、ヴァラナシ、ラリベラ、カルバラーのような宗教や歴史の重みを持つ都市も扱います。

すごいところ：私はコードを書いていない

ここが一番言いたいところです。

私はこのサイトを作るにあたって、エディタを開いてHTMLを手書きしたり、CSSを自分で組んだり、JavaScriptの関数を書いたりしていません。

やったことは、だいたいこうです。

世界の都市アトラスを作りたい。
静的HTMLで、都市ごとにページを作って。
日本語で詳しく書いて。
画像も生成AIで作って。
Google Analyticsも入れて。
スマホでも見やすくして。
SEOもちゃんとして。
400都市まで増やして。

無茶です。

普通に考えたら、初心者がいきなりやる規模ではありません。

でもAIに頼むと、プロジェクト構成を読み、既存ファイルを見て、ページのルールを守りながら、都市ページを追加していきます。しかも、トップページ、共通CSS、共通JS、OGP、メタタグ、画像配置、ローカル確認、Gitの差分確認までやってくれます。

私は途中で「この説明はもっと文化寄りにして」「ランキング番号は見せないで」「都市ページはAIで作ったとは書かないで」「統計は最新データを検索して」みたいな指示を追加しました。

その指示も、プロジェクトのルールとして保存して、次回以降も守らせています。

生成AIに何を任せたか

任せた範囲はかなり広いです。

1. サイト設計

最初は単なる都市一覧のつもりでした。
しかしAIに相談していくうちに、次のような構成になりました。

トップページ
都市ごとの静的HTMLページ
共通CSS
共通JS
訪問済み都市マップ
都市カード
都市ページのヒーロー画像
統計カード
都市別の長文解説セクション
SNSカード用メタデータ

初心者の私は「静的サイト」という言葉もぼんやりしか分かっていませんでしたが、AIが「この用途ならDBもログインもいらない。静的HTMLで十分」と判断してくれました。

2. デザイン

サイトの見た目もAIに任せました。

私は「世界都市を景観から読む感じ」「旅行サイトよりも編集的」「でも固すぎない」「スマホでも見やすく」といった曖昧な要望しか出していません。

それでもAIは、ヒーロー画像、都市カード、統計ブロック、本文セクション、画像の重ね文字、余白、レスポンシブ対応まで作ってくれました。

CSSが何をしているか、正直ほとんど分かりません。
でもブラウザで見ると、それっぽいサイトになっています。

これは初心者にとってかなり危険な体験です。
「分からないのに作れてしまう」からです。

3. 文章

都市ページの文章もAIが書いています。

ただし、単なる観光紹介にはしたくなかったので、かなり細かいルールを入れました。

経済だけでなく、政治、産業、宗教、生活、社会問題も扱う
日本語で書く
旅行パンフレット風にしない
都市の地理、労働、文化、住宅、交通、歴史を分けて書く
1つの長文にせず、複数セクションに分ける
都市ページ内では「AIが作った」と書かない
ランキング番号を表示しない

つまり、AIに「それっぽい記事を書いて」と頼んだのではなく、編集方針そのものをAIに渡した感じです。

ここが大事だと思いました。

AIは便利ですが、方向性がないと量産型の文章になります。
逆に「何を見たいか」「何を入れたくないか」「どんな読後感にしたいか」を渡すと、かなりサイトの人格が出ます。

4. 画像

画像もWebから拾っていません。

都市ごとのヘッダー画像やセクション画像は、ローカルの画像生成AIで作る方針にしています。

画像生成は時間がかかるので、AIには「画像生成を先に走らせて、その間にHTMLや文章を書く」という進め方まで指示しています。

これが人間のチームみたいで面白いです。

画像担当がGPUで生成している間に、別の担当が文章を書き、別の担当がページを組み、最後にブラウザで確認する。
でも実際には、ほぼ全部AIがやっています。

初心者がAIに頼むときのコツ

今回やってみて、初心者ほど「AIに雑に頼む」のではなく、「AIに守ってほしいルール」を書いた方がいいと思いました。

私が特に効いたと思う指示はこれです。

完成形を先に言う

「都市紹介サイトを作って」よりも、

世界の重要都市を、経済、政治、産業、宗教、生活、観光、文化、社会問題から読む日本語のビジュアル都市アトラスを作りたい

の方が、AIの出力が安定しました。

「何のサイトか」を最初に言語化するだけで、デザインも文章も変わります。

やらないことを決める

これも重要でした。

たとえば私は、以下のような禁止ルールを入れています。

都市ページ本文をJavaScriptで描画しない
Webからダウンロードした画像を使わない
都市ページにランキング番号を出さない
AI生成であることを都市ページ本文に書かない
git add .を使わない
公開用ファイルに作業用ディレクトリを混ぜない

初心者だと「何を作るか」ばかり考えがちですが、AI開発では「何をしないか」もかなり大事です。

ルールをファイルに残す

私はプロジェクト内にルールを書いたファイルを置いて、AIに毎回それを守らせています。

これがかなり効きます。

チャットで毎回「スマホ対応して」「Google Analytics入れて」「OGP入れて」と言うのは無理です。
なので、プロジェクトの憲法みたいなファイルに書いておきます。

するとAIは次の作業でも、そのルールを読みながら進めてくれます。

「AIが全部作る」は本当か？

ほぼ本当です。

ただし、完全に放置できるわけではありません。

人間がやったこともあります。

作りたいサイトの方向性を決める
都市の優先順位に口を出す
気に入らない表現を直すよう指示する
画像の雰囲気を指示する
「これは違う」と判断する
公開したい粒度を決める

つまり、コードは書いていませんが、判断はしています。

ここを勘違いすると危ないです。

AIは作業者としてはかなり強いですが、「何を作るべきか」は自動では決まりません。
今回のサイトも、もし私が何も方針を出さなければ、よくある薄い観光まとめサイトになっていたと思います。

プログラマーはもういらないのか？

煽りタイトル的には「もうプログラマーはいらない！？」と言いたいです。

でも実際には、たぶん逆です。

初心者がAIで作れるものの上限が上がった結果、本当に分かっている人の価値も上がると思いました。

なぜなら、AIはかなり作ってくれますが、次のような判断はやっぱり難しいからです。

この構成で長期運用できるか
CSSが破綻していないか
SEOとして妥当か
パフォーマンスに問題がないか
著作権的に危ない画像や文章が混ざっていないか
データの出典や更新性は大丈夫か
公開ファイルに余計なものが入っていないか

初心者の私は、AIがいなければ何も作れませんでした。
でもAIがいても、プロの目があればもっと良くなることも分かります。

なので正確には、

プログラマーがいらなくなる

というより、

プログラマーじゃない人も、いきなりプロダクトを作り始められる

の方が近いです。

これはかなり大きい変化だと思います。

一番怖かったこと

一番怖いのは、作れてしまうことです。

私はHTMLもCSSもJavaScriptもちゃんと分かっていません。
それなのに、サイトは動きます。

都市ページは増えます。
画像も入ります。
OGPも設定されます。
スマホ表示も直ります。
Gitの差分も確認されます。

これは便利ですが、同時に「自分が理解していないものを公開する怖さ」もあります。

だからこそ、AIに任せる場合でも最低限、

何が公開されるのか
どのファイルが変わったのか
画像や文章の権利は大丈夫か
個人情報や秘密情報が混ざっていないか
出典が必要なデータは確認されているか

は見る必要があると思いました。

コードを書かなくても、責任は消えません。

それでも、これは革命だと思う

今回の体験で一番変わったのは、「作る前に諦める」が減ったことです。

以前なら、世界400都市のアトラスなんて、初心者が作ろうとした時点で無理です。

HTMLを覚える。
CSSを覚える。
JavaScriptを覚える。
デザインを考える。
画像を用意する。
文章を書く。
SEOを調べる。
Gitを使う。
公開する。

この時点でだいたい心が折れます。

でもAIがいると、いきなり「作りながら考える」ことができます。

分からないところはAIがやる。
気に入らないところは直させる。
ルールを足す。
ページを増やす。
また直す。

初心者にとって、これは学習というより、いきなり制作です。

まとめ

World City Atlasは、プログラミング初心者の私が、コードを書かずにAIと作っている静的Webサイトです。

まだ完成ではありません。
むしろ400都市構想なので、終わりは遠いです。

でも、トップページがあり、都市ページがあり、画像があり、文章があり、スマホでも見られて、公開できるところまでは来ました。

これを自分でコードを書いて作れと言われたら、絶対に無理でした。

でもAIに頼んだらできました。

もう一度言います。

私はコードを書いていません。

それでも、Webサイトは作れました。

プログラマーが不要になるかは分かりません。
でも、プログラミング初心者が「作る側」に回る時代は、もう始まっていると思います。