Anthropic Labs からリリースされた Claude Design を使って、TOP ページをリデザインしてみました。Claude Design でデザインを起こし、そのまま Claude Code に Handoff して既存 WordPress テーマに統合するまでの一連のフローを、判断ポイントを含めて記録します。

Anthropic 公式の紹介記事や、機能解説の記事はいくつか出ています。本記事は 「実プロジェクトで使ってみた」視点 で、特に「Claude Design 単体で完結しない部分」「Claude Code との連携で何が変わるか」「投入前の準備で結果がどう変わるか」を中心にまとめます。

Claude Design が生成したデザインシステムのレビュー画面。Logo / Type / Colors / Spacing / Components / Brand の項目ごとに「Looks good」「Needs work…」で評価していく Claude Design の Review draft design system 画面

    前提：採用したツールと役割分担

    今回のプロジェクトで使ったツールと、それぞれの役割を最初に整理しておきます。

    ツール 役割
    Claude（Web） プロジェクト全体の進行管理、設計書作成、判断相談
    Claude Design デザイン制作（デザインシステム抽出 / Hero 3バリエーション / 全セクション生成）
    Claude Code 実装（Claude Design からの Handoff を受けて WordPress テーマに統合）

    ポイントは「Claude Design 単体ではコードまで完結しない」こと。デザインの生成と実装は別ツールで、両方を行き来する必要があります。逆に言うと、Claude Code が動く環境（既存テーマ・ライブラリ・規約）が整っているほど、Handoff 後の統合が滑らかになります。

    プロジェクトの前提整理

    リデザインの方針を最初に 3 つに絞りました。

    • 個人ブログとしての新しい視点な「Claude Code・WordPress・Web 制作の実験ブログ」を H1 に据える
    • STEINS;GATE 系の世界観な既存の Divergence Meter ローダーを起点に、Nixie オレンジ（#FFA500 系）を差し色にしたダーク固定テーマ
    • 既存テーマへの統合な構造化データ / 検索フォーム / ドロワーメニュー / Divergence Spinner などはそのまま生かす

    制約条件として、既存サイトの SEO 投資（構造化データ・パンくず・WebSite/SearchAction）はそのまま継続 する必要があり、TOP ページだけを「世界観の入り口」として作り直す形を選びました。

    Claude Design 投入前の設計フェーズ

    Claude Design は「投入する素材の質」で成果物がほぼ決まります。ソース素材を絞り込む前作業に、実装と同じくらい時間をかけました。

    設計書を Markdown で先に書く

    Claude Design に何かを投げる前に、Markdown の設計書を 1 本書きました。

    • 各セクションの 役割・コピー・キーワード
    • 採用したい レイアウトパターン（Hero=Bleed+Board、About=Lane、Tools=Bento…）
    • 構造化データの仕様（Organization / WebSite+SearchAction / ItemList）
    • アクセシビリティ要件（WCAG AA、prefers-reduced-motion 等）

    コードベースの絞り込み

    テーマファイルには投稿系・カスタム投稿・各種テンプレートが入っています。Claude Design に渡すのは 「デザインシステムを学習させる」目的にった最小版 にして、for-design/ という別フォルダにコピー → 1.4MB まで削減（約 16 分の 1）。

    絞り込みの基準：

    • style.css 冒頭の Design System 完全ドキュメント（デザインシステムのカラー・タイポ・コンポーネント定義）
    • style-foundations.css（リセット・ベース・ファンデーションクラスの一覧）
    • style-components.min.css, style-utilities.min.css（コンポーネント・ユーティリティクラスの一覧）
    • ヘッダー / フッター / ローダーの代表的なパーツ 5〜6 個
    • ロゴ SVG / フォント

    「style.css の冒頭にデザインシステム全体の文書を埋め込んでおく」のがここで効きました。Claude Design は冒頭から重点的に解析するので、デザインシステム文書をそこに置いておくと、トークン定義・命名規則・パターンの哲学までまとめて取り込んでくれます。

    Claude Design セッション

    Set up design system

    Claude Design は最初に「Set up your design system」フォームでブランドを学習させてから新規プロジェクトに進む二段構えになっています。投入したのは：

    • 絞り込んだ for-design/（コードベース）
    • 既存サイト https://code-plus.jp/gp/ の Web Capture
    • フォント一式（YakuHanMP / Shippori Mincho / Crimson Text / BO NX Alt Medium）
    • ロゴ SVG（PRIMARY ／ ALT 2 種）

    10 分ほどで Design System が出力されます。

    Display Lockup — 漢字大 + 英字小の組み版
    Type → Display Lockup として「大きな漢字＋小さなイタリック・ラテン」のロックアップが自動生成された。STEINS;GATE 系の章タイトルの組みをブログ用に適応した形

    Brand — Logo の Primary / Alt 切り替え
    Brand パネルでは Logo の「Primary（dark）」と「Alt（light）」、それに「Gear & Circuit Motif」も自動で抽出されている

    各項目に「Looks good」「Needs work…」のフィードバックボタンがあり、ここで方向性を調整できます。Nixie オレンジの色温度や Gear モチーフのトーンなど、最終出力の質に直結する箇所は最初のレビューでしっかり確認しておくのが良さそうです。後のセクション生成は、ここで固めたデザインシステムを土台に進むので、ここでの判断が後々まで響きます。

    Phase 1: Hero 3 バリエーション

    デザインシステムが固まったら、Hero の 3 バリエーション（A. Gear / B. Nixie / C. Lab）を一気に出力させました。Claude Design は「3 案出して」と頼むと内部で複数案を並行生成してくれます。

    Claude Design 上の Hero — A. Gear バリアント
    A. Gear：背景に大歯車をオフセット配置し、コーナー枠＋中央に H1 と Divergence Meter を縦積みするレイアウト

    3-tier lockup に更新された Hero
    装飾サブコピー「電脳記録 / LOG ENTRIES」を加えた 3 段ロックアップ案。SEO の H1（Claude Code・WordPress・Web 制作）は実体として 1 本の <h1> に保持しつつ、視覚上 3 段に分割している

    採用したのは A. Gear。理由は次の 3 点：

    1. 読了の妨げにならない：背景の歯車は超低速回転で、視線を奪わない
    2. 既存 Divergence Spinner との親和性：ローダーの Nixie 数字 → Hero リビールで世界観が連続する
    3. 後続セクションで「ブックエンド」として再利用できる：Footer にも同じ歯車モチーフを置けば、ページ全体に世界観のリズムができる

    B. Nixie の Tabular meta（数値ラベル一覧）と C. Lab の § 0N ステンシル番号は、不採用にせず後続セクションに要素として取り入れる 形にしました。デザインの「採用 / 不採用」を全部か無かではなく、要素レベルで部分採用できるのが Claude Design の柔軟さです。

    Phase 2: 5 セクション一括生成

    Hero の方向性が確定したら、About / Tools / Picks / Blog / Footer をまとめて出力させました。

    About §02 セクション
    About：左カラムに本文＋トピックタグ、右カラムに Nixie 風の Tabular メタ（運営期間・記事数・カテゴリ数・ツール数・拠点）。B. Nixie の Tabular meta をここで採用

    Tools §03 セクション
    Tools：6×n の Bento グリッド。T-01 を lg（3×2 セル）、T-02 / T-03 を md（2×1）、T-04〜T-09 を sm で配置。各カードに歯車アイコンと $ command のモノスペース表記

    Picks §04 セクション
    Picks：4 列カード。featured image の代わりにグリフ（⧗⌬❖▷）を中央配置するフォールバック付き。scanline オーバーレイで CRT 風の質感を追加

    Blog §05 セクション
    Blog：上段がカテゴリ Tile（8 件・記事数降順）、下段が最新記事の横並びリスト。C. Lab 由来の § 05 ステンシル番号がセクション見出しで効いている

    Footer セクション
    Footer：左ロゴ＋タグ、中央 3 ナビカラム（CONTENT / TOOLS / ABOUT）、右に Divergence Meter 1.048596（β-WORLDLINE · LOCKED）。大歯車を背景にブックエンドとして配置

    Claude Design 上の完成形フルページ サムネ
    5 セクション + Footer を 1 ページにまとめた完成サムネ。ここまで Claude Design 上で見た目を確定させてから Handoff に進む

    Claude Code Handoff

    Claude Design 単体ではコードは出てこない、というのは Claude Design を試す前に把握しておくべき重要な前提 です。Claude Design はあくまで「デザイン制作の場」で、実装は Claude Code か他の AI コーディングエージェントへの Handoff で行います。

    Share メニューから Handoff to Claude Code... を選ぶ
    Share メニュー右下に「Handoff to Claude Code...」がある。ここから handoff バンドル（zip）を生成して Claude Code に渡す

    Handoff コマンド ダイアログ
    Handoff ダイアログ。「Send to local coding agent」を選ぶと、Claude Code に貼り付けるコマンドが生成される。Download zip instead を選ぶと zip でも受け取れる

    Handoff バンドルの中身

    zip の中には以下が入っていました：

    • README.md（コーディングエージェント向けの読み方ガイド）
    • project/CODE PLUS Top.html（全セクション統合版）
    • project/hero-a-gear.jsx ほか各セクションの React 風プロトタイプ
    • project/hero.css, project/page.css
    • project/ds/colors_and_type.css（デザイントークン）
    • project/ds/fonts/（フォント一式）
    • project/ds/assets/（ロゴ等）

    README.md には「これはプロトタイプであり、内部構造は無視して見た目を再現せよ」と明記されています。生成された JSX をそのまま React コンポーネントにしたくなりますが、WordPress テーマに統合する場合は見た目だけを抽出して PHP / SCSS で組み直す のが正解です。

    Handoff時の落とし穴：URL fetchの10MB制限

    Claude Code に「この URL を fetch して実装してね」とコマンドを渡したところ、最初は WebFetch のサイズ上限 10MB に引っかかって取得失敗 しました。Claude Code 側で curl も試みましたが sandbox で拒否されてしまい、結局 「ローカルに zip をダウンロードしてフォルダパスを直接 Claude Code に渡す」 方式に切り替えて解決。

    handoff バンドルが小さければ URL fetch でも問題ないと思いますが、5 セクション分入った zip は普通に 10MB を超えるので、最初からローカル展開を前提にした方が早そうです。

    実装フェーズの 3 段階

    Claude Code 側では、段階を切って進めました。「一気に全部実装する」と Claude Code に頼むこともできましたが、Claude（Web）側で相談しながら 段階分けの方が後戻りが少ない という結論に至り、3 フェーズで進めました。

    Phase 1：Hero + About
    シグネチャーモーメントだけを先に固める。front-page.php を新規作成し、head.php の構造化データ／既存 divergence-spinner.php／ヘッダーは触らずに統合。歯車 SVG は cos/sin 計算する PHP ヘルパー（cp_front_gear_svg()）で動的生成しました。

    Phase 2：Tools + Picks + Blog + 構造化データ
    ここで動的部分が一気に増えます。get_posts() で最新記事を、get_categories() で記事数降順のカテゴリ Tile を出力。ItemList 構造化データ（Tools 用と最新記事用の2種）を front-page.php の末尾で動的生成。Picks は picks CPT を try → 無ければデザインのフォールバック 4 件を出すように、CPT 未設定の環境でも動くように組みました。

    Phase 3：scrollin 統一 / Footer / Organization / reduced-motion
    歯車回転を独自 @keyframes から既存 scrollin ライブラリ（scroll-rotationDext / scroll-rotationLevo + slowed-N）に置換。独自実装を維持すると保守時に二重メンテになるので、既存のサイト規約に合わせる判断です。footer-front.php を新規作成して TOP 専用フッターを分離。Organization 構造化データを追加。prefers-reduced-motion: reduce での全アニメ停止を CSS で一括対応。

    scrollin 自体には prefers-reduced-motion の対応が入っていなかったため、pg-front.scss の末尾で属性セレクタ（[class*="scroll-rotation"] 等）を使って一括停止するブロックを追加しました。既存ライブラリの足りない部分は、ライブラリを書き換えるよりも !important で上書きする方が、他ページへの影響を抑えられる という判断です。

    実装後の検証

    Rich Results Test

    Tools と最新記事の 2 種類の ItemList を 1 ページに出力した結果、Google から 「1 つのページで複数の ListItem 要素が定義されています」 と無効判定が出ました。

    Rich Results Test — 修正前のエラー
    修正前：1 件の重大な問題 ×2。「CODE PLUS 最新記事」と「CODE PLUS Tools」が両方検出され、リッチリザルト対象外になっている

    ItemList のリッチリザルト仕様では 「1 ページ 1 ItemList」が原則 とのこと。これは設計書段階では拾えていなかった失敗で、Google の Rich Results 仕様まで読み込んでいなかったのが原因です。最新記事は各記事ページ側で TechArticle 構造化データを既に持っているため、TOP の ItemList を Tools 側だけ に絞ることで解決しました。

    Rich Results Test — 修正後
    修正後：1 件の有効なアイテムを検出（Tools の ItemList のみ）。「カルーセル」カテゴリとして認識され、リッチリザルト対象に

    ついでに、記事ページの TechArticle.publisher に logo（ImageObject）が欠けていたので、structured-data.php の publisher ブロックに条件付きで追加しました。get_site_icon_url(512) を参照する形にしてあるので、WP 管理画面でサイトアイコンを設定するだけで全記事に反映されます。

    TechArticle の publisher.logo が出力された
    個別記事の Rich Results Test。publisher.logo に ImageObject が出ているのが確認できる（サイトアイコンを参照）

    動的取得の動作確認

    About セクションの数値ラベル（記事数 / カテゴリ数）は WordPress から動的取得しています：

    • entries: wp_count_posts()->publish → 実測 272 件
    • categories: wp_count_terms(['taxonomy' => 'category', 'hide_empty' => true]) → 実測 20 件

    3 桁ゼロパディング（sprintf('%03d', ...)）を入れて Nixie 風の表記にしてあります。

    得られた知見

    今回のフローを通して、繰り返し効いたポイントを残します。

    1. 設計書を Claude Design 投入前に書く

    「H1 / Lead テキスト / 各セクションのレイアウトパターン / 構造化データ仕様」までを Markdown で先に固めておくと、Claude Design は何度生成し直しても同じ方向性を維持してくれます。文字数で言うと 4,000〜5,000 字くらいのブリーフが妥当でした。

    特に SEO に関わる H1 / description / 構造化データの仕様は、Claude Design に判断を委ねず、こちらで先に決めておく のが安全です。Claude Design は世界観優先で SEO に弱いキーワード（「電脳記録」のような装飾文字列）を H1 に置きがちです。

    2. コードベースを「デザインシステム抽出用」に絞り込む

    テーマファイル の全部ではなく、デザインシステム文書と代表的なパーツだけ（1.4MB）を for-design/ として別途用意。Claude Design に渡すソースは、実装用のソースとは別物として用意する という発想が必要でした。

    3. style.css 冒頭にデザインシステムを文書として埋め込む

    今回いちばん効いたかもしれない小ワザ。CSS のコメントとして数千行のドキュメント（カラー定義・タイポスケール・コンポーネント命名規則・パターン哲学）を style.css の冒頭に書いておくと、Claude Design はそれを優先的に読み取って、命名規則まで踏襲した出力をしてくれます。

    4. Claude Design 単体ではなく Claude Code 連携で完成する

    これは投入前に把握しておくべき前提。Claude Design は「デザインを起こす場」で、コードは Handoff した先で組みます。逆に言うと、Claude Code が普段から動いている環境（既存テーマ・ライブラリ・規約）が整っているほど、Handoff 後の統合がスムーズ です。

    5. Rich Results 仕様を設計書段階でチェックする

    「1 ページ 1 ItemList」のような Google のリッチリザルト仕様は、設計書の SEO チェックリストに含めておくべきでした。実装後の検証で気付いて修正、では遅いです。次回からは設計書テンプレートに「同種の structured data タイプを 1 ページに複数置かない」を加えます。

    6. 段階を切って Handoff する

    Claude Code に「全部一気に実装して」と頼むこともできましたが、3 フェーズ（Hero+About / Tools+Picks+Blog / Footer+仕上げ）に分けて、フェーズごとに確認した方が後戻りが少ないです。最終的に Phase 2 の構造化データで失敗したので、フェーズ分割していなければもっと大きな手戻りになっていたはず。

    Claude Code で実装した最終形（PC・全ページ）
    実装後の TOP ページ（PC・フル）。Hero の Divergence Meter から Footer の 1.048596 まで、世界観を 1 ページで通せた

    Hero + About の拡大
    Hero + About の上部拡大。歯車の超低速回転、Nixie オレンジの差し色、kanji/latin のロックアップ、Tabular メタが揃っている

    まとめと残課題

    Claude Design × Claude Code の組み合わせは、個人運営のブログを「世界観を持ったサイト」に作り変える用途で、十分実用的なツールでした。設計書を投入前に作る・コードベースを絞り込む・Rich Results 仕様まで含めて設計書に書く の 3 点が、次に試す人に伝えたい一番のポイントです。

    次に試したいのは、Claude Design で 記事詳細ページ を起こすこと。TOP の世界観と整合する記事ページのタイポを揃えれば、TOP からの回遊で「同じサイト」の体験を保てるはずです。

    実装中に得た細かい知見は、別記事で順次まとめていく予定です。Claude Design / Claude Code をこれから試す方の参考になれば。