はじめに

2026年4月17日にAnthropic LabsからリリースされたClaude Designをご存知でしょうか。
Claude Designはプロンプトを投げるだけで、デザインやプロトタイプ、スライドからランディングページまで、会話だけで作れてしまうAIデザインツールうさよ。

うさぎは「これ本当に既存のデザインツールが要らなくなるんじゃ」と思いながら、実際に触って検証してみました。
この記事では、まずClaude Designの全体像をしっかり押さえたうえで、後半のハンズオンでスクロール演出付きのランディングページを作っていきます。

この記事を読めばわかること

• Claude Designで作れるものと主な機能
• 料金プランと使い始める前の準備
• 具体プロンプトを使った実践ハンズオン (今回はランディングページが題材)
• できあがった成果物をClaude Codeに渡して実装まで進める流れ

それでは早速見ていきましょう。

生成AIの社内利用をお考えの企業様へ 
ナレフルチャットは初心者でも使いやすい設計で、組織全体への生成AI浸透を支援するツールです。プロンプト自動生成機能や社内共有機能により、AIリテラシーに差があっても全員が活用できます。企業のAI導入を検討している方は、こちらをご覧ください。

Claude Designとは

Claude DesignはAnthropic Labsが提供する新しいデザイン制作ツールです。
中身はAnthropicの最新ビジョンモデルClaude Opus 4.7が動いていて、テキストや画像から完成度の高いビジュアル成果物を生成してくれるのが特徴うさよ。

特徴を3行でまとめるとこんな感じです。

• 左ペインの会話と右ペインのキャンバスというシンプル構成
• オンボーディングで自社のデザインシステムを自動で吸い上げて適用してくれる
• できあがった成果物をClaude Codeへ実装ハンドオフできる

アクセスは claude.ai/design から行えます。
2026年5月時点ではResearch Previewでの提供で、Claude Pro / Max / Team / Enterprise のユーザーが利用可能うさよ。

似たツールとしてv0やLovableが頭に浮かびます。
それらが「コードを生成すること」を主目的にしているのに対して、Claude Designは「デザイン制作の体験そのもの」に寄せて作られているのが大きな違いです。

Claude Designで作れるもの

Claude Designはランディングページ専用ツールではありません。
公式が掲げている主なユースケースを並べると、こんなにバラエティ豊かうさよ。

特に「フロンティアデザイン」と呼ばれる領域 (音声、動画、シェーダー、3D) まで会話で生成できるのがClaude Designの面白いところうさよ。
たとえばボタンを押すと音が鳴るプロトタイプや、WebGLでメッシュが揺れるヒーローセクションも、プロンプトひとつで試作できます。

「ランディングページしか作れないツール」ではなく、ビジュアル成果物全般をカバーする汎用ツールであることを覚えておきましょう。

Claude Designの主な機能

ハンズオンに入る前に、Claude Designに用意されている主な機能を整理しておきます。
ここを押さえておくと、後半のプロンプトの意味がスッと入ってくるうさよ。

1. テキストからデザイン生成

要件を自然言語で書き起こすだけで、Claude Opus 4.7が初版のデザインを生成します。
プロンプトには「目標、レイアウト、コンテンツ、対象者、雰囲気」の5要素を含めるのがコツです。

2. デザインシステムの自動構築

オンボーディング時にコードベースやデザインファイルを渡しておくと、ブランドカラー、タイポグラフィ、コンポーネントを自動で抽出してくれます。
以後のプロジェクトでは抽出された値が自動適用されるので、複数の成果物を作っても見た目がブレません。

3. マルチモーダル入力

テキストだけでなく、以下の素材を入力に使えます。

• 画像 (PNG、JPG、WebP、SVG)
• ドキュメント (DOCX、PPTX、XLSX、PDF)
• 既存サイトのスクリーンショット
• Web Captureツールで取り込んだ任意のページ要素
• コードベース全体

4. 対話による細部の磨き込み

初版が出てきたあとは、以下4つの編集手段を組み合わせて磨いていきます。

• チャット (全体の方向転換、大きな構造変更)
• インラインコメント (特定要素のピンポイント修正)
• カスタムスライダー (Claudeが軸を提案する連続値での調整)
• 直接編集 (テキストや色の即時編集)

カスタムスライダーが「うさぎPoint」です。
たとえば「余白の広さ」「タイポグラフィの大胆さ」「スクロール演出の速度」といった軸をClaudeが提案してくれて、ぐりぐり動かしながらリアルタイムに反映できます。

5. エクスポートとClaude Codeハンドオフ

仕上がった成果物は複数の形式で書き出せます。

最後の「Claude Codeハンドオフバンドル」がClaude Design最大の差別化ポイントうさよ。
デザインから実装まで一気通貫で繋がるので、絵に描いた餅で終わりません。

料金プランと前準備

Claude Designは追加料金なしで以下のプランに含まれています。

EnterpriseプランはデフォルトでオフなのでIT管理者にClaude Designを有効化してもらいましょう。Pro以上なら個人でもすぐ試せます。

前準備は3つだけです。

1. Claude.ai のアカウントを Pro 以上にしておく
2. ブランドガイドや既存サイトのコードベースを手元に用意 (任意だが効果絶大)
3. ブラウザで https://claude.ai/design にアクセス

ここまでで5分かかりません。早速作っていきましょう。

法人向け生成AIサービス「ナレフルチャット」では、Claudeなどの主要AIモデルを活用し、文章作成や情報整理はもちろん、アイデア出しやクリエイティブ制作などのデザイン業務にも対応できます。
企業単位の定額制で全社導入しやすく、初月無料トライアルもご利用いただけます。
また、料金プランは企業単位の定額制を採用しており、何人で利用しても追加のコストは発生しないため、コスト管理の手間がかからないスムーズな全社導入を実現できます。生成AIの導入をご検討中の企業様は、ぜひ一度お試しください。

ハンズオン スクロール演出付きランディングページを作る

ここからが本記事のメインとなるハンズオンパートうさよ。
Claude Designで作れるものはたくさんありますが、今回は数ある用途のうちランディングページ (LP) を題材に選びました。
ランディングページとは、商品やサービスの紹介を1ページに凝縮した縦長のウェブページのことうさよ。

題材は「胸部装着型デュアルアーム・ウェアラブルロボット」を架空プロダクトに見立てて、スクロールで世界が動くプロダクト紹介ページを作っていきます。

ゴールとなる成果物のイメージは以下のとおりです。

• 真っ黒な背景にオレンジアクセント
• ヒーローエリアでブラーがふわっと解けて文字が出現
• 背景に常時固定された3Dロボットモデル、スクロールに合わせて回転
• スペック表、ギャラリー、CTA が縦に続くロングページ
• セクション境界で背面の3D演出が一瞬透けるトランジション

5つのサブステップで完成まで進めます。

Step 1 プロジェクト作成とデザインシステム自動構築

まずは新規プロジェクトを作ります。
claude.ai/design の右上「New project」から作成画面に進みます。

プロジェクト名は「Wearable Robot LP」のように、後から見て中身が分かるものにしましょう。

ここで重要なのが「design system」のオプションうさよ。
プロジェクト作成画面の「setup design system」ボタンをクリックします。
自社サイトの GitHub リポジトリやデザインファイル (Figma export、画像、CSS) を渡しておくと、Claude Designがオンボーディング中に内容を読み取り、自動でデザインシステムを構築してくれます。
具体的にはこんなものを抽出してくれます。

• ブランドカラー (背景、前景、アクセント、ディバイダーなど)
• タイポグラフィ (フォントファミリー、ウェイト、見出しスケール)
• 既存コンポーネントの形状 (ボタン、カード、ナビ)

コードベースを渡すと渡さないでは出力の馴染み方が段違いです。手間でも初回は連携しておくのがおすすめうさよ。

設定が終わると、プロジェクトのトップ画面に戻り、抽出したデザインシステムを選べるようになります。

ここから実際に作っていきましょう。

Step 2 初回プロンプトで土台を生成

プロジェクト画面で左ペインのチャットにプロンプトを入力します。
プロンプトは「目標、レイアウト、コンテンツ、対象者、雰囲気」の5要素を意識して書くのがコツうさよ。

今回投げるプロンプトはこちらです。

あなたはプロダクトLPを作るデザイナーです。
以下の要件で1ページのランディングページを作ってください。

【プロダクト】Wearable-SO-ARM
胸部装着型のデュアルアーム・ウェアラブルロボット。
標準SO-ARM101を7自由度に拡張し、Maker Faire Tokyo 2026に出展予定。

【ターゲット】ロボット開発者、Maker Faire来場者、研究者

【全体の雰囲気】
- 真っ黒の背景 (#000000) にオレンジアクセント (#ff6a1a)
- 文字色は白系 (#f5f5f7)、補助テキストはグレー (#86868b)
- 見出しはセリフ体 (Fraunces)、本文はサンセリフ (DM Sans)、コードはJetBrains Mono
- Apple製品ページや Awwwards 受賞サイトのような余白多めミニマル

【セクション構成】
1. ヒーロー (大きなプロダクト名、サブコピー、スクロール誘導)
2. ティッカー (技術スペックが横スクロールで流れる)
3. 関節構成の図解 (7DoF×2の自由度内訳)
4. 追加機能カード (Bento Grid 風)
5. ダンスデモ (バーが上下する音楽ビジュアライザ風アニメ)
6. ベント (画像と数字のグリッド)
7. CTA (Maker Faire出展情報)

【インタラクション要件】
- 背景に固定の3Dロボットモデル (placeholderで可)、スクロールに合わせて回転
- ヒーローの文字は char 単位で blur(8px) から blur(0) にフェードイン
- セクション切替時に背面の3Dが一瞬透ける solid / stage 切替パターン
- 上部に細い1pxのスクロール進捗バー (オレンジ)

長く感じますが、ここまで書くと初回出力の精度が大きく変わります。
「最初はこう考えていましたが、実はプロンプトを丁寧に書いたほうが結果的に手戻りが減って速い」というのが実体験うさよ。

プロンプトを送信すると、Claude Designが右ペインのキャンバスにランディングページを描き始めます。
だいたい数十分くらいでスクロール可能な初版が出てきます。

ここでチェックしておきたいのは3点です。

• 色とフォントがプロンプト通りか
• セクションの順番が指定どおりに並んでいるか
• スクロール演出 (進捗バー、ブラー解除、ティッカー) が動いているか

「もしエラーが出たら」プロンプトの長さがオーバーしている可能性があります。セクション要件を箇条書きに圧縮するとうまくいくケースが多いうさよ。

Step 3 マルチモーダル入力で雰囲気を寄せる

土台ができたら、参考にしたい既存サイトの雰囲気を取り込みます。
Claude Designはマルチモーダル入力に対応していて、以下のような素材をドラッグ&ドロップで取り込めます。

• 画像 (PNG, JPG, WebP, SVG)
• ドキュメント (DOCX, PPTX, XLSX)
• PDF
• 既存サイトのスクリーンショット
• Web Capture ツールで取り込んだ任意のページ要素

今回は参考にしたいロボットアームの画像を1枚放り込みます。

そのうえで以下のプロンプトを追加で送ります。

現在ページ内に置かれているロボットアームのビジュアルを、
添付したロボットアーム画像の質感とフォルムに寄せてください。

Web Capture ツールを使う場合は、右上の「Capture」アイコンから取り込みたいページを指定して、対象要素をクリックで選びます。
取り込んだ要素は Claude が構造を解析してくれるので、そのまま自分のページに組み込めるのが便利うさよ。

「うさぎの経験では」参考画像は1枚からでも十分効果がありますが、複数枚渡すとClaudeが「共通する雰囲気」を抽出してくれて、特定のサイトの劣化コピーになりにくくなります。

Step 4 対話で細部を磨く

ここからは細部の作り込みフェーズうさよ。
スクロール演出を磨くプロンプトの具体例はこちらです。

ヒーローの文字アニメーションを以下に調整してください。

- 文字は1.1秒かけて1文字ずつ出現
- イージングは cubic-bezier(.22,.8,.3,1)
- 開始時は translateY(0.35em) と opacity 0 と blur(8px) の3つを同時にかける
- 出現後は背面の3Dロボットがゆっくり右に5度傾いてアイドルアニメに入る

また、セクション切替時に背面の3Dモデルを以下のように動かしてください。

- ヒーロー solid 背景
- スペック stage で3Dが透けて見える
- ダンスデモ stage で3Dが画面中央でジャンプ
- CTA solid に戻る

このように具体的な数値とCSSキーワードを混ぜたプロンプトを投げると、Claude Designはほぼ意図通りのコードを当ててくれます。逆に「もう少し派手に」だけだと方向がブレやすいので、数値で指示しましょう。

カスタムスライダーを併用すると、余白や色のトーンを連続値で動かしながら微調整できます。
カスタムスライダーの追加もチャットで依頼できるうさよ。

このヒーローセクションに対して、以下の軸でカスタムスライダーを追加してください。

- 余白の広さ
- 文字の大きさ
- スクロール演出の速度
- 背景3Dの存在感

修正の繰り返しはチャットの履歴にすべて残るので、気に入らなければ任意のバージョンに戻せます。
大型のリビルドを依頼すると5から10分かかることがあるので、生成完了までキャンバスから離れずに待ちましょう。

Step 5 エクスポートと Claude Code ハンドオフ

仕上がったら最後に書き出しと実装ハンドオフを行います。
ハンドオフ手順はキャンバス右上のエクスポートメニューからClaude Codeへの引き渡しを選ぶだけ。
すると新しいClaude Codeのセッションが開き、ハンドオフバンドル (構造を表すJSON、コンポーネント単位のコード、フォントとカラーパレットの定義、インタラクション仕様のテキスト) が自動で読み込まれた状態でスタートします。

デザインから実装まで一気通貫で繋がるのがClaude Designの最大の強みです。

完成ショーケース

今回作ったランディングページの主な見どころを並べてみます。

• 真っ黒な背景に文字がブラー解除でふわっと現れるヒーロー
• 背面に固定された3Dロボットがスクロールで回転、セクション境界で透ける演出
• Bento Grid 風の機能紹介カードと音楽ビジュアライザ風のダンスデモ
• 出展情報を伝えるCTAブロック

完成したランディングページは以下のURLで実際に動いている様子を確認できます。

完成ページのデモを見る (Wearable-SO-ARM)

所要時間はざっくり以下のとおりうさよ。

• Step 1 プロジェクト作成 5分
• Step 2 初回プロンプト 10分 (プロンプト書き含む)
• Step 3 マルチモーダル入力 10分
• Step 4 対話で磨き込み 30分
• Step 5 エクスポートとハンドオフ 5分

合計1時間ちょっとで、ここまで作り込めるのは正直驚きました。
従来ならデザイナーと数日かけて作るボリュームうさよ。

まとめ

• Claude Designはランディングページに限らず、プロトタイプ、スライド、3Dシーンまで作れる汎用ツール
• 主要機能はテキスト生成、デザインシステム自動構築、マルチモーダル入力、対話編集、エクスポートの5つ
• ハンズオンではスクロール演出付きランディングページを題材に5ステップで完成
• 最後はClaude Codeへハンドオフして、デザインから実装まで一気通貫

Claude Designの強みを3行でまとめるとこうなるうさよ。

• 会話だけで完成度の高いビジュアル成果物が作れる
• 自社デザインシステムを自動吸収して一貫性を保てる
• Claude Codeへの実装ハンドオフで絵に描いた餅で終わらない

「お疲れ様でした！ここまで読んでくれてありがとううさぎ」
まずは https://claude.ai/design にアクセスして、自分のサービスや作品でぜひ試してみてください。
次回はClaude Designでプレゼン資料を作る回もお届け予定うさよ。