オンボーディング・ガイド
ウォークスルー
初回ガイド（コーチマーク）。暗転した画面で1つのUI要素だけをスポットライトで照らし、吹き出しの「次へ／スキップ」で3ステップ進むたびにハイライトが移動する。ドットで現在地を示す。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、ツアーのオーバーレイを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは、いちばん外側のオーバーレイを position:fixed; inset:0 に変え、body 直下など高い階層へ置いてください。ハイライトの穴は「巨大な spread の box-shadow で周囲だけを暗くする」定番の手法で、対象要素の位置・サイズは getBoundingClientRect でステージ基準に換算して求めています。
コード（コピーして使えます）
<div class="wt-stage" id="wtStage">
<!-- 背後のダミーアプリ -->
<div class="wt-app">
<header class="wt-head">
<span class="wt-logo">ちい</span>
<button class="wt-search" id="tgSearch">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true">
<circle cx="5.5" cy="5.5" r="4" stroke="currentColor" stroke-width="1.5"/>
<line x1="8.5" y1="8.5" x2="11.5" y2="11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
検索
</button>
<button class="wt-add" id="tgAdd" aria-label="新規作成">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</header>
<div class="wt-cards">
<div class="wt-card"></div>
<div class="wt-card"></div>
<div class="wt-card"></div>
</div>
<nav class="wt-nav">
<button class="wt-navi" aria-label="ホーム">🏠</button>
<button class="wt-navi" aria-label="通知">🔔</button>
<button class="wt-navi" id="tgSettings" aria-label="設定">⚙️</button>
</nav>
</div>
<button class="wt-help" id="wtHelp" aria-label="ツアーをもう一度">?</button>
<!-- ツアーオーバーレイ -->
<div class="wt-overlay" id="wtOverlay" aria-hidden="true">
<div class="wt-catch"></div>
<div class="wt-spot" id="wtSpot"></div>
<div class="wt-tip" id="wtTip" role="dialog" aria-modal="true" aria-labelledby="wtTitle" aria-describedby="wtBody">
<p class="wt-title" id="wtTitle"></p>
<p class="wt-body" id="wtBody"></p>
<div class="wt-foot">
<div class="wt-dots" id="wtDots" aria-hidden="true"></div>
<div class="wt-btns">
<button class="wt-skip" id="wtSkip">スキップ</button>
<button class="wt-next" id="wtNext">次へ</button>
</div>
</div>
</div>
</div>
</div>