tour-guide-supademo

tour-guide-supademo — Supademo風ツアー

Supademoのプレイヤー（supademo.com、2026-06）から抽出しています。公式ドキュメントでは正確なhex/pxは公開されていません。これはすぐに使えるレシピに落とし込んだデザイン言語です。ベースコンポーネントはtour-guideスキルから取得し、このスキルはその上に重ねるスタイルレイヤーです。

原則：ブランドカラーは単一のトークン（--tour-brand）とし、すべてをそこに連動させます。

WHAT

目的とコンテキスト

• 目的： tour-guideスキルのツアーコンポーネントに、Supademo風のスタイル（ブリンカー型ホットスポット、ツールチップカード、コントロールバー、プログレスバー／タイマーバー、トランジション、テーマトークン）を、すぐにコピーして使えるTailwind/CSSレシピとして適用します。単一のブランドトークンに連動させます。
• トリガー（使用するタイミング）： 「/tour-guide-supademo」、「Supademo風ツアー」、「Supademoスタイル」、「ブリンカー型ホットスポット」；tour-guideコンポーネントを使用する、または使用予定で、Supademo風の見た目にしたい場合。
• 対象外： UXメカニズム（計測／スクロール／ステップ、分岐、タイマーメカニズム）は含みません（tour-guideスキルの範囲です）；Supademo本来のブランドhex値をハードコードしません；他製品のスタイルは別スキルtour-guide-<名前>にします。

メンタルモデル

--tour-brand（1つのトークン）→ ブリンカー・ツールチップカード・コントロールバー・プログレスバー・自動再生タイマーバー・トランジション・スポットごとのバックドロップ → tour-guideのTOUR_THEMEにマッピング。このスキルはスタイルレイヤー、tour-guideはベースコンポーネントとメカニズムです。

入力と出力の契約

	Field	Required?	意味
In	tour-guideスキルのツアーコンポーネント	はい	スタイルを重ねるベース
In	ブランドカラー	はい	--tour-brandに設定
In	theme light/dark、showProgress、showNav、showStepCount	いいえ	テーマトークン。TOUR_THEMEにマッピング
Out	レシピに沿ったツアーのCSS/Tailwind	はい	ブリンカー＋カード＋コントロールバー＋バー＋トランジション
Out	「メニュー部分をスキップ」チェックボックスの動作＋自動オープンをオフ	はい	実践的な教訓に基づく

ルールと機能

• RULE-01（必須）：原則は、ブランドカラーを単一のトークン（--tour-brand）にし、すべてをそこに連動させることです。
• RULE-02（必須）：ツールチップのフォントは1rem固定です。ツールチップの文字をヒントのように小さくしないでください。幅はS/M/Lの3種類とし、ラベルが長いときに文字に合わせて自動幅にしないでください。
• RULE-03（必須）：明確な指示がない限り、読み込み時にツアーを自動オープンしないでください（自動オープン：デフォルトでオフ）。
• RULE-04（必須）：チェックボックスは「ステップ枠をスキップする」ためのものです。「今後ツアーを表示しない」ではありません。localStorage＋window.nameの2層で永続化し、try/catchで囲んでください。
• RULE-05（必須）：拡張ルール — 他製品のスタイルは、このファイルと同じ形式で個別のtour-guide-<名前>スキルに落とし込みます。UXメカニズムはtour-guideスキルに戻します。
• 機能：対象プロジェクトにCSS/Tailwind/TSXを書き込みます。tour-guideコンポーネントを読み取ります。ネットワークアクセスはありません。

対応できないケース

• プロジェクトにtour-guideコンポーネントがない → ブロック：まずtour-guideスキルでベースを構築します。
• 要求がUXメカニズム（ステップモード、分岐、タイマー）に関するもの → 対象外です。tour-guideに引き継ぎます。
• 要求が他製品（Intercom、Driver.jsなど）のスタイルに関するもの → ここには含めません。tour-guide-<名前>を作成します。
• Supademoの正確なhex/px値 → 入手できません（公式ドキュメントでは公開されていません）。換算レシピを使用し、推定値であることを明記します。

HOW

メインワークフロー

Step	Type	Inputs	Action	Outputs/exit	Failure/next
W01	判断	要求	tour-guideコンポーネントがあり、スタイル変更の作業であることを確認します	次へ進む	ベースがない → 先にtour-guide
W02	作業	ブランドカラー	--tour-brandを設定し、テーマトークンをTOUR_THEMEにマッピングします	トークン	—
W03	作業	レシピ	ブリンカー、ツールチップカード、コントロールバー（＋チェックボックス）、プログレスバー＋自動再生タイマーバー、トランジション、スポットごとのバックドロップを適用します	Supademo風スタイルのツアー	コントロールバーがオーバーフロー → チェックボックスを別の行に移動
W04	判断	動作中のツアー	自動オープンがオフ、チェックボックスが即時に反映、Escで閉じる、フォントが1remであることを確認します	合格	不一致 → 修正してW04を繰り返す

各ステップの詳細（W01～W04の唯一の正しい情報源）：「Reference — Supademo design recipe」の下にあるレシピ。

分岐

ID	種類	条件	動作	スキップ／失敗	再合流
B01	user_optional	spot に必要なのは ring + blinker のみで、dim は不要	TourSpot に noDim?: boolean フラグを追加	デフォルトでは dim	W04
B02	user_optional	初回の自動オープンを明示的に要求	delay の前後両方で guard !overlay	デフォルトではオフ	W04
B03	user_optional	長いラベル、デモ風	ラベルに typewriter effect を適用	デフォルトでは適用しない	W04
B04	conditional_required	tickbox がチェック済みのとき、ページに固有の step がない	tour を閉じる	—	終了

検証と停止

目視で確認します：280px の card からはみ出さないこと、font が 1rem であること、blinker が target の中心にあること。決定論的に検証できる項目：tickbox が reload 後も保持される（localStorage／window.name）、Esc で閉じる、背景クリックで次のステップに進むこと。W04 を達成したら停止します。

例

• 適切な例：「ダッシュボード向けの紫色の Supademo 風 tour」→ --tour-brand = 紫、ボタンの中心に animate-ping の blinker、M サイズの card ≈ 280px rounded-xl、control bar に 4 / 9 + [戻る] [次へ]、overlay 上端に 2～3px の progress bar。
• **境界例／失敗例：**280px の card の control bar に tickbox + counter + 2 個のボタンを 1 行に詰め込む → はみ出します。tickbox を別の行に移し、white-space:nowrap で修正します。ユーザーが「Intercom 風の tour」を希望 → このファイルは変更せず、skill tour-guide-intercom に要件を抽出します。

参考 — Supademo のデザインレシピ

Blinker の hotspot（特徴的な見た目）

brand color の約 12px の丸い点と、外側に広がる ripple animate-ping を、クリック対象の element の中心に配置します。外側の輪の透明度は約 25～30% です。

<span className="absolute flex h-3 w-3" style={{ top: cy, left: cx }}>
  <span className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-30"
    style={{ background: "var(--tour-brand)" }} />
  <span className="relative inline-flex h-3 w-3 rounded-full"
    style={{ background: "var(--tour-brand)" }} />
</span>

step mode に適しています。blinker でクリック箇所を示し、横に tooltip で説明します。

Tooltip card

• 背景は白。dark theme の場合は bg-slate-900 text-white。
• 角を rounded-xl（約 12px）に丸め、柔らかな shadow shadow-[0_4px_16px_rgba(0,0,0,0.12)]、padding は px-3.5 py-2.5。
• Font は 1rem 固定 — Supademo では意図的にサイズを変更できないようにしています。tooltip の文字を hint のように小さくしないでください。
• target を指す小さな矢印を付けます。
• width は 3 サイズ：S ≈ 200px／M ≈ 280px／L ≈ 360px — ラベルが長い場合、文字列に合わせて自動で width を変えないでください。

Control bar（すべてのステップで共通）

Tooltip card の下段は固定レイアウトです：[終了方法] · i/n ……… [戻る] [次へ/完了]

• 左：小さなグレー文字の counter 4 / 9（text-xs text-slate-400）。その下の別行に tickbox 「次回はメニュー部分をスキップ」（下記参照）。tickbox は別の行に移し、white-space:nowrap を指定します — 280px の card では tickbox + counter + 2 個のボタンを 1 行に収められず、はみ出します。
• 右：Back（ghost）+ Next（brand color の背景、rounded-lg px-3 py-1.5）。
• ボタンの label は常に Next／Previous にするのではなく、「次へ」「完了」などにカスタマイズできます。
• Esc で常に閉じます。背景クリックで次のステップに進みます（最後のステップでは閉じます）。

「重複する step をスキップ」tickbox（実践から得た知見）

複数ページにまたがる tour には、常に 2 種類の step があります：共通部分（menu／sidebar／header — どのページでも同じ）とページ固有の step です。共通部分は 1 回見れば十分です — tour を開くたびに見直させることが、最も大きなストレスの原因になります。

• Tickbox は [ ] メニュー部分をスキップ（短い label — ユーザーからのフィードバック：長々と「次回は…」と書かないでください）です。「tour をもう表示しない」ではありません。Tick するとフラグを永続化し、measure() で共通部分の spots を除外し、現在アクティブな view の data-tour-* spots のみを残します。計測／スクロール／step の仕組みは skill tour-guide にあります。
• Tick したらすぐに反映：再計測して、最初のコンテンツ step に移動します（steps=measure(); idx=0; render()）。共通部分の残りをユーザーに見せないでください。ページに固有の step がない場合は tour を閉じます。
• Untick（tour を再度開くと、チェック済みの box が表示されます）すると、フラグを削除し、menu を一覧に戻します。
• 2 層で永続化します：localStorage + window.name（file:// ではブラウザーが storage をブロックする場合があります — window.name は同じ tab での reload 後も保持されます）。try/catch で囲みます。
• overlay 上で change delegation を使って検知します（innerHTML はステップごとに再レンダリングされるため、input に listener を設定しないでください）。

自動オープン：デフォルトではオフ

明示的に求められない限り、読み込み時にツアーを自動オープンしないでください。教訓：自動オープンと古いキャッシュ／複数のオリジン（file:// と localhost では別々の localStorage）が組み合わさると、「オフにしたのにまた表示される」という印象を与え、ユーザーはトグルを信頼しなくなります。ツアーはトリガーボタン（?）から開けば十分です。本当に初回に自動オープンする必要がある場合は、ユーザーが自分で開いたツアーを閉じるトグル動作にならないよう、遅延の前後両方で !overlay を確認してください。

プログレスバー

オーバーレイの画面上端に沿って、ブランドカラーの細い2～3pxのバーを表示します。width = (step+1)/total*100% とし、表示を切り替えられるようにします。

自動再生タイマーバー

ツールチップカードの上端（画面端にある全体のプログレスバーとは別）に、ブランドカラーの2pxのバーを表示します。自動再生の時間（デフォルトは1ステップあたり2.5秒。実際に試したところ1.75秒では読むのに短すぎました）に合わせて、0→100%まで線形に伸び、その後自動的に次のステップへ進みます。バーの角を丸みに沿わせるため、カードには overflow:hidden が必要です。カードにマウスカーソルを合わせるとバーが停止し（animationPlayState:paused）、カーソルを離すとバーとタイマーが最初から再開します。タイマーの仕組みは tour-guide スキルに置きます。

トランジション

• ツールチップの表示：フェード＋軽いスライドイン（transition-all duration-200、translate-y 4px → 0）。
• ステップ間：位置はアニメーションさせず（直接切り替え）、コンテンツだけをフェードさせます。
• ラベルのタイプライター効果は任意です。長いラベルやデモ形式の場合にのみ有効です。

スポットごとのバックドロップ

Supademo の「Default」スタイルでは、画面は暗くならず、要素の周囲にリングだけが表示されます。スポットにリングと点滅表示だけを付けたい場合は、TourSpot に noDim?: boolean フラグを追加して対応します。

テーマトークン

Supademo ではワークスペース単位で次の項目を調整できます。tour-guide の TOUR_THEME に対応させれば、同等の機能になります。

token	意味
brand	ブランドカラー（点滅表示、Next、プログレス）
theme	ツールチップカードの "light" | "dark"
showProgress	プログレスバーのオン／オフ
showNav	Back／Next のオン／オフ
showStepCount	「i / n」カウンターのオン／オフ

拡張のルール

他の製品（Intercom、Driver.js、Stripe など）のスタイルを取り入れる場合は、このファイルと同じ形式で専用スキル tour-guide-<名前> にまとめます。ブランドトークンは1つだけにし、そのままコピーできる Tailwind／CSS のレシピを含め（説明だけで済ませない）、元のブランドの HEX カラーをハードコードせず、ファイル末尾に出典と最終抽出日を記載してください。UX の仕組み（ステップモード、分岐など）は tour-guide スキルに追加し、スタイル用スキルには含めないでください。

出典

Hotspot のドキュメント · HTML ホットスポット · ワークスペースのテーマ — 抽出日：2026-06-10