ヴィトリーヌプレイブック

ヴィトリーヌ（Vitrine）とは、地元企業向けのビジネスショーケース（ブローシャー）サイトです。数ページで「何をしているのか、誰に、いくらで、信頼できるのか、どうやって連絡するのか」に答えます。訪問者はGoogleや紹介経由で訪れ、数秒で判断し、探す必要があるなら去っていきます。このプレイブックは、何をどの順序で構築すべきかを示します。各ドメインスキルが詳細なルールを保持しています。

方向性ゲート

新しいページ、スクリーン、リスタイルのコードを書く前に、たとえリクエストが1行であっても、これを実行してください。このスキルの残りの部分は間違いを取り除くものであり、スクリーンの個性を与えるものではありません。これをスキップすると、結果はどのモデルも作る中央値のページ、つまり詳細は正しいが誰のものでもないページになります。

5つのライン。 製品: 何をするのか、誰のために。 キャラクター: 2〜3の具体的な言葉（落ち着いた、正確、少し暖かい）。クリーン、モダン、スマート、ミニマル、プレミアムは避けてください。世界: 製品が属する場所や素材。ニュートラルカラーを彩り、アクセントを決めます。瞬間: 豊かな色彩とディテールを施す1〜2箇所。地元企業の場合、通常は実際の作業や人の写真、またはその業界が使う印刷文書のような価格表です。 シグネチャー: この製品だけが持つ小さなディテールで、一貫して使用します。瞬間は、単にきれいにするだけでなく、注意深く描かれます。伝えたいことに合わせて再描画されたグラフ（滑らかな線、ミラー比較、実スケール）、または製品自体のオブジェクトを重量感と光で表現したものです。
棚卸し、次にアイデア。 競合他社が共有しない8〜12の事項（名前、通り、概要の数字、材料、道具、儀式、業界が印刷する書類）をリストアップします。「このページでは、[1つの項目] が [装置] になる」と書きます。その装置が瞬間です。
二次的なデフォルトを拒否する（ブランドがすでにそれらを所有している場合を除く）。これらは、明白なヒントが禁止された後にモデルが手を伸ばすものです。
- クリーム、ストーン、暖かいオフホワイトのページに、バーントオレンジ、テラコッタ、セージ、フォレストのアクセント、セリフ見出しの有無（「紙とインク」のルックは新しいデフォルトであり、方向性ではありません）。
- 見出しフェイスとして反射的にFraunces、Instrument Serif、Playfair、Georgiaを使用。唯一のフェイスとしてsystem-uiを使用。
- 白地にInterまたはGeist、1つのインディゴまたはブルーのアクセント。
- ヒーロー、サービス、レビュー、サービスエリア、お問い合わせ、をその順序で、その理由を主張せずに配置。
- 中央揃えのアイブロウ、見出し、2つのボタンを最初の画面全体として配置。
交換テスト。 名前と業種を競合他社のものに置き換えます。それでもページが適合する場合は、主張、瞬間、シグネチャーを変更し、再度テストします。
表示して待つ。 5つのラインとアイデアを表示し、オーナーを待ちます。尋ねられない場合（ユーザーが単に構築するよう指示した、または人がいない状態で実行する場合）、それらをメインファイルの先頭にコメントとして書き、その通りに構築します。

深さ: anti-slop プレイブック §2（方向性）と§12（アプリ画面）。実際の参考資料については design-inspiration-index スキル。

ヴィトリーヌに必要なもの

ページごとに1つの明確なオファー。 最初の画面は、何が、誰に、どこで販売されているかを平易な言葉で示し、1つのプライマリアクションを提示します。それ以外をすべてスキップした読者でも理解できます。異なるサービスには別々のページが、すべてを売り込む1ページよりも優れています。
価格、または「〜から」の価格。 購入者は比較します。開始価格とその内容は、悪質なリードをふるい落とし、信頼を築きます。「お問い合わせください」だけでは、価格を表示する競合他社に顧客を奪われます。価格が変わる条件を明記します。金額は1つのデータファイルに保持し、すべてのページと構造化データが一致するようにします。
予約または問い合わせを1ステップで。 すべてのページに、目に見える電話リンクと1つの短いフォームまたは予約リンクを配置します。返信に必要な情報のみを求めます（名前、連絡先、希望内容）。いつ返信があるかを明記します。送信後は明確に確認します。モバイルではタップで電話発信。
実績。 結果を示す実際のプロジェクト、名前と日付（またはリンク）付きの実際のレビュー、許可がある場合のみロゴ。少数の具体的な実績は、多くの漠然としたものよりも優れています。ストックフォトのチームや捏造された推薦文は禁止です。
ローカルSEOの基本。
- ランキング対象となるサービスエリアごとにページを作成し、それぞれに真にローカルなコンテンツ（都市名を入れ替えただけの同じテキストではない）を含めます。
- LocalBusiness（またはより具体的なサブタイプ）のJSON-LD。名前、住所またはサービスエリア、電話番号、営業時間、掲載価格と一致する価格帯を含めます。FAQPage は1つの正規ページにのみ追加します。
- 完全なGoogleビジネスプロフィール。サイトと同じ名前、住所、電話番号。カテゴリ、営業時間、写真、正しいページへのリンク、レビューへの返信習慣。
- ページごとに1つのh1、説明的なタイトルとメタディスクリプション、両言語のhreflang、サイトマップ、読みやすいURL。
スピード予算。 地元の訪問者は平均的な回線のスマートフォンを使用しています。LCP画像をプリロードし、正しくサイズ設定（最新フォーマット、明示的な幅と高さ）。フォントはセルフホスト、1〜2ファミリー、font-display設定、サブセット化。装飾用の重い3D、動画背景、大規模JSライブラリは禁止。サードパーティスクリプトは、その価値がある場合のみ。コンテンツはロード時に表示されます。モバイルでLCP 2.5秒未満を目標とし、実際のスロットリングでテストします。
市場に応じてバイリンガルFR/EN。 各言語に1つのメッセージソース。同じ構造とコンテンツのパリティ。現在のページを維持する言語スイッチャー。ローカライズされたURLとhreflang。フランス語のコピーは約20％長くなるため、レイアウトが壊れないようにします。フランス語の文字列すべてに french-typography スキルを適用し、そのCIガードを追加します。
ケベック州：法律25。 ケベック州で個人情報を収集するサイト（問い合わせフォームで十分）は、loi-25-website スキルを実行します。プライバシーポリシー、責任者の表示、収集時の通知、デフォルトオフのトラッキング、ケベック州外のツールのレビュー。これを後付けではなく、構築の一部として扱います。これを考慮して分析ツールやフォームツールを選択します。
モーション：最大1つのシグネチャーモーメント。 1つの記憶に残る目的のあるインタラクション（クロスフェードのプロジェクトスイッチャー、ビフォーアフター）と、シンプルな押下・ホバーフィードバック。スクロールリビール、スムーススクロールライブラリ、ループする装飾は禁止。motion スキルを使用します。reduced motionは最終状態を表示します。

推奨ページ

ホーム、サービス（またはサービスごとに1ページ）、実績（ケーススタディ付き）、料金、お問い合わせ。エリアページと少数のガイドは、誠実に維持・更新する場合のみ追加します。「About」ページは実績を伴わない限りスキップします。短い人物紹介はホームまたはお問い合わせに折り込みます。

作業順序

オファーと実績。 デザインの前に、1文のオファー、価格ライン、3つの実績、問い合わせ経路を書きます。ux スキルをプレーンコピーに使用します。
方向性とトークン。 上記の方向性ゲートを実行し、次にパレット、1〜2のセルフホストフォント、スペーシング、角丸を ui スキル（プロジェクトにデフォルトがない場合はセンスの良いデフォルト）で設定します。
モックアップ（デスクトップと390px）。 最初にホーム、次に1つの内部ページ。オーナーが判断します。構築前に反復します（ui スキル、モックアップファースト）。
実際のコンテンツでページを構築。 実際の写真とテキスト。ダミーテキストは使用しません。長いフランス語の文字列を確認します。
SEOとスキーマ。 タイトル、メタ、JSON-LD、サイトマップ、hreflang、エリアページ、サイトに合わせたGoogleビジネスプロフィール。
言語と法律。 すべてのフランス語コピーに french-typography を実行し、次に監査レポート用に loi-25-website を実行します。
スピードパス。 スロットリングされたモバイルプロファイルでLCP、CLS、総転送量を測定し、最大の項目から修正します。
モーション、次にスロップパス。 1つのシグネチャーモーメントを追加し、次に anti-slop とその検出器を実行します。

よくある間違い

オファーの代わりに「ようこそ」やスローガンを表示するヒーロー。
フォームの背後に価格を隠す、または変更後にスキーマや都市ページに古い価格を残す。
5つの問い合わせ方法があり、明らかなプライマリがない。
都市名を入れ替えただけの同じページである都市ページ。
トラッキングがデフォルトで読み込まれている間に、装飾としてCookieバナーを追加する。
訪問者をホームページに戻す言語スイッチャー。

地域ビジネスの紹介サイト