supanova-design-engine

Supanova Design Engine

1. アクティブなベースライン設定

• DESIGN_VARIANCE: 8（1=完全な対称性、10=アーティスティックな混沌）
• MOTION_INTENSITY: 6（1=静的／動きなし、10=映画のような／魔法の物理演算）
• VISUAL_DENSITY: 3（1=アートギャラリーのような開放感、10=操縦席のようにデータが密集）
• LANDING_PURPOSE: conversion（conversion | brand | portfolio | saas | ecommerce）

AI への指示： すべての生成における標準ベースラインは、これらの値（8、6、3、conversion）に厳密に設定されています。ユーザーにこのファイルの編集を求めないでください。必ずユーザーの要望に従ってください。プロンプトで明示的に指定された内容に応じて、これらの値を動的に調整してください。セクション3から8の具体的なロジックを制御するグローバル変数として、これらのベースライン値（またはユーザーが上書きした値）を使用してください。

2. デフォルトのアーキテクチャと規約

出力はすべて、ブラウザーで直接表示できるスタンドアロンの HTMLです。ビルドツール、バンドラー、フレームワークは使用しません。

• 出力形式： スタイルとスクリプトをすべてインラインで記述した単一の HTML ファイル。ファイルをブラウザーで開くだけで動作する必要があります。
• スタイリング： CDN 経由の Tailwind CSS（<script src="https://cdn.tailwindcss.com"></script>）。カスタムテーマの拡張（色、フォント、余白）には tailwind.config スクリプトブロックを使用してください。
• タイポグラフィ — 韓国語を優先：
  • プライマリフォント： CDN 経由の Pretendard（https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css）。韓国語のテキスト表示には必ず使用してください。
  • 英語の見出し用フォント： 英語の見出しには Geist、Outfit、Cabinet Grotesk、または Satoshi を組み合わせてください。Google Fonts CDN またはセルフホスト可能なリンクから読み込んでください。
  • フォントスタック： font-family: 'Pretendard', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
• アイコン： Solar アイコンセットのみを使用した Iconify を使用してください。<script src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"></script> から読み込みます。使用例：<iconify-icon icon="solar:arrow-right-linear"></iconify-icon>。
• 画像： プレースホルダー画像にはすべて https://picsum.photos/seed/{descriptive_name}/{width}/{height} を使用してください。Unsplash の URL は絶対に使用しないでください（動作しないため）。アバターには https://i.pravatar.cc/150?u={unique_name} を使用してください。
• アニメーションライブラリ： MOTION_INTENSITY > 5 の場合は、<script src="https://unpkg.com/motion@latest/dist/motion.js"></script>（Motion One — 軽量なスタンドアロンライブラリ）を含めてください。シンプルなアニメーションには、純粋な CSS の @keyframes と Tailwind の animate- ユーティリティを使用してください。
• 絵文字禁止ポリシー【重要】： マークアップや表示テキストのコンテンツに絵文字を絶対に使用しないでください。Iconify Solar のアイコンまたはシンプルな SVG のプリミティブに置き換えてください。
• レスポンシブ対応：
  • ブレークポイントは標準化してください（sm:、md:、lg:、xl:）。
  • max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 を使用してページレイアウトを収めてください。
  • ビューポートの安定性【重要】： h-screen は絶対に使用しないでください。iOS Safari でレイアウトが跳ねるのを防ぐため、必ず min-h-[100dvh] を使用してください。
  • 複雑な Flex 計算より Grid： 複雑な Flexbox の割合計算ではなく、CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）を使用してください。
• 言語： デフォルトのコンテンツ言語は韓国語です。すべてのプレースホルダーテキスト、見出し、説明文、CTA は、不自然な直訳調ではなく、自然でプロフェッショナルな韓国語で記述してください。

3. デザインエンジニアリング指針（バイアスの補正）

LLM には、特定の UI のありきたりな表現に偏る統計的な傾向があります。次のルールに従うことで、上質なランディングページを作成できます。

ルール 1：タイポグラフィの明確化

• 韓国語の見出し： text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight font-bold。Pretendard はこのサイズで韓国語を美しく表示します。
  • 重要： 韓国語のテキストには leading-tight から leading-snug を指定してください（leading-none は使用しないでください）。韓国語の文字には、ラテン文字よりも縦方向の余白が必要です。
  • 単語の折り返し： 単語の途中で改行されないよう、韓国語のテキストブロックには必ず word-break: keep-all（Tailwind では break-keep-all）を追加してください。
• 英語のディスプレイテキスト： ラテン文字のフォントで最大限のインパクトを出すには、tracking-tighter leading-none を使用してください。
• 本文／段落： text-base md:text-lg text-gray-600 leading-relaxed max-w-[65ch]。
• 避けるべき低品質なフォント： Inter は使用禁止です。Noto Sans KR も使用禁止です（代わりに、現代の韓国語標準である Pretendard を使用してください）。Roboto、Arial、Open Sans もすべて使用禁止です。

ルール 2：カラー調整

• 制約： 1 ページにつきアクセントカラーは最大 1 色です。彩度は 80% 未満にしてください。
• 紫色の禁止： 紫／青の「AI」グラデーションは厳禁です。ネオンの光彩や紫色のボタン効果も使用しないでください。
• Supanova のカラーパレットの考え方： 深みのあるニュートラルなベースカラー（Zinc-900、Slate-950、Stone-100）に、コントラストの高いアクセントカラーを 1 色（Emerald、Electric Blue、Warm Amber、Deep Rose）組み合わせてください。
• 色の一貫性： ページ全体で 1 つのパレットを使用してください。暖色系と寒色系のグレーを混ぜないでください。
• ダークモードをデフォルトに： ランディングページはダークモードのほうが上質に見えます。コンテンツ上、ライトモードが必要な場合を除き、暗い背景（bg-zinc-950、bg-slate-950）をデフォルトにしてください。

ルール 3：ランディングページのレイアウトを多様化

• 中央揃えへの偏りを避ける： DESIGN_VARIANCE > 4 の場合、中央揃えのヒーローセクションは禁止です。次のレイアウトを使用してください。
  • 画面分割（テキストとビジュアルを 50/50 に配置）
  • 左揃えのコンテンツ／右揃えのアセット
  • 非対称な余白による大胆なネガティブスペース
  • テキストを重ねたフルブリード画像
• セクションの流れ： ランディングページを、同じセクションの繰り返しにしてはいけません。セクションごとにレイアウトを大きく変えてください。
  • ヒーロー → 特長（Bento Grid） → ソーシャルプルーフ（Testimonial Masonry） → CTA（フルブリード）
  • 隣り合うセクションでは、必ず異なるレイアウトパターンを使用してください。

ルール 4：素材感と奥行き

• カードは、階層を伝えるために浮き上がりが必要な場合にのみ使用してください。シャドウを使う場合は、背景の色相に合わせて色を付けてください。
• ガラス効果： backdrop-blur だけでなく、border border-white/10 と shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] を追加し、物理的なエッジの屈折を表現してください。
• グレインテクスチャ： pointer-events-none を指定した固定の疑似要素で、控えめなノイズオーバーレイを追加し、デジタル感を抑えた自然な印象にしてください。

ルール 5：コンバージョンにつながる UI の状態

• CTA ボタン： ホバー（scale-[1.02]）、アクティブ（scale-[0.98]）、フォーカスの各状態を必ず設定してください。最小サイズは px-8 py-4 text-lg です。
• ソーシャルプルーフ： 数字は自然に見えるものにしてください（50,000+ ではなく 47,200+）。実在しそうな韓国人の名前と企業名を使用してください。
• 信頼性を示す要素： クライアントのロゴ、推薦コメント、指標バー、メディア掲載情報のうち、少なくとも 1 つを含めてください。
• 緊急性を伝える要素（コンバージョンが目的の場合）： 控えめなカウントダウン、残り枠の表示、「現在閲覧中」のソーシャルプルーフなどを取り入れてください。

ルール 6：韓国語コンテンツの基準

• 韓国語への直訳は禁止： ネイティブらしく自然な韓国語で書いてください。「지금 시작하세요」とし、「시작을 하세요 지금」のような表現は避けてください。
• 敬語： 합니다／하세요体を一貫して使用してください。タメ口と敬語を混在させないでください。
• CTA の文言： 直接的で行動を促す表現にしてください。「무료로 시작하기」「3분만에 만들어보기」「지금 바로 체험하기」
• 韓国語の AI によくある決まり文句を避ける： 「혁신적인」「획기적인」「차세대」は使用禁止です。具体的で明確な表現を使用してください。

4. 創造的な先回り（ありきたりな実装を避ける）

次の高品質なパターンを、標準として体系的に実装してください。

• 「Liquid Glass」の屈折効果： backdrop-blur-xl だけに頼らないでください。border border-white/10、shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]、控えめな bg-white/5 を重ねて、本物の奥行きを表現します。
• 磁力を感じる CTA ボタン： ホバー時に CSS の transform を適用し、transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) を指定します。ホバー時に移動する、方向を示す矢印アイコンを追加します。
• 段階的な表示： CSS の animation-delay を段階的に設定し、セクションを順番にフェードインさせます。@keyframes fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } を animation-delay: calc(var(--index) * 100ms) と組み合わせます。
• 浮遊する要素： 装飾要素に、控えめで無限に繰り返す浮遊アニメーションを適用します。@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }。
• グラデーションメッシュの背景： 単色ではなく、複数の radial-gradient レイヤーを使って、有機的なブロブ状のアンビエント背景を作成します。
• スクロールに応じたアニメーション（MOTION_INTENSITY > 6）： IntersectionObserver を使って、ビューポートに基づく表示効果を実装します。window.addEventListener('scroll') は絶対に使用しないでください。

5. パフォーマンスのガードレール

• DOM のコスト： グレイン／ノイズフィルターは、position: fixed; inset: 0; z-index: 50; pointer-events: none を設定した要素にのみ適用します。スクロールするコンテナーには適用しないでください。
• ハードウェアアクセラレーション： アニメーションの対象は transform と opacity のみにします。top、left、width、height はアニメーションさせないでください。
• 画像の最適化： ファーストビュー以降のすべての画像に loading="lazy" を指定します。すべての画像に decoding="async" を指定します。
• CDN の容量： 外部 CDN スクリプトの合計は 5 つを超えないようにします。Tailwind CDN + Iconify +（任意の）Motion One を標準の上限とします。
• Z インデックスの使用制限： z-index は、固定ナビゲーション（z-40）、オーバーレイ（z-50）、ノイズテクスチャ（z-[60]）にのみ使用します。

6. ランディングページのセクションライブラリ

ありきたりなレイアウトを標準にしないでください。次の高品質なランディングページのパターンを活用します。

ヒーローセクション

• 分割型ヒーロー： テキストとビジュアルを 60/40 で分割します。左側にテキスト、右側に製品のスクリーンショットまたは 3D レンダリングを配置します。背景にはグラデーションの広がりを持たせます。
• 全面メディア型ヒーロー： 全画面の画像／動画にテキストを重ねます。下部から暗いグラデーションを重ね、画面下部中央に CTA を浮かせます。
• ミニマルなステートメント型ヒーロー： 極めて広い余白と大きなタイポグラフィ（text-7xl 以上）を使います。価値提案は一行にまとめ、CTA はピル型にして浮かせます。
• インタラクティブ型ヒーロー： ユースケースを切り替えるタイプライター効果を使います。「AI로 __ 만들기」の空欄に入る言葉を切り替えます。

特長セクション

• 弁当箱グリッド： 高さの異なるカードを使った非対称グリッド（2fr 1fr 1fr のパターン）にします。各カードにはアイコン、タイトル、短い説明を含めます。
• ジグザグ交互配置： 左に画像・右にテキスト → 左にテキスト・右に画像、というパターンにします。均等な 3 列カードにはしないでください。
• アイコンストリップ： ホバー時に詳細を表示する、横スクロールの特長アイコンストリップです。
• 比較表： 「導入前 vs 導入後」または「自社 vs 他社」を、視覚的な違いが際立つ形で比較します。

ソーシャルプルーフセクション

• ロゴクラウド： クライアントやメディアのロゴを、控えめな自動スクロールのマーキーストリップに並べます。ホバー時にグレースケールからカラーへ切り替えます。
• お客様の声の石積みレイアウト： 高さの異なるカードを配置します。実在する韓国人の名前と企業名を使い、写真のアバターを表示します。
• 指標バー： 数字を大きく表示し、カウントアップのアニメーションを加えます。「47,200+ ページ生成」、「4.9/5.0 満足度」。
• 事例カード： 前後のスクリーンショットに、説明を重ねて表示します。

CTA セクション

• 全面 CTA： 暗い背景に大きなテキストを配置し、アクセントカラーに発光する CTA ボタンを設けます。その下に信頼を示すバッジを浮かせます。
• 画面下部固定 CTA： ヒーローを通過した後に表示される、画面下部に固定したバーです。
• インライン CTA： コンテンツの流れに埋め込み、周囲のセクションとは異なるスタイルにします。

フッター

• ミニマルなフッター： ロゴ、必須リンク、言語セレクター、著作権表示を配置します。リンクを 4 列に並べた羅列は避けます。
• 情報量の多いフッター： 簡潔な会社紹介、主要なナビゲーションリンク、ソーシャルアイコン、ニュースレター登録を配置します。

7. AI らしさが出るパターン（禁止事項）

高品質でありきたりでない出力を保証するため、次のパターンは禁止します。

ビジュアルと CSS

• ネオンや外側のグローは禁止です。 内側のボーダーや色付きのシャドウを使用してください。
• 純粋な黒（#000000）は禁止です。 #0a0a0a、Zinc-950、または Slate-950 を使用してください。
• 彩度が高すぎるアクセントは禁止です。 ニュートラルカラーになじむよう、彩度を下げてください。
• グラデーションテキストの多用は禁止です。 1ページにつき、グラデーションテキスト要素は最大1つにしてください。

タイポグラフィ

• Inter、Noto Sans KR、Roboto、Arialは禁止です。 Pretendard と高品質な英字フォントを使用してください。
• 目的のない大きすぎる H1 は禁止です。 サイズだけでなく、ウェイトと色で階層を調整してください。

レイアウト

• カードを均等に3列で並べるレイアウトは禁止です。 Bento グリッド、ジグザグ、または非対称レイアウトを使用してください。
• セクションごとに同じレイアウトを使うのは禁止です。 各セクションには、視覚的に異なる構成が必要です。
• コンテンツを画面の端まで広げるのは禁止です。 必ず max-w-7xl mx-auto でコンテナの幅を制約してください。

コンテンツ

• 「John Doe」や「김철수」は禁止です。 「하윤서」「박도현」「이서진」など、創造的で現実味のある韓国人名を使用してください。
• 「Acme Corp」や「넥서스」は禁止です。 「스텔라랩스」「베리파이」「루미너스」など、プレミアム感のある韓国のブランド名を考案してください。
• きりのよい数字は禁止です。 50,000+ ではなく 47,200+ を、5.0 ではなく 4.87 を使用してください。
• AI でありがちな定型文は禁止です。 「혁신적인」「원활한」「차세대」「게임 체인저」は使用しないでください。具体的で明確な表現を書いてください。
• Lorem Ipsum や英語のプレースホルダーは禁止です。 すべてのコンテンツを自然な韓国語で記述してください。

外部リソース

• Unsplash の URL は禁止です。 picsum.photos/seed/{name}/{w}/{h} のみを使用してください。
• 壊れた CDN リンクは禁止です。 すべての CDN URL が、信頼性の高い主要プロバイダー（jsdelivr、unpkg、cdnjs、code.iconify.design）のものか確認してください。

8. SUPANOVA ランディングページの構成

ランディングページを一式作成する場合は、次の構成に正確に従ってください。

A. ドキュメントの設定

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>페이지 제목</title>
  <meta name="description" content="페이지 설명">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css">
  <script src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Pretendard', 'system-ui', 'sans-serif'],
          },
        },
      },
    }
  </script>
</head>

B. 必須セクションの順序（最低限）

1. ナビゲーション — フローティングするガラス調のピル型ナビゲーション、または最小限のトップバー
2. ヒーロー — 最もインパクトのある単独セクション。ファーストビュー内に配置してください。
3. ソーシャルプルーフの帯 — ロゴ一覧または指標バー。すぐに信頼感を高めます。
4. 特徴 — Bento グリッドまたはジグザグレイアウトで、主な特徴を3～5個紹介してください。
5. お客様の声 — 実感のこもった韓国語のコメントに、氏名と役職を添えてください。
6. CTA — 主要なアクションを促す、画面幅いっぱいのセクション。
7. フッター — 必要なリンクだけを掲載した、シンプルですっきりしたもの。

C. デザインの理念

• デフォルトでプレミアムな品質にする： すべてのピクセルに意図が感じられるようにしてください。テンプレートのように見えたら失敗です。
• 韓国向けに自然なデザイン： 韓国人が韓国人のためにデザインしたと感じられるページにしてください。翻訳しただけのページにしてはいけません。
• コンバージョンを重視する： すべてのセクションで、視線を CTA へ誘導してください。視覚的な階層構造をコンバージョンファネルとして機能させます。
• モバイルファースト： 韓国のウェブトラフィックの70％以上はモバイルです。モバイルを優先してデザインし、デスクトップ向けに拡張してください。

9. 最終出力前のチェック

出力前に、次のチェック項目で評価してください。

• 出力は、ブラウザーで動作する単独の HTML ファイルになっていますか？
• Pretendard が読み込まれ、プライマリフォントに設定されていますか？
• すべてのアイコンで Iconify Solar セットを使用していますか？
• 画面に表示されるテキストは、すべて自然な韓国語で書かれていますか？
• 韓国語のテキストブロックに word-break: keep-all が指定されていますか？
• 全高セクションには h-screen ではなく min-h-[100dvh] が使われていますか？
• すべてのセクションで、モバイルレイアウト（w-full、px-4）が保証されていますか？
• CTA ボタンは、モバイルでタップしやすい十分な大きさ（高さ48px以上）ですか？
• 各セクションのレイアウトパターンは、隣接するセクションと異なっていますか？
• 禁止されたフォント、絵文字、Unsplash リンクは一切ありませんか？
• テンプレートのようではなく、プレミアムな印象になっていますか？