Claude CodeとCodexとGeminiと一緒に、 約1ヶ月で個人ブログを立ち上げた話

元々、小学生の時からパソコンに親しんでおり、中学生の時には個人サイトやブログを作っていた。
自分の考えたデザインをWeb上で実装するのが何より楽しかった。ブログのテンプレート作りが特に好きだった。

高校一年の時、なんの仕事で飯を食っていこうかを熟考した結果、「Webサイトを作る人（Webデザイナー、コーダー）になりたい」を目標にすることにした。

大学はデザイン系に行ったのだが、ここで自分にはセンスがないことを知る。
デザインすることより、「デザインを実装すること」の方が好きだった。

コーダーもしくはフロントエンドエンジニアで就活をしたところ、運良くフロントエンドエンジニアで雇ってくれる会社があった。
・・・そんなわけで、立派な社畜の出来上がり！炎上案件で徹夜上等のワーカホリック生活を5年ほど行っていた。

高校あたりから、個人サイトは下火になり、趣味の活動はプラットフォームの中だった。Twitter然り、pixiv然り、note然り。
便利さにのまれ、自分は消費者として生きていくんだ、個人サイトなんかもう作らないと思っていた。

・・・勢いのまま、まさか個人ブログを立ち上げる日が来ようとは。

ということで、noteで心が折れてから、どうやってここに辿り着いたかをまとめてみます。

noteの記事をどこに退避させるか、最初に考えたのは手書きの手帳だった。
丁度ロルバーンにハマったこともあり、自分の手元にだけ残ればいいかなと自暴自棄になっていた。

でも、各AIに相談すると、「せっかくデータがあるんだから、データとして残した方が良い」と諭された。

まずは、「原本をローカルで管理する方法」を考えた。
今回みたいに、使っていたプラットフォームを去るとき、原本がローカルにあるとスムーズだ。
噂には聞いていたメモ管理のObsidianを使ってみることにした。

ローカルのmdファイルを表示、記入できるアプリ？ソフト？である。
編集したことはローカルmdに自動保存されるため、保存し忘れて文章がパーになる事はない。

noteでは、プラットフォーム上で執筆を行っていたが、今思えばできることが多くて文章を書く際のノイズも多かったように思う。都度下書き保存するのも億劫だった。

md形式で記事を書くのは、慣れるまでは少し抵抗があるかもしれない。（私は社畜時代のGitHubでかなり慣れていました）
実際は「見出しの#」「線の---」くらいを覚えておけば、記事を書く程度であれば十分。太文字はショートカットが便利！
noteの時よりUIのノイズがなく、スムーズに執筆できると思う。画面分割で、別のファイルを見ながら執筆も便利！

Obsidian自体は「第二の脳」を謳っており、メモ紐付け機能の方がよく紹介され、すごい画期的だと言われている。
それなりに高機能なのだが、私はもっぱら執筆のみに使っており、満足。
（社内ナレッジの管理にはやっぱりNotionの方が使いやすいかなと思います）

個人ブログに移行するにあたり、noteで使っていたハンドルネームとは違うハンドルネームで再始動させたいと考えた。
でも、自分ではいい名前を思いつかない・・・そういう時のAIだ。

個人ブログ移行を始めた頃、AIの中の一つ「Claude」の推論モデル「Fable」が日本で使えるようになった。

Claude Codeを4月頃から使い始め、仕事が捗って捗って、、でもなかなかいうことを聞かない時やうまく動いてくれない時があり、イライラを募らせていた。
しかし、Claude CodeのFableは使い勝手が良すぎる。まるでドラえもんだ。

体感、チャットの方のFableはそこまで良くない。
CLAUDE.mdとローカルファイルを読んでいる前提でのClaude Codeの場合、こちらへの理解度と優しさ、頭の良さは普通の人間を超えていると思う。
Codexも使ってみたが、同じくAGENTS.mdとローカルファイルを読んでいる状態の推論モデル「sol」でも、Fableの包容力には及ばないように感じた。

というわけで相談はもっぱらClaude CodeのFable。
Obsidian上ですべてのnote記事をコピペで退避させ、その約70記事をFableに読んでもらい、新しいハンドルネーム案を考えてもらった。

Claude Code（Fable）の回答

ほうほうほう、、どれもピンとこないけど、色々考えてくれてありがとう。
最初はひらがなで「うたかた」って名乗るのはちょっと可愛すぎるのでは、、と思った。でも漢字の「泡沫」だと読み方が分かりづらい、、

この3案を見て、ふと ( ﾟдﾟ) ｡oO（ 宵と泡沫ってのはどうだろう！）と思いついた。
ブログ名っぽい！これなら、書いている人の名前を「うたかた」にしてもおかしくないかな、と思い、これにてブログ名とハンドルネームは決定。

続いて、ブログのイメージキャラクターを作ろうと思った。
画像生成が得意なAIと言えば、Geminiの「Nano Banana」。
まずFableに「イメージキャラクターを作りたいと思っている。どんなキャラクターがいいと思う？」と投げかけてみた。

Claude Code（Fable）の回答

猫とも迷ったけど、推し案に決定。
Nano Bananaへの画像生成プロンプトを考えてもらった。

Claude Code（Fable）が考えたプロンプト

出てきた画像に追加指示「水彩風にして」。

↓生成できた画像がこちら

この後はうまくイメージ通りに調整できず、諦めてCodexに移行。
上記の画像を貼って、「文字を消して、蛇はニョロニョロと這わせる感じで上から蛇を見ている構図にしてほしい」

↓生成できた画像がこちら

そうそう、こんな感じ！
この後はいろんな素材用で画像出力させたが、四苦八苦だった。

CodexでうまくいかなくなったらNano Bananaに切り替える形でなんとか必要素材の用意完了。

上記のメインイラストをFableに渡し、「このイラストから、配色カラーを考えて」。

↓生成できた配色パターンがこちら

ここまで揃ったら、次はデザイン作成だ。

チャットAI「Claude」を課金して使えるAIエージェント。
AIエージェントはパソコンのローカル環境のファイルを参照し、編集や新規作成を行なってくれる。
既存サイトの修正はお茶のこさいさい、もうコーダーやフロントエンドエンジニアは用済みなのか、、
自分がやりたいことを実現してくれる、頼もしい相棒だ。

推論モデルとは、端的に言えば賢さ。
Fable：イメージはのび太を助けるドラえもん。マジでよしなにやってくれる。
Opus：仕事はできるが、思い込みが激しいナルシスト。ウザさが拭えない。
Sonnet：素直なバイト君。仕事は早いが、かなり適当。悪気があるわけじゃない。
Haiku：一番低レベルらしい。使ってないので未知。

最近は相談はFable、すでにやることがわかっている作業はOpusって感じで使っている。

ちなみにAIエージェントには使用量という使える上限が設けられている。
使用量の節約のために「原始人モード」をスキルとして使っているが、一度慣れると原始人としか話せなくなる。
AIが回答する文章ってまどろっこしいよね？マジで原始人おすすめ。

ChatGPTのClaude Code。
そもそも、ClaudeとChatGPTは設計思想が違うので、できることは同じでも、動き方はかなり違うような気がする。
Claude Codeの方が従順に動くので仕事仲間として優秀。
Codexはこちらの言うこと聞かずに暴れる印象。ある意味リアルの同僚に近いのかもしれない。

Codexにも推論モデルの違いが存在する。
課金して使える「sol」が一番賢く、「Terra」が2番目、「Luna」がその下。
Codexの方がいいか、Claude Codeの方がいいかは好みの問題かなと思う。
でも、非エンジニアに勧めるならCodex改めChatGPT workかな。

3AIとして扱ってきたけど、Geminiは現在は他の2AIと比べて劣っているかな。
Claude CodeもCodexもデスクトップアプリが使いやすいんだけど、Geminiはデスクトップアプリが現時点でMacにしかない。プライベートではMacなのでいいんだけど、仕事はWindowsなので、使い勝手の悪さに繋がっていると思う。

そもそも、思慮深くない。回答の速さだけはピカイチだ。
元々画像生成の「Nano Banana」がやばい、として一気に広まったけど、今はCodex（ChatGPT）の画像生成の方が優秀だ。

でも、2AIと合わせて「三人寄れば文殊の知恵」とすると、かなり良い。
この話は下記の記事で紹介した。

デザインがなくてもコーディングはできるが、大きくイメージと違うサイトが出来上がり、それを修正するのはかなり大変だ。
先にブログのイメージデザインを作ることにした。

まず使ったのは「Claude Design」。
いい感じのWebサイト作らせるならかなりオススメだ。

Claude Designに生成したメインイラストと配色パターンを渡し、「宵と泡沫という私的ブログを作りたいと考えている。どんなデザインがいいか、3パターン考えてみてほしい」と依頼。

そして出てきたパターンからイメージに近いものを選んで、とりあえずコーディングしてみる。

Claude Codeと同じく、Claudeの有料プランでのみ使える機能。
会話でデザインを作ってくれ、プロトタイプコーディングまでしてくれる。
Claude Codeはデザインが一辺倒でダサいため、ちゃんとデザインを作り込みたい時はClaude Designを使うのが良い。
Claude Designで作ったデザインはClaude Codeへの連携もしやすい。

まず、テンプレも兼ねてnote記事を5本ほどリライト。
プロトタイプデザインイメージと記事のmdをFableに渡し、実装を依頼。

荒削りだけど、自分のサイトが出来上がる感覚は本当に良い。
当然のようにレスポンシブで崩れなく仕上げてくるのが良い。

しかし、細部のCSSはダサく、私の方で若干手直し。
自分で直せることが元フロントエンドエンジニアでよかったなと思う部分。

さて、公開環境はどうするか。
GitHub Pages、その他数多のホスティングサービスが存在するが、昨今定番化している「Cloudflare Pages」を使うことにした。

Cloudflare Pagesはローカルのサイトデータのフォルダ全体をコマンドでデプロイするだけ。無料。強い。
更に、独自ドメインの契約もできる。強い。

下記の記事を参考に設定を行った。

無料でここまで使えていいの？というホスティングサービス。
FTPが使えないことにかなり不安だったが、むしろFTPソフトやブラウザでのアップ作業がなくてめっちゃ楽。
気軽に個人サイト作りたい人＆コマンド操作に抵抗がない人にオススメ。

私はHTMLをいじるのはVS Code（Visual Studio Code）で行なっており、デプロイもVS Codeのターミナルで行なっている。
いろんなアプリを行き来せずにシームレスで記事の修正、アップができる。

できたものを確認し、3AIでデザインと機能のブラッシュアップしてみた。

Codex、Gemini、Claude Designに下記を投げる。
「indexの記事デザインが気に入らない（aboutエリアは気に入ってる）
3パターンくらいデザイン考えてみて」

↓Geminiの3案

ダサすぎる・・・。
そもそも、デザインテイストが提示したサイトと違いすぎる。
でも、提案してくれた「タイムライン」形式が私のブログイメージにドンピシャだった。

↓Codexの3案

幻想的でおしゃれだ。元のデザインもちゃんと踏襲している。
でもなんかありきたりでしっくりこない・・・。
A案のヒーロー部分がかなり良い。

Claude DesignにGeminiのタイムラインのイメージ画像、Codexのヒーロー部分のキャプチャを渡し、デザイン修正案を作成してもらう。
いい感じ！この修正デザインを元にFableに再度コーディングし直してもらう。

トップページ下部のaboutエリアの手直し。
記事一覧が終わった後、かなり唐突に始まるエリアになっていた。

Fableに下記を依頼。
「indexのaboutエリアは深海に潜るようなイメージにしたい。境界部分に、泡が立ち上るような装飾をつけてみて」

そしたら、深海から泡が立ち上っているような、泡沫アニメーションを実装してくれた！かなり良くてほぼ修正なしで採用。

更に、SEO対策で内部リンクの強化のため、「関連記事エリア」を作ってもらう。
これでほぼブログとしての機能は完成した。

SNS等で記事のURLを貼った時に表示される用のOGP画像を用意する。
この作成は、画像フォルダに保存までしてくれるのでCodex一択。

作成画像がイメージと違う時は、何度か作り直すが、ニッチもサッチもいかないときはNano Bananaに依頼することもある。

自分では考え付かなかったイメージが出てくるとすごく嬉しい。
どんな画像が出てくるか、ガチャ感があって、記事を書いた後のご褒美になっている。

その後はひたすら、

Obsidianで記事をリライトする
↓
Fableに批評してもらい、誤字等の調整
↓
FableにHTML化してもらう
↓
CodexにOGP画像を作ってもらう
↓
ローカル環境で表示チェック
↓
デプロイコマンド
↓
Googleサーチコンソールに新しい記事のインデックスリクエストを行う

という流れを繰り返した。
チームで、手作りで作っている感じがして楽しい。

サーチコンソールを時々見ると、思いもしなかった検索ワードで表示されていることに気が付く。そのワードに興味を持っている人がいることを知り、その人に向けた記事を書いてみようかなと思うこともある。

また、Googleアナリティクスの設定も行なうと、リアルタイムで閲覧しているユーザーが何人いるかを見ることができる。
時々、見ている人がいるとかなり嬉しい。

リライトの合間にこういうチェックを行なって、日々の執筆モチベーションに繋げている。

自分でコーディングしないなんていいのか、と思っていたが、いざAIフルコーディングにすると、爆速でサイトの構築ができる。
今回は2026年7月20日から作り始め、ほぼ全てのリライトが完了したのが8月30日。
何か作りたいと漠然と思っている人は、是非挑戦してほしい。

また、一人で記事を書いていると、この記事は面白いのか、独りよがりなんじゃないか、やめようかなと思うことがある。
そんな時も気軽に相談できる相手がいることも執筆モチベーションに繋がる。

パソコンが普及して駆逐された仕事は山ほどある。
AIが普及して、私が目指したコーダー、フロントエンドエンジニアは駆逐されるだろう。

仕事でパソコンを使うことが当たり前になると、今までの仕事のやり方が変わって、逆に社会人の仕事は増えてしまった。
AIを仕事で使うようになると、同じ現象が起こっているように思う。

でも、便利なことには変わりない。「一人の人間ができること」が大幅に増えた。
その中で、よりウェルビーイングな生活をするためにどうやってAIと付き合っていくか、一人一人が向き合わないといけないと思う。
まずは趣味の部分から、楽しく導入してみると、違う世界が見えてくるかもしれない。