AIにWebサイトのデザインを依頼すると、「いかにもAIが作った感」のあるダサいデザインになることがありますよね。
プロンプトを全く別のものに変えてみても、似たり寄ったりの配色とか配置とかが出てきたりして、なかなか言うとおりにしてくれなくてイライラすることもしばしば。
今回は、そういった悩みを解決できるプロンプトがXにて話題になっていたので、私も試してみることにしました。
紹介するプロンプトはAnthropics公式GitHubで公開されており、だれでもコピペ可能です。
検証1: WebGLサイトで比較
まずはWebGLを使用したサイト制作で比較を行います。
あなたはフロントエンド開発者です。出力は必ず「1つのHTMLファイル」で完結させてください。 外部ライブラリはCDN経由で読み込み可。テーマは「Claude Sonnet 4.5の紹介」。
要求事項：
1. モダンで明るい配色、洗練された美しいUI。
2. 3D要素を2つ以上含める。Three.js/WebGLで実装。
3. 3D要素は、メインビジュアルの90vhに設定。ダイナミックな印象を与えるものを制作
4. 斬新でインパクトのあるデザイン
5. 出力はそのままブラウザで動く完全なHTMLファイルのみを返してください。
6. 使用するCDNのURLは__https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js__
サンプルのサイトはスマホ非対応のため、表示倍率0.5x推奨です。
デザインプロンプト無し
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
デザインプロンプト有り
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
デザインプロンプトを追加した方は、確かによりモダンな印象を受けました。ただし、Claudeが生成しがちなカードデザインなどの基本的な構造はそのまま残っていました。
全体的なアプローチも似通っており、配色を変えただけのような印象です。
検証2: 一般的なランディングページの制作
次に、WebGLを使用しない一般的なLPを作成してみました。プロンプトはChatGPTに作成してもらい、要件はそこそこ詳細に記載しています。
【目的】
スタートアップ向けの、めちゃくちゃモダンでオシャレなLPデザインを生成する。
【全体トーン】
・圧倒的に洗練された雰囲気
・余白を大胆に使用
・直線と曲線をバランスよく配置
・柔らかいグラデーションを多用
・ミニマルだが単調ではない構成
・ブランド感の強いアートディレクション
【フォント】
・サンセリフ主体
・極細〜中太のウエイトを使い分け、視線誘導を明確に
・大見出しは大きく余白をとる
【構成】
1. ファーストビュー
・強いキャッチコピー
・サブコピーは短め
・背景に美しい抽象系グラフィック
・行動ボタンは1つだけ、極めてシンプル
2. 特徴セクション
・カード型ブロック
・アイコンは線の細いミニマルなもの
・テキストは短く、視認性重視
3. 実績・信頼セクション
・ロゴ群または数値実績
・背景は薄いグラデーションで段差をつける
4. ビジュアルセクション
・大きなモックアップを1つ
・斜めの角度で動きを出す
5. CTA（行動導線）
・白背景に太字テキスト
・シンプルで強い訴求
【仕上げ要件】
・余白と階層を正確にコントロール
・スマホでも美しく見える縦長構成
・とにかく高級感、ミニマル、洗練の3点を外さない
・1枚のhtmlファイルで生成
サンプルのサイトはスマホ非対応のため、表示倍率0.5x推奨です。
デザインプロンプト無し
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
デザインプロンプト有り
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
この検証では、明確な違いが現れました。
デザインプロンプト無しの出力は、まさに「AIが作った感」満載のやぼったくてダサいデザインになってしまいました。
デザインプロンプト有りでは、やぼったい印象はだいぶマシになりましたが、ところどころでClaudeのクセが出てしまっています。特に、謎に青～紫のグラデーションを多用する傾向などが見られました。
それでも、デザインプロンプトの効果は明らかで、視覚的な洗練度はかなり良くなっていますね。
検証3: 要件を省いた英語プロンプトでの比較
今回は先ほどのプロンプトから要件をかなり省き、英語のプロンプトで試してみました。
要件を省いた方が、それぞれの違いが出やすいのではないかという仮説です。
Purpose:
Generate a highly modern and stylish landing page design tailored for startups.
Overall Tone:
- An overwhelmingly sophisticated and refined atmosphere.
- Bold and intentional use of negative space.
- Minimalistic yet never monotonous structure.
- Strong art direction with a clear sense of brand identity.
Final Requirements:
- Precise control of spacing and visual hierarchy.
- Must consistently maintain the three core qualities: luxury, minimalism, and sophistication.
- The output must be generated as a single HTML file.
サンプルのサイトはスマホ非対応のため、表示倍率0.5x推奨です。
デザインプロンプト無し
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
デザインプロンプト有り
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
結果的には、両者とも似たような見た目になりました。これはプロンプトに対する再現性の高さを示しているのかもしれないので、一概に悪いこととは言えないでしょう。
肝心のデザインについては、デザインプロンプト無しでもある程度かっこいいものができました。(そもそも英語オンリーのページってカッコいいですよね)
しかし、フォント選びやメリハリが適当で、空白セクションも「ただの空白」という印象で、意味のある余白としては機能していない感じ。
一方、デザインプロンプト有りでは、タイトルとコンテンツで明確にフォントを分けており、全体的なビジュアルはより高級感があって良い仕上がりになりました。
香水の画像などを埋め込めば、そのままリリースできそうなクオリティです。
まとめ
今回の検証を通じて、デザインプロンプトの効果を実感することができました。
ただし、AIの「クセ」は完全には消えないため、最終的には人の手による調整が必要になる場面もあるでしょう。
それでも、デザインプロンプトを活用することで、AIが生成するデザインの質を大きく向上させることができます。
特に1枚のLPだとかシンプルなHTMLサイトの場合はかなり有用で、Claude以外にもChatGPTやGeminiでも応用できるプロンプトなので、ぜひ試してみてください。