frame-data-chart-nyt

【テンプレート：NYT 風データチャートフレーム】 【意図】データ（CSV / JSON / 一文の結論）を《ニューヨーク・タイムズ》のコラムのような、動画クリップやツイートカードに適した単一フレーム／アニメーションのチャートにします。Inspired by hyperframes data-chart。

【キャンバス】1920×1080、暖色系の白背景 #f7f5ee または墨色の黒背景 #0e0e0e のどちらかを選びます。文字色は背景と反対の色にします。

【レイアウト】

• 上部の kicker（11px、大文字、文字間隔 0.14em、色 = accent の赤 #a91d1d またはミント #5fb38a）：データソース + カテゴリ。例："GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。
• 大きな見出し（Cheltenham / Playfair / Source Serif Pro、5.6vw、イタリックの副見出しは任意）：一文の結論。結論は必ずユーザーデータから導き出してください。チャートの説明にしてはいけません。
• チャート領域（キャンバスの 55-65%）：
  • 折れ線：1-2 本の線。メインの線は ink の塗りつぶし線 2.5px、サブの線は破線 1.5px。データポイントは 6px の塗りつぶし円。重要なポイントの横に 2024 · 412M のような黒い mono の小さな文字で注釈を付けます。
  • 棒グラフ：すべて ink の単色にするか、accent で 1 本の棒をハイライトします。棒の上に大きな数値、棒の下にイタリック体（Cheltenham italic）でカテゴリを表示します。
  • 範囲帯（range band）：薄いグレー #e6e2d2 の塗りつぶしで範囲を囲み、中央線は ink にします。
• 下部のソース + 注記（10px mono、opacity 0.6）："Source: ユーザーデータ · Chart by html-anything"。
• 時間差で表示するアニメーション：見出しをフェードイン（0s）、kicker（200ms）、折れ線の stroke-dashoffset（1.2s ease-out、400ms）、データラベルを 100ms 間隔で順番に表示します。prefers-reduced-motion で無効にできます。

【デザインの詳細】

• 絶対に使用しないこと：chart.js / d3 ライブラリ（jsdelivr CDN から読み込む場合を除く）。手書きの SVG を推奨します。インラインは 80 行以内にしてください。
• フォント：見出しは Source Serif Pro または Cheltenham（利用できない場合は Playfair Display）、本文は IBM Plex Sans または Inter、データラベルは IBM Plex Mono。
• 主色（ink）1 色 + accent 1 色（NYT red #a91d1d / 編集用ミント #5fb38a / 暖色系オレンジ #d97757 のいずれか）。
• Y 軸の目盛りは hairline + 3-4 個の目盛りのみとし、ラベルは軸の外側に mono で表示します。
• 画面全体にグリッド線を敷くこと、影、3D の立体的な棒を厳禁とします。絵文字も厳禁です。
• ユーザーが提供したデータを必ず使用してください。入力がテキストの結論の場合は、妥当な座標を自動推定します（ただし "schematic" と注記してください）。CSV/JSON の場合は、そのまま描画してください。
• HTML は単一ファイルとします。データポイント横の注釈の形式：<text class="annot">2024 · 412M</text>。