スキップできるオンボーディング
初回起動の 3 画面。スワイプか「次へ」で進み、右上の「スキップ」でいつでも抜けられる。最後の画面だけボタンが「はじめる」に変わり、押すと本編へ。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
デザインの要点
- スキップは最初の画面から出す。読まされる説明は 3 枚が上限で、抜け道が無いと離脱が増える
- 1 画面 1 メッセージ。絵・見出し・一行の 3 点だけにし、機能一覧を詰め込まない
- 最後の画面ではスキップを消し、主ボタンを「はじめる」に変える。同じ画面に出口を 2 つ置かない
- ドットは現在地の表示だけ。進む操作はスワイプと大きなボタンで受ける
コード（コピーして使えます）
<div class="ops-phone" id="ops-phone">
<div class="ops-top">
<span class="ops-step" id="ops-step">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>