スキップできるオンボーディング
初回起動の 3 画面。スワイプか「次へ」で進み、右上の「スキップ」でいつでも抜けられる。最後の画面だけボタンが「はじめる」に変わり、押すと本編へ。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- 初回起動の 3 画面までの説明
- 1 画面 1 メッセージで価値を伝える導入
- いつでも抜けられる導線を保証したいウォークスルー
- 避ける場面
- 4 枚以上の説明
- 機能一覧を 1 画面に詰める
- スキップを最後まで出さない
- 構成要素
- ステップ表示
- スキップボタン
- ページ（絵＋見出し＋一行）
- 位置ドット
- 次へ／はじめるボタン
- 完了画面
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab でスキップと「次へ」へ、Enter／Space で進む。最後の画面は「はじめる」になり、完了画面では「最初から見る」へフォーカスが移る
- 支援技術
各ページは section＋aria-label。位置「1 / 3」は aria-live=polite で読み、ドットは aria-hidden。最後の画面でスキップを visibility:hidden、完了画面の間は背後を inert
- 動き
ページ送り 360ms ease-out・ドット 240ms。端は 0.35 倍の抵抗、60px を超えたら送る。reduced-motion で停止
デザインの要点
- スキップは最初の画面から出す。読まされる説明は 3 枚が上限で、抜け道が無いと離脱が増える
- 1 画面 1 メッセージ。絵・見出し・一行の 3 点だけにし、機能一覧を詰め込まない
- 最後の画面ではスキップを消し、主ボタンを「はじめる」に変える。同じ画面に出口を 2 つ置かない
- ドットは現在地の表示だけ。進む操作はスワイプと大きなボタンで受ける
コード（コピーして使えます）
<div class="ops-phone" id="ops-phone">
<div class="ops-top">
<span class="ops-step" id="ops-step" aria-live="polite">1 / 3</span>
<button class="ops-skip" type="button" id="ops-skip">スキップ</button>
</div>
<div class="ops-viewport" id="ops-viewport">
<div class="ops-track" id="ops-track">
<section class="ops-page" aria-label="1 ページ目">
<div class="ops-art ops-art-1" aria-hidden="true"><svg viewBox="0 0 120 100" width="120" height="100"><rect x="18" y="14" width="84" height="72" rx="10" fill="#fff" stroke="#2b50c7" stroke-width="2"/><rect x="30" y="30" width="60" height="8" rx="4" fill="#2b50c7" opacity="0.8"/><rect x="30" y="46" width="44" height="8" rx="4" fill="#c9d3f2"/><rect x="30" y="62" width="52" height="8" rx="4" fill="#c9d3f2"/></svg></div>
<h2 class="ops-title">今日やることは 3 つ</h2>
<p class="ops-text">やることは 1 日 3 件まで。少ないから、終わります。</p>
</section>
<section class="ops-page" aria-label="2 ページ目">
<div class="ops-art ops-art-2" aria-hidden="true"><svg viewBox="0 0 120 100" width="120" height="100"><circle cx="60" cy="50" r="34" fill="#fff" stroke="#1f8a70" stroke-width="2"/><path d="M44 52l11 11 21-24" fill="none" stroke="#1f8a70" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h2 class="ops-title">終えた日は戻せません</h2>
<p class="ops-text">積み上がった日数だけが残ります。やり直しはできない設計です。</p>
</section>
<section class="ops-page" aria-label="3 ページ目">
<div class="ops-art ops-art-3" aria-hidden="true"><svg viewBox="0 0 120 100" width="120" height="100"><rect x="14" y="60" width="16" height="26" rx="3" fill="#c27a2c" opacity="0.5"/><rect x="36" y="46" width="16" height="40" rx="3" fill="#c27a2c" opacity="0.7"/><rect x="58" y="30" width="16" height="56" rx="3" fill="#c27a2c" opacity="0.85"/><rect x="80" y="16" width="16" height="70" rx="3" fill="#c27a2c"/></svg></div>
<h2 class="ops-title">1 週間で振り返る</h2>
<p class="ops-text">日曜の夜に 1 通だけ、今週のまとめが届きます。通知はそれだけ。</p>
</section>
</div>
</div>
<div class="ops-bottom">
<div class="ops-dots" id="ops-dots" aria-hidden="true"><span class="ops-dot is-active"></span><span class="ops-dot"></span><span class="ops-dot"></span></div>
<button class="ops-next" type="button" id="ops-next">次へ</button>
</div>
<div class="ops-done" id="ops-done" hidden>
<p class="ops-done-title">ようこそ</p>
<p class="ops-done-text">最初のやることを 1 つ書いてみましょう。</p>
<button class="ops-again" type="button" id="ops-again">最初から見る</button>
</div>
</div>