ウケツギ(uketsugi)

上の提案をもとに AI が起こした詳細ブリーフです。これがそのままコードを書く AI への入力になりました。原文のまま載せています。

# ウケツギ(uketsugi) 制作ブリーフ v2

**Design Read:** 動物病院の院長 / 受付リーダー向け B2B SaaS のランディング。アイコンリッチ・フレンドリーポップな言語で、Astro + 素の CSS(`body.uketsugi-page` スコープ)+ スラブセリフ display + 見える量だけのモーション。**Hero は「現場が止まらない」約束、本文は「記録が残る」証明**という二段構えで組む。

**ダイヤル(確定値・v1 から変更なし):**

| ダイヤル | 値 | 理由 |
|---|---|---|
| `DESIGN_VARIANCE` | **7** | ポップだが業務ツール。マーキー帯と非対称ベントで崩し、数値まわりは整列を守る |
| `MOTION_INTENSITY` | **7** | マーキーとカウンタ tick が主張そのもの。ただし動くのはこの 2 つと reveal だけ |
| `VISUAL_DENSITY` | **5** | 件数・変換率を並べる SaaS 的密度。ただし空白は殺さない |

参考サイト Lassie((参考URLは非公開))から取るのは「高彩度の面 + 丸みのある UI 語彙 + 動物領域の柔らかさで実務的な内容を運ぶ」姿勢まで。保険 SaaS のカード積みレイアウトそのものは踏襲しない。

---

## 0. v1 → v2 の統合方針(共同ディレクターの対案の扱い)

**採用したもの:**

| 対案 | 採否 | v2 での姿 |
|---|---|---|
| Hero を「全部取る」から「現場を止めない」へ | **採用** | 第一見出しを「電話は取る。手は止めない。」に確定。`ぜんぶ` の広告臭と「100% を言わない」哲学の緊張を解消 |
| Hero 勝ち筋 A / B の選択 | **A に決定** | ただし B(記録が残る)は捨てず、**セクション 4 の見出しへ移設**して主題として生かす。Hero = 約束 / 本文 = 証明の分業にする |
| 「できること」を機能列挙から場面名へ | **採用** | 5 セルの見出しを場面名(名詞)、本文を動詞終わりに。見出しと本文で「いつ」と「何をするか」を分担 |
| 5 セル上部の時刻スタンプ小ラベル | **採用** | `12:41 / 昼休み` 形式。これはアイブロウではなく**チケット言語の再登場**なので計上外(理由は 5 章に明記) |
| コーラルを乾いた赤橙へ締める | **採用(値は変更)** | 方向は正しい。ただし `#E85C3A` は白抜き文字で 3.49:1 しか出ず、CTA ラベルの合格線が薄い。**`#E2502F` に確定**(白抜き 3.76:1、18px/700 以上で AA large 合格) |
| イエロー `#F4C542` / スカイ `#3A98E8` | **採用** | v1 の値よりネオン感が落ちて業務ツール側に寄る |
| 写真の温度は実務寄り(A) | **採用(条件付き)** | 手元中心を基本にする。**顔が出るのはセクション 9 のポートレート 2 枚だけ**と決め打つ |

**敢えて外したもの:**

1. **ダーク時アクセントの分離(`#FF7A5C`)を外す。** コーラルは**ライト / ダークで同一の `#E2502F` 1 値**にする。ダーク地 `#151A24` に対して 4.50:1 出るので数値にも使える。色を 2 値持つと「アクセントは 1 色」というページ全体の規律が実装時に緩む。1 値に絞ることが、このページで一番守りたいルールの担保になる。
2. **codex 第 3 案「受付に残すのは、通話ではなく次の手です。」を第一候補にしない。** 内容は良いが敬体で終わっており、このブランドの声の癖(短く言い切って句点)から外れる。第三案として残すに留める。
3. **「マーキー hover 時の内側罫」をコーラルの用途に数えない。** コーラルは **CTA 面 + 1 指標 + hover 罫**の 3 用途とすると、hover 罫が実装上あちこちに伝播しやすい。**CTA 面と 1 指標の 2 用途に固定**し、hover の内側罫はインク紺 24% にする。「コーラルが出た = 押せる / 効いている」の意味が濁らない。

---

## 1. ブランド軸

- **名前:** ウケツギ(uketsugi)
- **業種:** 動物病院向け 電話受付・予約 AI SaaS(pet × saas)
- **ペルソナ:**
  - 主: 分院を持たない 1〜3 診察室の動物病院の院長(40 代)。診察中に電話が鳴り続けるのが日常。
  - 副: 受付主任 / 動物看護師(20〜40 代)。電話とレジと保定を同時にやっている当事者。決裁はしないが導入の可否を実質的に握る。
- **価格帯:** 月額 39,800 円(1 回線・入電 500 件/月まで)から。上位は 78,000 円(2 回線・カルテ連携)。初期費用なし、最低利用 3 か月。※金額は本デモのサンプル値。
- **ブランド人格(4 語):** 律儀 / 明るい / 手が早い / 出しゃばらない
- **Why-This-Brand:**
  動物病院の電話は、鳴った瞬間がいちばん忙しい時間と完全に重なる。診察台に犬を乗せている手で受話器は取れないし、留守電に切り替えた分は「誰から何の用件だったか」ごと消える。消えた電話は数えられないので、院長は自分が何件失っているかを一生知らないままになる。ウケツギは、その取り逃しを最初に「数えられるもの」に変えるために存在する。AI が賢いことを見せる商売ではなく、AI が今日やった仕事を 1 件ずつ伝票にして院長の机に積んで見せる商売である。だからこのサイトの主役は、機能一覧ではなく「今日やったことログ」そのものになる。

**v2 での軸の置き方:** 上の Why は変えない。変えるのは**出し順**。Hero では「現場が止まらない」という結果を先に約束し、その根拠として直下のマーキーと実績カウンタで「記録が残っている」を突きつける。抽象的な信頼獲得を Hero に背負わせず、Hero は 3 秒で伝わる 1 文だけを持つ。

---

## 2. 差別化軸

**同業(受付 AI / 電話代行 SaaS)の凡庸な見せ方 3 つ:**

1. **青と白のクリーンな SaaS 面 + ヘッドセットの女性写真。** 信頼感を色で言おうとして、どのサービスも同じ画面になる。
2. **偽ダッシュボードのスクリーンショットを hero に置く。** グラフが右肩上がりの管理画面モックだが、その数字が何を意味するかは誰も読まない。
3. **抽象名詞の 3 枚並びカード。**「24 時間対応」「業務効率化」「顧客満足度向上」。3 枚が同じ大きさで同じ形をしていて、どれも検証できない。

**この案の踏み外し方(v2 で 1 段鋭くする):**

抽象語を 1 つも使わずに、**AI が実際に処理した 1 件を、時刻・種別・結果まで刻んだ「伝票(チケット)」として横に流す**。証明を、形容詞ではなく粒で見せる。ダッシュボードのスクショは 1 枚も出さない代わりに、伝票の束と、そこから積み上がった件数カウンタだけを置く。

v2 で追加する 2 本の縛り:

- **結果語を 4 語に固定する。** チケットの結果欄に出てよいのは `反映` / `回答` / `案内` / `折返し` の 4 語だけ。10 枚のチケットが同じ語彙で終わることで、これがコピーライティングではなく**実際に動いている業務システムの出力**に見える。語彙が自由だと途端に「それっぽく書いた文章」に落ちる。
- **チケット言語をページ内で 3 回登場させる。** マーキー(3)→ できることの時刻スタンプ(6)→ 導入の流れの伝票断片(7)。同じ書式が違う文脈で再登場することで、「この病院ではこの形式で記録が残る」という了解が体に入る。ページ内で一貫した記法を持つのは、業務ツールの信用の作り方そのもの。

加えて「ウケツギがやらないこと」を専用セクションで宣言し、AI SaaS が普通は隠す限界を先に出す。獣医療という領域で信用を取るには、できることの列挙より、やらないことの明示のほうが効く。**v2 では 3 項それぞれに「代わりにこうする」を必ず併記する**(8 章)。限界の告白で終わると不安が残るが、代替動作まで書けば「設計されている」に変わる。

---

## 3. トーン&マナー

- **一人称:** 「ウケツギ」(サービス名で名乗る)。「私たち」「弊社」は使わない。主語は極力サービスか電話そのもの。
- **二人称:** 「先生」「あなた」で名指ししない。「診察中の手」「受付の机」「病院の電話」のように、現場の物と行為を主語にする。導入相談まわりのみ「病院」を主語にした敬体。
- **敬体 / 常体:** 地の文は敬体(です・ます)。ただし**チケット内の文言・時刻スタンプ・数値ラベルだけは体言止めの常体**(「12:41 昼休みの入電 3 件 / 折返し」)。伝票は喋らない、という切り分けを最後まで守る。
- **抽象度:** 低い方に振り切る。名詞は具体物(受話器・伝票・予約枠・折返し・時間外)。効果は必ず数か動作で書く。
- **リズム:** 短文。20〜35 字で切る。読点で繋いで長くしない。**見出しは 14〜22 字**、1 文完結、句点を打つ(「電話は取る。手は止めない。」)。句点入り見出しがこのブランドの声の癖になる。
- **避ける言葉:** シームレス / 革新的 / 次世代 / DX / ソリューション / ワンストップ / 寄り添う / 実現します / 最適化 / 感動体験 / 生産性向上 / 業務効率化 / AI が学習し続けます / 完全自動 / 100% / 絶対に / ぜんぶ / すべて。
  さらに獣医療領域として、**症状・治療・緊急度に対する判断語(診断する、大丈夫です、様子見で問題ない)は AI 側の発話としても一切書かない**。ウケツギの動詞は「取る・聞く・記録する・案内する・入れる・返す」に限る。
- **数値の扱い:** 断定の強い「取りこぼしゼロ」は見出しでは使わず、「取りこぼしを、あとで見えるようにする。」の形に落とす(セクション 4 の見出しに採用)。画面に出る実績値はすべてサンプルなので、実績セクション下に「画面の数値はサンプルです。」を**1 行だけ**置く(各所に散らさない)。
- **数値の内的整合(v2 追加):** サンプル値どうしが矛盾していると、記録を主題にしたページとして即死する。**取った電話 143 件 / 予約に変わった 61 件 = 42.7%** は電卓が合うこと。マーキーの 10 枚も同じ 1 日の時系列(09:12 → 20:15)として矛盾なく並べる。JSON 側にコメントで根拠を残す。

---

## 4. デザイン原則

### 4.1 配色方向(高彩度フレンドリーポップ / ライト基準・ダーク対応)

トークンは CSS 変数で定義し、`prefers-color-scheme` で差し替える。ページ全体で**テーマは 1 つ**。セクション単位で明暗を反転させない(面色の濃淡は同一テーマ内でのみ変える)。

| 役割 | ライト | ダーク | 使う場所 |
|---|---|---|---|
| 背景ベース | `#FFFCF4`(温かい生成り白) | `#151A24`(紺寄りの黒。純黒は使わない) | ページ地 |
| 面 1(サーフェス) | `#FFFFFF` | `#1E2634` | カード・チケット |
| 面 2(濃色ドレンチ) | `#17233A` | `#0E1220` | セクション 8 のみ |
| インク(本文) | `#17233A` | `#EDF1F7` | 文字全般 |
| インク弱 | `#5A6A83` | `#A5B2C4` | 補足・キャプション・時刻 |
| **アクセント(コーラル)** | `#E2502F` | **`#E2502F`(同値)** | **CTA 面と 1 指標のみ** |
| サポート(イエロー) | `#F4C542` | `#E8BB3E` | 面の塗り・ハイライト帯・アイコン背景 |
| サポート(スカイ) | `#3A98E8` | `#4FB0FA` | チケットの種別帯・進行バー・1px データ線 |
| 罫 | `rgba(23,35,58,.12)` | `rgba(237,241,247,.16)` | 1px ライン |

**ロック規則(v2 で 2 本追加):**

- **アクセントは 1 色。ライト / ダークでも同じ値。** CTA は最初から最後までコーラル。途中でイエローやスカイのボタンを出さない。
- **コーラルの用途は 2 つだけ:** ①CTA の面(ナビ / hero 主 / 料金 ×2 / 最終 CTA 帯)②「予約に変わった 61 件」の数値。それ以外に登場させない。
- **【v2 追加】コーラルとスカイとイエローは、16px 以下の文字色にしない。** 面色と大型数値(24px 以上)専用。生成り白の上でコントラストが落ちる帯域を、規則で丸ごと避ける。小さい文字は必ずインク紺かインク弱。
  - 実測根拠: 生成り白の上で `#3A98E8` は 2.98:1、`#F4C542` は白抜きが論外。一方 `#E2502F` 面 + 生成り白抜き文字は 3.76:1 なので **CTA ラベルは 18px / 700 以上**(AA large の 3:1 を満たす)。ダーク地 `#151A24` の上で `#E2502F` は 4.50:1 なので数値表示も通る。
- **【v2 追加】イエロー面の上の文字は必ずインク紺 `#17233A`**(9.65:1)。コーラル面の上は生成り白 `#FFFCF4`。この 2 組み合わせ以外の「色面 + 文字」を作らない。
- 影は黒ではなくインク紺の透過: `0 4px 16px rgba(23,35,58,.10)`。ダークでは影を捨てて 1px の内側罫に置換。
- グラデーションは使わない。面はベタ。AI 的な紫や外側グローは禁止。

### 4.2 タイポ体系

- **欧文 display / 数字: Zilla Slab(700 / 600)。** スラブを選ぶ理由は「編集的で高級だから」ではなく、**伝票・レシートの活字の質感を出すため**。数字は `font-variant-numeric: tabular-nums` を必須にする(カウンタが tick するとき桁が揺れない)。斜体は使わない。
- **和文 display: Zen Maru Gothic 700(丸ゴ)。** `letter-spacing: -0.02em` / `line-height: 1.32`。
- **和文本文 / 小組み: Zen Maru Gothic 500。** 1 書体系に統一し、太さで階層を作る(M PLUS Rounded 1c は使わない。2 系統ぶら下げると読み込みが重く、字面差が小さいのに揺れる)。
- **強調は同一書体の太さ or カラー**で行う。見出しの中に別書体の単語を差し込まない。
- スケール(desktop):
  - H1 `clamp(38px, 4.6vw, 62px)` / weight 700 / `line-height: 1.24`
  - H2 `clamp(28px, 3vw, 40px)` / weight 700 / `line-height: 1.3`
  - 本文 `17px` / `line-height: 1.85` / `max-width: 34em`
  - 大カウンタ `clamp(56px, 7vw, 96px)` / Zilla Slab 700 / `tabular-nums`
  - 小カウンタ `clamp(30px, 3.4vw, 40px)` / Zilla Slab 700
  - チケット文言 `13.5px` / `letter-spacing: 0.01em`
  - 時刻スタンプ `11px` / Zilla Slab 600 / インク弱 / `letter-spacing: 0.04em`
- 単位(件・%・時間・分)は `font-size: 0.62em` / ウェイト 1 段下げ / baseline を数字の下端に揃える。
- **禁止:** 和文の手動 `<br>` 改行での見た目調整(レスポンシブで崩れる)。改行が必要なら `word-break` と max-width で制御する。**例外は Hero H1 の 2 文分割のみ**で、これは `<br>` ではなく**句点で 2 つの `<span style="display:block">` に分ける**(「電話は取る。」「手は止めない。」)。文の単位で折るので、幅が変わっても意味が壊れない。

### 4.3 グリッド / レイアウト原則

- コンテナ `max-width: 1180px` / 左右 padding 24px(mobile 20px)。12 カラム、gutter 24px。
- **全幅で抜けるのはマーキー帯・セクション 8 の濃色ドレンチ・最終 CTA 帯の 3 つ。** それ以外はコンテナ内。
- hero は非対称スプリット(左 7col: コピー + CTA / 右 5col: 受付の実写)。中央寄せ hero は使わない。
- 角丸は**3 値に固定**: カード・面 `16px` / ボタンとピル `999px` / 入力欄 `12px`。この 3 つ以外の半径を作らない。
- **左右分割(image + text split)はページ内で hero の 1 回だけ。** セクション 8 の実写は左右に置かず、3 項の下に全幅 3:2 で 1 枚敷く。これでジグザグの連続が構造的に発生しない。
- **モバイル(<768px)は全セクション 1 カラムに明示的に落とす。** マーキーは高さを詰めて 1 本のまま、ベントは縦積み、横スクロール節(7)は scroll-snap のまま維持(ここだけ横のまま残すのが正解)。

**レイアウト家族の割り当て(重複ゼロの証明。builder はこの表から外れないこと):**

| # | セクション | レイアウト家族 |
|---|---|---|
| 2 | Hero | 非対称スプリット 7 / 5 |
| 3 | チケットログ | 全幅マーキー・ストリップ |
| 4 | 今日の実績 | 箱なし・1px 罫のカウンタ組み(大 1 + 小 3) |
| 5 | ロゴウォール | 6 連の等間隔グリッド |
| 6 | できること | 2 + 3 の非対称ベント(面色 4 種) |
| 7 | 電話が鳴ってから予約が入るまで | 横スクロール scroll-snap |
| 8 | やらないこと | 全幅濃色ドレンチ + 縦積み 3 項 + 下端に全幅写真 |
| 9 | 導入病院の声 | 2 枚の引用ペア |
| 10 | 料金 | 2 カード + 1 行 |
| 11 | よくある質問 | アコーディオン縦リスト |
| 12 | 最終 CTA | 全幅ベタ面 |

### 4.4 モーション言語

動かすのは次の 3 種だけ。それ以外に無限ループを足さない。

1. **チケットの無限マーキー(ページで 1 本のみ)**
   - CSS `transform: translate3d` の linear ループ。同じトラックを 2 セット並べて継ぎ目を消す。
   - **速度は時間ではなく距離で決める。** `--marquee-speed: 94px/s` を正とし、`animation-duration` はトラック幅から算出する(10 枚 × 実測幅で概ね 1 周 36s)。枚数や幅を変えても体感が変わらないようにするため。時間を直に固定すると、チケットを 1 枚足しただけで読めない速さになる。
   - 流れる向きは**左方向**(時刻の古い順が右から左へ抜けていく = 記録が積み上がって過去になる)。
   - `hover` と `focus-within` で `animation-play-state: paused`(読ませるため、かつキーボード操作者のため)。
2. **件数カウンタの tick** - IntersectionObserver で初回進入時に 1 回だけ、900ms `cubic-bezier(.16,1,.3,1)` で 0 から実数へ。`requestAnimationFrame` で数値を更新し、DOM は該当 `<span>` だけを書き換える。**`window.addEventListener('scroll')` は禁止。**
3. **reveal** - `opacity 0→1` / `translateY 8px→0`、duration 500ms、stagger 60ms。これ以上の距離を動かさない。

`prefers-reduced-motion: reduce` で、マーキーは停止して先頭 3 枚を静的に表示、カウンタは最終値を即表示、reveal は無効。アニメーションは `transform` と `opacity` のみ。

**動機のないモーションは足さない。** マーキー = 「裏で働き続けている」の物証。tick = 「数が積み上がる」の体感。reveal = 読む順の誘導。この 3 文で説明できないものは実装しない。

### 4.5 写真 / 動画の役割

写真は**人と動物と受付台**に限定する。UI・画面・スマホは写さない(プロダクトの証明はチケットと数字が担うため、写真は温度だけを担当する)。動画は使わない。

**温度の決定(codex の判断仰ぎ 2 への回答):実務寄りに振る。手元と物が主役で、顔が主役になるのはセクション 9 のポートレート 2 枚だけ。** 動物系サービスの「やさしい世界」に寄せた瞬間、月 39,800 円の業務ツールとして見られなくなる。

すべて `data-img-spec` 付きプレースホルダで置き、後工程で本画像に差し替える。スロット:

| 位置 | 比率 | spec の方向 |
|---|---|---|
| hero 右 | 4:5 | 日本の小規模動物病院の受付カウンター。白衣の受付スタッフの手元と、カウンターに置かれたキャリーケース。自然光、彩度やや高め、生活感のある実写。顔は写り込む程度で主役にしない |
| セクション 6 ベント内 1 枚 | 16:10 | 診察室で犬を保定する獣医師の手元。顔は写さない。温かい室内光 |
| セクション 8 下端 | 3:2(全幅) | 受付の固定電話の受話器を取る手元と、その奥にぼけた診察室。人の判断が残る場面を示す |
| セクション 9 | 1:1 × 2 | 院長 / 看護師長のポートレート。作り込んだ企業写真ではなく現場の光。ここだけ顔が主役 |

イラストは描き起こさない。アイコンは **Phosphor Icons 1 ファミリーのみ**、`regular` ウェイトで統一(チケット内の状態アイコンだけ `fill`)。SVG パスを手書きしない。ロゴウォールのモノグラム 6 点は例外的に SVG で組む(実在ロゴが存在しない架空病院のため。8 章の作法に従う)。

---

## 5. ページ構成

**本文セクションは 2〜12 の 11 個**(ナビとフッターは数えない)。アイブロウ(小さな英大文字ラベル)は**上限 3 だが 2 に絞る**(セクション 4 と 9 のみ)。それ以外は見出しだけで立たせる。

> v1 の「全 10 セクション中 2 か所」は数え方が合っていなかったので v2 で修正した。**セクション 6 の時刻スタンプはアイブロウに数えない。** アイブロウとは「セクション見出しの上に置く英大文字ワイド字間のカテゴリラベル」を指す。時刻スタンプは数字のデータで、カテゴリ名ではなく、見出しの上ではなくセル内に入る。ページ全体のテンプレ臭を作る要素ではない。

1. **ナビ** - 主張: いつでも試せる入口が上にある。
   - 要素: ロゴ / 「できること」「導入の流れ」「料金」「よくある質問」/ CTA「無料で試す」。1 行に収める、高さ 68px。スクロールで背景を `#FFFCF4` の不透明に固定(ぼかしは使わない)。

2. **Hero(非対称スプリット)** - 主張: 診察中に鳴った電話は、もう取ってある。
   - 要素: 見出し 2 文 / 補足 1 文(50 字以内・2 行以内)/ CTA 2 つ(主: 無料で試す、副: 導入相談する)/ 右に受付の実写。**テキスト要素は 4 つまで。** アイブロウなし、CTA 下の小さな注記なし、ロゴウォールを中に入れない、実績数字を hero に出さない。
   - hero の上 padding は最大 `96px`。それ以上空けると「余白」ではなく「バグ」に見える。

3. **チケットログ・マーキー帯(全幅ストリップ)** - 主張: ウケツギが今日やったことは、1 件ずつ残っている。
   - 要素: アイコン付きチケット 10 枚が無限に流れる 1 本の帯。**帯は hero の下端に接する(間の余白は 0)。** 背景はイエロー面 `#F4C542`、チケットは白面 + 16px 角丸。左端見出しは置かず、帯の直後に 1 行だけ「これは今日の記録です。」を置く(インク弱・14px・中央ではなく左寄せ)。
   - チケットの書式は固定: `時刻` + `/` + `用件` + `/` + `結果`。結果語は **反映 / 回答 / 案内 / 折返し** の 4 語のみ。左端にスカイの 3px 縦帯を種別インジケータとして入れる。
   - チケット 10 枚(同一日の時系列。矛盾させない):

     | 時刻 | 用件 | 結果 |
     |---|---|---|
     | 09:12 | 予約変更 / 8 歳・トイプードル | 枠に反映 |
     | 09:40 | ワクチンの接種時期 | 回答 |
     | 10:26 | 初診の受付時間 | 回答 |
     | 11:08 | キャンセル 1 件 | 枠に反映 |
     | 12:41 | 昼休みの入電 3 件 | 折返し |
     | 13:15 | 爪切りの予約 | 枠に反映 |
     | 14:03 | フィラリア予防の在庫 | 回答 |
     | 16:22 | 診察券番号の確認 | 回答 |
     | 18:57 | 時間外 / 救急当番 | 案内 |
     | 20:15 | 初診の問い合わせ / 明日 10:30 | 枠に反映 |

   - **このマーキーはページで唯一。** 装飾コピー帯ではなく稼働記録を運ぶストリップなので hero 下端に置くことを許容する。他セクションで横流しを再利用しない。

4. **今日の実績(非対称カウンタ・ベント / アイブロウ 1)** - 主張: 取りこぼしを、あとで見えるようにする。
   - 見出し: **「取りこぼしを、あとで見えるようにする。」**(codex の勝ち筋 B をここに移設)
   - 要素: 大 1 + 小 3。**カードの箱を使わず 1px 罫と余白で区切る**(セクション 6 のカード面と差をつけるため)。
     - 大: **取った電話 143 件**
     - 小 1: 折返し待ち **0 件**
     - 小 2: 予約に変わった **61 件(42.7%)** ← ページ内で唯一コーラルになる数値
     - 小 3: 受付が電話に使わずに済んだ時間 **3 時間 48 分**
   - 数字は tabular slab、単位は 0.62em。末尾に「画面の数値はサンプルです。」1 行(インク弱・13px)。

5. **導入病院のロゴウォール** - 主張: 現場でもう回っている。
   - 要素: 架空病院 6 件のモノグラム SVG マーク。**ロゴだけ。診療科目や地域のラベルを下に書かない。** 単色(`currentColor`)でライト / ダーク両対応、`alt` に病院名。
   - 6 件: のぞみ動物医療センター(NZ 合字)/ ふじさわ犬猫クリニック(F + 円)/ こもれび動物病院(KM)/ 港南どうぶつ診療所(KN)/ あさひ動物クリニック(A + 円)/ まきば動物病院(MK)

6. **できること(アイコンリッチ・ベント 5 セル)** - 主張: 電話で手が止まる 5 つの場面を肩代わりする。
   - 要素: 2 + 3 の非対称ベント。**5 項目なのでセルは正確に 5 つ**、空セルを作らない。背景は白面 2 / イエロー面 1 / スカイ面 1 / 実写 1 で必ず変化をつける。
   - 各セルの構造(**上から順に固定**): 時刻スタンプ(11px・インク弱・Zilla Slab)→ Phosphor アイコン(28px)→ 見出し(場面名・名詞・6〜8 字・20px/700)→ 本文(動詞終わり・30〜40 字・15px)
   - 5 セル:

     | 時刻スタンプ | 見出し(場面) | 本文(動詞終わり) | 面 |
     |---|---|---|---|
     | `10:26 / 診察中` | 診察中の着信 | 手が離せない間の電話を受けて、用件を残す。 | 白 |
     | `12:41 / 昼休み` | 昼休みの折返し | 溜まった着信を、予約と折返しリストに分ける。 | イエロー |
     | `18:57 / 時間外` | 時間外の案内 | 受付時間を過ぎた電話に、当番の病院を案内する。 | スカイ |
     | `09:12 / 受付中` | 予約の入れ直し | 変更とキャンセルを受けて、枠の更新まで進める。 | 実写 16:10 |
     | `20:15 / 通話後` | 通話後の記録 | 誰から何の電話だったかを、あとで読める形で残す。 | 白 |

7. **電話が鳴ってから予約が入るまで(横スクロール scroll-snap 4 枚)** - 主張: 4 手で終わる。
   - 要素: 動詞ラベル「取る」「聞く」「入れる」「返す」の 4 枚。**「STEP 1」「Phase 01」のような連番ラベルは使わない。** 各枚に所要時間の目安と、その手で発生する伝票の断片。desktop も mobile も横スナップのまま。下部にスカイ 2px の進行バー(スクロール位置に連動、`scroll-driven animation` かスクロールコンテナの `scroll` ではなく IntersectionObserver で更新)。

     | 動詞 | 所要 | 伝票の断片 |
     |---|---|---|
     | 取る | 3 コール以内 | `09:12 着信` |
     | 聞く | 通話 1 分 40 秒 | `予約変更 / 8 歳・トイプードル` |
     | 入れる | 通話中に | `木曜 15:00 の枠に反映` |
     | 返す | 通話終了から 10 秒 | `要点 4 行を受付の一覧へ` |

8. **ウケツギがやらないこと(全幅・濃色ドレンチの縦積み 3 項)** - 主張: 判断は人が持つ。
   - 要素: 面 2(`#17233A` / ダークは `#0E1220`)に生成り白の反転文字(ページのテーマ反転ではなく、同一テーマ内の濃い面として扱う)。
   - **3 項はすべて「やらないこと。→ 代わりにこうする。」の 2 段組み**にする:

     | やらないこと | 代わりに |
     |---|---|
     | 症状の判断をしません。 | 症状の話が出たら、その場で獣医師に繋ぐか、折返しにします。 |
     | 診療の可否を答えません。 | 受けられるかどうかは病院が決めます。ウケツギは枠の空きだけを答えます。 |
     | 料金の見積もりを勝手に出しません。 | 金額の質問には、病院が登録した文言をそのまま読みます。 |

   - 3 項の下に全幅 3:2 の実写 1 枚を敷く(左右分割にはしない)。

9. **導入病院の声(2 枚の引用ペア / アイブロウ 2)** - 主張: 変わったのは電話ではなく診察の時間。
   - 要素: 引用は **3 行以内**。氏名 + 役職 + 病院名を必ず併記(名前だけの署名は禁止)。引用符は「 」を使う。数字は各 1 つだけ。
     - 「診察の途中で受話器を見る癖がなくなりました。昼休みに折返しを 6 件まとめて片づけるだけで済んでいます。」 **藤沢 慧 / ふじさわ犬猫クリニック 院長**
     - 「時間外の問い合わせが、朝の申し送りに混ざらなくなりました。前の日の分が一覧でそのまま残っています。」 **川添 麻里子 / のぞみ動物医療センター 看護師長**

10. **料金(2 プラン + 相談行)** - 主張: 回線数と入電数だけで決まる。
    - 要素: カード 2 枚 + 下に 1 行。比較表は作らない。**条件と除外を先に書く**(カード上部に「初期費用なし / 最低利用 3 か月」を共通で置く)。各プランは 4 項目まで。CTA はどちらもコーラルの「無料で試す」。

      **受付プラン 39,800 円 / 月**
      1. 1 回線 / 入電 500 件まで
      2. 予約の新規・変更・キャンセル
      3. 折返しリストと通話要点の記録
      4. 時間外の当番案内

      **連携プラン 78,000 円 / 月**
      1. 2 回線 / 入電 1,200 件まで
      2. 受付プランの全機能
      3. 電子カルテ・予約システムとの連携
      4. 導入時の設定代行

    - 下 1 行: 「これ以上の規模と、分院をまたぐ運用は個別のお見積もりです。」

11. **よくある質問(アコーディオン 5 件)** - 主張: 導入前に引っかかる所は先に潰す。
    - 要素: `<details>` ベース、5 件。質問は現場の口語、回答は敬体 2 文以内。

      1. **「今の電話番号のまま使えますか。」** 使えます。今の番号に転送の設定を 1 つ入れるだけで、番号は変わりません。
      2. **「予約システムは今のものを続けたいのですが。」** 主要な予約・カルテシステムとは連携プランで繋がります。対応している連携先の一覧は、導入相談のときにお渡しします。
      3. **「ウケツギが答えられない電話はどうなりますか。」** その場で折返しに切り替えて、用件を記録して受付の一覧に残します。受付時間内であれば、そのまま病院へ転送する設定もできます。
      4. **「通話は録音されますか。個人情報が心配です。」** 録音と文字起こしは国内のサーバで保管し、保管期間は病院ごとに設定できます。飼い主さまへの録音のご案内文も、こちらで用意します。
      5. **「合わなかったときは解約できますか。」** 最低利用は 3 か月で、そのあとは当月末での解約ができます。記録は解約後 30 日間ダウンロードできます。

12. **最終 CTA 帯 + フッター** - 主張: 明日の昼休みから試せる。
    - 要素: 全幅コーラル面 + 生成り白抜き見出し 1 行「**明日の昼休みから、試せます。**」+ CTA「無料で試す」(白面 + コーラル文字。この 1 か所だけ反転ボタンにする)。フッターは会社名・連絡先・プライバシーポリシー・特定商取引法に基づく表記のみ。**バージョン表記、地名と時刻のストリップ、装飾のドットは置かない。**

---

## 6. コピー方針

### Hero(確定版。codex の書き直し提案を採用して磨いたもの)

**第一見出し(採用・確定):**

> **電話は取る。手は止めない。**

**補足(50 字以内 / 2 行以内):**

> 診察中も昼休みも、鳴った電話はウケツギが受けます。用件を聞いて、予約枠まで入れておきます。

**第二案:**

> **鳴った電話を、あとで探さなくてよくする。**
> 補足: 誰からの電話だったか、何の用件だったか。今日ぶんの記録が 1 件ずつ残ります。

**第三案:**

> **受付に残すのは、通話ではなく次の手です。**
> 補足: 予約変更は枠に反映。時間外は案内。折返しが必要な電話だけ、机に戻します。

**勝ち筋の決定(判断を仰ぐ点 1 への回答):A(現場停止の解消)を採る。**
理由は 2 つ。①最初の 3 秒で「自分の何が変わるか」が伝わるのは A で、B(記録が残る)は理解に一拍かかる。②B を捨てるのではなく、**セクション 4 の見出し「取りこぼしを、あとで見えるようにする。」へ移設**すれば、比較検討フェーズで効く納得感はページの中盤で回収できる。Hero が約束を、実績カウンタが証明を持つ分業になり、どちらも痩せない。

**Hero の書き分けルール:**

- 見出しは 14〜22 字。句点で切る。2 文構成を基本にする(前半が動作、後半が結果)。
- 強い言葉は使ってよいが、**完全性は断定しない**(「ぜんぶ」「すべて」「100%」を書かない)。
- 主役は AI ではなく、止まらなくなる現場。
- `予約` `折返し` `記録` のうち最低 1 語を補足に入れる。
- `効率化` `自動化` `24 時間対応` では始めない。
- 数字は Hero に入れない(数字はセクション 4 の担当)。

**CTA(意図ごとに 1 ラベルで固定):**

- 主 = **「無料で試す」**(ナビ / hero / 料金 ×2 / 最終 CTA、すべて同一表記)
- 副 = **「導入相談する」**(hero 副 CTA とフッターのみ)
- 「お問い合わせ」「まずは相談」「資料請求」等の言い換えを混ぜない。desktop で 1 行に収まること。

### セクション別の言葉のトーン

| セクション | トーン |
|---|---|
| Hero | 言い切り。句点で終える。数字は入れない |
| マーキー | 業務ログの体言止め。感情語ゼロ。時刻 + 用件 + 結果の 3 要素、結果は 4 語から選ぶ |
| 今日の実績 | ラベルは名詞句(「取った電話」「予約に変わった」)。動詞の敬体を混ぜない |
| できること | 見出しは場面名(名詞)、本文は動詞で終える(「残す」「分ける」「案内する」)。見出しを機能名にしない |
| 導入の流れ | 現場の時間感覚で語る。「3 コール以内」「通話終了から 10 秒」 |
| やらないこと | 短い断定 + 代替動作。言い訳を足さない。「症状の判断をしません。」で切ってから代替を書く |
| 声 | 話し言葉のまま。整えすぎない。数字は 1 つだけ |
| 料金 | 事務的。条件と除外を先に書く |
| FAQ | 質問は現場の口語、回答は敬体 2 文以内 |

---

## 7. クラフトの肝

1. **ホバー(チケット):** マーキーのチケットは hover で `translateY(-2px)` + 内側 1px の**インク紺 24%** 罫 + 影を 1 段深く。同時に**帯全体のアニメーションを一時停止**する。「流れているものを掴んで読める」という体験が、このサイトの主張(記録が残る)そのものになる。`focus-within` でも同じ挙動にして、キーボードだけでも止められるようにする。**hover 罫にコーラルは使わない**(コーラルの意味が「押せる」から薄まるため。0 章の 3 を参照)。

2. **間:** セクション余白は `88px / 112px` の 2 値だけ(mobile は `56px / 72px`)。ただし **hero とマーキー帯の間だけ 0**。帯が hero の下端に噛み付くことで「hero の続き」ではなく「hero を支えている台」に見える。カード内 padding も `20px / 24px` の 2 値に固定し、3 値目を作らない。

3. **タイポ詳細:** 数字は必ず `tabular-nums`。tick 中に桁幅が揺れると全部が安っぽくなる。単位(件・%・時間)は `0.62em` / ウェイト 1 段下げ / baseline を数字の下端に合わせる。和文見出しは `-0.02em`、ただし**チケット内の和文だけ `+0.01em`**(小さい字を印字っぽく見せるため詰めない)。行頭の約物は `text-indent: -0.5em` で調整せず、`font-feature-settings: "palt"` で処理する。

4. **色のニュアンス:** イエロー面の上ではインク紺、コーラル面の上では生成り白。**イエロー・スカイ・コーラルの文字は 16px 以下に 1 か所も作らない。** コーラルが登場するのは CTA 面と「予約に変わった 61 件」の 1 指標のみ。この 2 用途に絞ることで、ページ内でコーラルが出た瞬間に「押せる / 効いている」の意味が立つ。影は `rgba(23,35,58,.10)`、純黒の影を使うとポップさが一瞬で濁る。

5. **モーション量:** 動くものはページ内で常時 1 本(マーキー)だけ。カウンタは 1 回きり、reveal は 8px。**「もう 1 か所くらい動かしたい」と思ったら削る側に倒す。** reduced-motion では帯を止めてチケット 3 枚を静止表示、カウンタは最終値を即出す。止まっていても情報が 1 つも欠けない状態を、実装の合格条件にする。

6. **【v2 追加】記法の一貫性が信用を作る:** 時刻は必ず `HH:MM` の 5 桁ゼロ埋め、区切りは半角スラッシュの前後に半角スペース、結果語は 4 語から選ぶ。この 3 つがページ内 3 か所(マーキー / できることの時刻スタンプ / 流れの伝票断片)で完全に一致していること。**1 か所でも書式が揺れると「手書きのそれっぽい文章」に見え、記録を主題にしたページとして崩れる。** JSON 側でチケットを配列として持ち、書式は component 側のテンプレートで組み立てて、フリーテキストを許さない構造にする。

---

## 8. ロゴ

**何を象るか:**
モチーフは「**差し出された受け皿と、耳**」。ブランド名「ウケツギ」は受け付ける(受け)と引き継ぐ(継ぎ)の 2 語で、サービスの本質は「病院の代わりに一度受け取って、そのまま次の手(予約枠・折返しリスト)へ渡す」という中継動作にある。したがってマークが持つべき意味は「話す口」でも「賢い頭」でもなく、**受け取って手放す器**。

形の方向性は**幾何ベースの丸み**。角丸の器型(下向きの弧、またはチケット / 伝票を思わせる角丸矩形)を土台にし、そこから 1 本のストロークが立ち上がって耳のシルエットに変わる、という「同一ストロークで器と耳が繋がる」構成を第一候補にする。有機的な揺らぎは耳の先端 1 か所だけに許し、それ以外は完全な幾何で締める。面(ベタ)を主にし、線は補助。ポップさは形の丸みで出し、色数では出さない(マークは単色で成立させ、コーラル / インク紺 / 生成り白抜きの 3 通りで運用する)。

**言葉の扱い:**
和文カタカナ「ウケツギ」を主にする。顧客は国内の動物病院で、電話口で名乗る場面がある名前なので、読み方が一意に決まるカタカナが正。欧文 `uketsugi` は従(小さく、または英語ページと favicon 用途)。**タグラインは付けない** - hero の見出しがその役目を持つため、ロゴに説明を背負わせると両方が弱くなる。略称は作らない(3 音 + 3 音で既に短い)。

**【v2 で確定させる「作り」**(v1 では次 Step に送っていたが、builder が迷うので決め切る):

- **ロックアップ:** シンボル左 / ワードマーク右の横組み 1 種類のみ。縦組みは作らない。
- **サイズ比:** シンボルの高さ = カタカナの字面高(仮想ボディではなく実字面)の **1.35 倍**。
- **アキ:** シンボルとワードマークの間隔 = シンボル幅の **0.4 倍**。
- **保護領域:** ロックアップの上下左右に、シンボル幅の **0.5 倍**。ナビ内でもこれを割らない。
- **ワードマーク:** Zen Maru Gothic 700 / `letter-spacing: +0.04em`(カタカナ 4 字は詰めると読みにくい)。カスタムのアウトライン調整はしない。
- **線幅:** 線は使わない。面のみで構成する。線幅パラメータを持たせると、小サイズで潰れるか太るかのどちらかになる。
- **最小表示:** シンボル単体で 24px、ロックアップで高さ 20px。ナビでは 28px。
- **配色運用:** 単色 3 通り(コーラル `#E2502F` / インク紺 `#17233A` / 生成り白 `#FFFCF4`)。ナビはインク紺、最終 CTA 帯とフッターは生成り白抜き。**コーラル版はファビコンと OGP のみ**(ページ本文でコーラルを使うと 4 章のロック規則と衝突するため)。

**避けたい既視感:**
- 犬猫のシルエット + ハート、肉球アイコン(動物系サービスの最大公約数)
- 聴診器 / 十字 / カルテのモチーフ(獣医療の記号をそのまま借りると SaaS 側の顔が消える)
- 青い受話器アイコン、チャットバブル(電話代行・チャットボットの既視感そのもの)
- 脳 / 回路 / six-point star / グラデーションの球(AI SaaS の定型)
- 目と口が付いたマスコット化(親しみは形の丸みで出す。キャラクターにすると業務ツールとしての信頼が落ちる)

---

## 9. 実装メモ(portfolio-demos 規約)

- `src/pages/uketsugi/index.astro` / `src/layouts/UketsugiLayout.astro` / `src/components/uketsugi/` / `src/styles/uketsugi.css`(`body.uketsugi-page` スコープ)/ `site-content-uketsugi.json`。**本文コピーは全て JSON に分離**し、チケット配列・カウンタ値・5 セル・4 手・FAQ・料金項目も JSON 側に持つ。
- **チケットは JSON では構造化配列で持つ**(`{ time, subject, result }`)。表示書式は component のテンプレートで組み立て、結果語は 4 語の union に制限する。フリーテキストの 1 行を JSON に書かせない(7 章の 6)。
- サンプル数値は JSON のキーに `"_sample": true` を添え、画面側は実績セクション下の 1 行注記だけで示す。**143 / 61 / 42.7% の整合はビルド時ではなく JSON 上でコメントとして根拠を残す。**
- 画像は `data-img-spec` 付きプレースホルダで実装し、後工程で差し替える(spec は 4.5 の表)。
- モーションは Astro の island 不要。素の CSS アニメーション + IntersectionObserver + `requestAnimationFrame` で完結させる。スクロールイベントリスナは使わない。マーキーの duration はトラック幅から `--marquee-speed: 94` を使って算出する。
- 英語版 `src/pages/uketsugi/en/index.astro` + `site-content-uketsugi.en.json` を作る。**英語版でも結果語は 4 語固定**(`Booked` / `Answered` / `Routed` / `Callback`)。
- 検証は最終出力(ビルド成果物 → ブラウザ)まで追う。ライト / ダーク両方を必ず開く。

---

## 10. 出力前チェック(このデモ固有の追加項目)

- [ ] 全画面テキストに全角ダッシュ(—、–)が 1 つも無い。ハイフンのみ
- [ ] マーキーはページに 1 本だけ
- [ ] アイブロウは 2 か所(セクション 4 と 9)。セクション 6 の時刻スタンプは含まない
- [ ] コーラルは CTA 面と「61 件(42.7%)」のみ。hover 罫はインク紺
- [ ] コーラル / イエロー / スカイの文字が 16px 以下に 0 か所
- [ ] CTA ラベルは 18px / 700 以上(コーラル面 + 生成り白抜きで AA large を満たすため)
- [ ] 角丸は 16px / 999px / 12px の 3 値のみ
- [ ] CTA ラベルは「無料で試す」「導入相談する」の 2 種類だけ。desktop で折り返さない
- [ ] hero のテキスト要素は 4 つ以下、上 padding は 96px 以下、数字は 0 個。ロゴウォールは hero の外
- [ ] 左右分割(image + text split)は hero の 1 回だけ
- [ ] レイアウト家族が 4.3 の表と一致していて、重複が 0
- [ ] ベントのセル数と項目数が一致(5 項目 = 5 セル、空セル 0)
- [ ] チケットの書式が 3 か所(マーキー / 時刻スタンプ / 伝票断片)で完全一致。結果語は 4 語のみ
- [ ] 143 件 と 61 件(42.7%)の計算が合っている。マーキー 10 枚の時刻が時系列で矛盾しない
- [ ] 「やらないこと」3 項すべてに「代わりに」が併記されている
- [ ] 偽のダッシュボード / 偽スクリーンショットを div で作っていない
- [ ] 連番ラベル(STEP 1 等)、地名時刻ストリップ、スクロール誘導、バージョン表記が無い
- [ ] ロゴウォールに病院名以外のラベル(診療科目・地域)が付いていない
- [ ] 引用は 3 行以内、氏名 + 役職 + 病院名が併記されている
- [ ] 数値がサンプルである旨を 1 行だけ明記している
- [ ] `prefers-reduced-motion` で全モーションが静止し、情報欠落が無い
- [ ] ライト / ダーク両方で WCAG AA(本文 4.5:1、大見出しと CTA 3:1)を満たす