目次
ブログを blog.rengedev.com に移して、作り直しました。今回はコードを書くのも、旧記事 15 本の移植も、Claude（AI）に任せています。私がやったのは、方向を決めることと、できたものを見て良し悪しを伝えることだけです。
この記事では、どう作ったかと、途中で悩んだところを紹介します。
作り直した理由#
これまでの記事は、home.rengedev.com（Astro 製）の中に置いていました。 home にはイラストやマニュアルも載せていて、ブログはその一部という扱いでした。
ブログだけを独立させたかったので、blog.rengedev.com として分けることにしました。
構成#
- サイトの生成：Hugo（テーマは使わず自作）
- 公開：Cloudflare Pages（
mainブランチに push すると自動で公開） - 記事：Markdown で、1 記事ごとに 1 フォルダ（画像も同じフォルダに置く）
Hugo を選んだのは、ビルドが速いからです。
テーマを使っていないので、次の機能は自分で追加しました。
- ダークモード
- 記事ごとの OGP 画像（SNS で共有したときに出る画像）の自動生成
- コードブロックのコピーボタン
> [!NOTE]などの注記- 全文を配信する RSS
デザイン#
全体は、大きな文字と太い線を使い、色は紫だけに絞ったデザインにしました。
記事一覧#
いちばん悩んだのは記事一覧です。最初は日付とタイトルだけのリストでしたが、サムネイル付きの記事が多かったので、画像も見せたくなりました。
そこで Claude に頼んで、画像を右に置く、左に置く、カードにする、最新の記事だけ大きくする、といった案を実際に作ってもらい、画面で切り替えながら見比べました。頭の中で想像して決めるより、並べて見たほうがずっと早く決まります。最終的に、画像が上にある箱型のカードにしました。カードのどこを押しても記事を開けます。
サムネイルがない記事#
カードにすると、サムネイルがない記事の見せ方が問題になります。最初はタイトル入りの OGP 画像を出していましたが、カードの下にもタイトルがあるので、同じ文字が 2 回並んでしまいました。
ほかのサイトがどうしているかを Claude に調べてもらうと、画像の枠ごと消す、サイト共通の画像を出す、カテゴリごとの絵を出す、といったやり方がありました。その中から GitHub Blog を参考に、カテゴリごとの共通の絵を出すことにしました。絵も Claude に SVG で描いてもらっています。
- 「Web開発」：ブラウザの窓
- 「報告」：新聞
- それ以外：サイトの色の図形
ダークモードでは、絵も暗い配色に切り替わります。
旧記事の移植#
home.rengedev.com の記事 15 本は、Claude が書いた Python のスクリプトでまとめて移しました。画像のダウンロード、見出しの階層の調整、記事どうしのリンクの書き換えをスクリプトで行っています。
ただ、移しただけでは崩れている部分がありました。
- 昔の WordPress 時代の URL が残っていた
- 箇条書きの記号がエスケープされて、ただの文字として表示されていた
- 画像が失われて、「変更前」「変更後」の中身が空になっていた
これらは Claude に全記事を点検してもらい、まとめて直しました。また、古い構成について書いた記事には「※当時の内容です。」と付けています。
Claude と作ってみて#
自分で手を動かさなくていいので、とても楽でした。特に良かったのは、「色々なパターンを見たい」と頼むと、切り替えて見比べられる形で出してくれることです。記事一覧のデザインも、この方法で決めました。
一方で、任せきりにはできません。「実在するサイトの例は？」と聞いたとき、最初は確かめずに例を挙げてきて、あとから自分で取り消したことがありました。任せる部分が増えても、間違った方向に進んでいることに自分で気付けるように、エンジニアとしての感覚は忘れないようにしていく必要がありそうです。
これからは、気が向いたときにこちらで記事を書いていきます。