--- title: "Claude Design + Claude Code でサイトをリデザインしてみた" date: 2026-04-21 categories: - "AI IDE" - "Claude" - "Claude Code" - "Claude Design" url: "https://hidetaka.dev/ja/writing/dev-notes/try-to-use-claude-design-to-renew-my-site" --- [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) という、Claudeのアプリ上でデザイン作成や変更・コーディングへの引き継ぎが行える新製品がAnthropicからリリースされました。どんな感じで使えるのかが気になったので、このサイト（ hidetaka.dev ）のトップページを題材に一通り触ってみました。 デザインの生成精度は想像より高い一方で、使い終わって残ったのは「どこまで任せられて、どこから自分で設計するべきか」という問いでした。 ## 雑な指示でもAskUserQuestionToolで調整してくれる デザイン系のタスクにはあまり馴染みがないので、プロンプトをどのように作ればいいかの勘所などはほとんどない状態です。そこであえて「＜URL＞をリニューアルしたい」というおおまかに達成したいことだけを支持してみました。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/bf42c437213f65267cb98631e3e1960b-20260419102659.png?&d=1140) するとClaudeはページを取得した上で「改善の主な目的は何か」「目指すトーンは何か」といった質問票を自動生成します。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/2d394d56a2bb19ffa983ad8d31b2f578-20260419102700.png?&d=1140) 画面右側の Questions タブに展開される形で、選択肢は日本語、ターゲット読者の粒度まで聞いてくる作りです。各設問には「Decide for me」という選択肢もあり、方向性を Claude に委ねることもできます。 回答を送ると、「日本語タイポ主導 × モノクロ + 1 アクセント × プロフェッショナルで信頼感のあるトーン」で 3 案を 1 つの HTML にまとめ、Tweaks で切り替えられる形で作るという宣言が返ってきました。ここからざっくり体感で5−10分ほど作業完了まで待ちます。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/ff2963a0c1ffc27677a0631b7f0191bc-20260419102700.png?&d=1140) ## プレビューとバリエーションのチェック 生成されたデザインは、画面右側でプレビューできます。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/3a5feb2ee246af0cdd382718de8da5a8-20260420082812.png?&d=1140) ページ上部に 3つのバリエーション（バリアント）ボタンが表示されており、それぞれの表示をチェックできます。 - **A — Editorial Serif**: 明朝見出しと番号付き目次を組み合わせた、書籍のようなリズムのレイアウト - **B — Grid / Swiss**: 大きなタイポグラフィと 12 カラムグリッドで構成された、Swiss スタイル - **C — Kanji / Magazine**: 漢字を大きく使った雑誌的なレイアウト また、Tweaks パネルで配色・フォント・密度をトグルしながら比較できます。3 案を並べて触る感覚に近いものがあります。 ## Draw モードで手書きアノテーションを試す バリアント B を見ていると、CTA エリアの見出しが画面幅に対して大きすぎて、折り返しで妙な改行位置になっていることに気づきました。これを Draw モードで赤い丸を描いて囲み、そのまま送ります。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/c143e3d63b40e785da5f4e1b678ac0d3-20260419102700.png?&d=1140) 返ってきた回答では、Variant B の CTA が狭くて折り返しがひどくなっていることが問題として特定され、h3 をもっと小さくシンプルにしてレイアウトも広げる、という方針が提示されました。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/2676bd5788aa23e7d8bd23dd4a6bad34-20260419102659.png?&d=1140) 手書きの丸という曖昧な入力から、問題の箇所と原因（フォントサイズ）と対策（レイアウトの調整）がひも付けられています。思ったより賢いというのが率直な感想でした。テキストも送信できる様子なので、より詳細に指示を出すこともできるようにみえます。 さらに「デザイン B を軸に、CTA だけ C のレイアウトがいい」と送ると、バリアントを部分的にミックスした修正が返ってきます。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/b772803d5b9ab070a66f5b89f38027f5-20260419102659.png?&d=1140) 対話ベースでデザインの調整が行えますので、デザインツールの扱いなどに馴染みがなくても使えそうだなと思います。 ## 実装はClaude Codeに移譲する デザインが固まったら実装に入ります。実装自体はClaude Designでは行えません。Export メニューからいくつかのオプションを選んでデータをAIツールなどに引き継ぐ必要があります。今回は「Handoff to Claude Code」を選びました。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/ebd1730ead6b4e570705fc82fc154901-20260419102659.png?&d=1140) ダイアログに表示されたのは、以下のようなコマンドです。 ``` Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/v1/design/h/XXXXXXXX?open_file=index.html Implement: index.html ``` ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/96935556eae3ce756a23feebe4e41365-20260419102700.png?&d=1140) これを Claude Code に貼り付けると、指定 URL から tar bundle を取得し、展開した README とデザインファイルを読んで実装を開始します。内部的には Anthropic の API エンドポイントが用意されていて、デザインツールから Claude Code へのハンドオフが一つのパイプとしてつながっている様子です。 ``` % claude ▗ ▗ ▖ ▖ Claude Code v2.1.76 Sonnet 4.6 · Claude Pro ▘▘ ▝▝ ~/development/my-services/sites/hidetaka.dev ❯ Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/v1/design/h/xxxxxx?open_file=index.html Implement: index.html ⏺ Fetch(https://api.anthropic.com/v1/design/h/xxxxxx?open_file=index.html) ⎿ Received 163.3KB (200 OK) ⏺ Bash(cat "/Users/okamotohidetaka/.claude/projects/-Users-okamotohidetaka-development-my-services-sites-hidetaka-dev/616de6cc- 0865-40b7-88e6-9d51393e529a/tool-results…) ⎿ https-hidetaka-dev/README.md000064400000000 0000000000000404415170717371014224 0 … +82 lines (ctrl+o to expand) ⏺ Bash(cat "/Users/okamotohidetaka/.claude/projects/-Users-okamotohidetaka-development-my-services-sites-hidetaka-dev/616de6cc- 0865-40b7-88e6-9d51393e529a/tool-results…) ⎿ /tmp/design_bundle.tar: POSIX tar archive ⏺ Bash(cd /tmp && tar xf design_bundle.tar && ls -la https-hidetaka-dev/ && ls -la https-hidetaka-dev/project/) ⎿ total 8 drwxr-xr-x@ 5 okamotohidetaka wheel 160 4 19 00:12 . drwxrwxrwt 132 root wheel 4224 4 19 00:12 .. … +8 lines (ctrl+o to expand) ⎿ Shell cwd was reset to /Users/okamotohidetaka/development/my-services/sites/hidetaka.dev ⏺ Read 1 file (ctrl+o to expand) ⏺ Now I have a full picture of the design. Let me explore the current home page structure. ``` レンダリング結果を確認すると、大きなタイポグラフィとグリッドで構成されたバリアント B の構造などを、既存のNext.jsアプリに取り込めている様子でした。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/a434a91a4febb1c0f6275a5f8adc47bc-20260419102700.png?&d=1140) ## 下層ページの追加も依頼可能 TOPページだけでは、既存サイトのリニューアルに使うのは難しそうです。ですが、以下のように「下層ページにも対応して」と伝えると、そのまま作業を継続してくれました。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/b9738dbf29a078db3f547db93d68044c-20260420080323.png?&d=1140) AskUserQuestionToolでどのデザインをベースに、どこまで対応するかを質問されます。質問票を見る限りでは、ある程度実際のサイト構造も考慮してくれる様子です。おそらく、TOPページのナビゲーションを確認した上で仮説を立てているのではないでしょうか。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/afe1148a38e5a08181084c3e68275545-20260420080323.png?&d=1140) あとはそのまま作業をさせましょう。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/14ac3767640ef11bb0669f7cb7fed3d8-20260420080323.png?&d=1140) ログを見ていると、個別に指定をしない限りはHTML / JS / CSSだけで進めようとするみたいですね。 ## ビルドエラー対応などはコーディングエージェント依存 作成させたデザインを実装する際、特に下層ページまで含めたリニューアルでは変更量が膨大になり、エラーの混入リスクが高まります。また、ロングランのタスクになるため、コンテキスト劣化（Context Rot）が起きやすいという問題も発生しがちです。実際Claude Codeに仮想ページの実装をさせていた際、型エラー・ビルドエラーを`tsconfig.json`の変更で回避しようとしていました。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/7bb5253418e695f770463dcbd9cfc368-20260420084119.png?&d=1140) 長期間タスクをうまく制御するハーネスなどがない場合、Context Rotの兆候が出たところでセッションまたはコーディングエージェントを変更する方が良さそうです。自分の場合は、CursorのComposer-2に修正作業を依頼しました。 ![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2026/04/85bbe7e13d67fca61bfe869a5da0a113-20260420080448.png?&d=1140) このような問題が起きていないかを検知するには、やはりCIパイプラインの整備やレビューエージェントの導入などの品質チェックゲートの整備が欠かせないなと思います。 ## 触ってみて デザイン作成などに馴染みがなくとも使えるという点では、Claude Designはかなり魅力的です。コーディングエージェントへの引き継ぎもシンプルなプロンプトで行えるのがいいですね。 とはいえ実際にはtarファイルなどを落として解凍して・・・という作業をさせているため、他のデザインツールのようにZIPやtarでDLしたものを直接渡す方法と大差ないかもしれません。クラウド型エージェントでは難しそうですが・・・ ただし「やれと言っていないこと」について、特にデザイン以外の要件については、「指示しませんでしたよね？」と言わんばかりの成果物が出てくる印象です。「TOPページをリニューアルしろと言ったら、そのまま他のページも必要だよね？」みたいな空気読みは期待しない方がよいです。ちゃんと指示しましょう。 また、Claude Designの問題ではありませんが、作成されたデザインを実装する際の品質チェックをどのように行うかも検討しておく方が良さそうです。特にリニューアルでは、変更量が大きくなるため必然的にバグが混入されやすくなります。自動テスト・リントの設定と、CodeRabbitのようなレビューエージェントの追加はやっておきましょう。