前にドメインが死んだっていう投稿をしたんですが、ブログリニューアルってことでデザインなど全て一新しました！

本当は 2025 年中に大掃除のつもりでやりたかったんですが、色々どうしても納得できなくて 2026 年 1 月 1 日の元日リニューアルに。

静的サイトを動的に投稿したい

前回の記事で書いた通り、静的サイトでいちいちパソコン出してマークダウンに書く（しかも画像はスマホから転送など）で結構面倒くさい。そのうちブログ自体からも遠のいてドメインが死んでもしばらく気づかないみたいな事態に陥ってしまったんですが、「今なら AI がいい感じに書いてくれるのでは？」と適当に始めました。

要は github にあるデータを更新さえしてくれれば Netlify が自動にデプロイしてくれるので PAT を渡したローカルサーバーを建てたんですが………既にそういうオープンソースプロジェクトがあることに気づきました。

decapCMS

他の静的サイトジェネレータなどもだいぶ対応しているんですが、元々 NetlifyCMS という名前だったらくて、まあこれがとても Netlify の静的サイトと相性が良くて、ログイン周りなんかもボタンクリックで終了です。素人がちょっと考えたことなんて当たり前にベターなプロダクトが既に存在するんだ！

ただ DecapCMS のリスポンサブデザインがあまりにも酷くてスマホからだとほぼ使い物にならないのでかなり無理やり css を上書きしてます。それでも微妙。

バイブコーディング

ブログ当初から使っていたテーマも気に入っていたんですが、いつか自分で作りたいという思いがあって…ただ面倒臭くて先延ばしにしていました。ここでまた「AI でできるんでは？」と思ってバイブコーディングを始めました。仕事でも似たような AI の使い方をしているんですが、html/css はどうも………そもそも人間がまだ制御できていないせいでなかなか凄いものを作ってきます。2,000 行の main.css。いや〜人類にはまだ早い。

テーマ

japandi な感じで作ってみました。バイブコーディングだけど結局かなりの量の指示が必要なので色やレイアウトの指定など何度も試してオッケーを出すを繰り返します。未だにランディングページ（特にデスクトップ向け）だけは気に入ってないんですが、ナビゲーション（特にスマホ向け）やページのレイアウトはスッキリしていて使いやすいと自負しています。

今更ナイトモードを作成したのも、ナイトモード愛用者として気に入っています。色はもう少し練ってもいいかもしれないですが、優しい緑が japandi らしくて好きです。

サーチ周りはコードをどうにかしたい気持ちもあるんですが、正直既に静的サイトの限界を AI が無理やり突破しているところがあるのでテーマとして公開する時には考え直そうと思います。JavaScript が出しゃばると色々できるのは確かだけど、もうそれは静的サイトと呼べない気がする。

ギャラリーで使ってる Pinterest みたいな縦長にバーっと異なるサイズの画像を並べるレイアウトを「masonry」って言うの、知らなかった。AI 時代は知識というかプロンプトのために用語だけでもフワッと知っている必要があるなと感じました。

お問い合わせ機能

特にお問い合わせが来ることもなさそうな雑記ブログなんですが、Netlify Forms を使うと html で form 書いただけ（※データアトリビュートが必要）で勝手にバックエンドつけてくれるらしいのでちょろっと作ってみました。これは元々 Google フォームだった気がするしそもそも無かった気もするしぶっちゃけ要らない機能だけど、静的サイトの限界を超えるためだけに色々試しています。

コメント機能

意地でも無料で静的サイトを維持したいけどコメントもちょっと欲しいと思った時に、Google フォームをいじるのも考えたんですが、GAS でもいけることに気づいたのでそっちに舵を切りました。

投稿も閲覧も GAS の API を呼び出して、Google シートと読み込み／書き込みをしています。実質 GAS がバックエンドで Google シートがデータベースみたいなものなのでフロントだけよりも多少制御できます。

こちらもそのうちソースコード公開したいと思ってます。静的サイトのコメント問題はみんなぶち当たったことある…よね…？（既に色んなマイクロサービスはあるけどサ）

まとめ

なんとか指示を出して小分けにしたり試行錯誤しながら完成はさせたもののテーマとして公開できるクオリティのコードには程遠く「いつか自分で書き直したい」という気持ちを胸にもう少しダラダラすると思います。

でもこのクオリティを AI が書いてくれるとどうしてもエンジニアの未来を憂うことになります。現時点では人間がメンテするに耐えないカードの雑さがあるものの、AI がメンテするならもうこれでいいんじゃ………

バイブコーディングはプロンプトから生成までのピンポンを繰り返す訳ですが、地味に時間がかかるので普通に 10 時間は軽くかかりました。アイデア出しからと思えば早いけど（デザインがしっかり決まっている上で）コーディングだけならまだ優秀なエンジニアの方が早い気がします。

いろんなページ

ランディング

ギャラリー

モバイル・ランディング

モバイル・サーチ

モバイル・メニュー