ランディングページ（codebyabdullah スタイル）
単一の index.html、ビルドステップ不要、静的サイトとしてデプロイ。これらがテンプレート製ではなくカスタムメイドに見える理由は、例外なく適用される小さなルールセットによるものです。そのすべてを以下に示します。
リファレンス実装は templates/starter-dental.html です。
迷ったら、どのように実装されているかを読んでください。
ワークフロー
- ブリーフィング（2分）。 次の事項を入手するか、決定して明示します。ニッチ、ブランド名（アラビア語＋ラテン文字）、都市、1つのオファー（例：「الكشف الأول مجاني」）、および主要なアクション（予約、見積もり、訪問、注文）。実際のクライアントのコンテンツ（サービス、電話番号、住所）はデータとして入力します。レビュー、評価、価格、人物をでっち上げてはいけません。架空のデモの場合は、ナビゲーションピルに「مثال · مشروع وهمي للعرض」と表示します。
- ニッチキットの選択 references/niches.md から、パレット、フォント、3Dヒーローのアイデア、シグネチャーインタラクティブ、セクション順序、JSON-LDタイプを選びます。ニッチが存在しない場合は、同じスロットを使用して新しいものをデザインします。
- コピーを先に書く。 すべてのCSSの前に、references/copywriting-ar.md を使用して各行を記述します。オファーはページ上に8～14回登場します。
- スターターから開始。
templates/starter-dental.htmlを<site>/index.htmlにコピーし、スキンを変更します。トークン、フォント、コピー、セクションを変更した後、3Dシーンとシグネチャーインタラクティブを置き換えます。スケルトン、パフォーマンス階層ブロック、モーションシステム、a11yフォールバックは維持します。詳細: references/design-system.md、 references/page-structure.md、 references/hero-3d-and-performance.md、 references/motion.md、references/conversion.md。 - ツールでQA。
node tools/shoot.js verify <site>でデスクトップ、スマートフォン、および静的階層の各セクションのスクリーンショットを撮り、コンソールエラーと切れたアンカーを報告します。すべてのスクリーンショットを確認します。次に references/qa-checklist.md を実行します。 - アセット。
node tools/shoot.js assets <site>でhero-poster.webp、og.jpg、cover.webpをレンダリングします。 - デプロイ。 サイトごとに独自の git リポジトリを作成し、Vercel に静的デプロイした後、canonical/OG/JSON-LD を実際のURLに設定します。references/deploy-and-assets.md を参照してください。
絶対条件
<html lang="ar" dir="rtl">、論理CSSプロパティのみを使用（margin-leftではなくmargin-inline-start）。- コンテンツにストックフォトや画像ファイルは使用しない。 すべてのビジュアルはプロシージャルに生成されます。プロシージャルな Three.js、スクロールに合わせて描画されるインラインSVGラインアート、キャンバステクスチャ。フッターにその旨を明記します。
- ニッチごとに1つのプロシージャルな3Dオブジェクトが価値提案を伝える ヒーローが固定表示されている間（スキャンが歯を明らかにする、タワー全体で窓が光る、カードが裏返って証拠を示す）。それはストーリーであり、装飾ではありません。2～3の固定表示されたステートメントが単語ごとにそれを語ります。
- ブランドごとに1つのアクセントカラー。見出し内の
<em>、CTA、および小さなマークにのみ使用します。 - 大きく詰まったアラビア語見出し（
letter-spacing:-.035em）に、数字、セクション番号、ラベル用のラテン表示またはモノフォントを組み合わせます。 - CSS用の1つのイージングカーブ（
--ease: cubic-bezier(.2,.75,.15,1)）と小さなモーションボキャブラリー（ワードマスクリビール、固定表示された水平セクション、スクラブリフト、マグネティックボタン、マーキー）。 - モバイル階層 v1 ブロック（templates/perf-tier.html）は最初のペイントの前に実行されます。
full（デスクトップ）、lite（スマートフォン）、static（弱いスマートフォン、ポスターのみ、Three.jsなし）。h1 がLCP要素です。3Dはテキストがペイントされた後、アイドル時間に構築されます。 - モーションのない完全なページ:
prefers-reduced-motionとJSなしの両方で、最終的な静的で完全に読めるレイアウトを提供します。 - サウジ（ナジュディ）方言の白 dialect、専門的で正直。「ليش」、「وش」、「عشان」、「الحين」。誇大広告はありません。
- フォームは3フィールド以下。 別のCTAがすでに画面上にある場合は非表示になるフローティングCTA。
禁止事項（これらはページをテンプレートのように見せる原因です）
- ストックフォト、UI内の絵文字、一般的なグラデーションブロブ、複数のアクセントカラー。
- すべてをアニメーション化する: モーションはストーリーに従い、その後邪魔にならないようにします。
- デスクトップのみの調整: スマートフォンと静的階層もデスクトップと同様に注意深く確認します。
- 偽のソーシャルプルーフ: でっち上げの testimonial、星評価、クライアントロゴ、価格は禁止。
margin-left/right、text-align:left、LTRのみのアイコン（矢印はRTLの方向を指す必要があります）。shoot.js verifyからのすべてのスクリーンショットを確認せずに出荷すること。