Claude Designの使い方｜LPのたたき台を作って、HTMLで書き出すまでの手順と注意

Claude DesignでLPを作るには、「Artifacts」で「Design」を選び、商品写真や確定原稿を添付して、読者・目的・掲載内容を指示します。 会話の横のキャンバスで初稿を確認・修正し、右上の「Export」から「Export as standalone HTML」を選ぶと、HTMLを書き出せます。 デザインの完成と自社サイトで公開できる状態は別なので、書き出した後にスマホ表示や購入・問い合わせの動作を確認します。

Claude Designの対象プランと利用条件

現行の料金表と利用ガイドはFreeを含む全プランへの対応を案内しています。一方、公開当初の発表や製品ページのFAQには有料プラン向けという記述もあるため、契約前に現行の条件と自社アカウントでの利用可否を確認してください。公式料金表

まず構成と見た目を試すなら、Freeでたたき台を作り、書き出した実物を確認する進め方が考えられます。Team・Enterpriseは管理者設定も確認し、Design本体とデザインシステムの利用条件を分けて判断します。

Claude Designの使用量上限と制限

Claude・Claude Codeと利用枠を共有し、長い会話や多数の修正は使用量に影響します。固定のLP本数・修正回数は公開情報では確認できません。

上限に達した場合は、リセットを待つか、対応する追加使用量の仕組みを利用します。大きく方向を変える前に採用案を保存し、修正後は反映箇所を確認しましょう。

LP制作前に準備する原稿と商品素材

制作前には、読者・目的・確定した商品情報をそろえ、AIに事実を推測させない準備を進めます。

価格、レビュー、導入実績、認証、他社ロゴは、確認できる情報だけを原稿として渡してください。

LPのたたき台を作る手順

制作の入口は次の2つです。操作名は公式英語ヘルプの表記に合わせています。

1. どちらかの入口からDesignを始めます

新しく作るLPの目的を伝えます。

1. 制作に使う資料を添付します

商品写真、会社案内、既存ページのスクリーンショットなどを渡し、使ってよい素材を明示します。

1. 読者・目的・掲載内容を指示します

日本語で依頼し、スマートフォンへの対応や、不明な情報を創作しない条件も合わせて伝えます。

1. 会話の横のキャンバスで初稿を確認します

見た目だけで判断せず、商品仕様、価格、掲載順、購入ボタンの案内先を確定原稿と照合します。

1. チャット・コメント・直接編集で修正します

構成全体はチャット、特定箇所はインラインコメント、位置や大きさはキャンバスで調整します。

修正は「もっと目立たせて」より、「冒頭で商品の用途が分かるよう説明を追加して」と、問題と希望を組み合わせましょう。修正後は、指定箇所以外の原稿や配置にも矛盾がないか確認します。公式利用ガイド

Claude Designへの指示文の例

商品説明と写真を添付したうえで、次の指示文をコピーして使えます。自社の商品や目的に合わせて書き換えてください。

自社商品の紹介LPのたたき台を日本語で作ってください。 読者は、初めてこの商品を知る人です。目的は購入ページへの案内です。 添付した商品説明と写真を使い、特徴、使い方、購入前の疑問、購入先を順に説明してください。 添付の会社案内にある色と書体を参考にし、スマートフォンとパソコンの両方で読める構成にしてください。 価格、実績、レビュー、ランキング、認証、他社ロゴは創作しないでください。 不足する情報は「要確認」と表示してください。

修正時には「スマホで商品写真が切れるので全体を見せて」「注意事項を対象の説明の近くへ移して」と、箇所と希望を具体的に伝えます。

デザインシステムに色と書体を読み込ませる意味

デザインシステムは、自社の色・書体・部品のルールを登録し、新しいLPや資料の見た目をそろえる仕組みです。ブランドを継続してそろえる制作で活用します。

ロゴや色番号だけでなく、会社案内や採用済みLPなどの完成例を渡すと、配置や余白の方針も伝えられます。

この機能はPro・Max・Team・Enterprise向けのベータとして案内され、Design本体とは対象プランの条件が異なる場合があります。Figmaファイルなどを参照できても、元のレイヤーや部品構造を完全保持する保証は公開情報では確認できません。デザインシステム設定ガイド

Claude DesignからHTMLを書き出す手順

現在のDesignでは、プロジェクト右上のExportから形式を選び、HTMLやファイル一式を取り出します。

1. 採用する原稿とデザインを確認します

仮画像や「要確認」の表示を整理し、公開担当者へ渡す案を確定してから書き出しへ進みます。

1. 右上の「Export」を開きます

HTMLを取り出す場合は「Export as standalone HTML」、一式なら「Download as .zip」を選びます。

1. 出力をブラウザーと検証環境で確認します

画像・フォントの参照先、リンク、スクリプトの動作を調べ、公開先でも同じように表示できるか試します。

画像・フォントの完全同梱や、自社CMSへの無調整での組み込みを保証する説明は、公開情報では確認できません。問い合わせフォームは、完了表示だけでなく、実際に送信先へ届くところまで公開担当者と確認してください。

書き出したHTMLを公開する前の確認

公開前には、実際のスマホと公開予定の環境で、表示・動作・権利・広告表現を順に確認します。

独立したHTMLページとして置くか、自社CMSに組み込むかをサイト管理担当者と決め、公開先に近い検証環境へ配置します。担当者には確定原稿と素材に加え、公開場所、購入ボタンの遷移先、フォームの送信先、更新方法を渡してください。

出力の権利帰属は、第三者の著作権や商標権を侵害しない保証ではなく、素材ごとの確認が必要です。

公開時は修正前のページへ戻せる状態を残し、公開後のURLでも表示と送信・通知を再確認します。

Googleは検索にモバイル版の内容を使用するため、PCで読める情報がスマホでも欠けていないか確認します。商品画像を背景画像だけで扱うと、Googleの画像検索では検出されない点にも注意してください。

速度はPageSpeed Insightsで調べ、テスト結果と実際の利用者のデータを分けて読み取ってください。

公開直後やアクセスが少ない場合は実際の利用者のデータが表示されないため、テスト結果と区別してください。良好な数値でも検索上位を保証するものではなく、内容の正確さや購入前の疑問への回答も確認します。PageSpeed Insightsの説明

景品表示法では、品質・効果の優良誤認と、価格・取引条件の有利誤認に注意して原稿を点検します。AIが作った「通常価格」は使わず、No.1表示も比較対象・調査対象・調査方法・結果との対応を確認してください。消費者庁の表示規制

イメージ調査を顧客満足度として示す問題は、注記を足すだけでは解消しない場合があり、表示自体の見直しが必要です。送料無料などの重要条件も末尾に小さく置くだけにせず、スマホで追従ボタンに隠れないか確認しましょう。

Canva・FigmaとClaude Designの違い

使い分けは、たたき台を作った後に、誰が修正し、どこで公開・更新するかを基準に考えます。

FigmaにはSitesやMakeもあるため、「デザインだけで公開できない」と製品群全体を説明するのは適切ではありません。Canvaへの受け渡しも、Claudeの契約だけで独自ドメインなどの全機能を使える意味ではありません。

旧Claude Designの保存と移行期限

旧専用サイトの利用者は、2026年12月14日の通常利用終了予定に向けて、必要なプロジェクトを保存します。

1. 旧専用サイトで対象プロジェクトを開きます

「Share」から「Project HTML」へ進み、「Project archive」を選択した状態で「Export」を実行します。

1. 取得したZIPと判断記録を保管します

ZIPには会話やコメントが含まれず、Claude側への移行でも引き継げないため、必要な記録は別途残します。

終了後は原則として読み取り専用となり、新規作成はできず、旧サイトの公開リンクも利用できなくなる予定です。プロジェクト移行は有料プランへ段階的に提供されているため、自社アカウントで移行可否を確認してください。公式移行ガイド

需要の測り方から記事の書き方、公開後の観測までの全体の流れは『AIで記事を約420本書いて、サイトのアクセスを16倍にした方法』で、当社の実際の数字とあわせて紹介しています。

よくある質問（FAQ）

制作前に迷いやすい日本語対応・費用・公開方法・権利・EC機能は、それぞれの条件を分けて確認します。

日本語でLP制作を依頼できますか？

日本語で会話できるため、英語へ翻訳せず、商品情報や制作の希望をそのまま伝えられます。日本語フォントや改行の品質保証とは別なので、書き出した実物をスマホでも確認してください。

無料で何本のLPを作れますか？

Freeも対象ですが、プランごとの固定制作本数や、一律の修正回数は公開情報では確認できません。Claudeの他の作業と利用枠を共有するため、制作途中も使用量を確認しながら進めてください。

共有URLを広告のリンク先にできますか？

現在のArtifacts共有は原則として閲覧者にもClaudeアカウントが必要で、一般客向けLPには制約があります。従来型のlegacy artifactには例外があるため、共有方式と組織の設定を確認してください。

生成したLPを商用利用できますか？

出力の権利帰属だけで判断せず、適用契約とプレビューの条件、素材の利用許諾を確認してください。Consumer Terms第2節には評価提供の非商用条件があり、研究プレビューへの適用関係は公開情報では確認できません。商用向けのService Specific Terms第B節にも、ベータ等は本番利用に適さない場合があるとの条件があります。

決済や在庫管理も完成しますか？

Claude Design単体で決済・在庫・会員機能まで一括提供することは、公開情報では確認できません。購入先へのリンクやフォームの送信先を実際のサービスへ接続し、注文や通知が届くか確認してください。