床屋ランディングページスキル

床屋ランディングページスキル は何をしますか？

明示的な起動

プライマリトリガー:

/LANDINGPAGE

エイリアス:

/LANDINGBARBERIA

コマンドは大文字小文字を区別せずに処理します。

例:

• /LANDINGPAGE
• /LANDINGBARBERIA
• /LANDINGPAGE キトのプレミアム床屋向けウェブサイトが欲しい
• /LANDINGBARBERIA 店名: ブラッククラウン

これらのコマンドのいずれかが呼び出された場合:

1. このスキルを即座に有効化する。
2. 発見インタビューモードに入る。
3. まずユーザーの現在のメッセージと会話のコンテキストを読む。
4. 不足している情報のみを尋ねる。
5. 重要なビジネス概要が十分に完了するまで実装を開始しない。
6. 概要が完了したら、「始めましょうか？」と尋ねずに自動的に進める。

バンドルされたマスター設計書 — 必須

このスキルには、完全なオリジナルのデザイン/コンバージョン設計書が含まれています:

references/master-barbershop-landing-prompt.md

ランディングページの計画または実装の前に、そのファイルを読んでください。

これを以下のための正規のベース設計書として扱ってください:

• ページアーキテクチャ,
• CRO構造,
• AIDA,
• TOFU / MOFU / BOFU,
• コンテンツの進行,
• ヒーローセクション,
• サービス,
• ギャラリー,
• 体験,
• プラン,
• Before/After,
• チーム,
• お客様の声,
• Instagram/ソーシャルプルーフ,
• ロケーション,
• FAQ,
• 最終CTA,
• 予約フロー,
• WhatsApp,
• フッター,
• レスポンシブ動作,
• アニメーション,
• パフォーマンス,
• アクセシビリティ,
• ローカルSEO,
• 推奨テクノロジー,
• 写真の方向性,
• コピーライティングのトーン,
• CTAの配置。

実際のビジネス情報が利用可能な場合は、設計書から架空のプレースホルダーを盲目的に再利用しないでください。

設計書は構造的なシステムであり、偽のビジネス事実のソースではありません。

コンパニオンデザインスキル

このスキルはオーケストレーターです。

ビジュアルデザイン/実装の前に、これらのコンパニオンスキルがすでに利用可能かどうかを確認してください:

1. Impeccable
2. Taste Skill / design-taste-frontend

見つからず、シェル実行が可能な場合は、プロジェクトルートからインストールしてください:

npx impeccable install
npx skills add Leonxlnx/taste-skill

すでに存在する場合は再インストールしないでください。

インストールに承認が必要な場合は、環境に必要な承認のみをリクエストしてください。

シェル実行が利用できない場合:

• このスキルを引き続き使用し、
• 同じ原則を手動で適用し、
• スキルがインストールされたと主張しないでください。

役割の分離

このスキルの担当

• 発見,
• ビジネス理解,
• ビジネスの真実,
• オファー,
• コンバージョン戦略,
• ページアーキテクチャ,
• AIDA,
• TOFU/MOFU/BOFU,
• CRO,
• コピー,
• CTAロジック,
• コンテンツ階層,
• アセット戦略,
• 実装要件,
• SEO,
• パフォーマンス,
• アクセシビリティ,
• QA。

Taste Skillの支援

• プレミアムなビジュアル方向性,
• 非一般的なレイアウト決定,
• タイポグラフィスケール,
• スペーシングリズム,
• コンポーネントの個性,
• モーションランゲージ,
• フロントエンドのセンス。

Impeccableの支援

• UI批評,
• 洗練,
• 階層,
• スペーシング,
• 磨き,
• 一貫性,
• レスポンシブ品質,
• アクセシビリティを考慮したプレゼンテーション。

コンパニオンスキルはプレゼンテーションを改善するかもしれませんが、以下を上書きしてはなりません:

• ユーザーの実際のビジネス情報,
• ブランドの制約,
• コンバージョン目標,
• 法的/倫理的制約,
• 重要な予約コンテンツ。

発見インタビューモード

内部システムが高度であっても、インタビューはユーザーにとってシンプルであるべきです。

情報が少ない場合は、1つのコンパクトなグループ化された質問票を尋ねてください。

重要な情報が1つだけ不足している場合を除き、1ターンに1つの質問で尋問しないでください。

すでに回答された質問を繰り返さないでください。

A. ビジネスアイデンティティ

以下の質問をする:

• 床屋の名前,
• 市区町村/近隣,
• 完全な住所,
• 利用可能な場合はGoogleマップリンク,
• 営業時間,
• WhatsApp/電話番号,
• 関連する場合はメール,
• Instagram,
• TikTok,
• その他のソーシャルプロフィール。

B. サービスと料金

質問:

• 提供しているサービス,
• 各サービスの正確な価格,
• おおよその所要時間,
• 最も強く宣伝すべきサービス,
• バンドル/パッケージ,
• 会員制,
• 初回来店特典,
• 季節限定オファー。

ビジネスが実在する場合は、価格を決して発明しないでください。

C. 予約とコンバージョン

質問:

• 顧客が現在どのように予約しているか,
• WhatsApp/電話/フォーム/予約プラットフォーム/飛び込み,
• 予約のみ、飛び込みのみ、または両方,
• プライマリCTA,
• セカンダリCTA,
• バックエンドがない場合に、機能的なシミュレーション予約フローを希望するかどうか。

D. オーディエンスとポジショニング

質問:

• 理想的な顧客,
• 関連する場合は年齢層/セグメント,
• プレミアム/アーバン/クラシック/ラグジュアリー/ストリートウェア/オールスクール/ファミリー/モダンなポジショニング,
• 他店との違い,
• 顧客が選ぶ理由,
• よくある反対意見,
• 駐車場の有無,
• サービス体験,
• 保証や安心感。

E. ブランドアイデンティティ

質問:

• ロゴ,
• 色,
• タイポグラフィ,
• スローガン,
• ビジュアルシンボル,
• テクスチャ,
• 特徴的なディテール,
• ブランドの個性,
• 望ましい雰囲気。

例:

• プレミアム,
• マスキュリン,
• エディトリアル,
• シネマティック,
• インダストリアル,
• クラシック,
• ミニマル,
• ラグジュアリー,
• アーバン。

F. 実際のビジュアルアセット

利用可能な場合、ユーザーに以下の共有を依頼する:

• ロゴ,
• 外観写真,
• 内観写真,
• バーバー/スタッフ写真,
• 顧客写真,
• ヘアカット写真,
• ひげの施術写真,
• Before/After画像,
• 商品写真,
• サービス写真,
• 受賞歴/認定証。

ストックや生成画像よりも実際のアセットを優先してください。

生成された人物/内観を実際のスタッフ、顧客、または実際の施設として提示しないでください。

G. お客様の声と証拠

以下を依頼する:

• レビューのスクリーンショット,
• Googleレビュー,
• お客様の声,
• 星評価,
• レビュー数,
• プレス掲載,
• ソーシャルプルーフ,
• 顧客の引用。

実際のビジネスページを構築する場合、実際のレビューをでっち上げないでください。

実際のレビューがなく、ユーザーが単なるプロトタイプを希望する場合:

• 内部的にプレースホルダーとして明確にマークし、
• 後で置き換えられるように構造化し、
• 検証済みの実際のレビューとして表示しないでください。

H. ビジュアルリファレンス — 必須の質問

質問:

好きな床屋やウェブサイトのビジュアルリファレンスはありますか？

ユーザーは以下を提供できる:

• ウェブサイト,
• Pinterest画像,
• Behance,
• Dribbble,
• Instagramのリファレンス,
• スクリーンショット,
• ムードボード,
• デザインギャラリーの写真,
• 実際の床屋の写真,
• その他のブランドリファレンス。

役立つ場合は、それぞれのどこが好きかを尋ねる:

• ヒーローセクション,
• タイポグラフィ,
• パレット,
• 写真,
• メニュー,
• サービスカード,
• 価格表示,
• ギャラリー,
• モーション,
• CTA,
• 雰囲気,
• 全体的な感覚。

リファレンスルール

リファレンスから以下を抽出するために使用する:

• 構成,
• 階層,
• ビジュアルリズム,
• 空間密度,
• タイプの関係性,
• 写真の処理,
• コンポーネントパターン,
• モーションアイデア,
• 色の関係性,
• エディトリアル方向性。

第三者のウェブサイトを文字通りコピーしないでください。

ユーザーが所有しているか許可を得ていない限り、第三者のロゴ、独自のコピー、固有のブランドアセット、または独特のアートワークを複製しないでください。

推奨コンパクトインタビュー

/LANDINGPAGEが十分なコンテキストなしで呼び出された場合、以下のような質問をしてください:

1. 床屋の名前と場所は？
2. どのようなサービスを提供し、それぞれの価格は？
3. 最も売りたいサービスやパッケージは？
4. 営業時間は？
5. どのように予約を受け付けたいですか？
6. WhatsApp、電話、SNSは？
7. どのような顧客層をターゲットにしたいですか？
8. 他店との違いは？
9. 使用している色、フォント、ロゴ、ビジュアルスタイルは？
10. 店内、バーバー、顧客、施術の写真を共有できますか？
11. レビューや実際のコメントのスクリーンショットはありますか？
12. プロモーション、パッケージ、会員制はありますか？
13. 好きなウェブサイト、Pinterest、Behance、Dribbble、スクリーンショットなどのビジュアルリファレンスはありますか？
14. ウェブサイトに載せたくないものはありますか？

ユーザーから尋ねられない限り、内部の方法論について言及しないでください。

段階的な完了

各ユーザー応答後:

• 既知のフィールドを内部的にマークし、
• 不足している重要な情報のみを尋ね、
• 質問票を再開せず、
• すでに回答された質問を繰り返さない。

十分な情報が得られたら、自動的に実行に進む。

内部ビジネス＋ブランド概要

デザイン前に、構造化された内部概要を作成する:

business:
  name:
  category: barbershop
  city:
  neighborhood:
  address:
  maps_url:
  hours:
  phone:
  whatsapp:
  email:
  social:

conversion:
  primary_goal: booking
  primary_cta:
  secondary_cta:
  booking_channel:

audience:
  ideal_customer:
  positioning:
  objections:

brand:
  logo:
  colors:
  typography:
  slogan:
  visual_signatures:
  personality:

services:
  - name:
    description:
    price:
    duration:
    priority:

offers:
  packages:
  memberships:
  promotions:

assets:
  local_photos:
  team_photos:
  client_photos:
  haircut_photos:
  before_after:
  reviews:

references:
  - source:
    liked_for:

technical:
  current_stack:
  booking_backend:
  analytics:

これは内部情報です。ユーザーから求められない限り表示しません。

設計書の適応

ビジネス概要が準備できたら:

1. references/master-barbershop-landing-prompt.mdを読む。
2. 完全な戦略/ページシステムを抽出する。
3. 利用可能な場合は、すべての架空の値を実際のユーザーデータで置き換える。
4. 関連性のないセクションを削除する。
5. 役立つ場合は、不足しているビジネス固有のセクションを追加する。
6. コンバージョンジャーニーを維持する:
   • インパクト,
   • バリュープロポジション,
   • サービス,
   • 実績の証明,
   • メリット,
   • 体験,
   • 価格設定,
   • お客様の声,
   • チーム,
   • ロケーション,
   • 反対意見への対応,
   • 予約。
7. UIにAIDA/TOFU/MOFU/BOFUのラベルを表示しない。

デフォルトファネル

TOFU / 注意

典型的:

• ヘッダー,
• ヒーロー,
• ビジュアルプルーフ,
• 主要な差別化要因,
• 最初のCTA。

MOFU / 興味＋欲求

典型的:

• サービス,
• ギャラリー,
• 体験,
• 差別化,
• チーム,
• 価格設定,
• Before/After,
• ソーシャルプルーフ。

BOFU / 行動

典型的:

• 口コミ,
• ロケーション,
• FAQ,
• 予約,
• WhatsApp,
• 最終CTA。

ビジネスやリファレンスがより良い順序を正当化する場合は、この順序を適応させる。

コピーライティング

トーン:

• 自信に満ちた,
• マスキュリン,
• 直接的,
• エレガント,
• プレミアム。

優先:

• 短い見出し,
• 具体的なサービス言語,
• ローカルとの関連性,
• 証拠,
• 実際の差別化,
• 強い動詞。

避ける:

• 一般的なAIコピー,
• 曖昧なラグジュアリーの決まり文句,
• 「当店へようこそ」,
• 根拠のない最上級表現,
• 長い段落。

ビジュアル方向性

バンドルされた設計書からの基本的なビジュアル方向性:

• プレミアム,
• マスキュリン,
• エディトリアル,
• モダン,
• アーバン,
• 洗練された,
• シネマティック,
• ミニマル,
• 気取らないエクスクルーシブ。

ただし、ユーザーの実際のブランディングとリファレンスが優先されます。

避ける:

• SaaSテンプレートの美学,
• 青/紫のテックグラデーション,
• 過度な角丸カード,
• 漫画風イラスト,
• 過剰なアイコン,
• 安っぽい床屋の決まり文句,
• ビジュアルノイズ。

アセット戦略

優先順位:

1. ユーザー提供の実際のビジネスアセット。
2. ユーザー所有のブランドアセット。
3. ユーザー提供のリファレンス（インスピレーションとして）。
4. 生成された装飾的/概念的アセット。
5. 必要な場合のみストックアセット。

ネイティブの画像生成が存在する場合:

• 役立つ場合は、装飾的または概念的な補助画像に使用する,
• 実際の顧客、チームメンバー、口コミ、実際の施設をでっち上げない。

技術的実装

動的フロントエンド要件

このスキルは、静的なモックアップではなく、実際のインタラクティブなフロントエンドを作成する必要があります。

推奨実装順序:

1. 既存のプロジェクトがすでにNext.jsを使用している場合

   • Next.jsを維持し、
   • 合理的な範囲で現在のアーキテクチャを保持し、
   • 既存のプロジェクト内にランディングページを構築する。

2. 既存のプロジェクトがすでにReactを使用している場合

   • 移行が不要な場合はReactを維持し、
   • ルーティング/ビルドの規則を保持し、
   • ランディングページをプロダクション対応のReactコンポーネントとして追加する。

3. フロントエンドプロジェクトが存在しない場合

   • 以下の技術を使用して新しいNext.jsプロジェクトを作成する:
     • Next.js
     • React
     • TypeScript
     • Tailwind CSS
   • プロジェクトコンテキストが別の方法を必要としない限り、App Routerを使用する。

役立つ場合のデフォルトサポートライブラリ:

• Framer Motion（プレミアムなモーション/インタラクション用）,
• Lucide React（控えめなUIアイコン用）。

明確な目的なしに依存関係を追加しないでください。

必要なインタラクティビティ

ページには、関連する場合に実際のインタラクティブな動作を含める必要があります。例:

• スティッキー/半透明のナビゲーション,
• フルスクリーンまたはアニメーション化されたモバイルメニューオーバーレイ,
• スムーズなセクションナビゲーション,
• ギャラリー/ライトボックス,
• Before/After比較,
• お客様の声のカルーセル/スワイプ動作,
• FAQアコーディオン,
• 予約モーダル/ドロワー,
• マルチステップ予約インターフェース,
• レスポンシブモバイルスティッキーCTA,
• ホバー/フォーカス状態,
• reduced-motionサポート。

クリック可能に見えて何もしない偽のインタラクションを実装しないでください。

コンポーネントアーキテクチャ

きれいにコンポーネント化する。典型的なコンポーネント:

• Navbar
• MobileMenu
• Hero
• ValueProposition
• Services
• Gallery
• Experience
• Pricing
• BeforeAfter
• Barbers
• Testimonials
• SocialProof
• Location
• FAQ
• BookingModal
• FloatingWhatsApp
• MobileStickyCTA
• Footer

実際のビジネスに合わせてコンポーネントを適応させる。リファレンス設計書に存在するからといって、未使用のセクションを作成しないでください。

プロジェクトの検査

コーディング前に:

• プロジェクトルートを検査し、
• パッケージマネージャーを検出し、
• package.jsonを検査し、
• Next.js/React/Tailwindの規則を検出し、
• 既存のデザインシステム/コンポーネントを特定し、
• 役立つ規則を保持し、
• 破壊的な書き換えを避ける。

プロジェクトが空の場合は、HTMLスニペットのみを生成するのではなく、フロントエンドを初期化する。

予約システム

バックエンドが存在しない場合:

• 機能的なシミュレーション予約UIを作成し、
• サービスの選択、
• バーバーの選択、
• 日付、
• 時間、
• 顧客詳細、
• 確認状態をサポートする。

バックエンドが存在しない場合に、予約がリモートに保存されたと誤って主張しないでください。

実際のバックエンド/統合が存在する場合:

• 既存のアーキテクチャを使用し、
• 実際の空き状況ロジックを保持し、
• 成功/失敗状態を検証する。

WhatsApp

WhatsAppを使用する場合:

• 明確な予約CTAを作成し、
• 適切な場合は便利なメッセージを事前に入力し、
• モバイル向けに最適化し、
• 電話番号をでっち上げない。

マップ

マップURL/住所が存在する場合:

• 実際の住所を表示し、
• 道順へのリンクを張り、
• 適切な場合はマップを埋め込む。

ローカルSEO

...