visualize

可視化

アイデア、データ、コンテンツを、見事な単一ファイルの HTML ビジュアライゼーションに変換します。

ファイル作成後

HTML ファイルを書き込んだ後は、必ず以下の両方を行ってください。

1. ブラウザーで自動的に開く： open <filename>.html（macOS）または xdg-open <filename>.html（Linux）を実行して、ユーザーがすぐに確認できるようにします
2. クリック可能な URL としてファイルパスを返す： ユーザーがクリックして開けるよう、応答に file://<absolute-path> を含めます

作成後の応答例：

Created your visualization! Opening in browser now...
📄 file:///Users/you/project/my-dashboard.html

重要な要件（必須）

⚠️ 以下の 8 項目がない場合、評価は必ず失敗します ⚠️

すべてのファイルは、references/skeleton.md のスケルトンテンプレートから必ず作成してください。テンプレート全体をコピーしてから、コンテンツを追加します。

1. CSS カスタムプロパティ： 正確な名前が必要です：--bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning — これ以外の名前は使用しないでください（--bg-primary や --text-primary など）。重要： 評価システムとの互換性のため、これらのプロパティ名を正確に使用する必要があります。
2. ユーティリティメニューシステム（必須）： .viz-menu 要素一式に、.viz-menu-toggle ボタン、.viz-menu-dropdown コンテナ、PNG ダウンロードボタン（onclick="downloadImage()"）、印刷ボタン（onclick="window.print()"）、html-to-image CDN スクリプト（<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.js"></script>）を含めます。評価において重要： メニューシステムは自動的にチェックされ、欠落していると必ず失敗します。
3. テーマクラス（評価において重要）： スタイルシートで .theme-light と .theme-dark の両方を、完全なカスタムプロパティ定義とともに明示的に定義する必要があります。必須の例：

:root { /* base properties */ }
.theme-light { --bg: #ffffff; --surface: #f8f9fa; --text: #1a1a1a; /* etc */ }
.theme-dark { --bg: #0a0a0a; --surface: #1a1a1a; --text: #ffffff; /* etc */ }

:root または @media (prefers-color-scheme) だけに依存しないでください。評価システムはクラスベースのテーマをチェックします。 4. セマンティック HTML： <main id="main-content"> 要素、必須：主要なコンテンツブロック（ヘッダー、メトリクス、グラフなど）ごとに複数の <section> 要素、コンテンツへのスキップリンクを含めます。それぞれのコンテンツ領域は、セマンティックな <section> タグで囲む必要があります。 5. Chart.js の要件（評価において重要）： 閉じタグ </head> の前に、必ず <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> を含めます。必須： Chart.js のスクリプトの直後に、必ず <script>Chart.defaults.animation = false;</script> を追加します（アニメーションの不具合を防ぎ、評価システムによって自動的にチェックされます）。チャートの必須検証： すべてのチャート関数は、必ず if (typeof Chart === 'undefined') { console.error('Chart.js not loaded'); return; } から始めます。チャートのアクセシビリティ： すべての canvas 要素に、role="img" と説明的な aria-label 属性を設定します。重要なチャート設定： アクセシビリティのため、maintainAspectRatio: false、responsive: true、および plugins: { tooltip: { enabled: true } } を設定します。ツールチップを無効にしないでください。 評価システムによってチェックされます。チャートの信頼性システム： 確実な連携のため、専用の ChartManager パターンを使用します。

var ChartManager = {
  charts: new Map(),
  safeInit: function(canvasId, config) {
    if (typeof Chart === 'undefined') {
      console.error('Chart.js library not loaded - check CDN inclusion');
      return null;
    }
    try {
      if (this.charts.has(canvasId)) {
        this.charts.get(canvasId).destroy();
        this.charts.delete(canvasId);
      }
      var ctx = document.getElementById(canvasId);
      if (!ctx) {
        console.error('Canvas element not found: ' + canvasId);
        return null;
      }
      // Ensure no conflicting chart instances
      if (ctx.chart) {
        ctx.chart.destroy();
        delete ctx.chart;
      }
      // Set accessibility attributes
      ctx.setAttribute('role', 'img');
      if (!ctx.getAttribute('aria-label')) {
        ctx.setAttribute('aria-label', 'Chart visualization');
      }
      // Initialize with enhanced error handling
      var chart = new Chart(ctx, config);
      this.charts.set(canvasId, chart);
      return chart;
    } catch (error) {
      console.error('Chart initialization failed for ' + canvasId + ':', error);
      return null;
    }
  },
  updateTheme: function() {
    if (typeof Chart === 'undefined') return;
    this.charts.forEach(function(chart, canvasId) {
      try {
        chart.update();
      } catch (error) {
        console.error('Chart theme update failed for ' + canvasId + ':', error);
      }
    });
  },
  destroyAll: function() {
    this.charts.forEach(function(chart) {
      try {
        chart.destroy();
      } catch (error) {
        console.error('Chart destruction failed:', error);
      }
    });
    this.charts.clear();
  }
};

new Chart() を直接使う代わりに、ChartManager.safeInit() を使用します。重要なチャート設定： アクセシビリティのため、maintainAspectRatio: false、responsive: true、および plugins: { tooltip: { enabled: true } } を設定します。チャートコンテナーのサイズ： チャートを適切に描画するため、コンテナーには 300px 以上の明示的な height を設定する必要があります。固定の 16 進数カラーは使用せず、CSS カスタムプロパティを使ったテーマ対応の色を使用します。Chart.js の CDN で import／export 構文を使用しないでください。 標準の var 宣言のみを使用します。 CHART.JS のトラブルシューティング（重要）： グラフが真っ白な空白として表示される場合：

• Chart.js の CDN が </head> より前に含まれていることを確認してください
• Chart.defaults.animation = false; が CDN の直後にあることを確認してください
• グラフの初期化処理が DOMContentLoaded イベントリスナー内にあることを確認してください
• ファイル内のどこにもモジュールの import/export 構文がないことを確認してください
• ChartManager.safeInit() のパターンが正しく使用されていることを確認してください
• canvas に role="img" 属性と aria-label 属性があることを確認してください

6. レスポンシブデザイン： セクション間隔は 48px 以上、重要：ビューポート幅 375px で横方向にはみ出さないこと（必須：横スクロールを防ぐため、@media (max-width: 375px) { body { overflow-x: hidden; } } を追加してください）、必須のフォントサイズ階層： h1 は 2.5rem 以上、h2 は 2rem 以上、h3 は 1.5rem 以上、本文は 1rem。スライドデッキの要件： タイトルスライドの h1 は 3rem 以上、コンテンツスライドのタイトルは 2.5rem 以上、見出しレベル間に明確な視覚的な違いを設けてください。スライドのセクション間隔： スライド内の主要セクション間には 48px 以上の間隔を設けてください（タイトルからコンテンツ、コンテンツからグラフ、グラフからナビゲーション）。**すべてのレイアウトを幅 375px でテストしてください。ダッシュボードは特に、グラフコンテナがはみ出しやすくなります。**CSS コンテナークエリ： 高度なレスポンシブ対応には、コンテナーベースのクエリを使用してください：

.chart-container { container-type: inline-size; }
@container (max-width: 400px) { 
  .chart-legend { display: none; } 
  .chart-title { font-size: 1rem; }
}

これにより、ビューポートのメディアクエリを超える、真のコンポーネントレベルのレスポンシブ対応が実現します。 7. 印刷とアクセシビリティ： @media print スタイル、アニメーションを無効にする @media (prefers-reduced-motion: reduce) 8. 登場アニメーション（必須）： .animate クラス、data-reveal 属性、または CSS @keyframes による登場アニメーションを含める必要があります。評価上の重要事項： アニメーションの有無は自動検出され、必須です。 9. JavaScript 関数： cycleTheme()、toggleMenu()、トップレベルの変数には let／const ではなく var を使用してください

🔥 重要：skeleton.md をそのままコピー →「YOUR CONTENT HERE」をビジュアライゼーションの内容に置き換え → ファイルを保存してください

基本原則

1. 単一ファイルの HTML — CSS／JS をインラインで記述した 1 つの .html ファイルです。どのブラウザーでも開けて、オフラインで動作し、メールで簡単に共有できます。
2. ライトテーマに最適化 — モダンなデザインでは、ライトモードの品質を優先します。切り替えでダークテーマも利用できます。
3. デフォルトで美しく — 最初の出力から、手を加えなくてもプロフェッショナルに見えるようにしてください。
4. コンテンツを第一に — ビジュアライゼーションはメッセージを伝えるためのものです。見た目のために明瞭さを犠牲にしてはいけません。
5. レスポンシブ — 16:9 のスライドなど、明示的に固定寸法が指定されている場合を除き、デスクトップ、タブレット、モバイルで動作します。
6. 視覚的な節度 — プロフェッショナルなデザインでは、ノイズを生む装飾要素を避けます。浮遊するグラデーションの球体、虹色の枠線、装飾的なアニメーションは使用しないでください。

基本理念

HTML は「ウェブサイト」ではなく、ビジュアライゼーションツールです。コードを作るコストは低く、誰もが何でも視覚化できるべきです。このスキルを使うと、会話のコンテキスト、URL、記事、データ、生のアイデアを、数秒で視覚的かつ理解しやすい形に変換できます。

ユーザーは Claude Code との会話中にこの機能を呼び出します。これまで話していた内容、共有したリンク、貼り付けたデータなど、会話全体のコンテキストを素材として使用してください。URL が渡された場合は、そのページをクロールし、視覚化する内容を抽出してください。

出力ルール

必須の最初の手順：references/skeleton.md から完全なスケルトンをコピーしてください。これには必須要素（メニュー、テーマシステム、CSS プロパティ、セマンティック HTML、アクセシビリティ機能）がすべて含まれています。HTML をゼロから作成してはいけません。

• ~/Downloads/（またはユーザー指定のパス）に .html ファイルを 1 つ作成します
• ファイル名：内容がわかる kebab-case にします。例：q4-revenue-dashboard.html、team-roadmap-deck.html
• skeleton.md のテンプレートから始め、section にコンテンツを追加します
• カスタムスタイルはすべて、スケルトンのベーススタイルの後にある <style> に記述します
• CDN ライブラリの利用を推奨します — 用途に最適なツールを使用してください：
  • Tailwind CSS — https://cdn.tailwindcss.com（ユーティリティファーストのスタイリング。自由に使用できます）
  • Chart.js — https://cdn.jsdelivr.net/npm/chart.js（棒グラフ、折れ線グラフ、円グラフ、レーダーチャート、ドーナツグラフ）
  • D3.js — https://cdn.jsdelivr.net/npm/d3@7（複雑なデータ可視化やカスタムデータ可視化、フォースグラフ）
  • Mermaid — https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js（フローチャート、シーケンス図）
  • Three.js — 適切な場合は 3D 表示に使用します
  • Reveal.js — 必要に応じて、高機能なスライドエンジンとして使用します。重要： html, body { height: 100%; overflow: hidden; } を設定し、.reveal コンテナに height: 100% を指定する必要があります。設定では数値の寸法を使用する必要があります：Reveal.initialize({ width: 1280, height: 720, center: true, controls: false }) — ビューポートの高さがゼロになり、スライドが表示されなくなる文字列のパーセンテージ（'100%' など）は絶対に使用しないでください。必須： Reveal.js のデフォルトのコントロールを無効にしてください（controls: false）。デフォルトの < > の矢印オーバーレイは見栄えがよくありません。代わりに、シンプルなカスタムの下部ナビゲーションバーを追加します：

<nav class="slide-nav" aria-label="Slide navigation">
  <button onclick="prevSlide()" aria-label="Previous slide">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <span class="slide-counter" id="slideCounter">1 / 8</span>
  <button onclick="nextSlide()" aria-label="Next slide">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</nav>

.slide-nav { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 9998; }
.slide-nav button { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity 0.2s; }
.slide-nav button:hover { opacity: 0.7; }
.slide-counter { font-size: 12px; color: var(--text-secondary); font-weight: 400; min-width: 40px; text-align: center; opacity: 0.35; }

• Leaflet — 地図および地理空間データ（https://unpkg.com/[email protected]/dist/leaflet.js + CSS）。地理データでは必須です — 大陸の形を SVG で手描きしてはいけません。OpenStreetMap のタイル、またはシンプルなタイルプロバイダーを使用してください。
• アイコンやシンプルなグラフィックには SVG を使用します — ユーザーが提供した場合を除き、外部画像 URL は使用しないでください
• 可能な場合は JS より CSS アニメーションを優先します

CDN リンク、パターン、ヒントの詳細については、references/libraries.md を参照してください。

デザインシステム

次のデフォルト設定を適用してください。これらは、意見を反映して検証済みの設定です。ユーザーから要望があった場合にのみ変更してください。

デザインシステムの全リファレンス： タイポグラフィ、色、間隔、アニメーション、アクセシビリティ、ビジュアルの仕上げに関する完全な仕様は、references/design-system.md を参照してください。

主なポイント（詳細はリファレンスを確認してください）：

デザインに関する注意事項

テーマシステム（重要）：

• クラスベースのテーマ設定のみを使用します — <html class="theme-dark"> または <html class="theme-light">
• テーマ切り替えでは html のクラスを変更します：document.documentElement.className = 'theme-' + newTheme
• data-theme 属性は使用しないでください — 評価システムはクラスベースのテーマを想定しています
• 必須の CSS カスタムプロパティ： --bg, --surface, --text, --accent, --border（評価との互換性に必要な最小セット）

タイポグラフィ：

• Inter フォントは必須です — https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap
• 必須のフォントウェイト階層： h1 ≥ 700、h2 ≥ 600、h3 ≥ 500、本文 = 400（評価における重要な要件）
• 見出しの字間は -0.03em にします
• 韓国語タイポグラフィの品質向上： 韓国語コンテンツでは、本文に Noto Sans KR、UI 要素に Inter を使用します。韓国語の line-height: 1.6（ラテン文字では 1.4）を適用します。韓国語の Medium ウェイトは、西洋書体の Regular（400）に相当します。次を含めてください：https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap 色：
• クラスベースのテーマ設定のみ（@media prefers-color-scheme は使用しないでください）
• ダーク：背景 #0A0A0A、テキスト #EDEDED。ライト：背景 #FAFAF9、テキスト #0f172a
• パレット全体についてはリファレンスを参照してください。
• カード： 角丸 8px、ホバー時は影のみ（translateY/scale は使用しない）、1px solid var(--border)。グラスモーフィズムのアップグレード： プレミアムなレイアウトには、backdrop-filter: blur(8px)、CSS 変数 --glass-opacity: 0.08 を使った半透明の背景、浮き上がった影を備えたグラスコンテナを使用してください。ヒーローセクションやメインカードに選択的に適用し、洗練された奥行きを表現します。
• アニメーション： ページ読み込みには CSS @keyframes（.animate + .delay-N）、スクロールには data-reveal + IntersectionObserver、カウンターには data-count を使用します。コンテンツはデフォルトで表示されるようにします。ファーストビュー内のコンテンツには、data-reveal を絶対に使用しないでください — 代わりに .animate クラスを使用します。data-reveal は控えめに使用し（最大 3～4 セクション）、ファーストビューより下のコンテンツにのみ適用してください。
• アクセシビリティ： コンテンツへのスキップリンク、aria-label、ランドマークロール、:focus-visible、チャートデータ用の sr-only。チェックリスト全体についてはリファレンスを参照してください。
• アイコン： インライン SVG のみを使用し、絵文字は使用しないでください。Lucide スタイルの 24x24、ストロークベース。
• Chart.js（必須パターン）： スクリプトの先頭に Chart.defaults.animation = false; を記述し、テーマ切り替え時には破棄して再作成し、明示的に rgba() の色を指定し、ツールチップを常に有効にし、すべてのチャートオプションで maintainAspectRatio: false を設定します。アクセシビリティ：canvas を role="img" と説明的な aria-label を指定した div で囲みます。ガードパターン： chartsBuilt フラグを使用します — onThemeChange() は再構築の前に if (chartsBuilt) を確認する必要があります。チャートコンテナには、十分な存在感を出すために min-height: 360px が必要です。
• Chart.js のカスタマイズ： デフォルト設定以上に、プロフェッショナルなスタイルを適用します — カスタムの余白（layout: { padding: 30 }）、過剰なグリッド線を削除（不透明度 ≤ 0.04）、角丸（borderRadius: 4）、テーマに合った練られたカラーパレットを使用します。チャートコンテナには 12px の角丸、内部余白 40px、十分な存在感を出すための最小高 360px が必要です。自動生成されたように見えるライブラリのデフォルト設定は避けてください。
• タイポグラフィの階層： 必須の降順フォントサイズスケール：h1 > h2 > h3 > 本文。必須の最小サイズ： h1：≥3rem（48px）、h2：≥2rem（32px）、h3：≥1.5rem（24px）、本文：1rem（16px）。評価上の重要事項： 各見出しレベルは前のレベルよりも目に見えて小さくし、レベル間には少なくとも 0.5rem の差を設ける必要があります。有効な階層の例：h1：3rem、h2：2.5rem、h3：1.5rem、本文：1rem。
• ビジュアルの抑制： 浮遊する球体、グラデーションの境界線、見出しのグラデーションテキスト、スケール変換、グロー効果、装飾的なアニメーションは使用しないでください。
• 統計値の色： 色付きの数値には意味を持たせる必要があります（緑／プラス = 良い指標、赤／マイナス = 悪い指標、アクセント = メイン／中立的な強調）。明確な意味がない場合は var(--text) を使用します。統計値に無作為に色を付けないでください。カードが 4 枚以上ある KPI グリッドでは、値に使用するアクセントカラーは最大 2 色までにします — 最も重要な指標 1 つには var(--accent) を、その他すべてには var(--text) を使用します。var(--positive)／var(--negative) は差分インジケーター（矢印、パーセンテージ）にのみ使用し、カードのメイン値には使用しないでください。
• 背景の雰囲気： ファイルごとに控えめな手法を 1 つ使用します（放射状グラデーション、ノイズテクスチャ、ドットグリッド）。雰囲気はコンテンツに合わせて調整してください — ゲームのダッシュボードと財務レポートでは、異なる印象にする必要があります。アクセントカラーとグラデーションの色相を題材に合わせて調整してください。
• AI ネイティブな情報設計： モダンなデザインでは、インサイトを重視した階層を優先します。最も重要な指標／インサイトをファーストビュー内に配置します。段階的に情報を開示するパターンを使い、主要なデータをすぐに表示し、ホバー／クリックで詳細を確認できるようにします。関連するコンテンツの近くにコンテキストに応じたアクションを配置します。まず結論を示し、詳細で裏付けます。
• 表示時のアニメーションは必須： すべてのカード／セクションに fadeInUp + stagger を適用します。
• シングルスクリーンポスター： 固定サイズの body に overflow:hidden + justify-content:space-between を指定します。9:16、1:1、4:5 のサイズについてはリファレンスを参照してください。

重要な実装要件

必須：スケルトンテンプレートを使用してください — 要件がすべて組み込まれた、コピーしてそのまま使える完全な HTML については、references/skeleton.md を参照してください。

JavaScript の実装ルール：

• トップレベルの変数はすべて var を使用する必要があります（let／const は使用しないでください）。関数の巻き上げによる TDZ エラーを防ぐためです
• テーマの切り替えには cycleTheme() 関数を使用する必要があります — 適切に実装された applyTheme() とともに、スケルトンに組み込まれています
• メニューには、外側クリックの処理を含めて toggleMenu() を使用する必要があります — スケルトンには、外側をクリックしたときや Escape キーを押したときにドロップダウンを自動で閉じる機能が含まれています
• チャートの再構築： テーマ変更時にチャートを再描画するため、function onThemeChange() {} を定義します
• モバイル対応： すべてのレイアウトを幅 375px のビューポートでテストしてください。カードグリッドには CSS Grid の minmax(320px, 1fr) を使用します

評価チェッカーで確認される項目：

• cycleTheme() 関数が存在し、動作する（html クラスを変更する）
• toggleMenu() 関数が存在し、外側のクリックでメニューを閉じる
• トップレベルの JS 変数が var で宣言されている
• 幅 375px で水平方向にはみ出さない
• 基本的なメニュー以外にも、インタラクティブな要素がある（ホバー状態、チャートの操作など）

スケルトンテンプレートには、必要な機能がすべて自動的に含まれています。実装エラーを避けるため、必ず skeleton.md から始めてください。

セマンティック HTML の要件

すべてのビジュアライゼーションには、以下のセマンティック要素を含める必要があります。

必須の構造：

• 主要コンテンツを含む <main> 要素
• 大きなコンテンツブロックに使用する <section> 要素
• ランドマークロール（role="banner"、role="main"、role="complementary"）または「コンテンツへスキップ」リンク
• チャートのアクセシビリティ：チャートコンテナーに role="img" と aria-label を設定

追加要件：

• @media print スタイルを定義する
• アクセシビリティのために @media (prefers-reduced-motion) スタイルを定義する
• セクション間に十分な間隔を設ける（48px 以上）
• インタラクティブな要素にホバー状態を設定する

ビジュアライゼーションの種類

適切な形式を選んでください。詳しいパターンについては、references/types.md を参照してください。

種類	用途	主な特徴
スライドデッキ	プレゼンテーション、ピッチ	16:9、キーボード操作、トランジション
インフォグラフィック	データの要約、ビジュアルストーリー	縦長のスクロール、大きな数値、セクション
ダッシュボード	指標、KPI	カードとチャートのグリッド
フローチャート	プロセス、アーキテクチャ	Mermaid または SVG の図
タイムライン	時系列のイベント	左右交互の配置、スクロールをトリガーとする表示
比較	並列分析	機能マトリクス、長所と短所
データビジュアライゼーション	チャート、データストーリー	Chart.js または D3
ワンペーパー	要約、概要資料	単一ビューポート、印刷に適した形式
マインドマップ	概念間の関係	放射状の SVG レイアウト
カンバン	ステータス管理	列ベースのカード
カルーセルカード	ソーシャルメディア（IG/LinkedIn）	カードごとに 1080×1080、スワイプ可能、大きな文字
イベントポスター	カンファレンス、ミートアップ、ウェビナー	縦向きの A4／レターサイズ、大きな見出し、日付／会場
履歴書／CV	求人への応募	1 ページ、2 列、印刷に最適化
バナー／ヘッダー	メール、ブログ、ソーシャルメディアのカバー	1200×630 または 1500×500、ビジュアル背景上にテキストを中央配置
引用カード	ソーシャルプルーフ、お客様の声	縦長／正方形、大きな引用文、出典
手順ガイド	ハウツー、手順の解説	番号付き手順、アイコン、明確な流れ
ステータスレポート	経営層向けの最新情報	KPI＋進捗バー＋要点、1 ページ
組織図	チーム構成	階層ツリー、写真／アバター、役割
データストーリー	ナラティブ＋データ	スクロールに連動したストーリーテリング、ナラティブテキストに織り込まれたチャート
プロダクトカード	機能の紹介、ローンチ	メイン画像エリア、機能を示すピル型要素、CTA

カルーセルカードのルール

カルーセルカードはソーシャルメディアで大きな効果を発揮します。次の点を押さえてください。

• 正方形のフォーマット — 1080×1080px（または CSS 変数で設定可能）
• カード1枚につきアイデアは1つ — 大胆な見出し＋補足ポイントは最大1～2個
• スワイプナビゲーション — 矢印＋ドット＋タッチスワイプ＋キーボード
• カードカウンター — 「3 / 8」を表示
• 一括ダウンロード — 個々のカード、または全セットを PNG でエクスポート
• タイポグラフィを主役に — 見出しは 2.5～4rem、本文は最小限に
• 色分け — カードごとにアクセントカラーをさりげなく変えられるようにする
• 印刷レイアウト — 印刷用に全カードをグリッド表示
• 最大10枚 — 焦点を絞る

イベントポスターのルール

• 縦向き — A4／レター比率、または正方形
• 視覚的な階層 — イベント名（最大）→ 日付／時刻 → 場所 → 説明 → CTA
• 大胆な見出し — 3～5rem、最大6語
• 日付／時刻を目立たせる — バッジまたは強調ブロックとしてスタイリング
• QRコード領域 — 登録リンク用のプレースホルダーボックス
• 印刷を最優先 — ダークテーマでもライトテーマでも、印刷時に見栄えよくする

引用カードのルール

• 大きな引用符 — アクセントカラーで装飾的な「 」を特大表示
• 引用文 — 1.5～2.5rem、コントラストを出すためにセリフ体またはイタリック体を使用
• 引用者情報 — 引用の下に名前、役職、会社名を記載
• 正方形または縦向き — ソーシャルメディアでの共有に最適化
• ミニマルなデザイン — 引用文を主役にし、それ以外は控えめに

1画面／モバイルに収まるレイアウトのルール（ポスター、カード、1枚もの）

ユーザーから「1画面」「スマートフォンの画面」「9:16」「モバイルに収まる」ものを求められた場合は、固定寸法の単一ビューポートのビジュアルを作成してください。スクロールするページにはしないでください。

寸法：

• 9:16 縦向き（スマートフォン）： width: 1080px; height: 1920px; — 標準的な Instagram ストーリー／スマートフォン画面
• 1:1 正方形： width: 1080px; height: 1080px; — Instagram 投稿
• 4:5 縦向き： width: 1080px; height: 1350px; — Instagram 縦向き投稿
• 16:9 横向き： width: 1920px; height: 1080px; — プレゼンテーションスライド

重要な CSS パターン：

body {
  width: 1080px; height: 1920px; /* or chosen ratio */
  overflow: hidden; /* MUST — prevents scroll, enforces single screen */
  display: flex; flex-direction: column; /* Flex column fills canvas completely */
}
.poster-header { padding: 44px 48px 0; }
.poster-grid { flex: 1; padding: 24px 48px 0; } /* flex:1 expands to fill remaining space */
.poster-footer { padding: 16px 48px 36px; }

レイアウトのルール：

• body に overflow: hidden を指定します。これが「1画面」に収めるための必須設定です。
• メインコンテナに justify-content: space-between を指定し、余計な空白を作らず、各セクションを均等に配置します。
• メインコンテンツ領域（グリッド、本文など）には flex: 1 を使用し、ヘッダーとフッターの間にある空間をすべて埋めるように広げます。不要な空白が残る固定の height 値は使用しないでください。
• 各論理セクションは <div> で囲み、Flexbox がブロック単位で配置できるようにします。
• 無駄な空白を作らないルール： ポスターのキャンバスは100％活用してください。下部や側面に大きな空白を残さないでください。目に見える空白がある場合は、コンテンツを広げて埋めるか、パディングを減らしてください。コンテンツがフレームにぴったり収まるようにします。
• 頭の中で確認します： セクション数を数え、1920pxをその数で割ってください。各セクションは約200～300pxになります。コンテンツが少ない場合は、要素を大きくします（フォントを大きくする、パディングを増やす、アイコンを大きくする）。
• 固定寸法のポスターにハンバーガーメニューを付けないでください。スペースを無駄にし、ポスターは操作するものではなく、スクリーンショットやエクスポート向けのものだからです。

9:16 のコンテンツ密度：

• ヒーロー（タイトル＋サブタイトル）：高さの約25％
• コンテンツセクション2～3個：高さの約55％
• フッター／CTA：高さの約10％
• 余白（間隔）：高さの約10％
• 空いて見える場合は、コンテンツが小さすぎます。 フォントを大きくし、グリッド項目を増やし、アイコンを大きくしてください。

幅1080pxのポスターにおけるフォントサイズ：

• ヒーローの h1：68-80px（ウェブページより大きくします。これはポスターです）
• セクションラベル：15-18px、大文字、文字間隔 0.06em
• カードのテキスト：16-20px
• 本文：20-24px

よくある間違い： スクロールするページを作り、スクリーンショットを撮ることです。それはポスターではなく、ウェブページのスクリーンショットです。ポスターとは、すべてのピクセルに意図がある固定キャンバスです。

スライドデッキのルール

スライドの依頼が最も一般的です。次の点を正しく押さえてください。

• 16:9 のアスペクト比 — 100vw × 100vh、コンテンツは中央揃え
• レスポンシブなブレークポイント — モバイルで使いやすいスライドには clamp() とコンテナークエリを使用します。

  .slide-container { container-type: inline-size; }
  .slide-title { font-size: clamp(2rem, 8vw, 4rem); }
  @container (width < 768px) { .slide-content { padding: 1rem; } }
  

• 1 スライドにつき 1 つのアイデア — 2 つ目の考えが必要なら、スライドをもう 1 枚作成します
• スライドあたり最大 40 語 — それ以上になる場合は、分割するかビジュアルを使用します
• 見出しは最大 6 語 — 短く、印象的で、記憶に残るものにします
• 統計スライドには大きな数字＋小さなラベル — 数字は 3〜5rem、ラベルは 0.875rem にします
• キーボード操作 — ← → 矢印キー、Space、Enter
• タッチ操作 — 左右にスワイプします
• クリック操作 — 左側 3 分の 1 で前へ、右側 3 分の 2 で次へ進みます
• プログレスバー — 位置を示す細いグラデーションバーを上部に表示します
• スライドカウンター — 下部のナビゲーションに「3 / 12」と表示します
• モバイルでのナビゲーションの視認性 — モバイルでもナビゲーションコントロールがはっきり見えるようにします。大きなタッチターゲット（最小 44px）とコントラストの高い色を使い、フローティングナビゲーションには backdrop-blur を使用します
• スムーズなトランジション — 500ms の cubic-bezier を指定した transform: translateX() を使用します
• 表示時のアニメーション — スライド内の要素を、段階的な遅延を付けてアニメーションさせます
• 発表者ノート — data-notes 属性を使用し、印刷時のみ表示します

インパクトの高いプレゼンテーションスライド（ビジネス向け）

投資家向けプレゼンテーション、スタートアップのピッチ、経営幹部向け説明資料の場合：

• ヒーロースライドの視覚的な訴求力 — より強いグラデーションと大きなタイポグラフィ（4〜6rem）を使い、説得力のある統計を目立つように表示します
• 価値提案の明確さ — ヒーロースライドで、5 秒以内に中核となる価値が伝わるようにします
• プロフェッショナルとしての信頼感 — タイポグラフィ、余白、色の選択が、エンタープライズや投資家向けの品質基準に合うようにします
• データストーリーテリング — 各チャートスライドには、生データの可視化だけでなく、明確なインサイトの注釈を付けます

テーマに応じたスライドのグラデーション（重要）

スライドデッキは、ダークテーマとライトテーマで見た目を明確に変える必要があります。背景のグラデーションも切り替えます。

/* Dark theme: deep, saturated gradients */
.theme-dark .slide-title { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e3a5f 100%); }
.theme-dark .slide-content { background: var(--bg); }

/* Light theme: soft, pastel gradients */
.theme-light .slide-title { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #dbeafe 100%); }
.theme-light .slide-content { background: var(--bg); }

ルール：

• タイトル／セクションスライド：テーマに応じたグラデーションの組み合わせを使用します（ダーク＝深みのある鮮やかな色、ライト＝柔らかなパステルカラー）。コンテンツのテーマを想起させるグラデーションの色を選びます。たとえば、テクノロジーのピッチには寒色系の青、ゲームのピッチには鮮やかな紫やシアン、医療の資料には落ち着いた緑や青緑を使用します。
• コンテンツスライド：var(--bg) または var(--surface) を使用します。ハードコードした暗い背景は使用しません
• スライド上のデータカード：var(--surface) と var(--border) を使用します。自動的にテーマに適応します
• スライドのコンテンツに #1a1a2e などの暗い色をハードコードしないでください。CSS 変数を使用します
• テスト：テーマを切り替え、すべてのスライドがそのテーマに合うよう意図してデザインされていることを確認します

スライドの種類

1. タイトル — テーマに応じたグラデーション背景、大きな見出し、サブタイトル。中央揃えにします。
2. コンテンツ — 見出し＋箇条書き、または見出し＋ビジュアル。テキストを詰め込みすぎないようにします。
3. セクション区切り — アクセントカラーを全面に使い、セクションタイトルのみを表示します。
4. 統計 — 大きな数字 1 つ、ラベル 1 つ、インサイトを伝える文 1 つ。
5. チャート — タイトルと重要なメッセージを添えた Chart.js の可視化。chart-container ラッパークラスを必ず使用します。
6. 2 カラム — 比較やテキスト＋ビジュアル向けの分割レイアウト。
7. 引用 — 大きな引用文と出典。
8. 締めくくり — CTA、連絡先情報、または要約＋ソーシャルリンク。

スライドデッキのチャート要件（重要）

プレゼンテーションのチャートスライドは、ダッシュボードと同じコンテナの基準に従う必要があります。

<div class="chart-slide-container">
  <h2>Chart Title</h2>
  <div class="chart-container" style="height: 400px; padding: 40px; border-radius: 12px; background: var(--surface);">
    <canvas id="slideChart" role="img" aria-label="Description"></canvas>
  </div>
</div>

• chart-container クラスを使用 — 形式間で評価の一貫性を保ちます
• スライドのチャートは最小高さ 400px — プレゼンテーションで読みやすいよう、ダッシュボードのチャートより大きくします
• maintainAspectRatio: false — スライドレイアウトで適切なサイズにするために必須です

データの取り込み

ユーザーからデータが提供された場合：

• CSV — JS で解析し、ヘッダーを自動検出して、適切なチャートタイプを表示します
• JSON — キーをラベル、値をデータとして抽出し、ネストされたオブジェクトは系列として扱います
• テーブル — 視覚的な比較またはチャートに変換します
• テキスト内の数値 — 抽出して統計カードとして強調表示します
• URL — クロールして重要な情報を抽出し、要約として可視化します

コンテキストの把握

このスキルは会話の途中で使用します。これまでの内容をすべて活用してください。

• 会話のコンテキスト — 話し合った内容を要約、整理、または可視化します
• URL／リンク — コンテンツを巡回して抽出し、可視化します
• 貼り付けられたデータ — CSV、JSON、表 → グラフ、ダッシュボード
• アイデア／概念 — 抽象的な話し合いを視覚的な図に変換します
• コード／アーキテクチャ — システム設計やデータフローを可視化します

実際のコンテンツを必ず使用してください。実際のコンテキストが存在する場合、プレースホルダーデータを生成しないでください。

種類ごとのインタラクティブ性（必須）

すべてのファイルに、テーマ切り替えとメニュー以外の意味のある操作を少なくとも1つ含めてください。静的に見えるページは、インタラクティブ性の評価が低くなります。

種類	必須の操作
チートシート	検索／絞り込み入力欄と、コードブロックのクリップボードへのコピー機能を用意します。折りたたみ可能なグループには <details name="..."> を使用します。
ダッシュボード	フィルターツールバーまたは指標の詳細表示機能を用意します。最低限、日付範囲またはカテゴリで絞り込めるようにします。
ステータスレポート	折りたたみ可能な詳細セクション（<details> を使用）を設けます。プログレスバーはスクロール時にアニメーションします。
引用カード	引用を自動で切り替えるか、スワイプ可能なカルーセルを用意します。共有／コピーのボタンを設けます。
イベントポスター	アニメーション付きのカウントダウンタイマー（日／時／分／秒）を設けます。RSVP／登録ボタンを用意します。
プロセスガイド	手順を排他的なアコーディオン（<details name="steps">）として表示します。または、インタラクティブな進捗トラッカーを用意します。
アーキテクチャ	ポップオーバーの詳細を表示するクリック可能なノード（Popover API を使用）を設けます。ホバーすると接続が強調表示されます。
タイムライン	時代／カテゴリで絞り込めるようにします。または、クリックしてイベントの詳細を展開できるようにします。
比較	カテゴリの表示／非表示を切り替えられるようにします。または、各行の勝者を強調表示します。
カルーセル	タッチスワイプ、キーボード操作、自動切り替えオプションに対応します。カードカウンターを常に表示します。
スライドデッキ	すでにインタラクティブです（ナビゲーション）。さらに、プレゼンター用タイマーやスライド一覧グリッドを追加します。

種類が一覧にない場合は、最低限、フィルター、検索、並べ替え、または展開／折りたたみの操作を追加してください。

レイアウトの変化（重要）

すべてのファイルで、テキストだけを変えたテンプレートではなく、それぞれ独自のデザインに見えるようにしてください。ファイルの種類に応じて、次の要素に変化をつけます。

• グリッド構造：1列、2列、3列を組み合わせます。目立たせるカードには CSS Grid の span 2 を使用します。重要：必ず 768px と 375px でテストし、横方向にはみ出さないようにしてください。

モバイルファーストのレスポンシブパターン（必須）：

.grid { 
  display: grid; 
  gap: 24px; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
}
@media (max-width: 768px) { 
  .grid { grid-template-columns: 1fr; gap: 16px; }
  .container { padding: 24px 16px; }
}
@media (max-width: 375px) {
  .card { padding: 16px; }  
  .stat-value { font-size: 2rem; }
}

• セクションのリズム：全幅セクション、カードグリッド、単一の要素に焦点を当てるセクションを交互に配置します。
• コンテンツの密度：大きな画面で内容を少なくするより、小さな画面でも内容を充実させるほうが、プロフェッショナルに見えます。KPIカード8枚とグラフ4つを備えたダッシュボードは実用的に見えますが、KPIカード4枚とグラフ2つではデモのように見えます。
• 視覚的な焦点：すべてのファイルに、視覚的に際立つ要素を1つ用意してください（ヒーロー指標、主要なグラフ、中心となるメッセージなど）。すべての要素を同じ重みにしないでください。
• 孤立したグリッド項目を作らない：項目数が奇数のグリッドで最終行が埋まらない場合は、最後の項目に grid-column: span 2 を指定するか、grid-template-columns を調整して、行にカードが1枚だけ取り残されないようにします。

避けるべきパターン

• ❌ テキストの壁 — 文書のように読めるなら、それは可視化ではありません
• ❌ 小さすぎるフォント — 本文は最低14px、プレゼンテーションの見出しは20px以上にします
• ❌ 虹のような配色 — パレットから2～3色を選び、中間色と組み合わせます
• ❌ プレースホルダーコンテンツ — 「Lorem ipsum」や架空のデータは使用しないでください
• ❌ 過剰な設計 — 見栄えがする最もシンプルな方法を選びます
• ❌ 窮屈なレイアウト — 迷ったら余白を増やします
• ❌ ありきたりなデザイン — 各ビジュアライゼーションに意図を持たせ、テンプレートのようにしないでください
• ❌ メニューの欠落 — すべての出力にハンバーガーメニューが必要です
• ❌ 印刷時の表示崩れ — 必ず @media print のスタイルを含めてください

高度なテクニック

効果がある場合に使用してください。コードスニペットについては、references/css-techniques.md を参照してください。

• グラスモーフィズム — フローティングカードに backdrop-blur-md bg-white/5 border border-white/10 を使用します
• グラデーションテキスト — ヒーローの見出しに background: linear-gradient(...); -webkit-background-clip: text を使用します
• スクロールスナップ — スライドナビゲーションの代替として scroll-snap-type: y mandatory を使用します（JS は不要です）
• 円錐グラデーション — 純粋な CSS で円グラフやドーナツグラフを作成するには conic-gradient() を使用します
• 数値アニメーション — スクロール時にカウンターを 0 から目標値までアニメーションさせます
• スプリングイージング — 遊び心のあるマイクロインタラクションには cubic-bezier(0.34, 1.56, 0.64, 1) を使用します
• auto へのアニメーション — :root に interpolate-size: allow-keywords を設定すると、height: auto の遷移が滑らかになります（Chrome 129+）
• CSS カウンター — 手順を自動で番号付けします
• View Transitions API — テーマ切り替えを滑らかにアニメーションさせます
• インライン SVG アイコン — <svg> のパスでシンプルなアイコンを描画できます。アイコンライブラリは不要です

必須の HTML スケルトン

すべてのビジュアライゼーションは、必ずスケルトンから始めてください。 コピーしてから、コンテンツを追加します。

スケルトンのコード全体： テーマ、印刷スタイル、Inter フォント、アニメーション、メニュー、ホバー効果を含む、コピーしてすぐ使える完全な HTML テンプレートについては、references/skeleton.md を参照してください。

スケルトンには次の機能があります。

• クラスベースのダーク／ライトテーマ（初回訪問時に OS 設定を検出し、localStorage に保存）
• CSS @keyframes アニメーション（fadeInUp、fadeIn、slideInLeft、slideInRight）と .animate/.delay-N クラス
• data-reveal 属性と IntersectionObserver によるスクロール時の表示
• data-count 属性による数値カウンター
• テーマ切り替え、PNG ダウンロード（html-to-image）、印刷／PDF に対応したハンバーガーメニュー
• Popover と details アコーディオンの CSS（Chrome 114+/120+）
• @page マージンボックスを使った印刷スタイル
• prefers-reduced-motion のサポート

スケルトンのルール

• トップレベルの JS 変数にはすべて var を使用します（TDZ エラーを防ぎます）
• 必須： スクロールアニメーションには data-reveal、またはページ読み込み時の表示には .animate.delay-N を使用します。.reveal クラスには JavaScript のスクロールオブザーバーを追加してください。
• テーマ切り替え時にチャートを再描画するため、function onThemeChange() {} を定義します
• セマンティック HTML を使用します：<main>、<section>、<header>、<article>
• スクリプトのトップレベルでは let／const を使用しないでください

最小サイズのルール

要素は読みやすく、十分な存在感があるサイズにしてください。

• タイムラインカード： 最小幅 280px、最小パディング 20px
• タイムラインのレイアウト： 大きな空白ができないよう、タイムラインの項目を均等に配置します。項目が 5 つあるのに縦方向のスペースの 60% しか使っていない場合は、残り 40% を埋めるため、投資の内訳やインパクト指標などのコンテンツセクションを追加します。最後のタイムライン項目の下に大きな空白を残さないでください。
• チャートコンテナー： 親要素の幅の 60% 以上、高さ 300px 以上（ダッシュボードでは 360px 以上）。グリッドレイアウトでは、利用可能なスペースを埋めるために、チャートに flex-grow: 1 を設定してください。300px は最低値であり、目標値ではありません。
• 統計数値： 最小フォントサイズ 2rem（32px）、太字または極太字
• カードのコンテンツ領域： 最小パディング 24px
• セクション間隔： 必須：主要なセクション間には最低 48px の間隔を設けます — セクション要素に margin-bottom: 48px 以上を設定してください
• スライドの見出し： 最小 2rem（32px）、最大 6 語
• 本文テキスト： 最小 1rem（16px）。これより小さくしないでください

コンテンツが小さく感じられる場合、実際に小さすぎます。大きめにするよう心がけてください。

テキストの視認性ルール

テキストは常に視認できるようにしてください。 出力が壊れる原因の第 1 位です。

• ダークテーマ：テキストには必ず var(--text) を使用します。これは #f9fafb（ほぼ白）に解決されます
• ライトテーマ：テキストには必ず var(--text) を使用します。これは #0f172a（ほぼ黒）に解決されます
• グラデーション背景：読みやすくするため、text-shadow: 0 1px 3px rgba(0,0,0,0.3) を追加します
• グラデーション／画像背景のヒーロースライド：暗いオーバーレイ（rgba(0,0,0,0.5)）を使用します
• 背景色に近い値をテキストの色に設定しないでください
• 頭の中で確認してください：「このテキストは、ダーク（#030712）とライト（#f8fafc）のどちらの背景でも視認できるだろうか？」

Chart.js 統合ルール（重要 — 最もよくある失敗）

チャートは、2番目によくある失敗です。すべてのチャートで、以下のルールを必ず守ってください。

1. コンテナー構造（必須）

<div role="img" aria-label="Detailed description of chart data and insights">
  <div class="chart-container" style="height: 360px; padding: 40px; border-radius: 12px; background: var(--surface);">
    <canvas id="uniqueChartId"></canvas>
  </div>
</div>

2. Canvas のサイズ（必須）

• コンテナーには明示的な高さが必要です： ダッシュボードでは最低 360px、その他の種類では 300px
• Canvas 要素のサイズ指定は不要です — maintainAspectRatio: false の場合、Chart.js が処理します
• コンテナーのパディング： プロフェッショナルな間隔を確保するため、内側に 40px のパディングを設定します
• コンテナーの角丸： モダンなカードの外観にするため、12px に設定します

3. Chart.js の初期化（必須パターン）

// REQUIRED: Chart destruction and canvas reset to prevent "Canvas already in use" errors
var chartsBuilt = false; // Guard flag

function buildCharts() {
  if (chartsBuilt) return; // Prevent double-initialization during theme detection
  
  // REQUIRED: Reset canvas before building
  function resetCanvas(id) {
    var old = document.getElementById(id);
    if (!old) return null;
    var parent = old.parentNode;
    var canvas = document.createElement('canvas');
    canvas.id = id;
    parent.replaceChild(canvas, old);
    return canvas;
  }
  
  // Example chart with required settings
  var ctx = resetCanvas('myChart');
  if (ctx) {
    new Chart(ctx, {
      type: 'bar',
      data: { /* your data */ },
      options: {
        responsive: true,
        maintainAspectRatio: false, // REQUIRED
        animation: false, // MANDATORY: Plus set Chart.defaults.animation = false globally
        plugins: {
          tooltip: {
            enabled: true, // NEVER disable tooltips
            padding: 12,
            cornerRadius: 8
          }
        },
        layout: { padding: 20 } // REQUIRED: breathing room
      }
    });
  }
  
  chartsBuilt = true; // Mark as built
}

// CRITICAL: Disable Chart.js default animations IMMEDIATELY after Chart.js loads
Chart.defaults.animation = false; // MUST be set before any chart creation

// REQUIRED: Build charts after DOM loads
document.addEventListener('DOMContentLoaded', buildCharts);

// REQUIRED: Rebuild charts on theme change
function onThemeChange() {
  chartsBuilt = false; // Reset flag
  setTimeout(buildCharts, 100); // Slight delay for CSS variable updates
}

• 必須：ホバーツールチップを有効にすること — Chart.js のツールチップを無効にしないでください：

  options: {
    plugins: {
      tooltip: {
        enabled: true, // NEVER set to false
        mode: 'index',
        intersect: false
      }
    }
  }
  

• チャートの最小高さ： デスクトップでは 300px、モバイルでは 250px
• デフォルトのフォントサイズ： 軸の目盛りラベルは最低 13px、軸タイトルは 14px、チャートタイトルは最低 16px。凡例は 13px。
• チャートのパディング： 余白を確保するため、layout: { padding: { top: 20, right: 20, bottom: 20, left: 20 } } を追加します
• 軸の目盛り設定： ラベルを水平に保つには maxRotation: 0 を設定します。ラベルが収まらない場合は、maxTicksLimit を使って数を減らします
• グリッド線： ごく薄くします — ダークモードでは rgba(255,255,255,0.04)、ライトモードでは rgba(0,0,0,0.06)
• ツールチップのスタイル： padding: 12、cornerRadius: 8、titleFont: { size: 14 }、bodyFont: { size: 13 }
• ポイントの半径： デフォルトは 0、ホバー時は 6 — 折れ線チャートをすっきり表示できます
• maintainAspectRatio: false を設定し、 CSS コンテナーでサイズを調整します
• テーマに応じた色を使用します： 描画時に CSS 変数を読み込み、テーマの変更時に再描画します
• チャートのテキスト色： Chart.defaults.color = getComputedStyle(root).getPropertyValue('--text-secondary').trim() を設定します
• グリッド線の色： var(--border) の値を使用します
• 凡例の位置： 横向きのチャートでは 'top'、縦向きでスペースがある場合は 'right' にします
• 軸ラベル： 可能な限り水平に保ちます — やむを得ない場合を除き、回転は避けてください
• ドーナツチャート／円グラフ： セグメントに必ずパーセンテージラベルを表示します
• レスポンシブ対応： responsive: true がデフォルトですが、コンテナーには明示的な寸法が必要です
• 高コントラストの色： アクセシビリティのため、データ系列間に十分な色の違いがあることを確認します

// Theme-aware Chart.js setup (include in every chart visualization)
function getChartColors() {
  var s = getComputedStyle(document.documentElement);
  return {
    text: s.getPropertyValue('--text').trim(),
    textSecondary: s.getPropertyValue('--text-secondary').trim(),
    border: s.getPropertyValue('--border').trim(),
    surface: s.getPropertyValue('--surface').trim(),
    accent: s.getPropertyValue('--accent').trim(),
  };
}

// REQUIRED: Reset canvas before rebuilding charts (prevents "Canvas already in use" errors)
function resetCanvas(id) {
  var old = document.getElementById(id);
  var parent = old.parentNode;
  var canvas = document.createElement('canvas');
  canvas.id = id;
  parent.replaceChild(canvas, old);
  return canvas;
}

// Usage in buildCharts():
//   try { if (window.myChart) window.myChart.destroy(); } catch(e) {}
//   window.myChart = new Chart(resetCanvas('myChart'), { ... });

// CRITICAL: Always check chart existence before destroy() to prevent console errors
function buildCharts() {
  var isDark = document.documentElement.classList.contains('theme-dark');
  var colors = getChartColors();
  
  // Safe chart destruction and rebuild pattern
  if (window.myChart) {
    try { window.myChart.destroy(); } catch(e) { /* ignore */ }
  }
  window.myChart = new Chart(resetCanvas('myChart'), {
    // chart config with theme-aware colors
    options: {
      scales: {
        x: { ticks: { color: colors.textSecondary }, grid: { color: colors.border } },
        y: { ticks: { color: colors.textSecondary }, grid: { color: colors.border } }
      }
    }
  });
}

重要なデバッグパターン

カウンターアニメーションのデバッグパターン

KPI の値がアニメーションせず「0%」と表示される場合は、次のデバッグパターンを追加します：

// DEBUG: Add after counter observer setup to verify intersection
var counterEl = document.querySelector('[data-count]');
if (counterEl) {
  console.log('Counter element found:', counterEl); // DEBUG
  var cObs = new IntersectionObserver(function(entries) {
    console.log('Counter intersection triggered:', entries); // DEBUG
    entries.forEach(function(e) { 
      if (e.isIntersecting) { 
        console.log('Starting counter animation'); // DEBUG
        animateCounters(); 
        cObs.disconnect(); 
      } 
    });
  }, { threshold: 0.3 });
  cObs.observe(counterEl);
} else {
  console.warn('No [data-count] elements found'); // DEBUG
}

Chart.js 統合の安全性パターン

コンソールエラーを防ぐため、すべての Chart.js の使用で必須です：

// STEP 1: Global variables - MUST use var, never let/const
var chartsBuilt = false;

// STEP 2: Chart building function with validation
function buildCharts() {
  // CRITICAL: Always validate Chart.js loaded first
  if (chartsBuilt || typeof Chart === 'undefined') return;
  
  // STEP 3: Destroy existing charts to prevent "Canvas already in use"
  if (window.myChart) window.myChart.destroy();
  
  // STEP 4: Reset canvas elements
  var canvas = document.getElementById('chartId');
  if (!canvas) return;
  
  // STEP 5: Get theme colors from CSS variables
  var isDark = document.documentElement.className.includes('theme-dark');
  var textColor = isDark ? '#EDEDED' : '#0f172a';
  var gridColor = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)';
  
  // STEP 6: Create chart with proper options
  try {
    window.myChart = new Chart(canvas.getContext('2d'), {
      // Your chart configuration here
      options: {
        responsive: true,
        maintainAspectRatio: false, // REQUIRED
        plugins: {
          tooltip: { enabled: true }, // REQUIRED - never disable
          legend: { 
            labels: { color: textColor, font: { family: 'Inter' } }
          }
        },
        scales: {
          x: { 
            ticks: { color: textColor },
            grid: { color: gridColor }
          },
          y: { 
            ticks: { color: textColor },
            grid: { color: gridColor }
          }
        }
      }
    });
    
    chartsBuilt = true;
  } catch (error) {
    console.error('Chart creation failed:', error);
  }
}

// STEP 7: Theme change handler
function onThemeChange() {
  if (chartsBuilt) {
    chartsBuilt = false;
    buildCharts();
  }
    var ctx = document.getElementById('myChart');
    if (!ctx) {
      console.error('Chart canvas #myChart not found');
      return;
    }
    // ... build chart
  } catch (error) {
    console.error('Chart building failed:', error);
  }
}

メニューの外側クリックに関する修正

イベントハンドラーを強化し、外側をクリックしたときにメニューが閉じるようにします：

document.addEventListener('click', function(e) { 
  var menu = document.querySelector('.viz-menu');
  var dropdown = document.getElementById('vizMenuDropdown');
  if (!e.target.closest('.viz-menu') && dropdown) {
    dropdown.classList.remove('open');
  }
});

プロセス

1. 理解する — メッセージの内容は何ですか？読者は誰ですか？どの形式が適していますか？
2. 骨組みから始める — 上記の必須 HTML スケルトンをコピーします。空のファイルから始めてはいけません。
3. 構成する — スケルトンを埋める前に、コンテンツとセクションの概要を作成します。
4. 構築する — コンテンツ、チャート、スタイルを追加します。すべての色を CSS 変数にします。
5. チェックリストで確認する：
   • html.theme-dark と html.theme-light のクラスベースのテーマセレクターを使用していますか（@media prefers-color-scheme は使用しない）？
   • 初回訪問時に JS が OS の設定を検出し、localStorage に保存しますか？
   • すべてのテキストで var(--text) または var(--text-secondary) を使用していますか？
   • @media print でメニューを非表示にし、すべてのコンテンツを表示しますか？
   • @media (prefers-reduced-motion: reduce) を含めていますか？
   • トグル、テーマ、ダウンロード、印刷機能を備えた .viz-menu がありますか？
   • 適切なフォントを読み込んでいますか？（デフォルトは Inter、韓国語には Noto Sans KR など）
   • ラテン文字以外のコンテンツに適切な CJK／RTL フォントを使用していますか？
   • .animate クラス（CSS の @keyframes）で登場アニメーションを設定していますか？
   • スクロールするセクションに data-reveal を使用していますか（JS がなくても表示される）？
   • .card:hover に変形エフェクトがありますか？
   • トップレベルの JS 変数すべてで var を使用していますか（let／const ではなく）？
   • チャートで var 宣言と onThemeChange フックを使用していますか？
   • 必須： すべてのチャートを role="img" aria-label="..." でラップしていますか？
   • 必須： すべてのチャートでホバーツールチップを有効にしていますか（無効にしない）？
   • 統計データがある箇所で、アニメーション付きの数値カウンターに data-count を使用していますか？
   • セマンティック HTML を使用していますか：<main>、<section>、<header>、<article>？
   • すべてのチャートに明示的なコンテナーサイズ（高さ 300px 以上）を指定していますか？
   • ヒーロー／タイトルのテキストは、どちらのテーマでも表示されますか？
   • 最小サイズのルールに従っていますか（カードは 280px 以上、テキストは 16px 以上）？
   • 読み込み時にコンソールエラーが発生しませんか？

品質基準は「申し分なく良い」です。「AI が生成したものとしては良い」ではありません。