このブログのデザインを大幅に変えました。きっかけは、たまたま Claude を開いたときに見えた “Design” の文字です。少しの会話と、公式の「Handoff to Claude Code」スキルを呼び出して、このプロジェクト専用の引き渡しパッケージを置いて、Claude Codeに指示を出して終わりました。
Claude Design とは
Anthropic が提供するデザイン共有の仕組みで、UI のプロトタイプやコンポーネントを Claude Code に直接渡せるようにしたものです。「このデザインを実装して」と指示するだけで作業が始まります。
Figma からエンジニアへの「デザイン指示書を渡す」という工程を、Claude Code との会話に置き換えたイメージに近いと思います。デザインファイルには HTML プロトタイプのほか、README（実装ガイド）・デザイントークン・コンポーネントごとの JSX が含まれていて、Claude Code はそれを読んだうえで既存のコードベースに合わせて実装してくれます。
最初、Claude Code でパスのみ指定して何も文言を書かずに実行してみたところ、変更前のものが色々と残ってしまったので、今回のように置き換える場合はある程度方向性を与えたほうがよさそうでした。
やったこと
Astro でシンプルな文章系ブログのテンプレート。ヘッダー、記事一覧、サイドバー、フッター、数個の固定ページ
その後いくつかの質問に答え、「月曜日の灯り」という架空のブログテンプレートを採用案として選びました。C 案「Almanac」——月ごとに記事を年譜のように並べるレイアウトです。
最初の指示ではテーマ切り替えのボタンが抜けていたので、テンプレート選択後に追加しました。
何が変わったか
配色
以前は白背景＋青アクセントの配色でした。今は暖色系の紙の色をベースにしています。
| トークン | ライト | ダーク |
|---|---|---|
| 背景 (paper) | #efe9dc | #14110c |
| テキスト (ink) | #231d15 | #ebe3d0 |
| アクセント | #a83818 | #eb6b42 |
| 区切り線 | #c8bca4 | #2e2920 |
深夜に開いても目が疲れにくい色。ダークモードの黒も純黒ではなくわずかに茶みがかっていて、光の当たった紙の裏側みたいな色をイメージしてくれています。
タイポグラフィ
見出しに Noto Serif JP（ウェイト 500）を使用。数字と英字のラベルは EB Garamond と JetBrains Mono を使い分けています。
本文は Noto Sans JP のまま、見出しだけセリフ体にするとページ全体の印象がかなり柔らかくなりました。日本語のセリフ体は横画が細くて縦画が太い伝統的な筆運びを持つので、こういう「読み物感」を出したいときによく合う、らしいです。（Claude Designさん曰く
ホームのレイアウト
グリッドのカード並びをやめて、月ごとに記事をまとめる「年譜」形式です。左カラムに大きな月番号（EB Garamond 72px）、右に記事リスト。月番号の左に 3px の朱色の縦罫線が入る。
04月 01 暮らし · 3 min
春の雨、喫茶店、ひとりぶんの紅茶
…記事を時系列で追うのに向いていて、ブログを「書いた記録の束」として見せる感じです。
テーマ切替アニメーション
この提案が面白かったです。ヘッダー右端のトグルボタンをクリックすると、クリックした座標を中心に円が広がってテーマが切り替わります。View Transitions API の ::view-transition-new(root) に clip-path: circle(0 → fullRadius) をアニメートさせています。（Claude Codeさん曰く
const transition = document.startViewTransition(apply);
await transition.ready;
document.documentElement.animate(
{
clipPath: [
`circle(0px at ${x}px ${y}px)`,
`circle(${r}px at ${x}px ${y}px)`,
],
},
{
duration: 520,
easing: 'cubic-bezier(.6,.2,.2,1)',
pseudoElement: '::view-transition-new(root)',
}
);
prefers-reduced-motionが設定されているブラウザや View Transitions 未対応の環境では即時切替にフォールバックします。FOUC 対策として<head>内にis:inlineスクリプトでlocalStorageを読んでdata-themeを設定するようにもなっています（今回は.darkクラスを使っているが原理は同じ）。
勉強不足ですいません。
Claude に実装させてみて
デザインの意図を README に書いておくと、かなり高い精度で再現してくれた。「High-fidelity — 色・タイポ・余白・インタラクションはこのまま採用してOK」という一行がとくに効いたようで、トークン値やフォントサイズをそのまま引き写してくれた。
一方で、はじめの方でも述べましたが、既存のコードベースとの統合部分（CSS 変数の名前衝突、テーマ機構の差異など）は少し調整が必要でした。普通に考えてそれはそう。そこは会話しながら修正しました。
「デザインを渡したら実装してくれる」という体験は思っていたよりずっとスムーズで、文句を言わない超優しいデザイナーのおにいさんがいるような体験でした。
サイドバーを消した
今回の刷新に合わせてサイドバーも廃止しました。全ページがシングルカラムになり、カテゴリやアーカイブへのリンクはホームページの下部にまとめました。（Claude Designさんが
なお、今回使われた Claude Design の使用量は 86% でした。しばらくこのデザインで書き続けてみようと思います。紙の色と朱のアクセントは、最初に与えられたテンプレートの「毎週月曜の夜に何かを書く」という習慣の雰囲気によく合っている気がします。
ということで、頑張って月曜日になにかを書く習慣にしたいと思います。