ぜんぜんエンジニアじゃないからホームページをAIに改修させた

ご無沙汰

まぐねたです。ご無沙汰していたまぐねえ。

2023年に突貫で制作したこのホームページだが、
蓋を開けてみると、今のところ一年に一度という驚異のスローペースでしか記事の更新が成されていなかった。
ありえない……。

また、直近、ライフステージの様々な変化に伴い、
文章を書いて公開する習慣を身につけないと、気が狂って死んでしまう……と思ったので、
放置していたこのホームページを再稼働させることにした。

そこの経緯は別記事で日記カテゴリで書くとして、
この記事は、今度こそ再稼働しますという報告を行いつつ、制作ログとして改修の経緯を残すものにもなっている。

今後ともよろしくね。

改修後の姿

Home・Work・Journal・Aboutの4種類に分かれた構成にしてみた。

• Homeはトップページ。
• Workはまぐねたのお仕事実績や、趣味で描いた絵が投稿される場所。現状は古いままだ。
• Journalは、日記・技術メモ・制作ログの3カテゴリ。文章が置かれます。
• Aboutは、ぼくの自己紹介。自信は無い……。

Work・Journalの内容は、Notionページ内に記事を書いてボタンを押すだけで容易に更新できる仕組みを作ってみた。
ようやく本拠地らしい本拠地ができた気がする。嬉しいね。

突貫制作のツケ

さて、ここからは、制作ログの文章になる。

---

冒頭でも触れたとおり、このホームページは、2023年の夏に突貫で制作されている。
Progateという学習サービスでがーっと勉強し、そのままがーっと自作した。すごい。

しかし、あまりにも短期間で詰め込んだ結果、関連する知識の全てが短期記憶として捨てられてしまったらしく、ほとんどちゃんと覚えていない。
とても悲しい……。

そもそも、ぼくはブログ記事とかイラスト・デザイン作品などのコンテンツ作成に注力したかったが、
このサイトには複数の不便な問題があって、どうにも困難だった。

• 不便だったこと
  • 外部サービス（Tina CMS）で記事を書いたら自動で更新される仕組みを整えたが、
    下書きの保存機能を作っていなかったので、誤ってタブを閉じたら全部消える
  • ブログ記事の機能実装で力尽きたので、Works（作品ページ）に無圧縮の激重画像を直で埋め込んでいて、更新がダルかった

改修に乗り出す

去年の中頃、ようやく重い腰を上げて改修に乗り出そうと開発画面を開いた。
……3年前の自分は何を考えてこれを作ったんだろう。何をどうしたら良いのか全くわからない。

更に、使用している内部アプリ？みたいなものが全部古く、アップデートが必要だったみたいなのだが、
サイトの土台自体が古すぎてアップデートが不可能らしい。
iPhoneでも見た光景だ……（iosが古いからアプリをアップデートできない時のやつ）

恐ろしい話で、プログラミング？というのは、作るまでは簡単だとしても、
更新したり、維持する方がよほど難しいようだった。

ということで、ぼくのホームページは深刻な脆弱性を12件抱えたまま放置され続けていた。
Critical !!!!!という文字が画面に表示された時は怖すぎて面白かったです（最悪）

生成AI

2025年の10月から、転職先でChatGPTとかClaudeを業務利用する機会が増えていた。
NotionというワークスペースでもAIを頻繁に活用していたし、最近は業務効率化アプリを作る機会も増えてきて、ふと思った。
今ならホームページ直せるだろうな……。

ということで、ふわっとしか理解していない生成AIについて、きちんと勉強を行った。

世に言われているAIエージェントって何？

勉強した内容についてここでまず整理しておく。

ChatGPTとかClaudeというのは、
生成AIの中でも、大規模言語モデルと呼ばれるものを利用した、サービス名らしい。
そのサービスで使われているGPT5.5とかOpus4.8みたいなのは、モデル名。

AIエージェントが何かというのは人によってかなり意見の分かれるそうだ。
ただ、おおむね言えるのは、人間がいちいち細かな指示を与えなくても、目標を理解してるAIが自ら計画を立てて、色んなツールを自動的に使い分けながら動くものがAIエージェントだと思ってて間違いはなさそう。

Hugging FaceというAIプラットフォームが定義するところだと、こんな感じ

AIエージェント = モデル + スキャフォールド + ハーネス

• モデル……LLM本体。入力されたテキストに出力テキストを返すだけ
• スキャフォールド……モデルに渡す指示・ツール説明・文脈管理とか、足場。
• ハーネス……LLMモデルを呼び出して、ツールの実行を処理して、エージェントの動きを制御する装置。

スキャフォールドも含めて一括でハーネスと呼ぶ人がいる。

ハーネスて……。人間の言葉こわっ。
VOCALOIDシーン初期に、ボカロの声を整える一連の作業に調教って名前を付けたやつみたいで嫌だなと思った。嫌（や）。

ともかく、今回は、仕事の合間になるべく自動でホームページの改修を進めたかったので、
このAIエージェントを使って開発を行ってみた。

実際の開発の流れ

1. Typelessという音声入力アプリを使って、寝る前にホームページについての要望を喋りまくる
2. Claude Codeに要望を伝えて、プランを計画させる
3. 「実行しといて」と伝えて寝る
4. 朝起きたら改修が一通り進んでいる

人間はこのままダメになって行くのだろう。
実際には、これをスムーズに実行させるために試行錯誤があったし、環境の整備はちょっと大変だったけれど。

Gitって何やねん

あとはそうだ、今回、Gitというバージョン管理システムを使って開発を行った。
へぇ！これがGitってぇやつかい！エンジニアの人々はこんなよくわかんねえソフトを使ってるのかぁ！？？と、内心ずっとキレていた。誰一人このシステムについて良い感じの視覚化ができていない。

よく使われるような図を自分も描いてみたがいまいちピンとこない

実際にWebサイトとして公開される本番環境から枝分かれさせる形で、非公開の開発版を用意して、
そちらに機能の追加、更新を行っていくという仕組みは、なるほど、確かに事故を防げるようによく出来ているなあと思った。
こうやるらしいです。

AIエージェントさんは今回、この図で言うと緑色の横線の部分をやってくれていた。
Developに合流させるときの矢印部分は、プルリクエストといって、この変更の枝を合流させて良いかどうかをチェックする作業が入る。
ここはまだ人間のチェックが必要な気がするのだが、本当は、そのチェックすら別のAIに任せるのが主流らしい。そんなことある？？

自分はこの2週間ほど、朝起きたらAIのプルリクエストを確認し、大丈夫そうならマージ。
追加の指示を伝えて朝ご飯を食べる……という生活をしていた。それだけでホームページが出来ているのって新時代過ぎる。

とりあえず完成したけど……

今回は、AIの勉強がてら、改修はAIに任せてみよう。その間に自分は暮らしを大事にしよう……という判断で一連の作業を行った。
しかし、3年前に感じた「よーし！頑張ってホームページを作るぞう！」というワクワクはあまりなくて、完成したときの感動も割と控えめだった。

今後の発信基盤が整ったのは確実に嬉しいけれど、何かを蔑ろにしたな、という気持ちは拭えない。

取捨選択なのだと思う。
自分はイラスト制作・デザイン・作曲について、勉強しながら手を動かす工程が好きだ。ここだけは手放したくない。

ホームページについては、急いで必要だったからAIエージェントに任せたけれど、ここも手動で学んで行くべきだったのだろうか？

過去に自力でHTML / CSS / JavaScriptを学んだ経験があったからこそ、成果物をレビューして「これは違う」という判断が出来たという実感がある。勉強は無駄にはならない。
AIエージェントを使いこなすためには、そもそものスキルが重要なのは間違いない。

でも……スキルを身につけるためには楽しむのが一番で……
楽しめるようになった工程こそAIに任せやすいのって、ジレンマ過ぎる……。
答えは上手く見つからない。一概に言えることでもないだろう。

締め

非エンジニアの自分がホームページ改修をAIエージェントに任せただけの話なのだけど、なんか妙に考え込んでしまう。

この大AI時代、何が作りたいかという欲望こそが人間にとって大事、というのはよく言われている。
しかし、個人的には、それをどう実現したいか、自分がそこで手を動かしたいかという判断を意識的に挟むべきだなあと思った。今回は無意識だった。

楽しいのが一番だ。
とはいえ、やりたいことだけやる、を能動的にこなすためには、
やらないことによる機会の損失と得られるメリットを天秤にかける必要があって、考えることが多すぎるなと思った。

それも全部AIに考えさせたら良いのかもね。

---

ともあれ、HPの再稼働が始まりました。
重ねて、今後ともよろしくお願いいたしますまぐよう