代表の後藤です。
先日Anthropicから「Claude Design」というデザインツールが公開されました。
これ、煽りなしで言ってもかなり凄いです。
Canvaほど直感的ではない。
でも、コーディング前提のツールなのに、既存のLPを「こう修正してほしい」と伝えるだけで4案出してくれる。しかもざっくり要件を伝えるだけで選択式のアンケートも取ってくれる。
これはCanvaにはできないやつです。
で、ちょうど今、自社で動かしている「SNSはじめるくん」というサービスのLPを手直ししたくて、このClaude Designを試してみました。
結論、Heroセクション（LPの一番上）の4案を数分で出してもらえて、微調整2〜3往復で完成。
なかなか感動したので、今回はその手順と感想を速報ベースでお伝えします。
非エンジニアでも問題なく触れるはずなので、同じく「コードがわからないけどデザインを触りたい」という方の参考になればと思います。
Claude Designとは？（1分でわかる概要）
Anthropic（Claudeの開発元）が2026年4月に公開した、AIとの対話でデザインを作れるツールです。
画面は左にチャット、右にキャンバス。
左にやりたいことを日本語で書くと、右にデザインが生成されるという構造です。
特徴を3つだけ挙げるとすれば？
- コードベースを添付できる
既存のLPやコンポーネントを読み込ませた上で、その延長でデザイン案を出してもらえる - 複数案の提示
1回の指示で3〜4案まとめて出してくる。比較しながら選べる - Claude Codeへのエクスポート
気に入った案は、そのまま開発環境（Claude Code）に持ち込める
料金はClaude Pro（月$20〜）以上のプランに含まれています。
追加料金なしで使えるのは、多くの方にとってありがたいですよね。
今回やったこと「既存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全体が完成形で出てくるので、「どれが一番サービスに合うか」を並べて比較できます。しかも、それぞれキャッチコピーやデザインが微妙に違うので、いいとこどりできるのが本当に楽でした。
Claude Designの使い方｜5ステップで完了
実際の手順を分解するとこうなります。
①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のスタイル（linear-gradient + 影、白文字S）に差し替わりました。コード知識ゼロでもアイコン差し替えができるのは普通にすごいです。
やり取り②：見出しの横幅を調整
メインの見出しが少し改行位置で間延びして見えたので、幅を指定して調整しました。
案1のwidthを700.292pxにしてやり取り③：ボタンの文言変更
CTAボタンの文言を、料金を明示したパターンに変更。
有料版ボタンのテキストを「有料版（¥2,980）を見る」に変更これで見出し・アイコン・ボタンの3点を修正完了。ラリーは全体で2〜3往復程度で、ほぼ思い描いた形になりました。
Claude Codeへのエクスポートもできる
気に入ったデザインができたら、右上の「Export」からClaude Codeに持ち込めます。
弊社の場合、実装はClaude Codeでやっているので、Claude Design → Claude Code の流れは非常に相性がいい。デザイン案をそのままコンポーネントとして開発環境に取り込めるので、デザインと実装のつなぎ目がほぼ消えます。
Claude Code × MCPで業務を自動化している話でも書いた通り、Claude Codeは外部サービスとの連携やコード生成が得意です。そこにClaude Designが加わると、「デザインから実装まで同じClaude上で完結する」という状態になる。
非エンジニアが「自社サイトを触る」ハードルが一段下がった感覚があります。
AI活用や業務改善について、お気軽にご相談ください
無料で相談するCanvaとClaude Designの違い
「それってCanvaでよくない？」と思う方もいると思うので、正直に比較しておきます。
項目 | Canva | Claude Design |
|---|---|---|
直感性（触りやすさ） | ◎ | △（やや慣れが必要） |
テンプレート量 | 圧倒的に多い | 少ない |
コードとの連携 | なし | ◎（コンポーネント単位で取り込める） |
バリエーション提示 | 手動 | 自動で複数案 |
実装への持ち込み | スクショ→コード化が必要 | そのままClaude Codeへ |
Canvaは「ドラッグ＆ドロップで完結する世界」。画像・チラシ・資料などは今でもCanvaが強いです。
Claude Designの強みは「コード成果物として完結する」こと。Webサイトやアプリの画面デザインを、そのまま実装に繋げたいなら、こちらのほうが圧倒的に合います。
Canvaを置き換えるツールではなく、棲み分けのツールという位置付けですね。
非エンジニアこそClaude Designを触るべき理由
正直、最初は「もう少し難しいかな」と思いました。
ただし、触ってみた結論は逆です。非エンジニアのほうがメリットが大きい。
理由は3つ。
- 日本語で指示するだけで完結する
コードを読む必要も書く必要もない。「ここをこうして」だけ - 選択肢から選ぶ体験になっている
4案の中から選ぶだけ。デザインセンスがなくても意思決定できる - そのまま実装者（AI）に渡せる
Claude Codeに流せば実装まで一貫で進む
つまり、デザインを「作る」作業が「選んで微調整する」作業に変わっているんですね。これは非エンジニアにとって相当大きい変化だと思います。
まとめ
Claude Designを使って、実際に自社LPのHeroを作り直してみた手順と感想でした。
要点をまとめるとこう。
- 5ステップ：ログイン→高忠実度選択→コードベース添付→やりたいこと入力→4案から選ぶ
- 4案の比較で意思決定が楽になる：デザインセンスがなくても選べる
- 微調整は2〜3往復：アイコン・幅・文言など日本語で指示するだけ
- Claude Codeへエクスポート可能：実装まで一貫して繋がる
- Canvaとは棲み分け：Webサイト・アプリ画面はClaude Designが有利
個人的には、非エンジニア経営者が「自社サイトを自分で育てる」ハードルがまた一段下がった感覚があります。LPのA/Bテスト用バリエーション出しなどにも使えそうなので、今後もいろいろ試していく予定です。
弊社ではClaude関連の業務活用を日々記事にしています。もしAI導入やLP改修の相談先を探していれば、お気軽にお問い合わせください。
FAQ
Q. Claude Designは無料で使えますか？
A. Claude Pro（月$20〜）以上のプランに含まれています。追加料金なしで、Proプランでそのまま触れます。無料プラン（Free）では使えません。
Q. デザインの知識がなくても使えますか？
A. 使えます。今回の私も含めて、コードやデザインの専門知識はなくても「日本語で微修正を指示する」ができればOKです。
Q. ゼロから新規のLPも作れますか？
A. 作れます。コードベース添付は「既存のものをブラッシュアップ」する時の機能で、完全新規の場合は添付なしで「こういうLPを作って」と指示すれば大丈夫です。
Q. Figmaの代わりになりますか？
A. 用途によります。Webサイトや画面デザインの素早い試作はClaude Designが有利ですが、複雑なコンポーネントライブラリ管理や大規模なチーム制作はFigmaのほうが強いです。まずは「LP 1枚のHeroバリエーションを出す」みたいな小さい用途から試すのがおすすめです。
Q. Claude Codeへのエクスポートって何ですか？
A. Claude Design右上の「Export」ボタンから、作ったデザインを開発環境（Claude Code）に持ち込める機能です。そのままコードとして実装フェーズに進めるため、デザインと実装の断絶が減ります。
