ブログをリニューアルしました
##Introduction
ブログをリニューアルしました。私が大人になってからブログを作成したのはこれで4回目になります。いつもテックブログっぽい格好良い雰囲気であればフレームワークにはこだわらないのですが、1つブログを作る度に何かしらの機能に不満を持ち、それが既存フレームワークでは解決が困難であると分かるとスクラップ＆ビルドしたい気持ちに駆られてきました。
今回もそうした衝動に駆られたのがきっかけではありますが、Claude Codeで非Webエンジニアの自分がどれくらいのクオリティのサイトを作成できるか実証実験してみたかった、という意図が強いです。
このエントリではどのようにAIエージェントを活用したらこのブログが出来上がったかをご紹介して、AIエージェントを活用する一助としていただければ幸いです。
##アーキテクチャ
Sylphというテンプレートを使用させていただきました。技術スタックとしては以下を利用しています。
- Next.js
- pagefind（ブログ内検索機能）
- MDX
- TypeScript
- cmdk（コマンドパレット風UI）
- Tailwind CSS
このアーキテクチャを採用した理由ですが、技術的な要件はなく、最近流行っている、かつデファクトになってきているという理由が決め手でした。流行している技術は必然的にAIが上手く使いこなせる可能性が高く、issueに対する解決も速いです。 結果論ですが、Tailwind CSSに関しては採用することでメンテナンス性が向上したと思います。AIあるあるですが、デザインの修正をAIに依頼するとcssの継承関係を上手く把握してくれず、AIの修正が結果に反映されないということがしばしばあります。Tailwindの場合、継承よりもユニットごとに管理していくのでこうした間違いが起きにくくなった気がします。
##AIエージェントを使ったWebサイトの作り方
###非WebエンジニアとAIエージェント
この半年ほどで、Claude CodeをはじめとするAIエージェントはソフトウェア開発の現場では「使っていて当たり前」の存在になりつつあります。一方で、私のように本業がWebではないエンジニアにとっては、「そもそもどこから手を付ければいいのか」「どんなタスクを任せればいいのか」が分かりづらいのではないでしょうか。
実際、私自身はWebエンジニアとしての知識はほとんどないのですが、それでもこのブログくらいの見た目のサイトならAIエージェントをフル活用することで十分に作れてしまいました。本業であるバイオインフォマティクスの業務でもAIエージェントをかなり使い込んでいますが、驚くほどこの領域ではAIエージェントを本格的に使っている人はまだ多くありません。データ分析や研究寄りの分野こそ相性がよさそうなのに、もったいないなと感じています。
###1. まずは「要件定義もAIに任せる」
AIエージェントを使った開発では、まず最初に要件定義をしっかり行うことが重要だと言われます。ただ、非Webエンジニアにとっては「そもそもWeb開発の要件って何を書けばいいの？」という壁があります。私もまさにそのタイプだったので、いきなり諦めて、要件定義そのものをAIにやってもらうところから始めました。
最初にChatGPT（GPT-5）を開き、次のようなざっくりした質問を投げかけます。
- モダンでかっこいい個人ブログを作るなら、どんな技術スタックが良いか
- 技術的に「ちゃんとしている」ように見えるためには、どんな機能やページ構成があると良いか
このときのポイントは、あまり欲張って複雑なことをしようとしないことです。最近の技術であれば、Next.jsやReactを使い、スタイリングはTailwind CSSなどの範囲に収めておけば、かなりそれっぽいWebサイトが作れます。しかも、その程度の複雑さであればAIがコード全体を把握しやすく、こちらも挙動を追いやすいです。
私は最初のプロンプトの段階で「とにかく実装はシンプルに」「凝ったことはしなくて良いので、メンテしやすさ優先で」と何度も念を押しました。AIによる実装でありがちな「気が付いたらよくわからない魔術的コードができ上がっていた」という事故を防ぐためです。
###2. スペック駆動開発で要件を分解する
技術スタックと、ざっくりとした理想像が決まったら、次は実際にどんなファイルを作り、どんな機能を実装するのかを詰めていきます。ここからはChatGPTではなく、Claude CodeやCodeXのような「エディタ統合型」のAIエージェントにバトンを渡しました。
ここで採用したのが、いわゆる**スペック駆動開発（Spec Driven Development）**です。私はspec-kitというツールを使い、
requirements: 目指す姿や必要な機能を自然言語で書き下したものplans: それをどう実装するかを、疑似コードや構成案レベルまで落とし込んだものtasks:plansをチェックリスト形式の細かいタスクまで分解したもの
という三種類のドキュメントをAIと一緒に作っていきました。
ブログのような小さめのプロジェクトでも、実際に作るファイルは意外と多くなります。コンテキストサイズの小さいモデルにいきなり全部のファイルを見せながら作業させると、
- さっきまでの前提を無視した修正を入れてしまう
- 依存関係のあるファイルを見落としてスタイルだけ壊す
といった「暴走」がどうしても起こりがちです。そこで、スペック（requirements / plans / tasks）をあらかじめ作っておくと、コンテキストをリセットしたあとでも「まずrequirementsを読み込ませる → 今やるべきtasksだけ渡す」というワークフローが取りやすくなり、事故がかなり減りました。
ちなみに、最初はゼロからブログを立ち上げようとしたのですが、これは正直かなり厳しかったです。MVPにたどり着くまでに時間がかかったうえ、AIまかせで作った結果としてファイル構成が複雑になりすぎてしまい、後からの修正がとてもつらいプロジェクトになってしまいました。一時期はほぼ開発意欲が尽きかけていたのですが、その後でSylphという美しいテンプレートの存在を知り、「これをベースに作り直そう」と決めたのが今回のブログです。
###3. SylphとMDXをベースにするメリット
Sylphはもともとデザインが非常に洗練されていて、そのままでも十分きれいです。しかも構造がシンプルなので、AIエージェントが触っても壊れにくいという意味でも相性が良いと感じました。
もう一つ今回から採用したMDXもテックブログデザインでは非常にメンテナンス性を上げてくれています。MDXでは、記事本文の中に直接React/TypeScriptのコンポーネントを埋め込むことができます。これによって、従来であればページごとに専用コンポーネントを用意しないと難しかったような「このページだけで試したいUI」を、記事ファイル一つに閉じ込めておくことができます。
ブログ運営を続けていると「一旦このページだけで実験したい」「将来使うかもしれないけれど、とりあえずここで試したい」といった要件が結構出てくるので、MDXの柔軟さは個人的にかなり気に入っているポイントです。
###4. スペック駆動は研究分野とも相性がいい
スペック駆動開発の考え方は、ソフトウェア開発にとどまらず、バイオインフォマティクスのような研究開発にもよくフィットすると思っています。
研究でも、
- 背景知識や先行研究を踏まえて問いを立てる
- 仮説を立てる
- 仮説を検証するための解析計画や実験計画を立てる
- 実行し、結果を評価して次のサイクルに戻る
といったサイクルを回しますが、この「問い → 計画 → タスク」の構造はrequirements / plans / tasksそのものです。実際、私は業務の中でもAIエージェントに実験ノート的なドキュメントを書かせ、そこからタスクを細分化して解析を進める、という使い方をかなりしています。この話もいずれ別の記事にまとめてみたいと思っています。
###5. MVPまでは簡単、そこからが本番
ここまでの準備が整えば、あとはひたすら実装です。MVP（とりあえず動く最小限のもの）を作るところまでは、正直ほとんど失敗しません。むしろ「AIエージェントすごい！」と感動しながら、サクサクと画面が形になっていきます。ここまでは、ぜひ多くの方に体験してほしいフェーズです。
本当に大変なのは、その後です。検索機能を足したり、細かいデザインを調整したりといった「ちょっとした修正」を積み重ねるフェーズでは、
- 片方を立てると別のレイアウトが崩れる
- CSSが場当たり的に増え続けていく
といったことが頻発しました。Webの基礎知識があればもう少しガードレールを敷けたのかもしれませんが、当時の私はほぼ「AIのノリに任せたバイブコーディング」に近い状態だったので、最終的には全体のCSSをかなり大きくリファクタリングする羽目になりました。
##細かい話
最後に、今回の開発で使ったAIエージェントについて、簡単に触れておきます。
###エージェントの種類とおすすめ
一番よく使ったのはClaude Codeです。実装スピードが非常に速く、ある程度の規模のリファクタリングも安心して任せられる賢さがあります。私は業務でMaxプランを使わせてもらっていることもあり、コンテキスト上限を意識せずにガンガン回せるのも大きなメリットでした。Sonnet 4.5以降はさらに精度が上がり、コスト面も含めて「まず最初に使うエージェント」としてかなりバランスが良いと感じています。スキル（スラッシュコマンド）やMCP連携が充実しているのも、Claude Codeを選ぶ理由のひとつです。
次によく使ったのが**CodeX（GPT-5ベースのエージェント）**です。Claude Codeがどうしても直せなかったバグを、一発で修正してくれたケースが何度もありました。体感としては、少し難しめのタスクや、既存コードの理解が必要なタスクはCodeXのほうが得意な印象です。その代わり、Claude Code（Sonnet 4.5）に比べると、GPT-5 Mediumはレスポンスがやや重く、サクサクと対話しながら実装したいときはClaude Code、腰を据えて難題を解きたいときはCodeX、という使い分けになりました。
今回のブログでは最終的にほとんど使っていませんが、Sylphを採用する前に試行錯誤していた頃はGemini CLIもよく使っていました。Gemini 2.5はとにかくコンテキストサイズが大きく、開いているファイル一式をまとめて渡してバグ修正やコードレビューをさせる、といった使い方に向いています。一方で、細かいバグを混入させたり、意図しない編集をしてしまったりすることもあり、精度面では他のモデルに一歩劣る印象は否めません。それでも、無料でかなりのことが試せるのは大きな魅力で、「まずはAIエージェントを触ってみたい」というフェーズでは良い選択肢だと思います。
##おわりに
以上、ブログリニューアルの裏側と、AIエージェントを使ってどのようにWebサイトを作ったのかをご紹介しました。
非Webエンジニアの方でも、AIエージェントとうまく役割分担をしていけば、このくらいのブログであれば十分に作れる時代になりつつあります。このエントリが、みなさんの「AIエージェントを本格的に使ってみる」ためのささやかな一歩になればうれしいです。
それでは、また次回の記事でお会いしましょう。