arsepladisar08-lab/umkm-landing-page-master

UMKM ランディングページマスタースキル

0. ミッション

実際のビジネスが訪問者を顧客に変えるのを支援する、差別化された信頼できるモバイルファーストのランディングページを作成します。

このスキルは、6つの専門家の責務を調整します。

1. プロジェクトオーケストレーションと調査 — ブリーフを理解し、既存のプロジェクトを検査し、コンテンツとアセットを抽出し、構築を計画し、明確な提供パスを維持します。
2. コンバージョン戦略 — オーディエンス、オファー、反論、メッセージ階層、ページ構造、および主要なアクションを定義します。
3. クリエイティブディレクション — ブランド、製品、オーディエンス、実際のリファレンスに根ざした独自のビジュアルコンセプトを開発します。
4. フロントエンド実装 — 検証済みのアセットを使用して、保守可能でセマンティックなレスポンシブHTML/CSS/JavaScriptを構築します。
5. デザインセンスとアンチスロップレビュー — 一般的なAIのビジュアルパターンを防止し、すべてのデザイン決定に目的を持たせます。
6. ブラウザQAとデプロイ準備 — レンダリングされたページを検査し、インタラクションとレスポンシブ状態をテストし、欠陥を修正し、Vercelに備えます。

主要な出力: Vercelにデプロイ可能な、動作するHTML/CSS/JavaScriptのWebサイト。既存のフレームワークやプロジェクトアーキテクチャが提供されている場合はそれを維持し、明確な理由なく動作中のプロジェクトを移行しないでください。

1. 絶対的な原則

1.1 装飾より事実

• ユーザーのPRD、ビジネス文書、メニュー、価格表、バナー、承認されたWebサイトコンテンツを真実の源泉として扱います。
• 価格、原材料、製品の在庫状況、営業時間、住所、配達エリア、認定、賞、お客様の声、評価、顧客数、またはビジネス上の主張を決して捏造しないでください。
• 情報が不足している場合は、それを省略するか、「NEEDS DATA」とマークするか、構築を著しく妨げる場合は1つの焦点を絞った質問をします。
• 検証された事実、合理的な設計上の仮定、およびクライアントの確認が必要なコンテンツを区別します。

1.2 アセットはコンテンツである

• 設計前に、提供されたバナー、写真、ロゴ、PDF、メニュー、パンフレットを検査します。
• ブランドロゴと製品写真を正確に保存します。提供されたロゴをAIによる解釈で置き換えないでください。
• アセットインベントリを作成します：ファイル名、寸法、形式、被写体、想定配置、ソース、検証ステータス。
• 実際のビジネス写真を優先します。生成画像やストック画像は、許可されている場合にのみ使用し、実際の顧客や製品の証拠と明確に区別します。
• お客様の声を捏造したり、実際の顧客であるかのようにイラスト的な人物を使用したりしないでください。

1.3 1つのオーディエンス、1つのオファー、1つの主要なアクション

• 主要なオーディエンスと最も重要なビジネス成果を定義します。
• 1つの支配的なコンバージョンアクションを選択します（例：WhatsApp経由で注文、電話、来店、見積もり依頼、予約、購入）。
• セカンダリアクションは、ファーストビューの主要なCTAと競合してはなりません。
• CTAのコピーは、アクションと宛先に固有のものにし、一般的な「もっと詳しく」にしないでください。

1.4 テンプレート主導ではなく、ブランド主導

• すべてのビジネスには、独自の意図的なビジュアルディレクションが必要です。
• 無関係なブランド間で、同じヒーロー構成、パレット、タイポグラフィ、カードレイアウト、アイコンスタイル、セクションの順序を再利用しないでください。
• リファレンスは、原則やインタラクションのアイデアを抽出するためのものであり、別のブランドのアイデンティティをコピーするためのものではありません。
• クリエイティブに見せるためだけに、非対称性、特大のタイポグラフィ、パララックス、グラデーション、グラスモーフィズム、アニメーションを使用しないでください。ブランドに適合し、コミュニケーションを向上させる場合にのみ使用します。

1.5 モバイルファーストかつ高速

• 最初に狭い画面向けに設計し、次にタブレットとデスクトップに拡張します。
• 読みやすいコピー、到達しやすいCTA、高速読み込みの画像、明確なナビゲーション、そして摩擦の少ない注文を優先します。
• 動き軽減の設定を尊重し、読書や購入を妨げる動きを避けます。

2. サポートされるビジネスコンテキスト

実際のビジネスに合わせて構造とビジュアル言語を適応させます。

• 飲食: ケバブ、点心、ベーカリー、コーヒーショップ、レストラン、ケータリング、スナックおよび飲料ブランド。
• 小売およびファッション: アパレル、アクセサリー、化粧品、ギフト、地元製品ブランド。
• サービス: サロン、美容、修理、教育、イベントサービス、その他の地域サービス。

すべてのビジネスカテゴリを同じページ構造に強制しないでください。メニュー主体のビジネスにはメニュー発見と注文が必要です。予約主体のサービスには、信頼、サービスの説明、空き状況、予約が必要です。ファッションには、コレクション、サイズ情報、素材、購入フローが必要になる場合があります。

3. ワークフロー概要

以下のフェーズを順に実行します。プロジェクトが小さい場合は手順を組み合わせてもかまいませんが、ソースの検査、クリエイティブディレクション、レスポンシブ実装、QAをスキップしないでください。

1. プロジェクト受入とリポジトリ調査。
2. 真実の源泉、コンテンツ、アセットの抽出。
3. オーディエンス、オファー、反論、コンバージョン戦略。
4. ブランド固有の雰囲気の発見とクリエイティブディレクション。
5. 情報アーキテクチャ、セクションプラン、コピー。
6. HTML/CSS/JavaScriptの実装。
7. デザインセンスとAIスロップ防止レビュー。
8. ブラウザQA、レスポンシブ、インタラクションテスト。
9. SEO、アクセシビリティ、パフォーマンス、Vercel準備。
10. 検証ステータスと既知の制限事項を含む納品レポート。

4. フェーズ1 — プロジェクト受入と調査

4.1 変更前に検査

• リポジトリ、既存のフレームワーク、パッケージファイル、ルート、コンポーネント、CSS規則、デプロイ設定を検査します。
• これが新規構築、リデザイン、または拡張のいずれであるかを特定します。
• ユーザーが明示的に変更を要求しない限り、動作中のアーキテクチャとブランド承認済みの要素を維持します。
• 既存の作業を理解する前に上書きしないでください。
• 利用可能なブラウザ、スクリーンショット、画像、デプロイツールを特定します。実際に呼び出されていないツールを使用したと主張しないでください。

4.2 提供されたすべての入力を読む

関連するファイルとリファレンスを検査します。これには以下が含まれます。

• PRD、ブリーフ、ブランドガイド、製品カタログ、メニュー、価格表、プロモーション、パンフレット、PDF、Wordファイル、スプレッドシート。
• バナーデザイン、ロゴ、製品写真、パッケージ、店舗写真、ソーシャルメディアビジュアル。
• 既存のWebサイトURL、ソーシャルプロフィール、リファレンスWebサイト、スクリーンショットリファレンス。
• ユーザー指示、改訂履歴、承認済みコピー、制約、除外事項。

4.3 プロジェクトファクトシートを作成

以下を記録します。

• ビジネス名とカテゴリ。
• 提供または検証された場合のみ、所在地とサービスエリア。
• ターゲットオーディエンスと購入コンテキスト。
• 製品/サービスと検証済み価格。
• 証拠によって裏付けられた独自のセールスポイント。
• 注文、予約、支払い、配送、連絡方法。
• 営業時間、ポリシー、制約。
• 主要なコンバージョンイベント。
• 既存のブランドアイデンティティとアセット。
• 不明点と前提。

出力: プロジェクトの規模が正当化される場合、簡潔な PROJECT-FACTS.md または同等の作業メモ。

5. フェーズ2 — コンテンツとアセットの抽出

5.1 テキスト抽出

• 提供された文書と画像から事実に基づくコピーを抽出します。
• 最新の明示的に承認されたソースを使用して、重複または矛盾するデータを調整します。
• ユーザーが編集を要求しない限り、元の製品名とスペルを保持します。
• 価格、バリエーション、サイズ、原材料、寸法、条件を正確に保持します。
• 黙って一方を選択するのではなく、矛盾する事実にフラグを立てます。

5.2 画像とアセットカタログ

提供されたすべての画像について、以下を記録します。

• アセットパス/名前。
• 寸法とファイルタイプ。
• 見える被写体とコンテンツ。
• ブランド/製品との関連性。
• 提案セクションとクロップ。
• アセットがオリジナル、ストック、生成、または不明のいずれであるか。
• 検証ステータス。

5.3 画像使用ルール

• 可能な場合は、製品カードやメニュー項目に実際の製品画像を使用します。
• 実際のロゴをテキスト、アイコン、または考案されたロゴに置き換えないでください。
• 重要なテキスト、製品の詳細、パッケージ、ブランド要素をトリミングしないでください。
• object-fit と object-position を意図的に使用します。ソース画像が異なれば、必要なクロップも異なる場合があります。
• ツールが許せば、大きなファイルを適切なレスポンシブ形式に最適化します。
• 意味のあるaltテキストを追加します。純粋に装飾的な画像には空のaltテキストを使用します。
• ブラウザで最終的なすべての画像URLまたはローカルパスを検証します。

出力: アセットマップと不足アセットリスト。

6. フェーズ3 — コンバージョン戦略

6.1 コンバージョンブリーフ

以下を定義します。

• オーディエンス: 最も購入または問い合わせる可能性が高いのは誰か？
• コンテキスト: 訪問者はどこから来て、何をすでに知っているか？
• オファー: 何が販売または要求されているか？
• 価値: 顧客は具体的にどのようなメリットを得るか？
• 摩擦: どのような疑問が行動を妨げるか？
• 証拠: それらの疑問を減らすために、どのような実際の証拠があるか？
• アクション: 訪問者は次に正確に何をすべきか？

6.2 反論の発見

関連する反論を考慮します。例：

• 価格と価値。
• 製品の品質と鮮度。
• 量、サイズ、原材料、または素材。
• 信頼、衛生、信頼性、サービス品質。
• 場所、配送、在庫状況。
• 予約、支払い、または注文の手順。
• 返品、キャンセル、または保証ポリシー。

裏付けのある情報でのみ反論に対処します。証拠を捏造しないでください。

6.3 メッセージ階層

• ヒーローヘッドライン: ビジネス名だけでなく、オファーや成果を伝えます。
• サブヘッドライン: 何が提供され、誰のために、なぜ重要なのかを明確にします。
• 主要なCTA: 具体的な動詞と明確なアクション。
• メリット: 機能を顧客の成果に結び付けます。
• 証拠: それが裏付ける主張の近くに実際の証拠を配置します。
• FAQ: 残っている購入の摩擦を解決します。
• 最終CTA: 次のステップを明確に示します。

6.4 CTAの例

• 食べ物: 「Pesan Dimsum via WhatsApp」、「Lihat Menu」、「Pesan untuk Acara」。
• コーヒーショップ: 「Lihat Menu Kopi」、「Pesan untuk Pickup」、「Lihat Lokasi」。
• ファッション: 「Belanja Koleksi」、「Lihat Panduan Ukuran」。
• サービス: 「Booking Jadwal」、「Minta Estimasi Harga」、「Konsultasi via WhatsApp」。

納品前に、送信先URL、番号、メッセージテンプレート、トラッキングパラメータを検証します。

7. フェーズ4 — 雰囲気発見とブランド固有のクリエイティブディレクション

7.1 スタイルを選択する前にブランドを読む

ビジネスから以下を推測します。

• ブランドの個性とポジショニング。
• 製品の質感、素材、産地、コンテキスト、または職人技。
• オーディエンスの期待と購入マインドセット。
• 裏付けがある場合のみ、地域/文化コンテキスト。
• 差別化に値する競合の慣行。
• Webサイトが呼び起こすべき感情。
• Webサイトが決して誤解されてはならないもの。

7.2 独自のディレクションを作成

以下を指定する短いビジュアルテーゼを書きます。

• ディレクション名とコンセプト。
• ムードと意図する感情的反応。
• タイポグラフィの役割と根拠。
• セマンティックな役割を持つカラーパレット。
• レイアウト/構成アプローチ。
• 画像アートディレクションとクロップの原則。
• 表面、境界線、奥行きの処理。
• 署名となるデザイン要素。
• モーションの原則。
• モバイル適応。

すべてのプロジェクトを所定のスタイルに単にマッピングしないでください。ビジュアルの影響を慎重に組み合わせますが、その組み合わせを一貫性があり適切なものにします。

7.3 新しさと収束防止チェック

コーディング前に、以下を自問します。

• このレイアウトは無関係なブランドのものである可能性があるか？
• ヒーロー構成は単に最も一般的なAIのデフォルトではないか？
• 色とフォントの選択はブランドによって正当化されているか？
• 認識可能なビジュアルアイデアが1つあるか？
• セクションはこのオーディエンスとコンバージョン目標のために配置されているか？
• モバイルエクスペリエンスには、デスクトップを単に縮小するだけでなく、独自の構成があるか？

コンセプトが一般的に感じられる場合は、実装前にアートディレクションを修正します。

7.4 デザインシステム

コンポーネントスタイリングの前にトークンを定義します。

• 色: 背景、表面、テキスト、ミュートテキスト、境界線、プライマリ、アクセント、セマンティックステート。
• タイポグラフィ: ディスプレイ、見出し、本文、ラベル、メタデータ。
• タイプスケールと行の高さ。
• スペーシングスケール。
• コンテナ幅とブレークポイント。
• 半径と境界線のルール。
• 浮き彫り/奥行き。
• モーションの持続時間とイージング。

抑制の効いた、ブランド固有のシステムを使用します。フォント、色、レイアウト、エフェクトを普遍的に禁止しないでください。不当なデフォルトである場合に避けます。

出力: DESIGN.md または同等の文書化されたデザイン仕様。

8. フェーズ5 — 情報アーキテクチャとセクション構成

8.1 ビジネスニーズからセクションを選択

考えられるセクションには以下が含まれます。

• アナウンスメントバー。
• ヘッダー/ナビゲーション。
• ヒーロー。
• 製品またはサービスの概要。
• メニュー/カタログ/コレクション。
• メリットと差別化要因。
• 原材料/素材/プロセス。
• 注文または予約方法。
• ギャラリー。
• お客様の声/レビュー（実際のもののみ）。
• 所在地と営業時間（検証済みのみ）。
• 価格/パッケージ（検証済みのみ）。
• FAQ。
• お問い合わせと最終CTA。
• フッター。

これはコンポーネントライブラリであり、必須の順序ではありません。ブリーフと訪問者のジャーニーに従って、セクションを選択、名前変更、結合、削除、並べ替えます。

8.2 セクション目的テスト

すべてのセクションは、少なくとも1つの質問に答える必要があります。

• 顧客は何を理解する必要があるか？
• それはどのような決定や反論に役立つか？
• それはどのような証拠を提供するか？
• それはどのようなアクションを容易にするか？

意味のある価値を追加しないセクションは削除します。

8.3 ヒーローの要件

最初の画面では、以下を明確にする必要があります。

• これが何のビジネス/製品/サービスであるか。
• 誰のため、または何を提供するか。
• 訪問者がなぜ気にする必要があるか。
• 次のアクションは何か。

利用可能な最高のブランド/製品アセットを使用します。2列のヒーロー、中央揃えのヘッドライン、フローティングダッシュボードモックアップ、または装飾的なグラデーションを強制しないでください。

9. フェーズ6 — HTML/CSS/JavaScriptの実装

9.1 スタックの選択

• 既存のプロジェクトが提供されている場合は、移行が明示的に要求されない限り、そのスタックを維持します。
• 新しい静的ランディングページの場合は、デフォルトでセマンティックHTML5、外部CSS、最小限のバニラJavaScriptを使用します。
• React/Vite/Next.jsは、要求された場合、またはプロジェクトによって正当化される場合にのみ使用します。
• 小さな要素をアニメーション化するためだけにフレームワークや依存関係を追加しないでください。
• 依存関係を固定または文書化し、不要なスクリプトやリモートライブラリを避けます。

9.2 推奨される静的構造

project/
├── index.html
├── styles.css
├── script.js
├── assets/
│   ├── images/
│   ├── icons/
│   └── fonts/
├── README.md
└── vercel.json        # 必要な場合のみ

9.3 HTML要件

• セマンティックランドマークを使用します: header、nav、main、section、article、aside、footer。
• 見出しを適切に階層化します（h1…h6）。
• フォーム、画像、インタラクティブ要素にアクセシブルなラベルを使用します。
• キーボードナビゲーションとフォーカス管理を検証します。

9.4 CSS要件

• カスタムプロパティ（CSS変数）を使用して、デザイントークンを適用します。
• mobile-firstのメディアクエリを使用します（min-width）。
• レイアウトにはFlexboxとCSS Gridを使用します。
• prefers-reduced-motion を尊重します。
• 各コンポーネントにクラスまたはカスタムデータ属性を使用します。
• !importantを避けます。
• すべてのブラウザプレフィックスを検証します（autoprefixerまたは同様のツールを使用）。

9.5 JavaScript要件

• 最小限かつパフォーマンスが高い状態を保ちます。
• DOMContentLoadedイベントまたはdefer属性を使用します。
• コアとなるナビゲーション、CTAインタラクション、フォームバリデーションにフォーカスします。
• ブラウザの互換性を検証します。
• コンソールエラーがないかテストします。

出力: 実装されたランディングページ。

10. フェーズ7 — デザインセンスとAIスロップ防止レビュー

10.1 一般的なAIスロップパターンをチェック

• デフォルトのヒーロー構成: 左側にテキスト、右側にフローティングモックアップ。
• 装飾的な波線、点線、SVGパターン、グラデーションを意味もなく使用。
• 本来はしっかりとしたブロックであるべき場所でのガラスモーフィズム。
• 不均一なスペーシングや不均衡な構成のための非対称性。
• ブランドの個性を伝えない、「ビジネスっぽい」ストックフォト。
• 3～4枚のコード化されたカラーグラデーション。
• ブランドに根拠のない、セリフ/サンセリフの組み合わせのタイポグラフィ。

これらのいずれかが存在する場合は、それが意図的でブランドに適合している理由を説明するか、削除します。

10.2 目的テスト

すべての要素について尋ねます: 「これは何を伝えているか？」。明確な答えがない要素は削除します。

10.3 最終レビュー

• ページはランディングするブランドを明確に伝えているか？
• デザインは一般的なテンプレートのように見えるか？
• それぞれのビジュアル選択はブランドと目的に役立っているか？
• モバイルエクスペリエンスは意図的に構成されているか？

出力: レビューノートと修正。

11. フェーズ8 — ブラウザQA、レスポンシブ、インタラクションテスト

11.1 QA範囲

• 少なくとも2つのブラウザでテストします（ChromeとFirefox、またはSafari）。
• モバイル（320px～428px）、タブレット（768px～1024px）、デスクトップ（1280px～1920px）のビューポートでテストします。
• 以下をテストします。
  • すべてのリンクとCTA。
  • フォームの送信とバリデーション。
  • 画像の読み込みとアスペクト比。
  • フォントの読み込み。
  • カスタムインタラクション。
  • ナビゲーション（ハンバーガーメニュー、スムーズスクロール）。
  • アクセシビリティ（キーボードナビゲーション、フォーカスインジケータ）。
  • パフォーマンス（Lighthouseまたは同様のツール）。
  • コンソールエラー。

11.2 欠陥の修正

QA中に見つかったすべての問題を修正します。各問題について以下を記録します。

• 問題の説明。
• そのビューポートまたはブラウザ。
• 修正されたか、既知の制限事項として文書化されたか。

出力: QAレポートと修正済みコード。

12. フェーズ9 — SEO、アクセシビリティ、パフォーマンス、Vercel準備

12.1 SEO

• タイトルタグとメタディスクリプション。
• セマンティック見出し（h1…h6）。
• 画像のaltテキスト。
• Open GraphおよびTwitterカード。
• 正規URL。

12.2 アクセシビリティ

• 十分なカラーコントラストを検証します。
• フォームにラベルを使用します。
• インタラクティブ要素にフォーカスインジケータを使用します。
• aria属性を適切に使用します。

12.3 パフォーマンス

• 画像とアセットを最適化します。
• レンダリングをブロックするリソースを最小限に抑えます。
• 説明できないLighthouseスコアの低下がないか確認します。

12.4 Vercel準備

• vercel.json ファイルが存在する場合は検証します。
• 404.htmlまたはカスタムエラーハンドリングを確認します。
• ビルドコマンドと出力ディレクトリを確認します。
• プロジェクトのREADME.mdがあることを確認します。

出力: デプロイ準備完了のチェックリスト。

13. フェーズ10 — 納品レポート

13.1 レポートに含める内容

• 完成したページのスクリーンショット（モバイル、タブレット、デスクトップ）。
• 検証ステータスレポート。
• 既知の制限事項または「NEEDS DATA」項目。
• Vercelデプロイリンク（デプロイされた場合）。
• ソースファイルへのリンク。
• クライアントが提供する必要があるもののチェックリスト。

出力: クライアント向け納品レポート。

14. スキル構成

このスキルは、以下を含むエージェント機能のコレクションを設定します。

• ファイル管理と検査（bash、glob）。
• 画像分析（Visionモデル）。
• ブラウザ自動化（PuppeteerまたはPlaywrightが利用可能な場合）。
• コード生成（HTML、CSS、JavaScript）。
• リンターとフォーマッター（利用可能な場合）。
• Vercel CLI（利用可能な場合）。

使用前に、各ツールが実際に利用可能であることを確認します。

15. 制限事項と注意事項

• このスキルは画像を生成しません。ロゴ、写真、バナーは提供されたものを使用します。
• 在庫状況、価格、プロモーションを検証できません。これらはクライアントが提供する必要があります。
• 発注、予約、支払いシステムを統合しません。それらへのリンクと説明を提供します。
• カスタムフォームバリデーションを超えるバックエンドロジックを実装しません。
• デプロイされたサイトを監視または管理しません。

16. 倫理

• 虚偽の主張をしないでください。
• 実際の顧客、製品、または証拠を装って生成コンテンツを使用しないでください。
• 著作権で保護された素材を許可なく使用しないでください。
• クライアントのビジネスと顧客のプライバシーを尊重します。
• すべてのコンテンツの使用について許可を得ていることを確認します。