Website VSL Standard (olaceo メソッド) は何をしますか？

v1.0.0, 2026年10月25日。olaceo.com のリファレンスコードとその計測ログに基づいて執筆されており、記憶に基づくものではありません。以下のすべての数値は、以下のいずれかです。

計測済み: リファレンスコードまたはリファレンスビルドの検証ログからコピーされたもの。
または UNVERIFIED とマーク: 目標、外部の主張、またはまだ計測されていないもの。これらを事実としてクライアントに引用しないでください。

この標準に付属するファイル（パスはこのファイルからの相対パス）:

reference/tokens.css: 実際のトークンブロック（ライトおよびダーク）、ベースタイポグラフィ、グリッド、ボタン、入力、ヒーロー、ピル、トランジション。
reference/motion.js: 実際のスプリング、ラバーバンド、速度、フリック投影、VSL スキップ禁止コード。
templates/client-intake.md: ステップ1で使用する記入式インテークフォーム。

ワンスクリーンで理解する哲学（これを最初に読んでください）

一人の訪問者、一つのジョブ、一つの次のステップ。 サイトに訪れるすべての人には一つの目的があります。サイトの役割は、その人が誰であるかをワンタップで見極め、その人を前進させるものだけを表示することです。摩擦は敵です。
静かな表面、その下で動く機械。 表面は白いスペース、一つの書体、一つのアクセント、そして実際の写真または実際のビデオです。インテリジェンス（ルーティング、スキップ禁止プレイヤー、トラッキング、CRM）は見えません。
証拠、主張ではない。 でっち上げの統計、ロゴ、お客様の声、希少性、カウントダウンはありません。証拠が存在しない場合、スロットは非表示のままにするか、FAQ で「まだありません。そして、私たちは作り上げたりしません」と表示します。ビルドは禁止された主張に対して失敗します。
誰もがどこか役立つ場所で退出する。 行き止まりはなく、「適合しない」「資格がない」といった拒否表現もありません。準備ができていない訪問者には無料のパスを提供します。
モーションは液体であり、ガラスではない。 動きは物理法則（スプリング、速度、ラバーバンド）に従います。決して装飾的ではなく、常に動きの軽減設定を尊重します。水が水たまりに合流するように考えてください。ガラスではありません。
目視ではなく、計測する。 センタリング、レイアウトシフト、フレームドロップ、フォールド位置は、完了と判断する前に px と ms で計測されます。

なぜ機能するのか（心理的観点）:

入り口での自己選択。 人々は自分を名指しするページを信頼します。「あなたはどちらですか？」と問うことで、訪問者自身にセグメントをさせ、以降のすべての言葉が一人に向けて語られるようにします。また、フォームではなく、ワンタップで済みます。
依頼する前に価値を示す。 H1 は、サービスではなく、ICP が求めている成果（時間、お金、不足しているスキル）を述べます。2人の VSL ファネル実践者は次のように述べています。Haynes は「あなたのオファーが何であり、誰のためのものかについての明確で率直な声明」、Iles は「サービスではなく、結果について語る」と。
選択肢を減らし、行動を増やす。 1ページに1つのプライマリ CTA。セカンダリパスは控えめなテキストリンクであり、決して2つ目のボタンではありません。
静けさ = 信頼性。 抑制（白いスペース、一つのアクセント、ライトウェイトの大きな書体）は、プレミアムで自信に満ちていると読まれます。ごちゃごちゃしていると、焦っているように読まれます。これはリファレンスビルドからのデザイン判断です。UNVERIFIED: 計測されたコンバージョン効果としては未確認。
視聴によるコミットメント。 VSL は前方スキップができないため、CTA は全体の議論を聞いた人に出会います。エンドスクリーンは CTA をその場に配置します。

ステップ 1. インテーク: 誰が入ってくるか、彼らが何を望むか、何が彼らを止めるか

ピクセルを配置する前に行ってください。templates/client-intake.md にクライアントの情報を記入します。

各 ICP について、以下を書き留めてください:

彼らの言葉での名前: 彼らがカードに自分をどう書くか。olaceo の場合:「私はビジネスオーナーです」/「私は AI で構築します」。
目的: 彼らが求めて来た一つの成果。オーナーはツールではなく成果（「お金を節約する、時間を節約する、お金を稼ぐ」）を購入します。
主な反対意見: 彼らが離脱する理由。ビルダー:「構築はできるが、セールスコールで固まってしまう」。オーナー:「自分のビジネスで AI が何を修正できるかわからない」。
彼らが必要とする証拠: 実際に持っている現実的な証拠のみ。
次のステップ: その ICP のための単一のアクション（通話予約、ウォークスルー開始、購入、ダウンロード）。
価格ルール: 表示または非表示。olaceo のビジネスファネルは価格を表示しません（「診断してから見積もります」）。これはビルドによって強制されます。

ルール:

2つの ICP がリファレンスです。ルーター上に3つ以上のドアがあると、分割が薄まります。UNVERIFIED（判断であり、テスト済みではありません）。
ICP の目的を一文で書けない場合、そのページをまだ構築できません。立ち止まって質問してください。

ステップ 2. エントリ分割（"/" のルーター）

内容: ホームページはルーターです。一つの質問と、ICP ごとに一つの大きなカード。ヒーローコピーの壁、ナビゲーションメニューはありません。

リファレンスビルド（ルーターページとそのスタイル、2026年10月24日から olaceo.com で稼働中）:

H1 = ワードマークに両方のオーディエンスを名指す一行（「ビジネスオーナーとそれを売るビルダーのための、お金を生む AI」）。スクリーンリーダーは実際のテキストとして取得します。
質問: 「あなたはどちらですか？」（小文字、控えめ）。マージン 56px 0 18px。
カード: 2列、各340px、16px ギャップ、高さ200px、半径22px、ボーダー rgba(18,24,32,.09)。矢印ディスク 44px。ホバーで -2px 浮上、アクティブで .985 にスケール。
モバイル: 最大幅420pxまで1列、カード高さ108px。
各カードはプレーンな <a href>。JS なしでも動作します。
選択の記憶: localStorage ola_path。再訪問時は「おかえりなさい」と表示され、最後のカードに控えめな「続ける」チップが表示されます。
自動リダイレクトは禁止。 理由: すべてのページのロゴが "/" にリンクしているため、自動ルーティングは間違ったドアを選んだ人を閉じ込めてしまいます。
ダイレクトリンク（広告、メール、PDF）はルーターを経由せず、直接 ICP ページに移動します。
メンバーはカードの下に控えめなテキストリンクを表示（「すでにメンバーですか？サインイン」）：13px、#6B7580、44px タップターゲット。
ローダー: h1 自身のワードマーク上のピュア CSS。1.78秒間実行、同一セッションの再訪問時は0.4秒、動きの軽減設定では1回の0.4秒フェード。追加リクエストなし、CLS 0。
終了: クロスドキュメント View Transiton。ルーターからパスへの移動のみに使用。アウト .3秒、イン .5秒 cubic-bezier(.22,1,.36,1)。
フッター: セカンダリリンクの控えめな行（無料ガイド、予約、概要、プライバシー、利用規約）。
JSON-LD: Organization、Person、WebSite、および各パスの hasPart を含む WebPage。

リファレンスビルドで計測: 選択肢、ワードマーク、質問が 0.02px 以内で中央揃え；スタックが垂直方向に 0.000px で中央揃え；ルーターテストスイート 39/39。

ステップ 3. ICP ごとのパス: 価値に直行

各 ICP ページは同じ背骨に従います: 見出し、ビデオ、一つのアクション。

アイブロウ: 誰のためのものか、平易な言葉で。「ビジネスオーナー向け」。
H1: 成果。12語以内。
リード: 一行。どのように提供するか。
VSL: 大きく中央揃え（ステップ 3a）。
一つの CTA をビデオの真下に。ロード時から表示され、遅延表示はなし。その下の細かい文字で恐れを取り除く：「無料。30分。ピッチデッキはありません。」
ヒーローの真下に証拠：正直なもののみ（「私たちが出荷したもの」）。
その後は、反対意見に答えるもののみ。順序: 問題（彼らの言葉で）、あなたが見つけるものまたは行うこと、仕組み（3ステップ）、オファーラダー、FAQ（正直な費用の回答を含む）、そして一つのアクションを繰り返す全幅のクローズ CTA。

リファレンスの順序:

/business: ヒーロー VSL、出荷実績、問題（4つ）、監査で見つかるもの（6つ、番号付き）、仕組み（ウォークスルー、診断、構築）、ラダー、FAQ、クローズ CTA（無料サイトチェックへの代替テキストリンク）。
/builders: ヒーロー VSL、#book（インラインカレンダー、「時間を選んでください。」）、対象者、創業者について、FAQ。

ルール:

ヘッダーに予約ボタンはなし。 ヘッダーはワードマークのみ（必要に応じて About/FAQ テキストリンクを追加）。理由: 上部に2つ目の CTA があるとビデオと競合します。
フローティングピル: ページの唯一の CTA を反映します。ヒーロー CTA がスクロールアウトした後にのみ表示され、カレンダー、フォーム、クローズ CTA、フッターの上では非表示になります（[data-fc-hide]）。下部20px + セーフエリアに中央揃え。動きの軽減設定: フェードのみ。
ニッチページ (/for/<slug>) はデフォルトの JSON にマージされる JSON ファイルであり、ニッチは変更点のみをリストします。
予約はできるだけその場で。 CTA は別のサイトではなくインラインカレンダーにスクロールするため、訪問者は予約のためにページを離れることはありません。UNVERIFIED: 自社トラフィックでの計測によるリフトとしては未確認。

3a. VSL レイアウトとプレイヤールール（olaceo.com /business および /builders で稼働中）

レイアウト（コードは reference/tokens.css、「centered VSL hero」を参照）:

アイブロウ tracking .08em、margin-bottom 14px。
H1: clamp(40px,3.3vw,56px)/1.05、max-width 880px。
リード: clamp(17px,1.35vw,19px)、max-width 720px、H1 の下 12px。
ビデオ: width:min(880px,92vw,calc((100svh - 330px)*16/9))、リードの下 22px、半径 16px、影 0 24px 60px -28px rgba(10,30,50,.35)。高さの項により、短いラップトップでも CTA がフォールドの上に保たれます。
CTA: min-width 320px、高さ 56px。
計測: 1440x900 ではビデオは 880x495、ボタンは y 744-800（フォールド内）に配置。1280x720 ではビデオは 693x390。390x844 では 4:5 ビデオは 358x448、ボタンは y 712-768 に配置。
モバイル: H1 32px/1.08、リード 15px。4:5 ファイルは縦向き電話 (max-width:699px) and (orientation:portrait) でのみ使用されます。回転時には同じ秒でファイルを交換します。常に object-fit:contain であり、単語が切り取られることはありません。

プレイヤー（コードの抜粋は reference/motion.js パート C）:

最初のタップの前: 18px のぼかしと 1.1 スケール（モバイルでは 12px と 1.13）のミュートプレビューループ、112px の再生ボタン（92px の内側の円、モバイルでは 100/80）の上に静的な見出し、その下に「音声付きで再生」と表示。最初のタップで .42秒かけてぼかしが解除され、0:00 から音声で再開し、ぼかしは二度と戻りません。
前方スキップ禁止: maxW は自然な再生（各ステップ 1.5秒未満）によってのみ増加します。maxW + 0.3秒を超えるシークはスナップバックします。再生速度は 1 に固定。PiP、リモート再生、ダウンロード、ネイティブフルスクリーンは無効。iOS ではインラインのまま。巻き戻しと一時停止は常に許可。キー: Space/K でトグル、J で -10秒、Left で -5秒、Home；Right は既に見た部分内のみ。
コントロール: バーは再生開始から2秒で自動非表示。ボタン 44px（モバイルでは 48px）。トラック 4px（ホバー時 6px）、サム 14px。
エンドスクリーン: CTA（フォーカス済み）と「もう一度見る」。
イベント: VideoPreview、VideoSoundOn、VideoView25/50/75/100、VideoReplay。
品質: 4K は、mediaCapabilities がスムーズなデコーディングを報告する大型の高 DPR スクリーンでのみ提供されます。4K が失敗した場合、同じ秒で音声を保持したまま 1080p にフォールバックします。（既知のバグパターン: ミュートするフォールバック。修正: NotAllowedError の場合のみミュート。）
再生ボタンのセンタリング: ハロー、円、SVG は一つのグリッドセルを共有し（inset 0、margin auto、変形なし）、三角形の面積重心は右に +0.5px オフセット。DSF 3 で 0.000px のオフセンターと計測。
なぜスキップ禁止か: CTA は全体の議論を聞いた人に出会うべきだから。なぜぼかしか: 音声を自動再生せずに「これはビデオです、タップしてください」と伝えるため。
目標: VSL は5分以内。50%以上の再生率とエンゲージメント目標は Haynes VSL メソッドに由来。UNVERIFIED: まだ再生率を計測していません。

3b. フォームと摩擦

1画面、最大3フィールド（リファレンス: 名、メール、ビジネスウェブサイトまたは名前）。ステップやプログレスバーはありません。資格判定は通話と CRM で行われます。
すべてのフィールドに適切な autocomplete、inputmode、autocapitalize、必要な場所で spellcheck=false、および enterkeyhint（next、next、go）を設定します。Enter で次のフィールドに移動します。
ハニーポット、同一オリジンチェック、サイズ制限、レート制限をサーバー側で実施。JS なしでも動作します（実際の action + method="post"）。
ボタンは何が起こるかを示します：「ウォークスルーを予約する」。その下の細かい文字：「これをウォークスルーの設定にのみ使用します。リストへの登録やスパムはありません。」
電話番号は、コミットメント後にオプションで尋ね、別の未チェックの SMS 同意チェックボックス（その文言はビルドがチェックする）がある場合のみ。
履歴（理由）: 8画面のタップクイズが最初に構築され、その後削除されました（「8タップはダメ、2分未満」）。マルチステップのクイズは作成しないでください。

3c. コピールール（可能な場合は強制）

ブランド名は小文字（「olaceo」）で、大文字のアイブロウ内でも常に小文字（<span class="lc">）。クライアントの場合は、そのブランドの大文字小文字ルールを使用します。
ダッシュ（em dash）は禁止。ニッチコピー内の U+2014 でビルドは失敗します。
BIZ_SHOW_PRICES が false の場合、ビジネスファネルに価格を表示しない。レンダリングされた HTML 内の $<digit> でビルドは失敗します。
ニッチコピー内のでっち上げの統計、% の主張、ロゴ、お客様の声、未発売の製品名は禁止。これら（bannedProof）でビルドは失敗します。
価値を先に：H1 に成果、リードにメカニズム、CTA の下に恐怖を取り除く文言。
平易な言葉、短い文、短縮形、二人称。olaceo のビルダーページは創業者の声（「Fam、...」）を使用し、「bro」は決して使用しません（ビルドはメール内のその単語で失敗します）。
隠れた選択性: 具体的なものだけを。「厳選された」「選ばれた」「独占的な」は決して使用しません。
「ハッキング」と主張しない：「できる」は使用しても、「である」は使用しない。
コーチングまたは収入ページには収益に関する免责事項を記載。

ステップ 4. トークン: タイポグラフィ、スペーシング、グリッド、カラー、テーマ

reference/tokens.css をコピーします。すべての非カラー値を保持します。クライアントのカラーに変更します。

タイポグラフィ（理由: 単一の可変書体は落ち着きを保ち、リクエストを節約します。軽量の大きな見出しはプレミアム感を演出します）:

1ファミリー、セルフホスト woff2 可変 300-700、font-display:swap、プリロード。フォールバック: system-ui、-apple-system、「Segoe UI」、sans-serif。
本文: 400、1.0625rem/1.6。スモール: .9375rem。
H1: ウェイト 300、clamp(2.625rem、5.4vw、5rem)、line-height 1.04、tracking -.03em。
H2: ウェイト 400、clamp(2rem、3.4vw、3.125rem)、1.1、-.025em。
H3: 1.25rem、600、1.3、-.01em。
見出しには text-wrap:balance。
行長: リード 34ch、本文 60ch、ヘッドロウ段落 38ch。

スペーシングとグリッド（理由: 大きな固定リズム = 落ち着き；clamp() は320から2560までの一つのシステムを維持します）:

サイドマージン --m clamp(20px、4vw、64px)。
セクションパディング --gap clamp(96px、11vw、168px)。
コンテナ 1360px max。
12カラム、ギャップ clamp(16px、2vw、32px)。
セクション見出しブロック下マージン clamp(40px、4.4vw、64px)。
ブレークポイント: 900、700/699、560px。
半径: カード 22px、スモール 16px、アクションと入力はピル（999px）。
タップターゲットは 44px 以上。プライマリボタン 54px（.btn）、ヒーローとフォームでは 56px（親指のリーチ）。
ナビゲーション高さ72px（モバイルでは 64px）。

カラー（理由: 単一のアクセントは「ここで行動」を意味し、それ以外はインクと白に一つのソフトなトーンステップ）:

ロール: 背景（白）、トーンステップ（mist、mist-2）、テキスト（ink、ink-2）、アクセント（sky、hover sky-2、wash）、線、

…

[翻訳のために切り詰められました]

Website VSL Standard (olaceo メソッド)