Claude Designで作ったLPを比較｜既存2案の観察とプロンプト例

Claude Designで作ったLPの2案を見比べる

株式会社織翔のLPをClaude Designで作った際の、初回案と改善案を紹介します。参考サイトとしてHTML5 UPを挙げた改善案が残っていますが、当時の原文プロンプトやその他の生成条件は保存されていません。ここで示せるのは2画像を見た主観的な違いであり、参考サイト指定による効果や問い合わせ増加の実績ではありません。

抽象プロンプトで出た初回案

初回案は、文字組みや余白に和風の雰囲気があり、落ち着いた印象になりました。これは悪い出力ではありません。ただ、問い合わせにつなげるLPとして見ると、CTAやセクションごとのメリハリが弱く、サービスの勢いも伝わりにくい状態でした。

参考水準を指定した改善案

改善案では「HTML5 UPのサイトを参考にする」という方向性を加えました。初回案と比べると、CTAボタン、カード、濃色セクションの使い方に違いが見られます。

画像から読み取った違い

• 初回案は余白と文字を中心にした、落ち着いた構成に見える
• 改善案はCTAボタンと濃色セクションの区切りが目立つ
• 改善案はカードと図を使い、サービスの説明をまとまりごとに見せている

どちらが目的に合うかは、対象読者と取ってほしい行動に照らして判断します。画像だけでは、クリックしやすさ、キーボード操作、スマートフォンでの使いやすさは確認できません。

次に試すプロンプト例

次は、対象読者・掲載内容・参考水準を伝えるための例です。上の2画像を生成した原文ではなく、この例での生成・評価も未実施です。 参考水準の影響を比較する場合は、同じ環境で参照の指定だけを変え、生成物を保存して見比べます。

Claude Designで、株式会社織翔のサービス紹介LPを1ページ作成してください。

【固定条件】
- 対象読者: 社内ITや既存システムの保守・改善に課題がある中小企業の担当者
- 掲載情報: 会社概要、社内IT支援、DX・AI活用支援、Webシステム開発・改修、相談の流れ
- CTA: 「相談する」を主CTA、「サービス内容を見る」を副CTAとして表示
- 画面幅: デスクトップ1440pxとモバイル390pxの両方で確認できるレスポンシブ構成
- アクセシビリティ: 見出し順、キーボード操作、フォーカス表示、文字と背景のコントラストを考慮
- 出力: 1ページのHTMLまたはReact Artifact。掲載情報の追加・削除はしない

【比較ごとに変更する変数】
- デザイン参照: ［条件A: 参照なし／条件B: HTML5 UPを参考水準として指定］

まず情報階層を整理し、その後に画面を作成してください。

見比べる観点は、情報の順序、CTAの見つけやすさ、ブランドに合う印象です。実際のページでは、モバイル表示、キーボード操作、フォーカス表示、コントラストも確認します。Anthropicのプロンプト改善ガイドも、成功条件と評価方法を先に決めることを案内しています。

HTMLやReactの成果物を確認・編集する操作は、Artifactsガイドを参照してください。

中小企業のDX・AI業務改善では、画面を作る前に業務課題と導入範囲を整理する考え方を解説しています。デザイン案を実装・検証する工程で使える候補は、Codexで使えるSkill／Plugin 9選で確認できます。

参照元

確認日: 2026年8月27日

• Anthropic「Prompt engineering overview」
• Anthropic「What are artifacts and how do I use them?」