codese.net を作り直した — サイトの主題を開発に絞った
codese.net を作り直しました。見た目だけでなく、何を書くサイトなのかから変えています。
何が問題だったか
このサイトには、確定申告の解説、有価証券報告書の読み方、個人開発の記録が 同じ場所に並んでいました。書いた本人としてはどれも自分のやっていることなのですが、 はじめて来た人にとっては「何のサイトなのか」が分かりません。
税金と投資の記事は、書くのに時間がかかるわりに、 自分が一次情報を持っている話ではありませんでした。 制度の説明は公的な資料を読めば書けてしまうので、 私が書く意味がどこにあるのかを説明できない。
一方で、AIエージェントと一緒にツールを作っている話は、 毎日やっていて、詰まったところも失敗も手元にあります。 書けることと書きたいことが一致しているのはこちらでした。
そこで、税金と投資の記事は新しく書くのをやめて、 サイトの主題をAI駆動開発に寄せることにしました。
構成
3つの柱にしています。
| 柱 | 中身 |
|---|---|
| WIKI | AIエージェントを使っていて分かったことを、体系立てて置く場所 |
| 開発日記 | 何を作ったか、どこで詰まったか。時系列 |
| 作ったもの | 実際に動いているツールの一覧 |
WIKIは更新して育てるもの、開発日記は流れていくもの、という違いがあります。 トップページでは左にWIKI、右に開発日記を置いて、両方が同時に目に入るようにしました。
最初は「作ったもの」を一番上に置いていたのですが、下げました。 ページを開いた瞬間にツールのカードだけが並ぶと、リンク集に見えます。 先に読み物があって、その流れでツールを見せるほうが順番として自然でした。
デザインは /design で決めた
Claude Code に入った /design というスキルを使いました。
ターミナルから指示を出すと、ブラウザで見比べられる形でデザイン案が返ってきます。
やり方はこうです。
- 骨格(セクションの順番)を先に決める
- 骨格は固定したまま、見た目だけ違う案を3つ出させる
- 選ぶか、ダメ出しして作り直させる
最初に出てきた3案は、構成はよかったのですが見た目が好みではありませんでした。 「ダサい」とだけ伝えたら、太い枠と影を使う方向をやめて、 罫線と余白だけで階層を作る方向に振り直してきました。そちらを採用しています。
見出しの文言は、ページ全体の中で比べても決められなかったので、 見出しだけを7案縦に並べたアートボードを別に作らせました。 決めたい要素だけ取り出して並べると急に選びやすくなります。
詳しい使い方は WIKI の /design でUIを作る に書きました。
実装で踏んだ穴
Next.js を静的書き出し(output: export)にしているのですが、
記事が0本の動的ルートはビルドできません。
Error: Page "/wiki/[slug]" is missing "generateStaticParams()"
so it cannot be used with "output: export" config.
generateStaticParams() は書いてあるのに、返り値が空配列だと
「無い」と同じ扱いになります。WIKIを作った直後に踏みました。
もうひとつ、frontmatter の日付をクォートし忘れると
YAMLが Date オブジェクトとして読み込んでしまい、
そのまま描画してReactが落ちます。
Error: Objects are not valid as a React child (found: [object Date])
読み込む側で文字列に寄せる処理を入れて、テストも足しました。 書く側が毎回クォートを覚えているのは無理があるので、受け取る側で吸収する方針です。
このあたりは デザインを実装に落とす にまとめています。
これから
WIKIはまだ2本しかありません。エージェントに指示を出していて 「これは次からこう書こう」と思ったことが毎日出てくるので、そこから足していきます。
作りたいツールも溜まっています。会計や財務のような硬いものだけでなく、 ラーメン屋のランキングとか、犬と入れる店を探すものとか、 自分の生活のためだけのものを作りたい。
そういうものを作った記録を置く場所として、このサイトを使っていきます。