ウォークスルー Walkthrough
画面の要素をハイライトして順に説明するガイド機能。初回利用時の機能紹介に使用。
ライブデモ
アプリのコンテンツ領域
ステップ 1 / 3
「新規作成」ボタンで新しいドキュメントを作成できます。
ソースコード
<div class="demo-walk-wrapper">
<div class="demo-walk-app">
<div class="demo-walk-toolbar">
<button class="demo-walk-btn" id="walk-target-1">新規作成</button>
<button class="demo-walk-btn" id="walk-target-2">検索</button>
<button class="demo-walk-btn" id="walk-target-3">設定</button>
</div>
<div class="demo-walk-body">
<p>アプリのコンテンツ領域</p>
</div>
</div>
<div class="demo-walk-overlay"></div>
<div class="demo-walk-tooltip">
<div class="demo-walk-step">ステップ <span class="demo-walk-current">1</span> / 3</div>
<div class="demo-walk-tooltip-text">「新規作成」ボタンで新しいドキュメントを作成できます。</div>
<div class="demo-walk-tooltip-actions">
<button class="demo-walk-skip">スキップ</button>
<button class="demo-walk-next">次へ</button>
</div>
</div>
<button class="demo-walk-start">ウォークスルーを開始</button>
</div>.demo-walk-wrapper { position: relative; position: relative; height: 280px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: visible; background: #fff; }
.demo-walk-app { height: 100%; display: flex; flex-direction: column; }
.demo-walk-toolbar {
display: flex; gap: 8px; padding: 12px 16px; background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.demo-walk-btn {
padding: 8px 16px; border: 1px solid #e5e7eb; border-radius: 6px;
background: #fff; cursor: pointer; font-size: 13px; color: #333;
transition: all 0.2s; position: relative;
}
.demo-walk-btn.highlighted {
border-color: var(--ui-primary); z-index: 12;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 25%, transparent);
}
.demo-walk-body { flex: 1; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }
.demo-walk-overlay {
position: absolute; inset: 0; background: rgba(0,0,0,0.5);
opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 11;
}
.demo-walk-overlay.active { opacity: 1; pointer-events: auto; }
.demo-walk-tooltip {
position: absolute; top: 60px; left: 16px;
background: #fff; border-radius: 10px; padding: 14px 18px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 13;
max-width: 260px; display: none;
}
.demo-walk-tooltip.active { display: block; }
.demo-walk-step {
font-size: 11px; color: var(--ui-primary); font-weight: 600;
margin-bottom: 6px;
}
.demo-walk-tooltip-text { font-size: 13px; color: #444; line-height: 1.5; margin-bottom: 12px; }
.demo-walk-tooltip-actions { display: flex; justify-content: space-between; }
.demo-walk-skip {
border: none; background: none; color: #999; font-size: 13px;
cursor: pointer; padding: 4px 8px;
}
.demo-walk-skip:hover { color: #666; }
.demo-walk-next {
padding: 6px 18px; border: none; border-radius: 6px;
background: var(--ui-primary); color: #fff; font-size: 13px;
font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.demo-walk-next:hover { opacity: 0.85; }
.demo-walk-start {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
padding: 10px 24px; border: none; border-radius: 8px;
background: var(--ui-primary); color: #fff; font-size: 14px;
font-weight: 600; cursor: pointer; z-index: 5;
transition: opacity 0.2s;
}
.demo-walk-start:hover { opacity: 0.85; }
.demo-walk-start.hidden { display: none; }(function(){
var steps = [
{ target: 'walk-target-1', text: '「新規作成」ボタンで新しいドキュメントを作成できます。', top: 60, left: 16 },
{ target: 'walk-target-2', text: '「検索」で既存のドキュメントをすばやく見つけられます。', top: 60, left: 100 },
{ target: 'walk-target-3', text: '「設定」でアプリのカスタマイズが可能です。', top: 60, left: 180 }
];
var current = 0;
var overlay = document.querySelector('.demo-walk-overlay');
var tooltip = document.querySelector('.demo-walk-tooltip');
var tooltipText = tooltip.querySelector('.demo-walk-tooltip-text');
var currentEl = tooltip.querySelector('.demo-walk-current');
var nextBtn = tooltip.querySelector('.demo-walk-next');
var skipBtn = tooltip.querySelector('.demo-walk-skip');
var startBtn = document.querySelector('.demo-walk-start');
function showStep(idx){
document.querySelectorAll('.demo-walk-btn').forEach(function(b){ b.classList.remove('highlighted'); });
var step = steps[idx];
document.getElementById(step.target).classList.add('highlighted');
tooltipText.textContent = step.text;
currentEl.textContent = idx + 1;
tooltip.style.top = step.top + 'px';
tooltip.style.left = step.left + 'px';
nextBtn.textContent = idx === steps.length - 1 ? '完了' : '次へ';
}
function start(){
current = 0;
overlay.classList.add('active');
tooltip.classList.add('active');
startBtn.classList.add('hidden');
showStep(0);
}
function end(){
overlay.classList.remove('active');
tooltip.classList.remove('active');
startBtn.classList.remove('hidden');
document.querySelectorAll('.demo-walk-btn').forEach(function(b){ b.classList.remove('highlighted'); });
}
startBtn.addEventListener('click', start);
skipBtn.addEventListener('click', end);
nextBtn.addEventListener('click', function(){
current++;
if(current >= steps.length){ end(); }
else { showStep(current); }
});
})();AIプロンプト
Basic
ウォークスルーをHTML/CSS/JSで作ってください。画面上の要素を順番にハイライトし、説明テキストをツールチップで表示します。
Custom
以下の仕様でウォークスルーを実装してください。 - 3ステップのチュートリアル - ターゲット要素のハイライト（他はオーバーレイで暗くする） - ステップ数表示（1/3 形式） - 次へ/スキップボタン - プライマリカラー: #2563eb - 最後のステップで「完了」ボタン
Advanced
高機能なウォークスルーを実装してください。 - 動的にターゲット要素の位置を検出（ResizeObserver） - ツールチップの自動配置（要素の上下左右を判定） - キーボード対応（矢印キーでステップ移動、ESCでスキップ） - 進捗状態のlocalStorage保存（途中再開可能） - ステップ間のスムーズスクロール - prefers-reduced-motion対応 - コールバック機能（各ステップでカスタム処理を実行）