映画的Webサイト
サイトに、まるでよく演出された作品のような感覚を与えます。スクロールするたびに何かが明らかになり、各ボタンは重みを持って応答し、タイポグラフィはポスターのようなスケール感を持ちます。最終的なクライアントは地元ビジネスの経営者であり、訪問者は多くの場合スマートフォン、しかも4G回線でアクセスしています。そのため、動きは軽量でブラウザネイティブであり、読みやすさやWhatsAppのクリックを妨げることは決してありません。
参考ライブパターン: スキルfazer-siteに付属のテンプレート（fazer-site/template/）。リズム、スケール、密度について迷ったら、参考資料を開いて、コンテンツではなく仕上げを模倣してください。
公理
- アイデンティティはクライアントのもの。 色とフォントは、ロゴ、店舗正面、ビジネスのInstagramから抽出します。カタログから既成のパレットは使いません。ロゴがどこにも存在しない場合にのみ、暫定的な色を使用し、暫定的であることを明示します。
- ビジネス名はヒーローに大きく表示。 名前のないヒーローは却下されました。
- 写真はビジネス自身のもの、ストックフォトは不可。 店舗正面、店舗内装、商品、結果。実際の写真が一部でもない場合、そのブロックは「イメージ図」とマークされるか、削除されます。
- 動きは読みやすさに奉仕する。 アニメーションがコンテンツを遅らせたり、スクロールを妨げたり、ボタンを消したりする場合、そのアニメーションは削除されます。
- デフォルトは軽量。 HTML、CSS、
IntersectionObserverで解決します。アニメーションライブラリ（GSAPなど）は、承認された効果がそれなしでは実現できない場合にのみ使用し、CSSでできることに決して使用しません。
禁止事項（各項目は実際のプロジェクトで却下されたもの）
- スクロールに合わせてスタックまたは下降するカード（sticky stacking、
pinによるスケールとぼかし）。不可。 - 店舗正面、内装、商品、環境の写真に対する角丸、アーチ型、または円形の切り抜き。 大きな
border-radiusを持つコンテナも削除。生きた角または斜めクリップ（clip-path）が標準。 - レビューの背後にある背景写真。
- 細いセリフ体とイタリック体の見出し、および標準的なアクセントとしてのゴールド。 「繊細」と読まれます。求められるトーンは、クライアントのブランドが別のことを示さない限り、男性的、アグレッシブ、モダンです。
- 架空の価格表と架空の数字。 価格、評価、納期、 testimonial、カウントは、ビジネス自身が公開している場合にのみ使用します。
- 地元ビジネスに意味のないソフトウェア的な飾り: ライブダッシュボードを装ったカード、「System Operational」、自動クリックカーソル、ロゴのタイプライター表示。
映画的効果を生み出すもの
ポスターのようなタイポグラフィ。 見出し用のコンデンス＆ボールドファミリー（例：Barlow Condensed 800 Italic）と、ボディ用のクリーンなファミリー。大きな見出し（デスクトップでclamp()を使用し約90～140px）、短い行間、text-wrap: balance。見出しとテキストのスケールコントラストが主な効果であり、コストはゼロです。
ヒーロー。 巨大なビジネス名、具体的なサービス内容と場所を示すフレーズ、簡潔な証拠（評価、レビュー、フォロワー数、営業時間）、そして主要なボタン。デスクトップではテキストと写真が横並び。スマートフォンでは順序は：名前、フレーズ、証拠、ボタン、写真。写真は斜めにカットされた角と、約20秒かけてscale 1から1.06へのスローズームを持つことができます。
段階的な出現。 読み込み時に、ヒーローの要素が16～40px上昇しながら、順に（約80msの遅延で）表示されます。以下のセクションは、IntersectionObserver（低いthreshold）を使用して、画面に入るときに同じ動きで表示されます。
テクスチャ。 SVG <feTurbulence>ノイズを5%の不透明度で、ヒーローとハイライトのフラットな背景に重ね、デジタルグラデーションのような見た目を排除します。
重みのあるボタン。 overflow: hiddenで、ホバー時に色を変えるためにスライドするレイヤーと、軽いscale(1.03)（cubic-bezier(0.25, 0.46, 0.45, 0.94)）を持ちます。タップターゲットは最低44px。
ワイド画面での証拠のハイライト。 実際のレビューをマニフェストサイズで、フラットな暗い背景に、スクロールに応じて単語が順に点灯するように表示します。サイトにつき1つ。残りのレビューはシンプルなグリッドで表示。
カウントアップする数字。 評価やその他の実際の数字が、画面に入ったときに0から実際の値までカウントアップします。
コントラストのあるサービスセクション。 暗いサイトの中の明るいセクション（またはその逆）で、大きな序数（01、02...）を持ち、リズムを区切り、話題の変化を示します。
走行バナー（マーキー） サービスやカテゴリをアクセントカラーで表示するもの。オプション。
技術ルール
- 基本: 静的HTML＋CSS（同一ファイル内）。ただし、プロジェクトがすでに別のベースを持っている場合は除く。既存のプロジェクトでは、ベースと承認されたコピーを保持し、このレイヤーのみを適用します。
- フォントはGoogle Fontsから、
preconnectとdisplay=swapを使用。 - ヒーロー画像には
fetchpriority="high"、残りにはloading="lazy"、widthとheightを宣言。 - すべてを
@media (prefers-reduced-motion: reduce)内でラップし、アニメーションとトランジションをオフにします。 - スマートフォン: WhatsAppと電話用の固定ボトムバー。フォームフィールドがフォーカスを受けている間、およびヒーローボタンが表示されている間は非表示。360pxで水平スクロールなし。
完了条件
- 360px、375px、1440pxでのスクリーンショットを開いて確認し、禁止リストの項目が表示されていないこと。
- ビジネス名がヒーローにあり、写真がビジネス自身のもの、または「イメージ図」とマークされていること。
prefers-reduced-motionが有効な場合、サイトが完全に表示され、読みやすく、アニメーションを待つために隠れているコンテンツがないこと。