この記事について
この記事は、プログラミング初心者の私が、生成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サイトは作れました。
プログラマーが不要になるかは分かりません。
でも、プログラミング初心者が「作る側」に回る時代は、もう始まっていると思います。