メインコンテンツへスキップ
 ~/blog
ホームに戻る
更新情報

Kotaro.log をまるごとリニューアルしました！ターミナル × iPhone の新デザイン

Kotaro.log をまるごとリニューアルしました！ターミナル × iPhone の新デザイン

はじめに

こんにちは、Kotaro です。

このたび、ポートフォリオ兼ブログの「Kotaro.log」のデザインを、まるごと作り直しました！🎉

去年 WordPress から自作のサイトに引っ越したときは、とにかく「動くもの」を作るのが目標でした。今回は、旧デザインのコンセプト（ターミナル風のページ遷移アニメーションなど）を引き継ぎつつ、Claude Design と壁打ちしながらデザインをアップデートしました。そうしてできたデザインをもとに、トップページから 404 ページまで、全ページを新しいデザインにしています。

しかも今回は、実装の大部分を AI エージェントのチーム（Claude Code）に任せてみました。僕は計画とレビューの方針を決めて、確認する役です。その進め方もおもしろかったので、記事の後半で紹介します。

Before / After

まずは見比べてみてください。

旧デザインと新デザインのトップページ（PC）の比較

▲ 左が旧デザイン、右が新デザイン（PC）

旧デザインと新デザインのトップページ（スマホ）の比較

▲ スマホのトップページ。左が旧デザイン、右が新デザイン

旧デザインも「ターミナル」がモチーフでした。ただ、ターミナルの画面がひとつ置いてあるだけで、ほかの部分はふつうのサイトでした。新しいデザインでは、サイト全体がターミナルになっています。

コンセプトは「ターミナル × iPhone」

新しいデザインのテーマは、「ターミナル（$ コマンド と、その出力）」と「iPhone のホーム画面」の組み合わせです。

  • PC：ターミナルを操作しているような画面です。作品の一覧は ls -la works/、最新の記事は tail -n 3 blog.log、スキルは skills --bar のように、各セクションが「コマンドと、その出力」になっています
  • スマホ：iPhone のホーム画面のような見た目です。プロフィールや Now Playing、スキルがウィジェットとして並び、下には Dock があります。最新の記事は、Dynamic Island 風の通知で知らせます
  • タブレット：PC のレイアウトを 1 カラムに落としています

もうひとつの目玉は、ライト / ダークの切り替えです。右上のボタン（スマホはスイッチ）で切り替えられて、選んだテーマは次に開いたときも保たれます。最初は端末の設定（OS のダークモード）に合わせます。

トップページのダークモードとライトモードを斜めに分けて並べた画像

▲ ダーク（左）とライト（右）。配色は緑系のニュートラルで統一しています

スマホのトップページ。ダーク、通知とプロフィールを開いた状態、ライトの 3 画面

▲ スマホのトップ。まんなかは、Dynamic Island の通知とプロフィールを開いたところ

ページごとの見どころ

Works：Quick Look で、さっと見られる

作品の一覧は、タイルを並べたギャラリーになりました。タイルを押すと、macOS の Quick Look のように、その場で作品の概要が開きます（スマホでは下から出てくるシートです）。

Works の Quick Look を PC とスマホで開いたところ

▲ Quick Look。PC はウィンドウ、スマホは下からのシートで開きます

作品にストーリー（つくった経緯や画像、Q&A）を書くと、専用の作品ページもできるようにしました。今後、作品ページも書いていく予定です！

Blog と記事ページ

Blog の一覧は、おすすめの記事（featured）を大きく出して、その下にタグで絞り込める一覧を置いています。記事ページには、目次・コードのコピーボタン・前後の記事へのリンク・シェアボタンを付けました。

Blog の一覧と記事ページ（ライト）

▲ Blog の一覧（左）と記事ページ（右・ライト）。右側の目次は、読んでいる位置に合わせて動きます

404 ページも、ターミナル風に

存在しないページを開くと、cd: no such file or directory と怒られます（笑）。打ち間違いっぽい URL なら、「もしかして」で正しいページを提案します。たとえば /blgo を開くと、/blog を提案してくれます。

404 ページを PC とスマホで表示したところ

▲ /blgo を開いたところ。「もしかして: /blog」と提案しています

こだわった小ネタ

⌘K（Ctrl+K）でコマンドパレット

PC では、ヘッダーのコマンドバーが本当に入力できるようになっています。⌘K（Windows は Ctrl+K）を押すと候補が開いて、ページの移動やテーマの切り替えができます。Blog のページでは、記事のタイトルの検索もできます。

コマンドパレットで「n8n」と入力して、記事が候補に出ているところ

▲ Blog のページで「n8n」と入力すると、記事が候補に出ます

ページを移動するときの「ターミナル演出」

サイト内のリンクを押すと、一瞬だけターミナルが出てきて、移動先のコマンドがカタカタ打たれます。Blog に行くなら ls ~/blog、About なら whoami、ホームなら cd ~ です。

ページ遷移の演出で ls ~/blog と打たれているところ

▲ Blog に移動するときの演出。0.4〜0.7 秒ほどで終わります

演出のあいだもページの読み込みは裏で進めているので、待ち時間は増えません。Esc キーでスキップできます。OS の「動きを減らす」設定（iPhone の「視差効果を減らす」など）をオンにしている人には出しません。

SNS でシェアしたときの画像も自動で

X などでリンクをシェアしたときに出る画像（OG 画像）も、デザインに合わせて自動で作るようにしました。記事の画像は、タイトルと公開日から作られます。

サイト共通の OG 画像と、記事の OG 画像

▲ 左がサイト共通、右が記事用の OG 画像。記事を公開すると自動で作られます

「ホーム」ボタン：コマンドに詳しくない人にも

公開してから気づいたのですが、スマホでは、サブページからトップに戻る手段がありませんでした。そこで、右上に「ホーム」ボタンを足しました。

ターミナルの雰囲気は残しつつ、コマンドを知らない人にも分かるように、主役はふつうの言葉の「ホーム」にして、cd ~ は小さく添えるだけにしています。押すと演出で cd ~ と打たれるので、「cd ~ はホームに戻るコマンドなんだ」と、なんとなく伝わる……はずです。

右上のホームボタン。PC のヘッダーと、スマホのヘッダー（ダーク・ライト）

▲ 右上の「cd ~ ホーム」。トップページでは出しません

microCMS とのつきあい方

このサイトの記事や作品は、ヘッドレス CMS の microCMS で管理しています。今の microCMS のプランでは API（コンテンツの種類）を 5 つまでしか作れず、すでに 5 つ使い切っていました。

そこで、API は増やさず、既存の API に「任意の」フィールドを足すだけにしました。たとえば、こんなフィールドです。

API

足したフィールド

使い道

サイト設定

キャッチコピー、スキルのレベル、Now Playing の曲名 など

トップページのヘッダーやウィジェット

記事

抜粋（description）

一覧やスマホの Activity に出す紹介文

タグ

色

タグごとの色分け

作品

短い説明、担当、タイルの大きさ、ストーリー

ギャラリーと作品ページ

ポイントは、フィールドが空でもデザインどおりに表示されることです。値が未設定のときは、デザインの文言を既定値として出します。なので、microCMS の設定を変える前にサイトを公開しても、表示は崩れません。

作り方：AI エージェントのチームで開発してみた

ここからは裏側の話です。今回は、AI のコーディングツールの Claude Code に、役割の違う AI エージェントのチームを組んでもらって作りました。

計画・実装・レビュー・テスト・公開の 5 ステップの開発の流れ

▲ 開発の流れ。レビューで必須の指摘（🔴）がゼロになるまで、実装担当に差し戻します

  • 計画（Opus）：作業をフェーズに分けて、だれがどのファイルを担当するかを決めます
  • 実装（Sonnet）：割り当てられたファイルだけを編集します。何人かで同時に進めるときは、担当ファイルが重ならないように分けて、ビルドする場所（git worktree）も分けました
  • レビュー（Opus）：差分を読むだけでなく、実際にブラウザ（Playwright）で開いて確かめます。指摘は 🔴 必須 / 🟡 推奨 / 🟢 任意 に分けます
  • テスト：本物の microCMS の API キーは使わず、microCMS のモック（本物の代わりに決まったデータを返すもの）でサイトを動かして確かめます
  • 公開：GitHub に PR を作り、CI（lint・型チェック・ビルド）が通ったら main にマージします。Vercel が本番に公開します

レビューで見つかった、気づきにくい問題たち

AI 同士のレビューが、思ったより優秀でした。人が見ているだけでは気づきにくいものも、たくさん見つけてくれました。

  • 存在しない記事を開いたとき、少したつとタイトルが「404」からサイト名に戻ってしまう：サーバーが返す最初の HTML では正しく、ブラウザで JavaScript が動いたあとにだけ起きる問題でした
  • 画面幅 1024px くらいで、ヘッダーのナビのボタンが入りきらなくなる：ホームボタンを足したときに、7 つの画面幅 × ダーク / ライトで測って見つけてくれました
  • 画像の取得で、リダイレクト先まで追いかけてしまう：OG 画像を作るときに CMS の画像を取りに行く処理を、microCMS の画像サーバーだけに絞って、リダイレクトを追わないようにし、サイズにも上限を付けました

テストは、常に回せるように

一度きりの確認で終わらせずに、何度でも回せるテストとして残しました。

  • ページを開いてエラーが出ないかを、PC とスマホで確かめるテスト（15 の URL × 2 画面）と、OG 画像の確認
  • ページ遷移の演出のテスト（154 項目）
  • CMS の HTML を安全にする処理（サニタイザ）のテスト（ランダムな入力 20 万件を含む）

情報セキュリティの人としては、このあたりがいちばん安心できたポイントです。CMS から来る HTML は必ず無害化してから表示する、外部から読み込めるものを CSP で絞る、なども引き続き守っています。

やってみて分かったこと

  • AI に任せるほど、「指示書」が大事：背景・やること・触っていいファイル・確かめ方を、毎回きちんと文章にして渡すと、ブレずに進みます
  • レビュー担当を別にすると、品質が上がる：作った本人（AI）とは別の目で見ると、思い込みに気づけます
  • それでも最後に決めるのは自分：どこまで直すか、デザインと使いやすさのどちらを取るか、といった判断は、こちらでする必要がありました

数字で見るリニューアル

  • 変更したファイル：146 個（コードの追加は約 1.2 万行）
  • 新しく作ったページの種類：トップ（PC / スマホ）、About、Works（ギャラリー・Quick Look・作品ページ）、Blog、記事、Contact、404、エラー
  • 確認した画面幅：375px〜1440px の 7 種類 × ダーク / ライト

これからやりたいこと

  • 作品ページ（ストーリー）を書く
  • お問い合わせフォームから、そのまま送信できるようにする（今は、送信を押すとメールアプリが開く仕組みです）
  • スマホで、横にスワイプしてページを移動できるようにする

などなど！

おわりに

デザインを一新して、「見てもらいたいもの」を見せやすいサイトになりました。AI エージェントのチームでの開発も、うまく役割を分ければ、かなり頼れる相棒になると実感しました。

ぜひ、PC とスマホの両方で触ってみてください。右上のボタンで、ライト / ダークの切り替えもできます！

サイト作成にご興味がある方は、Contact からお気軽にご連絡ください！