個人サイトリニューアルの振り返り

個人サイト（ジブンノート）をリニューアルしました。本記事では、個人サイトをリニューアルした際にあった出来事などを振り返りたいと思います。

ちなみに、個人サイトは以下のページです。
ノート風デザインで、ブログ記事が読めるようになりました！🎉

ジブンノート

silverbirder のホームページ。ブログ記事や自己紹介などを掲載しています。

silverbirder.github.io

背景

fequest というプロダクトに機能リクエストサービス(feature request)を作っていました。
私自身の個人サイトもプロダクト登録（以下のページ）して、どういう機能が欲しいか思いつくままに書いていました。

ジブンノート | Fequest

@silverbirderのジブンノート

fequest.vercel.app

すると、直したい・改善したいと思うことがたくさん湧いてきました。
執筆環境をよくしたい、画像アップロードを簡単にしたい、リンク表記にリンク先のタイトルにしたい、などが上がりました。 fequestの開発にひと段落ついたので、 個人サイトをリニューアルしよう！ と思い至りました。

AI に頑張ってもらうために

私は Codexや GitHub Copilotを普段から使用しています。
基本的には、AIにコーディング中心にして貰いつつ、以下に関しては私が調整するというスタンスでした。

コピーライティング
ページ間の動線整備
インタラクションの体験調整
見た目の調整

言語化するにも難しい、人間ならではの拘るポイントは、私が引き受けて、機能開発は AI に中心的に作ってもらっています。

AI like にするために、技術スタックとして 公式MCPが公開されているものを採用しました 。
具体的には、以下の通りです。

Next.js
Chakra
Storybook
Playwright

MCPを登録しておけば、公式の標準に沿った解決方法を模索してくれるため、そこそこ外れない設計で解決してくれました。

以下の記事は、Playwright MCPを入れてよかった話について、簡単にまとめています。

Playwright MCPでCSSの修正が楽になった

zenn.dev

後は、AGENTS.md を1つ書いたり、コミット前のチェックを厳格にしたりして最低限のガードレールを整えておきました。
未使用ファイルの検査やリンター、型チェック、テスト、ビルドをシーケンスに実行してPASSしたら、コミットできるようにしています。
テストには、Storybookのa11yのテストも混ぜているので、色のコントラストが低いものはエラーで弾いてくれるため、かなり重宝しました。

Vitest browser mode と Storybook を利用したVRTも導入しているので、共通コンポーネント修正での影響範囲が画像の差分で出力されるので開発しやすかったです。
以下の記事に情報をまとめていますので、ご参考ください。

StorybookのcomposeStoryとVitestのtoMatchScreenshotを組み合わせたVRT

zenn.dev

バイブコーディングすると表記揺れが多発するため、日本語のみの対応でしたが、i18n のライブラリを入れています。
直接のテキスト入力をリンターで弾いて、ja.json に集中するようにしていると、AIもja.jsonに書いてくれるため、良い開発体験です。

参考までに、以下のリンクも貼っておきます。

多言語対応しなくても i18n を入れる理由は、表記揺れをなくすため

zenn.dev

お膳立てが終わって

上記のお膳立てを諸々整えてたら、後は AI にバリバリ働いて貰いました。
作りたいと思う機能を TODO.md ファイルとして管理して、そこにひたすら作りたいものをリストアップしていきます。
改善したい項目も全部です。
例えば、以下のようなざっくりした感じで良いです。

ブログ記事のメタデータからタグ抽出して、タグ検索したい
執筆環境を用意して、画像アップロードを簡単にしたい
リンク入力したら、タイトルとドメインを取得して置き換えたい
ブログ記事の本文検索したい

後は、これらの機能を Codex と Copilot を駆使して作らせて、git commit 時の検査をPASSしたら、ﾖｼｯ! としました。

AI に任せなかったところ

主に見た目のところは、一切AI には書かせませんでした。
今回は、ノート風デザインを拘りたかったので、以下のポイントを細部まで拘っています。

ノートの罫線の上に文字が乗ること
現実世界のあるノートの見た目であること
- NOやDATE、メモリ線
落書きアニメーション
写真とセロハンテープ

特に、ノートのメモリ線に関しては苦労しました。
以下に、苦労話について書いています。

CSSで頑張らなくても、SVGで楽にできるときもある

zenn.dev

記事本文は、mdxファイルとして元々管理していたのですが、より標準的なmdファイルとして扱いたくなったため、mdファイルに戻しました。(markdownlintをPASSさせるのに苦労しました...)
mdファイルには、さまざまな記法があるので罫線の上にちょうど乗るようにスタイルを微調整する作業は大変でした。

また、OG画像もノート風デザインにしています。
ここのデザインも私が全部書いています。
ただし、動くまでの機能は AI に作らせています。
OG画像のタイトルには、ブログ記事タイトルを設定しています。
改行位置が自然になるように、budoux を使っています。
以下は、昔書いた OG画像とbudouxの設定方法について記載しています。

OGPのテキストを任意の行で省略する、lineClampとbudoux