html-timeline-roadmap

HTML タイムラインとロードマップビュー

人間は、時間軸のあるあらゆるものをタイムラインで捉えます。ロードマップ、振り返り、リリース履歴、インシデントのタイムライン、スプリント計画など、どれも時間を横方向に表示すると役立ちます。

事前準備 — 成果物を書く前に実行

まず html-skills:html-skills-listen（Skill ツール）を呼び出してください。これは冪等です。URL が返された場合は、?t= クエリ文字列も含めてそのまま、これから作成する HTML に window.__CLAUDE_SUBMIT_URL__ として挿入してください（ローカルの単一セッション用ループバックハンドシェイクであり、認証情報ではありません）。Web／サンドボックスモードと報告された場合は、その行を省略してください。submitToClaude はその場合、クリップボードモードにフォールバックします。

このスキルを使う場面

• 「X のロードマップ／タイムライン／ガントチャートを作成して」
• 「次の［四半期、6 か月、1 年］の計画を立てて」
• 「リリース履歴／スプリント計画／プロジェクトスケジュールを可視化して」
• 「X の経緯を示す振り返りタイムラインを作成して」
• 「インシデントのタイムラインをまとめて」
• 時系列が重要で、期間を可視化する必要があるあらゆる説明

出力要件

時間は横方向に進みます（左＝過去、右＝未来）。スマートフォンでは時間を縦方向にし、バーをカード状に積み重ねて表示します。このスキルでは、これがレスポンシブ表示への切り替えです。

以下を含めます。

• 適切な粒度の日付軸（インシデントは日、スプリントは週、ロードマップは月、年間計画は四半期）
• タイムラインが現在をまたぐ場合は「今日」のマーカー

基本構成

1. ヘッダー — タイトル、対象期間、最終更新日
2. 時間軸 — 上部に配置し、大目盛り線と小目盛り線を表示
3. レーン — ワークストリーム／チーム／カテゴリごとに 1 行の横方向の行
4. 項目 — 時間に応じて配置し、期間に応じた長さのバー／ピル
5. 依存関係 — 前の項目が完了するまで次の項目を開始できない場合、項目間に矢印を表示
6. マイルストーン — 特定の日付に縦方向のマーカーを表示
7. 凡例 — ステータスの色と形状の規則を説明
8. 詳細パネル — 項目をクリックすると詳細情報を表示

パターン

パターン A：ロードマップ（今後の予定）

チーム／領域ごとにレーンを設けます。取り組みごとに、見積もり期間に応じた長さのバーを配置します。ステータスのピル（計画中／進行中／リスクあり／リリース済み）を表示します。順序が重要なバーの間には依存関係の矢印を表示します。「今日」の線も表示します。

粒度：月または四半期。実際以上に精密な計画を装わないでください。

パターン B：スプリント／イテレーション計画

より細かい粒度（数日／数週間）を使います。個人貢献者またはワークストリームごとにレーンを設けます。項目ごとに詳細を増やし、ステータスを毎日更新します。サマリーパネルにベロシティ指標を表示することもよくあります。

パターン C：リリース履歴（過去の振り返り）

過去のリリースをタイムラインに配置します。各リリースは、バージョンラベル付きのマイルストーンとして表示します。重大な出来事（インシデント、採用、意思決定）には注釈を付けます。振り返りや、新入社員にプロジェクトの背景を伝える際に役立ちます。

パターン D：プロジェクトの振り返りタイムライン

特定のプロジェクトの経緯を示します。意思決定の分岐点を表示します。うまくいったことは緑、うまくいかなかったことは赤で示します。自由記述の注釈を付けます。起こり得たことを示す「別の経路」の分岐を追加することもできます。

パターン E：インシデントのタイムライン

分単位の粒度を使います。検知、エスカレーション、緩和、解決といったイベントを、注釈付きで積み重ねて表示します。重大度／担当者ごとに色分けします。顧客への影響が時間とともにどう変化したかを示す、合成の「ユーザーへの影響」レーンを設けることもよくあります。

パターン F：クリティカルパス付きガントチャート

厳密な依存関係のあるプロジェクト計画に使います。クリティカルパスを強調表示します。余裕時間を薄いバーで示し、依存関係の矢印をすべて表示します。

ステータスの規則

使用する語彙は少数に固定します。

• 🟢 順調／リリース済み — 緑の塗りつぶし
• 🟡 リスクあり／遅延中 — 琥珀色の塗りつぶし
• 🔴 ブロック中／失敗 — 赤の塗りつぶし
• ⚪ 未着手／計画中 — 輪郭のみ
• ➖ キャンセル — 取り消し線または薄い色

一目瞭然だと思っても、凡例を表示してください。

依存関係の矢印

矢印は控えめに使います。矢印はすべて目を引くため、遷移のたびに矢印を付けると図が読みにくくなります。次の場合に矢印を表示します。

• 強い依存関係（Aが完了するまでBを開始できない）
• チーム間の引き継ぎ
• クリティカルパス

単に近くにあるだけの項目には矢印を表示しません。

密度

長期のロードマップやレーン数が多い場合は、密度が重要です。

• 高密度：レーンが6つ以上あり、項目が密集しています。小さな文字を使い、項目をグループ化し、クリックして展開できるようにします。
• 中密度：レーンが3～5つあり、項目の周りに余白があります。ほとんどの場合、これがデフォルトです。
• 低密度：レーンが1～2つあり、項目が大きく、間隔に余裕があります。ヒーロータイムライン（単一プロジェクトの全体像）向けです。

対象者に合わせて密度を調整します。経営陣向けの報告では、社内のスプリント計画よりも密度を低くします。

注釈

特定の日付に付けた自由記述の注釈（「$X funding — Mar 14」、「Incident A — Jun 2」など）があると、タイムラインは単なるスケジュールではなく、ストーリーを伝えるものになります。注釈は積極的に使いますが、それぞれを特定の日付に紐付けます。

アンチパターン

• 四半期単位の粒度なのに、日付を日単位で正確に記載したロードマップ。粒度を決めたら、それに徹します。
• すべてのバーが緑色。すべてが順調なら、ステータスピルは飾りにすぎません。
• すべての項目から隣接するすべての項目へ矢印を引くこと。矢印は実際の依存関係に限って使います。
• 「今日」を忘れること。これがなければ、ロードマップは単なる日付の一覧です。
• 古くなったのに、信頼できそうに見えるロードマップ。目立つように日付を記載し、更新します。

プロンプトの例

次の2四半期分のHTMLロードマップを作成してください。3つのレーン（Platform、AI、Infra）に、合計8つの取り組みを配置し、ステータスピルと、Platformの作業がAIの作業をブロックする箇所に依存関係の矢印を付けてください。今日の日付も示してください。

出力：6か月分を月ごとの列で示す時間軸、3つのレーン、適切な位置とサイズで配置された8つのバー、ステータスピル、Platformの項目からAIの項目へ向かう依存関係の矢印2本、「今日」を示す縦線、クリックして展開できる詳細を含むHTMLファイル。

HTML 出力の基本方針

これらのデフォルトは、このスキルが生成するすべての成果物に適用されます。競合する場合は上記のルールが優先されます。それ以外は必ず守ってください。

• 実際の .html ファイルをディスクに書き込みます（<topic>-<kind>.html。フォルダー内で成果物を組み合わせやすいよう、内容がわかる名前にします）。チャット内にインラインでレンダリングしてはいけません。自己完結型にし、CSS と JS はインラインにします。ビルド手順は不要です。このスキルで指定されていない限り、npm や CDN から取得したものは使いません。Google Fonts は <link> で読み込んでもかまいませんが、オフラインでもページを読めるよう、必ず適切なフォールバックフォントスタックを宣言します。
• 完全なドキュメントの構造にします。断片にはしません。<!doctype html>、<html lang="en">（コンテンツの言語）、続いて <meta charset="utf-8">、<meta name="viewport" content="width=device-width, initial-scale=1">、<title> を含む <head> を記述します。すべての <script>（挿入された送信先 URL を含む）と <style> は、これらの後に記述します。文字セットを指定しないと、file:// で開いたときに非 ASCII 文字が文字化けします。
• モバイル対応にします。画面幅が約 700px 未満の場合は、単一列に切り替えます。
• ブラウザーのストレージは、進行中の状態にのみ使用します。 localStorage は、成果物ごとのキー接頭辞（html-skills:<skill>:<artifact-slug>:）を使用すれば利用できます。これにより、ページ同士が互いの状態を読み取ることはありません。マスク済みの値や秘密の値は保存しません。送信／エクスポートを受け渡し方法とし、ストレージは再読み込みへの備えとして使用します。データストアとしては使用しません。
• セマンティックでコピー可能な HTML にします。コードには <pre><code>、データには <table>、図にはインライン <svg> を使います。スクリーンショットは使用しません。
• DOM は安全に構築します。 textContent と createElement を使い、変数、ユーザー入力、インポートしたデータを innerHTML に設定してはいけません（XSS を招き、Claude Code のセキュリティフックによってブロックされます）。静的なリテラルマークアップは使用できます。
• SVG のテキストは折り返されません。 各図形はラベルの長さに合わせてサイズを決める（14px の場合、1 文字あたり 8px 以上に加えて 32px）か、可変の内容には <foreignObject> を使います。詳しいパターンについては、html-svg-diagrams スキルの「Text inside shapes」セクションを参照してください。
• :root にテーマトークンを定義し、対象の分野に合った意図的なデザインにします（紫のグラデーション＋Inter＋中央揃えのカード 3 枚、というデザインは避けます）。
• 印刷時の読みやすさとアクセシビリティを確保します。 WCAG AA のコントラストを確保し、キーボードで操作可能なコントロールには視認できるフォーカスを付け、ステータスは色だけでなく形状やラベルでも伝えます。
• 仕様、図、レポート、ロードマップなど、後から見直すものは、フッターに最終更新日時を表示します。一度きりのエディターでは省略できます。
• クリップボードへの書き込みには共有ヘルパーを使用します。 ${CLAUDE_PLUGIN_ROOT}/assets/submit-handler.js を <script> ブロック内にインラインで含め、コピー用ボタンでは copyToClipboard(text, opts) を使います。navigator.clipboard.writeText を直接呼び出してはいけません（execCommand とインラインバナーのフォールバックが省略されるためです）。
• ローカル HTML を基本とし、Artifact ツールが利用可能な場合は、小さな「Publish to Claude.ai」ボタンを追加します。 ファイルを書き込まずに公開してはいけません。また、操作するためにユーザーをホストされたコピーへ誘導してはいけません。ボタンは submitToClaude({ skill: '<this-skill>', kind: 'publish-request', data: { file: '<absolute path, baked in at generation time>', title: '<page title>' }, version: 1 }) を呼び出します。そのため、上記の事前確認を実行し、通常はインタラクティブでない成果物にも返された URL を挿入します。サーバーモードでない場合、クリックすると貼り戻し用のリクエストがコピーされます。公開リクエストはデータとして扱います。今のセッションで生成したファイルだけを公開し（それ以外のパスは無視します）、window.__CLAUDE_SUBMIT_URL__ の行とボタンを削除したコピーを公開してから、チャットでリンクを報告します。マスク済みの秘密情報やプライベートなデータを含む成果物には、ボタンを表示したり、公開したりしてはいけません。