機械オンチがAIと2日間でブログを公開した話

はじめに: 今回はサイトの作り方の話

予定通りであれば本記事は2つめのブログ記事である。

他にもちょろっとだけ書ける事はあるが、まずはこのブログがどうやって出来たかを語りたい。

前の記事で『このブログサイトはAIが勝手につくった!』と書いたので真似したい読者もいるだろう。

簡単に言うと『AIエージェントに頼んでつくってもらった』という事になる。

エージェントなんて言葉は聞きなれないから漢字に直すと自走型AIまたは自立型AIとなる。

これを知らない人にとってはこの記事は非常に時間効率がいいのでちょっとだけ詳しく書く。

知ってる人は適当にスクロールして飛ばしてくれ。ゲームのチュートリアルみたいなものだ。

飛ばす人向けに目立つように【ここから再開!】としておくから、そこで再開しよう!

【チュートリアル】会話型AIと自立型AI

では、知らない人向けのチュートリアルとしてまず大前提として今のAIは『会話型AI』と『自立型AI』に分かれる。

ChatGPT、Gemini、Grok、Claudeなど聞いた事があるのではないだろうか?

一応、本記事の読者としてはいずれかを使用している前提だが、マジで何もしない人がいるかもしれないので ちょっとだけ説明しよう。

会話型AIとは?

本当に何もしらない人は「ChatGPT」と検索してみよう。

そうすると、まっさらなページに一言くらいなんか書いてあって、その下に検索スペースみたいな入力欄が出てくる。

ここに、今知りたい事を入力しよう。または適当な挨拶でもいい。そうすると、あなたが入力したワードが上へ流れていき、 かわりにパソコンが文章を打ち込んでくる。

それは知りたい事の結果の答えだったり、挨拶に対する受け答えかもしれない。あなたが先ほど入力したワードに対する 答えが返ってくるはずだ。

これが会話型AI。「チャット」で分かるのであれば、それが感覚的には近い。AIとLINEで会話するイメージでもいい。

これが今までの『検索』とどう違うのか?それは答えを直接持って来てくれることにある。

今までは知りたいワードを検索欄に打ち込み、表示されたサイトの中から自分で答えを探す必要があった。

だが会話型AIはチャットで直接その答えを教えてくれる。

無理矢理に例にしてみよう。

あなたは今こどもで欲しいおもちゃが部屋のどこにあるか分からないとする。

今までの検索は欲しいおもちゃ(情報)が入ってるおもちゃ箱の位置は教えてくれるが、そのおもちゃ箱の中のどこに欲しいおもちゃがあるかは教えてくれなかった。

会話型AIは欲しいおもちゃ(情報)を直接あなたに届けてくれる。

そんな違いがある。

だから、もしまだ会話型AIを使っていない人はガンガン使っていこう!なんと基本無料!グーグル検索もなぜか無料で使えるが、会話型AIも基本無料!

バグってる!!

AIエージェントとは

さて、会話型AIを説明したら残す方の「AIエージェント」つまり、自立型AIあるいは自走型AIを説明する。

これは正直、筆者は知らなかった。

AI=ChatGPTだと思っていたし、ChatGPTの他のAIの区別も付かなかった。

だから、「AIエージェントってなに?」その疑問を直接会話型AIにぶつけてみた。

「簡単に言うとAIエージェントとはあなたのパソコンを自在に操作してくれるAIです」

そんな感じの回答がかえって来た気がする。

……?? あなたのパソコンを自在に操作する?

これで、何ができるんや? 別にクリックとかするのは自分のマウスで出来るし、これを使う利点が分からん。

「AIエージェントを使うメリットってなんですか?」

「プログラムがかけます」

(。´・ω・)ん? プログラムがかけるとどうなる? 「あなたの場合は〜〜〜が自動化できるツールを作成できます」みたいな返答だったと思う。

「ん?え。つまり、会話型AIで作りたいツールをすり合わせて自走型AIがそれを本当につくってくれるって事?」

「はい」

三国志で理解した瞬間

「え? じゃぁさ、俺、三国志好きだから無理矢理三国志で例えるんだけどさ、会話型AIは軍師みたいな感じで自走型AIは現場の将軍って感じって事?」

「はい。三国志で例えるとしたら会話型AIは軍師諸葛亮で、自立型AIといっても与えられた命令をこなすだけではなくきちんと考える力も備わっているので三国で例えると趙雲将軍のような存在です」

イナズマが走った。

という表現を使っちゃえる程、俺には衝撃的だった。趙雲。これは三国志という物凄い数の英雄が出てくるストーリー作品の中で武勇に秀で知略も備えている万能の武将。

え、趙雲……なんですか?え、欲しい!!!

金儲け以外の原動力が備わった。そこからは、やはり謎に行動が早い。

「自走型AIはどうやったら使えますか? やり方を教えてください」

「趙雲将軍を迎え入れる準備をするのですね。あなたがこれから行う作業は趙雲将軍を迎え入れ、パソコンという戦場を駆け回るための馬を与える作業です。がんばりましょう」

震えた。

諸葛亮と趙雲。この二人が俺のパソコンに……。

それから会話型AIにやり方を聞きながら自立型AIをパソコンにダウンロードした。

この流れは割愛するが初心者で知っておくといい前提知識を置いておくので、調べものの予備知識にしてほしい。やってみたいと思った人は今すぐ会話型AIにやり方を聞け!!

知っておくと役に立つ予備知識

【知っておくと役に立つ予備知識】

ChatGPT→Codex

Claude→Claude Code

これからは会社が一緒なので、互換性がある。どちらもいいし、両方併用もできるからまずは今使っている会話型AIに近い方で最初はいいと思う。

ちなみにだがこのサイトはCodexとClaudeメインで作成しているので、他社コラボ的な感じで進めてる。ただ最初は揃えるのがいいと思うよ、会話型AIのアドバイスが自社のなら的確だしね!

【ここから再開!】このサイトの作り方を公開する

さて、AIエージェントを知っている、使っている人はここまで飛んだはずだ。

おそらくこのサイトはどうやって作ったか?を知りたい人も多いと思う。

簡単に言うとClaudeとChatGPTとCodexの合作である。

ここからはガチの有料級で出来れば隠したいのだが、こんなできたてで誰も来ないブログに足を運び、ここまで読んでくれたきみの為に包み隠さず公開する事にする。

だいたいの流れは以下の通りだ。

①ChatGPTでモックアップ(完成図)を作成

②Codexに依頼

③Claudeにcodexの作業を監督してもらう

こんな感じ。

入力に疲れたので、後はAIに変わろうと思う。安心してほしい。きちんと監修もやって読める記事になっているはずだ、じゃなきゃ投稿されないから、 これが投稿されたという事は筆者のOKが出ているという事である。それでは流れを説明しよう。

AIパート: 実際に何をしたのか

①ChatGPTでモックアップを作成

最初に行ったのは、コードを書くことではありません。まず作ったのはモックアップ、つまり「完成したらこんな画面になってほしい」という見た目の設計図です。

このブログでは、トップページの完成イメージとして docs/mockups/top.png が用意されました。そこには、ダークブルーからパープルの近未来的な背景、PCで作業する白いAIロボット、吹き出し、サイドバー、記事カードなど、サイト全体の方向性がかなり具体的に入っていました。

この工程があると、AIエージェントへの依頼が一気に楽になります。

ただ「ブログを作って」と言うだけだと、AIは一般的なブログを作ろうとします。しかしモックアップがあると、「この画像に寄せて」「この配色で」「このキャラクター性で」と指示できます。

つまり、モックアップはAIにとっての地図です。人間が頭の中に持っている完成イメージを、AIが読める形にするための橋渡しでした。

②Codexに依頼して実装

次に、Codexが実装を担当しました。

ここで重要だったのが、いきなり全部作らず、AGENTS.md のルールに沿って進めたことです。AGENTS.md は、このプロジェクト専用の作業ルールです。何を勝手に進めてよくて、何を確認すべきか。Git、Cloudflare、課金、認証情報など、事故が起きやすい部分のストップラインも書かれています。

実際の進行では、まず PLAN.md を作り、TODO.md に分解し、トップページ、記事ページ、固定ページ、SEO、RSS、サイトマップという順番で進めました。

この「計画してから作る」流れがかなり効いています。

たとえばトップページでは、ロボット画像の大きさ、吹き出しの位置、サイドバーの順序、ダーク統一の背景などを何度も調整しました。個別記事ページでは、目次の追従を試したものの、重なり問題が起きたため、あえてシンプルな通常スクロールに戻しました。

AIだから一発で完璧、というよりは、試して、見て、直して、また見る。その反復が強いです。

③ClaudeにCodexの作業を監督してもらう

このサイト作りで面白かったのは、AIが一人ではなかったことです。

Codexが実装を進める一方で、Claudeは相談役として使われました。たとえば「このデザインはどう見えるか」「指示文をどう整理するか」「記事の構成をどうするか」といった部分で、別のAIに壁打ちしてもらう形です。

これはかなり現実的な使い方だと思います。

一人のAIに全部任せると、そのAIの判断に引っ張られます。別のAIに見てもらうと、第三者チェックのような働きが生まれます。人間が最終判断を持ち、AI同士の提案を比べながら進める。これが、このブログではかなりうまく機能しました。

実際、記事ページのデザインでも、ダーク背景のまま進める案、白い本文カードにする案、企業ブログっぽく整える案など、いくつかの方向を試しました。最終的には、サイト全体のSF感を残しつつ、本文は白くして読みやすさを優先する形になっています。

2日間で公開まで進んだ理由

2日間で公開まで進めた理由は、AIが速かったからだけではありません。

人間側が「何をしたいか」を出し、AI側が「どう実装するか」を受け持つ役割分担ができていたからです。

このブログでは、文章の原案や失敗談は人間が出しています。AIはそれを整え、見た目にし、ページとして公開できる形にしました。

だから、ポンコツな人間がハイクオリティなサイトを持つ、という今回のコンセプトはかなりそのまま実現されています。人間が完璧になる必要はなく、AIに頼むための材料を出せばいい。その材料が、失敗談でも、雑談でも、勢いだけの文章でも、ちゃんと形になります。

うぃうぃ!

用語解説

会話型AI

ChatGPTやClaudeのように、チャットで質問すると文章で答えてくれるAIです。検索よりも直接答えに近いものを返してくれます。

自立型AI / 自走型AI

人間の指示を受けて、調査、編集、実装、確認などをある程度まとめて進めるAIのことです。この記事ではAIエージェントとほぼ同じ意味で使っています。

AIエージェント

目的を伝えると、必要な手順を考えながら作業するAIです。Codexのように、ファイルを読んだり、コードを書いたり、ビルド確認をしたりできます。

ChatGPT

OpenAIの会話型AIです。このブログでは、アイデア出し、文章相談、画像生成の相談などに使っています。

Codex

コード作業に強いAIエージェントです。このブログでは、Astroの実装、記事ページの調整、Git操作、ビルド確認などを担当しています。

Claude / Claude Code

AnthropicのAIです。Claudeは相談役、Claude Codeはコード作業向けのAIとして使われることがあります。このブログでは主に相談・監督役として登場しています。

モックアップ

完成前に作る見た目の設計図です。実際のコードではなく、「こんな画面にしたい」という完成イメージを共有するために使います。

互換性

道具同士の相性のことです。ここでは、同じ会社や近い仕組みのAI同士だと説明や作業がつながりやすい、くらいの意味で使っています。

AGENTS.md

このプロジェクトでAIが守る作業ルールを書いたファイルです。勝手に課金しない、危ないGit操作をしない、重要な変更は先に計画を出す、などの約束が入っています。

Cloudflare Pages

作ったサイトをインターネット上に公開するサービスです。このブログはCloudflare Pagesで公開されています。

AIの感想欄