Claude DesignでLPデザインを検証：プロンプトで品質はどこまで変わるか

Claude Designは、最初から完成形を出す道具ではなかった

Claude Designを使って、株式会社織翔のLPデザイン案を作る検証をしました。目的は、AIにどこまでWebサイトの見た目を任せられるのか、そしてプロンプトの与え方でどれくらい出力が変わるのかを見ることです。

最初に与えた指示は、かなり抽象的でした。会社の事業内容や、社内ITの困りごとを整理するLPにしたい、という方向性は伝えたものの、参考にしてほしいデザインの水準や、画面全体のトーンは強く指定していませんでした。

その結果、初回案は情報の整理としては成立している一方で、見た目の印象はやや弱くなりました。余白は広く、和風の落ち着きはありますが、現代的なITサービスのLPとしては少し静かすぎる印象です。

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

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

この段階で感じたのは、Claude Designが弱いというより、こちらが**「どの品質を目指すのか」を十分に渡せていなかった**ということです。AIは指示された範囲で形にしてくれますが、抽象的な指示だけでは、平均的で無難な方向に寄りやすくなります。

参考サイトを指定しただけで、方向性が大きく変わった

次に、再現プロンプトとして「HTML5 UP のサイトを参考にして」と方向性を加えました。細かいCSS指定や、1セクションずつのレイアウト指示を増やしたわけではありません。変えたのは、目指すデザインの基準を具体化したことです。

すると、出力は大きく変わりました。ファーストビューの情報密度、CTAボタンの見せ方、濃色セクションの使い方、カードの整理、アイコンやイラストの扱いが一気に現代的になりました。初回案の「落ち着いた資料」のような印象から、問い合わせを促すLPらしい印象に変わっています。

変化が大きかったポイント

特に変化が分かりやすかったのは、次の4点です。

• ファーストビューで、何のサービスかがすぐ伝わるようになった
• CTAボタンと問い合わせ導線が目立つようになった
• セクションごとに背景色やカードを使い、読み進めるリズムが生まれた
• 「AI」「DX」「社内IT支援」というテーマが、視覚要素と一緒に伝わるようになった

初回案は、文章を読むと内容は分かります。しかしLPでは、読まれる前に**「読む気になるか」が重要**です。改善案では、見出しの強弱、数字の見せ方、濃淡の切り替えによって、画面をスクロールする理由が作られていました。

プロンプトで指定すべきなのは、作業内容だけではない

今回の検証で分かったのは、AIにWebデザインを依頼するときは「LPを作って」「サービス紹介ページを作って」だけでは足りないということです。

もちろん、事業内容や掲載したい情報は必要です。ただ、それだけだとAIは情報を整える方向には動けても、見た目の水準や温度感までは推測になります。そこで、参考サイトを指定すると、AIはレイアウト密度、余白、配色、CTAの強さ、コンポーネントの雰囲気をまとめて掴みやすくなります。

プロンプトでは、次のような情報を渡すと出力が安定しやすくなります。

• 参考にしてほしいサイトやデザインの方向性
• 避けたい雰囲気
• 誰に向けたページなのか
• 最終的に取ってほしい行動
• 信頼感、先進性、親しみやすさなど、優先したい印象

Claude Designの性能は、プロンプトで引き出し方が変わる

Claude Designは、抽象的な依頼でも一定の形にまとめてくれます。そこは十分に便利です。ただし、事業で使うLPやコーポレートサイトのたたき台として使うなら、最初から参考水準を渡した方が結果は良くなります。

今回のように、同じテーマでも参考サイトを指定するだけで、出力の印象は大きく変わりました。これは、AIが単に文章をHTMLにしているのではなく、与えられた文脈からデザインの方向性を組み立てていることを示しています。

一方で、最後の調整は人間の判断が必要です。会社のブランドに合っているか、問い合わせ導線が強すぎないか、実装しやすい構成か、スマホ表示で読みやすいか。このあたりは、AIの出力をそのまま採用するのではなく、目的に合わせて整える必要があります。

まとめ

Claude Designの検証では、プロンプトの具体度によってLPの品質が大きく変わることが分かりました。

抽象的なプロンプトでは、情報は整理されるものの、印象は無難になりやすいです。一方で、参考サイトを指定して目指す方向性を渡すと、余白、構成、CTA、カード表現まで一気に変わります。

AIデザイン生成を実務で使うなら、最初のプロンプトで完成度を決めようとするより、参考水準を渡してから改善を重ねる方が現実的です。AIに任せる部分と、人間が判断する部分を分けることで、短時間でも実用に近いたたき台を作りやすくなります。