swiss-user-research-video-template

スイス風ユーザーリサーチ動画テンプレート

ストーリー性の高いライブアーティファクト向けの、上質なスイス風エディトリアルユーザーリサーチテンプレートです。 温かみのある紙の質感、厳密な余白のリズム、細い罫線、そしてストーリーへの注目を保つ控えめなマイクロインタラクションを視覚表現に取り入れています。

リソースマップ

swiss-user-research-video-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

ワークフロー

1. DESIGN.md を読み、レイアウトの意味を変えずに、デザイントークンをテンプレートの CSS 変数（--paper、--ink、--muted、罫線の色、セグメントの色）に割り当てます。
2. assets/template.html をベースにし、次の 3 枚のスライド構成を維持します。
   • タイトル／概要
   • 参加者内訳のドーナツチャート
   • 行動パターンとエビデンスのパネル
3. 次のインタラクションを維持します。
   • クリック／キーボードによるスライド移動（ArrowLeft／ArrowRight）
   • アクティブ状態を示す下部のページネーションドット
   • ドーナツチャートの凡例にカーソルを合わせた際のハイライト
   • 控えめな線描画とパネル浮き上がりのトランジション
4. コピー、ドーナツチャートのラベル、割合の間で、すべてのデータに現実味と一貫性を持たせます。
5. HTML を自己完結型（インライン CSS／JS）にし、外部フレームワークへの依存をなくします。
6. 出力前に references/checklist.md を使って検証します。

出力仕様

簡潔な概要文を 1 文出力し、その後に単一の HTML アーティファクトを出力します。

<artifact identifier="swiss-user-research-deck" type="text/html" title="Swiss User Research Synthesis">
<!doctype html>
<html>...</html>
</artifact>