# 初めて開いたときのトップ 仕様（v3 / first）— 2026-10-16 初回 3案

置き場所: `v3/first/`
- `mock/first.html?p=a|b|c&lang=ja|zh-TW`（`first.js` / `first.css`）。土台は確定したトップ案A（`../top/mock/top.js` ＋ 磨き1）を読み込み、初回用に下パネルなどを差し替える。
- 書き出し `mock/render.py [filter] [--check]`（2x）、比較シート `mock/compare.py`（せっていの比較シートもここで作る）。
- 想定: はじめての来訪（クリア 0/5、次は 01 ブースで雑談）。スキンは C 夜市。

## 守っていること
- 舞台は記号の吹き出しだけ・言葉はパネルだけ・ちびキャラ4人の雑談・止め絵（animation なし）。
- 公式マーク（手描き白線の切り抜き、#FF2D95、描き直しなし）はロゴだけ。キャラ・吹き出しとは重ねない。
- 鍵なし（2026-10-16 決定）: 進捗の5つの札は「つぎ＝シアンの縁／まだ＝点線」で、横に「全5シーン · どれからでも」。
- ノンゴール: ログイン誘導・ランキング・課金は出さない。
- 初回だけの要素は2つ: **まなぶことば**の2択と、ヒントの安心のひとこと（「読みがなのヒントはいつでも出せます · 使っても減点なし」、BRIEF §3）。
- まなぶことばは **画面の言語から推測して先に選んでおく**（日本語 UI → 繁中をまなぶ／繁中 UI → 日本語をまなぶ）。迷わずそのまま「はじめる」を押せる。
- 主ボタン: 小見出し「FIRST 01 · ブースで雑談」、ラベル「はじめる」、ひとこと「新刊か、聞いてみよう」（繁中 UI「問問看是不是新刊」）。

## 3案
- **案A タイトル舞台のまま（おすすめ）** — 確定トップ案Aと同じ画面で、下パネルだけ初回版。上段に進捗（0/5）とまなぶことばの2択、中段に「はじめる／シーンを選ぶ／せってい」、下段に安心のひとこと。2回目からは「つづきから」に替わるだけなので、覚え直しがない。
- **案B ひとこと見本つき** — 下パネルを高くして「①雑談を見る ②ひとことを打つ ③会話がすすむ」と、最初のひとことの見本（YOUR TURN、入力途中の様子）を見せる。遊び方は一番伝わるが、パネルが大きく舞台が狭くなる（スマホはロゴを左上の小札に）。
- **案C 2つだけ選ぶ** — 舞台をぼかして、中央に「はじめに、2つだけ」のカード（まなぶことば／世界観）。選ぶことははっきりするが、雑談の記号が出せず、遊ぶ前に1ステップ増える。

## 書き出し（`png/`）
- `compare-first.png` … まず見せる1枚（PC 3案＋スマホ 3案、案A おすすめ枠）
- `compare-first-lang.png` … 案A の日本語／繁中
- `first-{A,B,C}-ja--{desktop,mobile}.png`、`first-A-zh-TW--{desktop,mobile}.png`（2x）

## 確認して直したこと
- 案A/B スマホ: 「全5シーン · どれからでも」が右端で切れた → スマホは「全5シーン」だけ。
- 案B スマホ: 舞台を上げたら吹き出しがロゴ・タグラインと重なった → スマホのロゴは左上の小札に。
- 案B PC: 見本の枠に上下の空きが出た → ひとことを 30px に、入力欄も大きく。
- 案C: カードの下に大きな空き → カードを中身の高さに、世界観サムネを大きく。
- 2択の「→」が山かっこ（>）に見えた → 矢印の文字に。

## 残課題
- 案Aで進める場合、案Bの「あそびかた3つ」を最初のプレイ画面側（初回だけのガイド）に回すか。
- 英語話者（学習者#3/#4）が来たときの2択の並び（今は繁中⇄日本語の2つだけ）。
- 他スキン（A ロビー / B 旅）への反映は案が決まってから。

## 磨き1（2026-10-17）— 案A だけ
返事がなかったので新しい画面に進まず、おすすめの案Aを磨いた（案B/Cは触っていない）。
- 置き場所: `mock/first.html?p=a&lang=ja|zh-TW&v=polish1`（`polish1.js` / `polish1.css`、body に `fp1`）。`v=polish1` がなければ初回案のまま（書き出しが変わらないことを確認済み）。
- 書き出し `mock/render-polish1.py [filter] [--check]`（2x、吹き出しとロゴ・パネルの重なりも検査）、比較シート `mock/compare-polish1.py`（せっていの分もここで作る）。

### 変えたこと
1. **視線の順番を「まなぶことば → はじめる」に**: 2択を右上から外し、PCは主ボタンの左の小さな枠に（枠と主ボタンをシアンの矢印でつなぐ）、スマホは主ボタンの真上（下向きの矢印）。
2. **推測で選んである印**: 2択の下（スマホは見出しの横）に「✓ 画面の言語から選びました · あとで変えられます」（繁中「依介面語言幫你選好了 · 之後可以改」）。
3. **主ボタンの所要時間**: ひとことの横に「⏱ 約1分」（繁中「約1分鐘」、結果画面の練習「約1分」と同じ表記）。PCは主ボタンを高く（104px）し、ラベルを 26px に。
4. **副ボタンを控えめに・安心のひとことを上へ**: PCは「シーンを選ぶ／せってい」を縦に2つ重ね、主ボタンが一番強く見えるように。安心のひとこと（ヒント · 使っても減点なし）は進捗の行の右へ移し、パネルを3段→2段に。
5. **進捗の行**: PCは「全5シーン · どれからでも」の文字色を一段明るく。スマホは「どれからでも」だけ（5つの札で全5シーンが分かる。前回は「全5シーン」だけで、鍵なしが伝わらなかった）。

### 書き出し（`png/`）
- `compare-first-polish1.png` … 前回案A → 磨き1（PC＋スマホ、日本語）。まず見せる1枚
- `compare-first-polish1-lang.png` … 磨き1 の日本語／繁中
- `first-A-{ja,zh-TW}-polish1--{desktop,mobile}.png`（2x）

### 確認して直したこと
- PC: 主ボタンを大きくしたら中の文字が小さく見えた → ラベル 26px・ひとこと 13.5px・再生アイコン 22px に。
- スマホ: パネルが1行ぶん高くなり、キャラの足元が隠れた → ロゴを 12px、キャラ・吹き出しを 12px 上へ（吹き出しとタグラインは重ならないことを検査で確認）。
- 繁中: 「依介面語言幫你選好了 · 之後可以改」がスマホで右端ぎりぎり → 収まっている（切れなし）ことを目視で確認。

### 残課題
- スマホの中央の吹き出しとタグラインの間が約6pxと近い。ロゴをもう少し小さくするかは要相談。
- 案Bの「あそびかた3つ」を最初のプレイ画面側（初回だけのガイド）に回すか。
- 英語話者が来たときの2択（今は繁中⇄日本語の2つだけ）。


## 確定（2026-10-17 ユーザー承認）
- 初回トップ・せっていとも案A（磨き1）で確定。
- 案Bの「あそびかた3つ」は初回プレイ時だけのガイドに回す。
- 日本語画面では、せっていも「繁中をまなぶ」を既定にする（初回トップの推測と同じ）。
- 「はじめの設定に戻す」は確認を1つ出してから戻す。
- 次の画面: プレイ中の一時停止と、そこから開くせってい。