この記事の内容を、御社の業務で仕組みにする相談（30分・無料）→
この記事の著者
後藤 佑輔
IGS代表大和証券、
代表の後藤です。
先日Anthropicから「Claude Design」というデザインツールが公開されました。
これ、煽りなしで言ってもかなり凄いです。
Canvaほど直感的ではない。
でも、コーディング前提のツールなのに、既存のLPを「こう修正してほしい」と伝えるだけで4案出してくれる。しかもざっくり要件を伝えるだけで選択式のアンケートも取ってくれる。
これはCanvaにはできないやつです。
ちょうど今、自社で動かしている「SNSはじめるくん」というサービスのLPを手直ししたくて、このClaude Designを試してみました。
結論、Heroセクションの4案を数分で出してもらえて、微調整2〜3往復で完成しました。
なかなか感動したので、今回はその手順と感想を速報ベースでお伝えします。
非エンジニアでも問題なく触れるはずなので、同じく「コードがわからないけどデザインを触りたい」という方の参考になればと思います。
Claude Designとは？（1分でわかる概要）
Anthropic（Claudeの開発元）が2026年4月に公開した、AIとの対話でデザインを作れるツールです。
画面は左にチャット、右にキャンバス。
左にやりたいことを日本語で書くと、右にデザインが生成されるという構造です。
特徴を3つだけ挙げるとすれば？
- コードベースを添付できる
既存のLPやコンポーネントを読み込ませた上で、その延長でデザイン案を出してもらえる - 複数案の提示
1回の指示で3〜4案まとめて出してくる。比較しながら選べる - Claude Codeへのエクスポート
気に入った案は、そのまま開発環境（Claude Code）に持ち込める
2026年10月時点では、無料プラン（Free）を含むすべてのプランで使えます。
追加料金なしで使えるのは、多くの方にとってありがたいですよね。
単独の画面（claude.ai/design）は12月14日で終わります
2026年10月12日に単独の画面を開くと、上に英語で
「Claude Designは、Claudeアプリの中のArtifactsに移ります。この画面は12月14日まで使えます」
という意味のお知らせが出ていました。
12月14日のあとも、Claude DesignはClaudeのチャットの中で使えます。
単独の画面で作ったものを残したい場合は、12月14日までに次を済ませます。
- プロジェクトをzipで保存する：
プロジェクトを開き、「Share」→「Project HTML」の順に選び、「Project archive」が選ばれていることを確かめて「Export」を押す - チャットとコメントで残したい内容を控える：
Claudeには引き継がれず、12月に消える - 会社で配色や書体をまとめた「デザインシステム」を作っている場合：
ClaudeのArtifactsのページの「Migrate team design systems」から移す
公開リンクで共有しているプロジェクトは、閉じたあとは開けなくなります。
詳しくは公式ヘルプ（英語）をご覧ください。
今回やったこと「既存LPのHero画面を作り直す」
今回題材にしたのは、自社でテスト運用している「SNSはじめるくん」というサービス。
ヒアリングに答えるだけでInstagramアカウント設計書を自動生成するツールです。
既にLPはNext.jsで動いていますが、ファーストビュー（Heroセクション）のデザインが弱い気がしていて、手直ししたかった。普段なら自分でコードをいじるんですが、今回は話題になっているのもあり、Claude Designに任せてみました。
やったことをひとことで言うと、こうです。
「既存のHeroコンポーネントを添付して、4案のバリエーションを作って」
たったこれだけです。
結果、以下4案が数分で出てきました。
- 案1：Refined Gradient（紫グラデの明るい背景）
- 案2：Dark Neon（濃紺ほぼ黒の背景）
- 案3：Editorial（白背景＋黒文字、雑誌風）
- 案4：Story Frame（暗い背景に枠装飾）
それぞれHero全体が完成形で出てくるので、「どれが一番サービスに合うか」を並べて比較できます。
しかも、それぞれキャッチコピーやデザインが微妙に違うので、いいとこどりできるのが本当に楽でした。
AIコンサルティング
この記事の仕組みを、
Claude Designの使い方｜5ステップで完了
実際の手順を分解するとこうなります。
この5ステップは2026年4月に試した記録です。開き方は次の2通りです。
- 左メニューに「デザイン」がある場合：①のとおり、クリックします
- 左メニューに「デザイン」が無い場合：メッセージ欄の「Output」→「Design」を選びます（公式ヘルプの開き方）
①claude.ai にログインして「デザイン」をクリック
Claudeのチャット画面の左メニューに「デザイン」という項目が追加されているので、クリックするだけです。
②プロトタイプから「高忠実度」を選択
作るものの種類を聞かれます。「スライド」「プロトタイプ」などいくつか選択肢が出ますが、今回はLPなので「プロトタイプ」→「高忠実度」を選びました。
「高忠実度」は見た目が本番相当で出力されるモード。ワイヤーフレームではなく、実際のデザインに近いものが欲しい場合はこれです。
③「コードベースを添付」から対象ファイルを選択
ここがClaude Designの強みです。既存のコード（今回はtsxファイル）を添付できるようになっています。
添付すると、Claudeは現状のコード構造・スタイル・色味を読んだ上で、その延長でデザインを作ってくれます。完全にゼロから作るわけではなく「今のものをブラッシュアップ」できる。既存のLPを改修する場合は、これが一番効きます。
なお、完全新規で作る場合は添付なしでも大丈夫です。その場合はゼロベースでHeroを作ってくれます。
④左下の入力欄にやりたいことをざっくり入力
「添付したHeroの雰囲気を残しつつ、4パターンのバリエーションを作って。それぞれ方向性を変えてほしい」みたいに、日本語でざっくり書けば通じます。
細かい指示は後から微調整すれば大丈夫なので、最初は骨格だけ伝える感覚でOKです。
⑤4案が提示されるので、ベースにしたいものを選ぶ
しばらく待つと、右側のキャンバスに4案が並びます。
それぞれクリックすると拡大表示されるので、実物の印象で選べます。
今回は案2（Dark Neon）をベースに採用しました。サービスの雰囲気（B2B個人事業主向け）に一番合っていたので。ここまでかかったのは10分ほどでしょうか。
微調整ラリーの実例（2〜3往復で済む）
4案から選んだあとは、気になる部分を指示して直していきます。
実際に私がやったやり取りをいくつか残しておきます。
やり取り①：アイコンのスタイルを差し替え
案2の左上アイコンが好みじゃなかったので、案1の元のアイコンを移植してほしい、と指示しました。
案1の左上アイコンを、案2に持ってきて結果、案2の左上アイコンが案1のスタイル（グラデーションの背景と影、白い文字のS）に差し替わりました。コード知識ゼロでもアイコン差し替えができるのは普通にすごいです。
やり取り②：見出しの横幅を調整
メインの見出しが少し改行位置で間延びして見えたので、幅を指定して調整しました。
案1のwidthを700.292pxにしてやり取り③：ボタンの文言変更
CTAボタンの文言を、料金を明示したパターンに変更。
有料版ボタンのテキストを「有料版（¥2,980）を見る」に変更これで見出し・アイコン・ボタンの3点を修正完了。ラリーは全体で2〜3往復程度で、ほぼ思い描いた形になりました。
Claude Codeへのエクスポートもできる
気に入ったデザインができたら、右上の「Export」からClaude Codeに持ち込めます。
弊社の場合、実装はClaude Codeでやっているので、Claude Design → Claude Code の流れは非常に相性がいい。デザイン案をそのままコンポーネントとして開発環境に取り込めるので、デザインと実装のつなぎ目がほぼ消えます。
Claude Code以外の書き出し方法もあります
「Export」ボタンからは、Claude Codeへの連携だけでなく、
・PDF
・PowerPoint（PPTX）
・HTML
・ZIPファイル
でのダウンロードにも対応しています。
Adobe・Canva・Gamma・Miro・Replit・Vercel・Wix
など、普段使っているツールへそのまま送る連携も用意されています。
社内共有はPDF、プレゼン資料はPowerPoint、実装はClaude Codeというように、用途に応じて書き出し形式を選べます。
日本語で使うには（設定は不要）
Claudeの設定画面には表示言語を切り替える項目がありますが、これは画面の言語を変えるだけのもので、チャットで使う言語とは別物です。
公式ヘルプにも「表示言語を変えても、使った言語のまま会話が続く」と説明があり、実際に今回の操作もすべて日本語のまま、デザイン専用の設定を一切触らずに進んでいます。
画面の表示を日本語にしたい場合は、左下の名前（プロフィール）→「Language（言語）」で選べます。ただし、Claudeの画面を日本語にしていても、単独の画面（claude.ai/design）は英語のままでした（2026年10月12日に確認）。
日本語で使うときにやることは、チャット欄に日本語でそのまま指示を打つだけです。弊社が実際に打った指示は、上のやり取り①〜③にあります。やり取り③のように、ボタンの表示文言などそのまま出したい日本語は「」で囲んで渡すと、余計な言い換えが起きにくくなります。
CanvaとClaude Designの違い
「それってCanvaでよくない？」と思う方もいると思うので、正直に比較しておきます。
項目 | Canva | Claude Design |
|---|---|---|
直感性（触りやすさ） | ◎ | △（やや慣れが必要） |
テンプレート量 | 圧倒的に多い | 少ない |
コードとの連携 | なし | ◎（コンポーネント単位で取り込める） |
バリエーション提示 | 手動 | 自動で複数案 |
実装への持ち込み | スクショ→コード化が必要 | そのままClaude Codeへ |
Canvaは「ドラッグ＆ドロップで完結する世界」。
画像・チラシ・資料などは今でもCanvaが強いです。
Claude Designの強みは「コード成果物として完結する」こと。
Webサイトやアプリの画面デザインを、そのまま実装に繋げたいなら、こちらのほうが圧倒的に合います。
Canvaを置き換えるツールではなく、棲み分けのツールという位置付けですね。
非エンジニアこそClaude Designを触るべき理由
正直、最初は「もう少し難しいかな」と思いました。
ただし、触ってみた結論は逆です。非エンジニアのほうがメリットが大きい。
理由は2つ。
- 日本語で指示するだけで完結する
コードを読む必要も書く必要もない。「ここをこうして」だけ - 選択肢から選ぶ体験になっている
4案の中から選ぶだけ。デザインセンスがなくても意思決定できる
つまり、「デザインを作る作業」が「選んで微調整する作業」に変わっているんですね。
これは非エンジニアにとって相当大きい変化だと思います。
まとめ
Claude Designを使って、実際に自社LPのHeroを作り直してみた手順と感想でした。
要点をまとめるとこう。
- 5ステップ：ログイン→高忠実度選択→コードベース添付→やりたいこと入力→4案から選ぶ
- 4案の比較で意思決定が楽になる：デザインセンスがなくても選べる
- 微調整は2〜3往復：アイコン・幅・文言など日本語で指示するだけ
- Claude Codeへエクスポート可能：実装まで一貫して繋がる
- Canvaとは棲み分け：Webサイト・アプリ画面はClaude Designが有利
- 単独の画面は12月14日で終わる：今もClaudeのチャットの中で使える
個人的には、非エンジニア経営者が「自社サイトを自分で育てるハードルがまた一段下がった」感覚があります。LPのA/Bテスト用バリエーション出しなどにも使えそうなので、今後もいろいろ試していく予定です。
弊社ではClaude関連の業務活用を日々記事にしています。もしAI導入やLP改修の相談先を探していれば、お気軽にお問い合わせください。
FAQ
Q. アイコンや画像パーツだけを変更することもできますか？
A. できます。本記事の「やり取り①」で紹介した通り、チャット欄に「このアイコンを〇〇に変えて」「案1のアイコンを案2に持ってきて」のように指示するだけで、アイコン単体の差し替えが可能です。コードを触る必要はありません。
Q. Claude Designの使い方を教えてください。
A. claude.aiにログインして左メニューの「デザイン」を開き、「プロトタイプ」→「高忠実度」を選びます。既存のコードを添付するか、添付なしで、やりたいことを日本語でざっくり入力すると、右側のキャンバスに案が並びます。ベースにしたい案を選んで、気になる部分を日本語で指示して直していきます。
Q. Claude Designは日本語で使うために、設定は必要ですか？
A. 特別な言語設定は不要です。チャット欄に日本語でそのまま書き込むだけで、日本語のデザイン・文言を生成してくれます。Claudeの画面の言語を日本語にしたい場合は、左下の名前（プロフィール）の「Language（言語）」から選べます。
Q. Claude Designは無料で使えますか？
A. はい。2026年10月時点では、無料プラン（Free）を含むすべてのプランで使えます。使った分は、Claudeのほかの使い方と同じ利用枠から引かれます。
Q. Claude Designはどこから開きますか？
A. Claudeの左メニューに「デザイン」があれば、それをクリックします。無い場合は、チャットのメッセージ欄で「Output」→「Design」を選ぶか、デザインを頼む言葉を送ると開きます。「Artifacts」タブにある「Design」のテンプレートからも始められます。
