supanova-redesign-engine

Supanova Redesign Engine

仕組み

既存のランディングページに適用する場合は、次の手順に従います。

1. スキャン — HTML/CSS を読みます。スタイル設定の方法、現在のデザインパターン、フォントスタック、カラーパレット、レイアウト構造を確認します。
2. 診断 — 以下の監査項目を確認します。ありきたりなパターン、弱点、欠けている要素をすべて記録します。
3. 修正 — 対象を絞って改善します。ゼロから書き直さないでください。既存の構造を維持しながら、現在の要素を改善します。

ランディングページのデザイン監査

タイポグラフィ

• ブラウザーのデフォルトフォント、Inter、または Noto Sans KR。 Pretendard（韓国語の標準フォント）＋プレミアムな英語ディスプレイフォント（Geist、Outfit、Cabinet Grotesk、Satoshi）に置き換えます。
• 見出しに存在感がない。 韓国語の見出しには text-4xl md:text-6xl tracking-tight leading-tight font-bold が必要です。インパクトを高めるため、文字間隔を詰めます。
• 韓国語のテキストに word-break: keep-all が設定されていない。 これがないと、韓国語の単語が文字の途中で改行されます。韓国語のテキストブロックすべてに追加します。
• 本文の幅が広すぎる。 最大幅を約65文字に制限します。韓国語を読みやすくするため、line-height を大きくします。
• Regular と Bold のウェイトしかない。 階層に深みを持たせるため、Medium（500）と SemiBold（600）を追加します。
• 数字がプロポーショナルフォントになっている。 指標や価格には font-variant-numeric: tabular-nums または等幅フォントを使います。
• 単独で取り残された単語がある。 見出しに text-wrap: balance を適用して修正します。

色とサーフェス

• 背景が純粋な #000000。 #0a0a0a、#09090b（zinc-950）、または色味を加えた暗色に置き換えます。
• アクセントカラーが鮮やかすぎる。 彩度を80%未満に保ちます。ニュートラルカラーになじむよう、彩度を下げます。
• 複数のアクセントカラーが競合している。 1色だけ選び、それ以外は取り除きます。
• 紫／青の「AI グラデーション」風。 最もよく見られる AI デザインの特徴です。ニュートラルなベースカラーと、意図的に選んだ1色のアクセントに置き換えます。
• ありきたりな box-shadow。 背景色の色相に合わせて影に色味を付けます。青い背景には暗い青の影を使い、rgba(0,0,0,0.3) は使いません。
• 質感がまったくないフラットなデザイン。 目立たないノイズのオーバーレイ、メッシュグラデーションの背景、または微細なパターンを追加します。
• 明るいページの中に唐突に暗いセクションがある。 背景のトーンに一貫性を持たせます。急激に切り替えるのではなく、色合いの違いで変化を付けます。
• 何もないフラットなセクション。 背景画像（ぼかし、マスク処理）、アンビエントグラデーション、またはパターンのオーバーレイを追加します。

レイアウト（ランディングページに特化）

• すべてが中央揃えで左右対称。 マージンに変化を付け、アスペクト比を組み合わせ、分割画面のレイアウトを使って対称性を崩します。
• 機能を3列の同じ大きさのカードで表示している。 最もありきたりな AI のレイアウトです。Bento グリッド、ジグザグに交互配置するレイアウト、または横スクロールに置き換えます。
• すべてのセクションが同じレイアウト。 隣接するセクションでは、必ず異なるパターンを使います。ヒーロー（分割）→ 機能（Bento）→ お客様の声（メイソンリー）→ CTA（全幅）。
• height: 100vh を使用している。 iOS Safari に対応するため、min-height: 100dvh に置き換えます。
• 最大幅のコンテナーがない。 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 を追加します。
• 余白が足りない。 セクションのパディングを2倍にします。ランディングページのセクションでは、最低でも py-20 md:py-32 を指定します。
• カードの高さを無理に揃えている。 高さに変化を付けるか、メイソンリーレイアウトを使います。
• 重なりや奥行きがない。 負のマージン、z-index のレイヤー分け、または要素の重なりを使って視覚的な奥行きを作ります。
• CTA ボタンの存在感が足りない。 CTA には最低でも px-8 py-4 text-lg が必要です。視覚的に最も目立つ要素にします。

インタラクションと状態

• ボタンにホバー状態がありません。 hover:scale-[1.02]、背景色の変化、またはスムーズなトランジションを伴う移動効果を追加します。
• アクティブ時／押下時のフィードバックがありません。 クリック時に手応えを感じられるよう、active:scale-[0.98] を追加します。
• トランジションが瞬時に切り替わります。 すべてのインタラクティブ要素に transition-all duration-300 ease-out を追加します。
• スクロールアニメーションがありません。 CSS の @keyframes と IntersectionObserver を使って、フェードアップ表示を追加します。
• インタラクティブ要素にローディング状態がありません。 スケルトンのシマー効果やローディングインジケーターを追加します。
• ロゴが静止しています。 信頼を示すロゴには、自動スクロールする CSS マーキーを導入します。
• 機能しない href="#" リンクがあります。 削除するか、視覚的に無効化します。
• スムーズスクロールがありません。 html に scroll-behavior: smooth を追加します。

韓国語コンテンツの品質

• 翻訳調の韓国語です。 自然でこなれた韓国語に書き直します。「지금 시작하세요」を使い、「시작을 하세요 지금」は使いません。
• 敬語レベルが混在しています。 「합니다」または「하세요」のどちらかに統一します。
• AI らしい定型コピーがあります。 「혁신적인」「원활한」「차세대」「게임 체인저」「한 차원 높은」は削除し、具体的な表現を使います。
• 汎用的な仮名があります。 「김철수」「이영희」を、現代的で自然な名前の「하윤서」「박도현」「이서진」に置き換えます。
• 端数のない見せかけの数値指標があります。 50,000+ を 47,200+ に、5.0/5.0 を 4.87/5.0 に置き換えます。
• 英語のプレースホルダーテキストがあります。 表示されるテキストはすべて韓国語にします。
• Lorem Ipsum があります。 すぐに実際の韓国語の原稿に置き換えます。

コンポーネントのパターン（ランディングページ）

• 単色背景に中央揃えのテキストを置いた、ありきたりなヒーローセクションです。 画面分割、全幅メディア、または非対称のステートメントレイアウトに置き換えます。
• 3 枚のカードを横並びにした機能紹介です。 Bento グリッド、交互に配置するジグザグレイアウト、または横スクロールのストリップに置き換えます。
• ドット付きのカルーセル形式のユーザーレビューです。 メイソンリーレイアウト、SNS 風の埋め込みカード、または大きなポートレート付きの引用文を 1 件ずつ切り替える形式に置き換えます。
• 同じ形の料金プランが 3 つ並んでいます。 おすすめのプランを色、サイズ、強調表現で目立たせます。
• 4 列以上にリンクが並ぶフッターです。 必要なナビゲーション、法的情報へのリンク、ソーシャルアイコンに絞ります。
• アコーディオン形式の FAQ です。 左右に並べたリスト、検索できるヘルプ、またはインラインで展開するセクションに置き換えます。
• 周囲のコンテンツに埋もれる CTA です。 CTA は背景色を変える、余白を広く取る、浮かせて配置するなど、目を引くコントラストを付けます。

アイコンと画像

• Lucide または Feather のアイコンです。 一貫性を保つため、Iconify Solar アイコンセットに置き換えます。
• 壊れた Unsplash URL があります。 風景には picsum.photos/seed/{name}/{w}/{h}、アバターには i.pravatar.cc/150?u={name} を使います。
• ファビコンがありません。 ブランドに合ったファビコンを追加します。
• アイコンの線幅が統一されていません。 すべてのアイコンの線幅を統一します（Solar セットでは自動的に統一されます）。
• ありきたりな「チーム」写真があります。 統一感のあるイラストスタイル、または内容に合った高品質な写真を使います。

コードの品質

• div だらけの構造です。 <nav>、<main>、<section>、<article>、<footer> などのセマンティック HTML を使います。
• メタタグが不足しています。 <title>、<meta name="description">、<meta property="og:image">、<meta name="viewport"> を追加します。
• <html> に lang="ko" がありません。 アクセシビリティと SEO のために追加します。
• 画像に loading="lazy" がありません。 ファーストビューより下にある画像すべてに遅延読み込みを設定します。
• 画像に alt テキストがありません。 内容を説明する韓国語の alt テキストを追加します。
• z-index の値が場当たり的です。 ナビゲーションは 40、オーバーレイは 50、装飾要素は 60 に統一します。

改善テクニック

タイポグラフィの改善

• アニメーション付きのテキスト表示。 スクロールに合わせて、文字または単語を順番にフェード／スライド表示します。
• グラデーションのアクセントテキスト。 重要な見出し 1 つだけに、控えめなグラデーション塗りを使います（1 ページにつき最大 1 つ）。
• ホバー時の可変ウェイト。 インタラクティブ要素にホバーしたとき、テキストのウェイトがわずかに変化するようにします。

レイアウトの改善

• 崩したグリッド／非対称レイアウト。 要素を意図的にカラム構造からずらして配置します。
• パララックスによる奥行き。 背景画像をコンテンツとは異なる速度でスクロールさせます。
• スティッキーなスクロールスタッキング。 スクロール中、セクションを固定しながら互いに重ねます。
• 全幅セクションの切り替え。 グラデーションや斜めのトランジションで、セクション同士をつなげます。

モーションの改善

• 段階的なエントリー。 要素を animation-delay: calc(var(--index) * 80ms) で順番に表示します。
• スプリングベースのホバー。 インタラクティブな要素に transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) を設定します。
• スクロール連動の進捗表示。 進捗バーや SVG の線画をスクロール位置に連動させます。
• マーキーロゴ。 クライアントのロゴを、無限にループする CSS マーキーアニメーションで表示します。

表面の改善

• 本格的なグラスモーフィズム。 backdrop-blur-xl ＋ border border-white/10 ＋ 内側の影を使用します。
• メッシュグラデーションの背景。 複数の radial-gradient レイヤーで、有機的なアンビエント効果を演出します。
• ノイズテクスチャのオーバーレイ。 控えめな粒状感を加える、固定配置の pointer-events-none 要素を使用します。
• 色味のある影。 汎用的な黒ではなく、背景色の色相を帯びた影にします。

修正の優先順位

視覚的な効果を最大化し、リスクを最小限に抑えるため、次の順に適用します。

1. フォントを Pretendard に変更 — 韓国語コンテンツに、すぐに上質な印象を与えます
2. カラーパレットを整理 — AI らしい紫色を取り除き、アクセントカラーの彩度を下げます
3. 韓国語コンテンツを書き直し — 自然な文章、実名、自然な数字を使用します
4. ホバーとアクティブの状態 — インターフェースに動きを与えます
5. レイアウトに変化をつける — 各セクションの繰り返しを崩します
6. セクションアニメーション — 段階的な表示やスクロールトリガーを追加します
7. 間隔とタイポグラフィを整える — 仕上げに上質さを加えます

ルール

• 既存のページ構造を壊さないでください。段階的に改善します。
• 出力は、単独で動作する単一の HTML ファイルにしてください。
• CDN 依存を追加する前に、URL が正しく、主要なプロバイダーのものであることを確認してください。
• 変更の範囲を絞り、レビューしやすくしてください。全面的な書き直しより、対象を絞った改善を優先します。
• コンテンツを変更する場合は、自然な韓国語の品質を保ってください。