このブログの見た目を最後にいじったのが2020年のGWでした。
タグをカラフルにしたあのとき以来、6年もそのままでした。書こうにもなんとなくテンションが上がらないというのは6年前と同じなんですが、最近Claude DesignとClaude Codeを触ることが増えたので、その流れで一気にリデザインしてみることにしました。
Claude Designでデザインを起こす
Claude DesignはAIにデザインを依頼できるツールで、HTML/CSS/JSのプロトタイプを出してくれます。
ブログのトップとよく開かれている記事のURLを3つほど投げて、ざっくり「リデザインしたい、方向性は特に無し」と相談しました。すると、トーン、アクセントカラー、タイポグラフィ、レイアウトの好みなど、いくつかの質問が返ってきました。
僕はこんな感じで答えました。
- ライト&ブライト（白基調）
- 深い青・緑（落ち着いた知性）
- モダンサンセリフ（Noto Sans JP系）
- 縦長リスト or 2カラム
- 圧倒的な可読性重視
そしたら4方向の案が出てきました。A案ミニマル縦長、B案雑誌2カラム、C案タイムライン強調、D案タグ駆動カラフル継承の4種です。それぞれトップと記事ページのセットになっていて、Canvas上でアクセントカラーを切り替えながら比較できるようになっています。
A案を選びました。今のブログの正統進化という方向性です。
その後、コードブロックの強化、サイドバーの追加、フッター回りなどを追加で依頼して、A案の仕上げ版が完成しました。
Claude Codeで実装してもらう
Claude Designから出てくるのはあくまでプロトタイプなので、ブログに反映するにはHugoのテンプレートに適用する必要があります。
ここから先はClaude Codeに任せました。Claude DesignにはClaude Codeへ直接ハンドオフできるプロンプトが用意されていて、そのプロンプトをコピペするだけで開始できます。ハンドオフされたプロジェクトの中のREADMEを読みつつ、意図を汲んで実装してくれます。
書き換えてもらった範囲はこんな感じです。
layouts/partials/styles.css— デザイントークン入れ替え + 新コンポーネントCSSlayouts/_default/baseof.html— スティッキーヘッダー + リッチフッターlayouts/_default/list.html— 年見出しグルーピングlayouts/_default/summary.html— 記事ページ構造layouts/_default/li.html— リストアイテムlayouts/partials/sidebar.html— About / Popular / Latest / Tagslayouts/partials/share.html— シェアボタン (X / はてブ / URLコピー)
このあたりを一気に書き換えてもらって、全ページ問題なくビルドされることを確認しました。
また、その過程でローカルのHugoバージョンだとhugo.IsServerが動かないとか、node_modulesが消えていたとか、一部のショートコードが未定義だったとか、付随する問題もいくつか見つけてもらって、それぞれ潰してくれました。
細かい調整
実装してもらったあと、ブラウザで眺めながら気になるところを直してもらいました。
- ブログタイトルを変更
- サブタイトルも変更
- 特別意味のないbio文を削除
- ヘッダー/メイン/フッターで横位置がズレていたのを揃える
- コードブロックが二重にハイライトされて崩れていたのを、Chroma単体に整理
- ファビコンを同心円のシンプルなデザインに刷新
ファビコンもClaude Designに何パターンか作ってもらって、その中から同心円のシンプルなSVGを採用しました。それをClaude Codeに渡したら、各サイズのPNGへの変換やICOの作成、置き換えという流れを全部やってくれました。
ヘッダーとフッターには同じマークをインラインSVGで配置していますが、fill/strokeをcurrentColorにしておいて、CSS側でcolor: var(--accent)（ヘッダー）とcolor: #fff（フッター）に切り替えるようにしました。1つのSVGで明背景にも暗背景にも対応できます。
おわり
6年前はTailwindの9色でカラフルなタグを実装したのを、今回はNavy一色の単色ピルにぜんぶ置き換えました。見た目を変えてテンションを上げる、という動機は6年前と変わっていません。