背景
去年 WordPress から自作のサイトに引っ越したときは、とにかく「動くもの」を作るのが目標でした。旧デザインも「ターミナル」がモチーフでしたが、ターミナルの画面がひとつ置いてあるだけで、ほかの部分はふつうのサイトでした。
今回は、旧デザインのコンセプト（ターミナル風のページ遷移アニメーションなど）を引き継ぎつつ、Claude Design と壁打ちしながらデザインをアップデートし、トップページから 404 ページまで全ページを作り直しました。
コンセプト
テーマは「ターミナル × iPhone」です。PC はターミナルを操作しているような画面で、各セクションが ls -la works/ や tail -n 3 blog.log のような「コマンドと、その出力」になっています。スマホは iPhone のホーム画面のような見た目で、プロフィールや Now Playing、スキルがウィジェットとして並び、下には Dock があります。
ライト / ダークの切り替えにも対応しました。最初は端末の設定に合わせ、選んだテーマは次に開いたときも保たれます。
こだわったところ
⌘K のコマンドパレット
PC のヘッダーのコマンドバーは本当に入力でき、ページの移動やテーマの切り替え、記事の検索ができます。
ページ遷移のターミナル演出
リンクを押すと、一瞬だけターミナルが出てきて、移動先のコマンド（ls ~/blog や whoami）がカタカタ打たれます。読み込みは裏で進めているので待ち時間は増えず、「動きを減らす」設定の人には出しません。
Works の Quick Look と 404 ページ
作品はタイルを押すと macOS の Quick Look のように概要が開きます。存在しないページでは cd: no such file or directory と表示し、打ち間違いっぽい URL なら正しいページを提案します。
作り方
実装の大部分は、Claude Code に役割の違う AI エージェントのチームを組んでもらって進めました。計画（Opus）・実装（Sonnet）・レビュー（Opus）・テスト・公開の流れで、レビューで必須の指摘がゼロになるまで実装担当に差し戻します。私は計画とレビューの方針を決めて、確認する役です。
CMS は microCMS で、API の数が上限に達していたため、既存の API に任意のフィールドを足すだけにしました。フィールドが空でもデザインどおりに表示されるので、CMS の設定を変える前に公開しても崩れません。
ふりかえり
デザインを一新して、「見てもらいたいもの」を見せやすいサイトになりました。
詳しい裏側は、ブログ記事「Kotaro.log をまるごとリニューアルしました！」で紹介しています。