「有名ブログって、トップページからしてデザインが洗練されているな」——個人ブログを続けていると、ふとそう感じる瞬間がありませんか。
そんなとき、こう感じたことはないでしょうか。
- 自分のブログはテーマのデフォルトのままで、なんだかチープに見える
- CSSをいじって壊すのが怖くて、ずっと後回しにしている
- デザイン会社に頼むほどの規模でもないし、予算もない
結論から言うと、Claude Codeに「リデザインして」と丸ごと任せるだけで、コードを1行も書かずにデザイン刷新が実現できます。 Claude Codeが必要に応じて裏でClaude Designも使いこなしてくれるので、人間の役割は「こうしたい」を言葉で伝えることだけです。
なぜこの2段階フローで十分なのか。それは、デザインの決定と実装を完全に分業できるからです。本記事では、実際にこのブログ「金融エンジニアの資産運用実験室」でやってみた体験をもとに確認していきます。
この記事を読み終える頃には、以下ができるようになっています。
- Claude DesignとClaude Codeの役割の違いが分かる
- 非プログラマーがAIでデザイン刷新を進めるときの具体的な手順が見える
- 自分のブログ刷新に踏み出すための判断基準が得られる
※本記事は個人の体験談です。前回のClaude Codeでブログを作った話の続編として、「デザイン刷新編」を記録します。
この記事でわかること
- Anthropicが新たにリリースした「Claude Design」とは何か
- このブログがなぜ「PaperMod標準」のままだったのか
- Claude Design → Claude Codeの2段階で何がどう変わったか
- 非プログラマーが対話だけで進めるためのコツ
きっかけ：Claude Designのリリース
Anthropicが claude.ai/design というサービスをリリースした、という話を耳にしたのがことのはじまりです。
Claude Designとは、テキストで指示するだけでWebページのデザインモックアップを高品質に生成できるツールです。 「こういうレイアウトにしたい」「このような雰囲気で」と伝えると、実際のWebページに近い見た目のモックアップを返してくれます。デザインが気に入らなければ対話で修正していく、という使い方ができます。
聞いてすぐに「これは自分でも使える」と思いました。
有名ブログのトップページはどこもデザインが洗練されていて、訪れた瞬間に「ちゃんとしたサイトだ」という印象を受けます。一方で、自分のブログはずっとデフォルトのまま。「なんとかしたいな」と思いながらも、具体的にどうすればいいかわからず手を付けられずにいました。
デザインの案もなければ、センスに自信があるわけでもない。ただ「もう少し洗練させたい」という気持ちだけがありました。
そこへ「お任せでデザインしてくれる」というツールが出た。それなら自分にもできるかもしれない、とやってみることにしました。
元のブログ：「PaperMod標準」とはどういう状態か
まず、自分のブログがどういう状態だったかを整理しておきます。
このブログはCloudflare Pages + Hugo + PaperMod テーマで立ち上げました。ただ、私はコードをゴリゴリ書くタイプのプログラマーではないので、セットアップはほぼClaude Codeに任せていました。気づいたら動いている状態になっていた、というのが正直なところです。
ブログの立ち上げはClaude Codeにすべて任せていたので、「これが実現できる最善の形」だと思っていました。指示して、動いた。それだけで、何がデフォルトで何がカスタマイズされた部分なのか、自分ではよくわかっていなかったのです。
後から振り返ると、立ち上げ当時の状態はPaperModの標準設定そのままで動いていたということが分かります。具体的には次のような状態です。
| 要素 | PaperMod標準の状態 |
|---|---|
| トップページ | 記事タイトルと日付・タグが縦に並ぶだけ |
| カテゴリページ | トップとほぼ同じ見た目 |
| 余白・フォント・色 | テーマの初期値そのまま |
| サイト全体の個性 | ほぼなし |
記事数が10本を超えたあたりから、引っかかりが出てきました。
- トップページにはタイトル画像しかなく、サイトとしての顔がない
- 「記事一覧」ページに飛ぶと、記事タイトルが縦に並ぶだけの構成
- カテゴリページに飛んでも、記事一覧とほぼ区別がつかない
どうやってレイアウトを変えればいいかわからなかったし、そもそもデザインのセンスもない。そんな状況だったからこそ、Claude Designの「デザインをお任せでやってくれる」という話が刺さったのだと思います。
2段階フロー：Claude Design → Claude Code
実際の作業は、大きく2つのステップで進みました。
Step 1：Claude Designでモックアップを作る
ここで面白いのは、私自身が直接 claude.ai/design を触ったわけではないということです。私が指示したのはClaude Codeに対してだけ。Claude Codeが「Claude in Chrome」（ブラウザを操作できる機能）を使って、代わりにClaude Designへプロンプトを入力してくれました。
さらに言うと、私がClaude Codeに伝えたのは「ブログをリデザインして」という一言に近いものだけでした。参考にしたい他のブログのURLを渡したわけでもなければ、「こういうレイアウトで」と具体的に指定したわけでもありません。
では「どういうデザインにしたいか」は誰が決めたのか。ログを後から確認すると、Claude Codeが過去のやり取りのメモリから仕様を自動で組み立てていました。具体的には次のようなものです。
- ブログの4本柱（資産記録 / AI活用 / 金融解説 / ニュース深掘り）
- ターゲット読者（30〜40代・スマホ6割）
- アクセントカラー（ブランドカラーとして使っている緑系）
- セクション構成案（ヒーロー／カテゴリ4枚カード／注目シリーズ／最新記事一覧／プロフィール）
これらは過去の雑談や戦略メモの中でぽつぽつ話していた内容で、私が「デザイン用にまとめて伝えた」という感覚はありません。つまり役割はこう分かれていました。
| 担当 | やったこと |
|---|---|
| 私 | 「ブログをリデザインして」レベルのざっくりした依頼を出しただけ |
| Claude Code | 過去の会話メモリから方針を再構成し、Claude in Chrome経由でClaude Designに具体プロンプトを投入 |
| Claude Design | 指示に沿ったWebページのモックアップを生成 |
できあがったモックアップを見て「ここが違う」「ここはOK」と返すだけで、修正もClaude Code→Claude in Chrome→Claude Designの経路で進んでいきます。コードの知識も、Claude Designの使い方の学習も、デザイン案を自分で固める作業も不要でした。
2026-04-21に最終モックアップを承認し、Step 2へ移りました。
Step 2：Claude Codeがモックアップをサイトに移植する
承認したモックアップをもとに、Claude Codeに実装を依頼しました。Claude Codeがやったことは、大まかに次の通りです。
| 対象 | Claude Codeがやったこと |
|---|---|
| トップページ | Hugoの layouts/index.html を新規作成し、4ブロック構成を実装 |
| CSS | PaperModの既定スタイルとは独立した static/css/home.css を追加 |
| カテゴリページ | カテゴリ専用レイアウトを新設し、トップと雰囲気を統一 |
| 記事ページ | ヘッダー・余白・色味をトップと揃えてデザイン統一 |
| ファビコン | フラスコモチーフからブランドマーク（緑円＋2文字）に刷新 |
| モバイル対応 | 狭い画面でテキストナビを整理し、読みやすさを改善 |
私がやったのは「このモックアップの通りに実装して」と伝えることと、できあがった画面をPC・スマホの両方で確認して「ここが違う」「ここはOK」と返すことだけです。
Before / After：いちばん変わったところ
文字で説明しても伝わりにくいので、トップページの変化を比べてみます。
トップページ
Before： トップページにあるのはタイトル画像（Heroカード）と「記事一覧」「カテゴリ」の2つのボタンだけ。記事にたどり着くには「記事一覧」へ遷移する必要があり、トップからは「このブログが何を提供しているサイトなのか」がほとんど伝わらない状態でした。
After： 上から「Hero（サイトの紹介）」「ツール紹介（モンテカルロシミュレーター等）」「カテゴリカード」「最新記事一覧」の4ブロック構成。訪れた人が「このサイトで何ができるか」を最初の画面で把握できるようになりました。
カテゴリページ
Before： 記事カードが1列で縦積みされているだけで、そのカテゴリが「何を扱う場所なのか」を示す説明文がない。ページ全体の雰囲気もトップと揃っていない状態。
After： カテゴリ名がヘッダーとして大きく表示され、所属する記事がカード型で並ぶ構成に。ナビゲーションとして機能するようになりました。
個別記事ページ
タイトル周りの色味・余白・ヘッダーがトップと揃い、サイト内を回遊しても違和感がなくなりました。
「ついでに」整えたこと：法的ページとAdSense
デザイン刷新のついでに、アフィリエイト審査やGoogle AdSense審査を通すために必要な法的ページも整備しました。
- プライバシーポリシー
- 特定商取引法に基づく表記
- お問い合わせページ
これらも主目的はデザイン刷新ではなく、「審査に必要なので揃えておく」というものです。Claude Codeがブログの実態（広告・アフィリエイト・お問い合わせ手段）に合わせてひな形を下書きしてくれたので、私は「ここは違う」「この項目は不要」と修正するだけで済みました。Google AdSenseとSearch Consoleのタグ埋め込みもClaude Codeが担当しました。
非プログラマーが学んだコツ
今回の作業で得た、自分なりの「指示のコツ」を整理しておきます。
1. Claude Designを単体で使うなら「参考サイト」を渡す手もある
今回の私のケースでは、Claude Codeが過去の会話メモリから方針を組み立ててくれたので、参考サイトを自分で用意する必要はありませんでした。ただ、Claude Designを単体で使う場合は話が変わってきそうです。
その場合は、「こういう感じで」と言葉だけで伝えるより、参考になるサイトのスクリーンショットを2〜3枚渡して「このサイトのトップページの雰囲気を参考にして」と伝えるほうが意図が早く伝わる、という話をよく見かけます。今回は試していませんが、単体利用の際は有効な進め方として覚えておくと良さそうです。
2. モックアップは「複数パターン出して選ぶ」形にすると良さそう
今回はClaude Codeに全部任せた結果、出てきたモックアップ1案をベースに微修正していく流れになりました。これでも十分形にはなりましたが、振り返ると最初に「3パターンほど案を出して」と頼んで比較してから1つ選ぶ進め方のほうがよかったかもしれない、と感じています。
1案だけだと「これで良いのか判断軸がない」状態で微修正に入ってしまいます。複数案あれば、自分が何を気に入って何を気に入らないかが浮かび上がり、その後の修正指示も具体的になります。次にClaude Designを使うときはこのやり方を試してみるつもりです。
3. 一度に大きく頼まず、段階的に進める
「トップ全部」「全ページ」と一気に頼まず、「まずトップ」「次にカテゴリ」「次に個別記事」と区切って進めました。一度に多くを変えると、どこがおかしいのか自分で判断できなくなります。
4. 自分の目でレビューする
仕上がってきた画面は必ず自分でPC・スマホの両方で確認します。Claude Codeは「動くもの」を作るのは得意ですが、「自分のブログの世界観に合っているか」は最終的に自分で判断するしかありません。
5. うまくいかなかったら一度戻す
「直してもらった結果、前より悪くなった」場面もありました。そういう時は遠慮なく「前の方が良かった、戻して」と伝えます。Gitで履歴が残っているので、戻すこと自体はClaude Codeにとって難しい作業ではありません。
向き不向きについて
うまくいった条件
今回うまく回った理由を、自分なりに振り返ると次のようになります。
- 自分にデザインの強いこだわりがなかった：「こう来なきゃ嫌だ」という具体的イメージを持っていなかったので、提案されたモックアップに大きな不満が出ませんでした。こだわりが強いと、何度も作り直しのラリーになっていたはずです
- Claude Codeが自分のことを知っていた：「ブログをリデザインして」レベルの丸投げでも形になったのは、過去の会話でブログの4本柱・ターゲット読者・ブランドカラーなどを何度も話してきた蓄積があったからです。メモリが薄い状態で同じことをやると方向性がブレやすいはずなので、自分のプロジェクト情報を日頃から会話で蓄積しておくと効いてきます
- レイアウトはDesign・細かな調整はCodeにきれいに分業できた：モックアップがある程度完成した時点でClaude DesignからClaude Codeへ切り替え、そこからは実装・微調整をClaude Codeに寄せました。Claude Designは「大枠の構成を描く」のが得意、Claude Codeは「コード上で細かく詰める」のが得意、とツールの強みがかみ合った形です
気をつけた方がよいこと
- 最終的な判断は自分でやる必要がある：「これでいい」「ここは違う」と判定するのは人間の役割です。丸投げでも任せられるのはモックアップ生成まで。取捨選択のフェーズは自分で引き受ける前提で臨むと良いです
- トークン（利用量）の問題：集中して作業した日はClaude Codeの利用上限に当たることがありました。デザイン刷新は試行錯誤が多いので、料金プランとの相性は事前に意識しておくとよいです
- Design一本で作り込もうとしない：モックがある程度できた段階でCodeに切り替えず、Design側で細部まで詰めようとすると効率が落ちそうです。「大枠はDesign、実装と微調整はCode」の分業を意識しておくと無駄な往復が減ります
まとめ：デザインは「丸ごと任せる対象」にまでなった
今回の刷新でやったことを振り返ります。
- 私がClaude Codeに出した指示は「ブログをリデザインして」レベルの一言だけ
- Claude Codeが過去の会話メモリから方針を組み立て、Claude in Chrome経由でClaude Designを操作してモックアップを生成
- モックアップがある程度できた段階でClaude Codeに切り替え、
layouts/index.htmlやhome.cssを実装・微調整 - カテゴリ・記事ページも同じ流れでデザインを統一し、サイト全体の世界観を揃えた
- 法的ページとAdSense対応は刷新のついでに整備した
コードを1行も書かず、そしてデザイン案を自分で固めることもせずに、ここまで来ました。
「デザインを変えたい」と思ったとき、以前は「CSSを学ぶ」「テーマを買い替える」「制作会社に頼む」のいずれかが選択肢でした。そこに「Claude Codeに丸ごと任せ、必要に応じてClaude Designを使い分けさせる」という新しい選択肢が加わったことで、個人ブログ運営のハードルが一段下がったと感じています。
ポイントは、日頃の会話でブログの方向性をClaude Codeと話し込んでおくこと。そうしておけば、いざ「リデザインしたい」と思ったときに、一言の丸投げから動き出せます。まずは次にClaudeに何かを頼むとき、自分のブログがどういう読者に向けて何を届けたいのかを、ひとこと多めに添えてみるところから始めてみてください。