Lieflat Charts：61種のチャートと12組のレポートテンプレート。AIが魅力的で洗練されたHTMLチャートやレポートを直接生成

日常の業務振り返り、ユーザー調査、プロダクト白書、公式アカウントやブログの長文記事を執筆する際、難点は通常「棒グラフを描けるかどうか」ではなく、データの形状、読者の閲覧時間、公開シーンに応じて適切な表現を選べるかにあります。同じデータセットであっても、3秒で一読できる週報向けチャートにすることもできれば、個別の記録をすべて残した編集型ナラティブ図として展開することもできます。表現方法の選択を誤れば、どれほど洗練されたスタイルであっても理解を妨げてしまいます。

Lieflat Charts は、テンプレート駆動型のAgent Skillです。チャートカタログ、選定ルール、視覚文法、そして再利用可能なHTML/SVG実装を同一のリポジトリにまとめ、Moxt、Claude Code、Codexなど SKILL.md を読み込めるAgentが自然言語でデータと利用シーンを受け取り、ビルド不要でブラウザから直接開ける単一ファイルのHTMLチャートやレポートを生成できるようにします。

インストールから図の選定まで：まず押さえるべき4つのルール

Lieflat Charts は複雑なローカルコンパイル環境を構築する必要がありません。すべてのチャートは本質的に軽量なWebコードであり、AIが作成した後はブラウザでダブルクリックするだけで直接閲覧やスクリーンショットの撮影が可能です。

インストールと読み込み方法

スキル拡張に対応したAIターミナル（Codex、Claude Code、Moxtなど）を使用している場合は、ターミナルに以下のインストールコマンドを1行入力するだけです：

npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts

また、プロジェクトコードをダウンロードまたはクローンして、ローカルのスキルディレクトリ（例：~/.codex/skills/lieflat-charts や ~/.claude/skills/lieflat-charts）に直接配置することもできます。インストール後は、ディレクトリ内に主ルールファイル SKILL.md、テンプレートフォルダ templates/、チャートカタログ catalog.md、およびデザイントークン mono-tokens.js が存在することを確認してください。

使用前にはライセンスの境界にも注意が必要です。当リポジトリは PolyForm Noncommercial License 1.0.0 を採用しており、汎用的なオープンソースライセンスではありません。非営利目的であれば条項に従って使用、改変、配布できますが、商用プロジェクトでの利用を予定している場合は、リポジトリ内の完全な LICENSE を事前に確認し、権利者に必要な許諾を確認してください。

チャートモード vs レポートモードの境界

Lieflat Charts は2つの生成モードを厳格に区別しており、デフォルトではチャートモードのみが有効になります：

• チャートモード（デフォルト状態）：記事の挿入図、SNS投稿用画像、特定の結論の説明に適しています。短い単発記事では通常1枚、2〜3個のコアな論点には2〜3枚、1万字超の長文や調査レポートには4〜6枚を配置します。1ページに表示するチャートはデフォルトで最大6枚までとし、スペースを埋めるためだけに同一の結論を異なるチャートで繰り返し描くことは厳禁とされています。
• レポートモード（明示的な呼び出しが必要）：「年次レポート、調査ワンペーパー、白書、月次ダッシュボード、データポスターとして作成してください」といったページ全体の成果物の作成要件をAIへ明示的に伝えた場合にのみ、AIは複合レイアウトテンプレート（R01–R12）を読み込みます。レポートモードにおいて、AIはページ全体のスケルトンを厳格に適用し、関連性のない複数のテンプレートを無理につなぎ合わせることはしません。

選定の優先順位と主力・予備メカニズム

チャートの情報密度と審美的トーンを担保するため、Lieflat Charts は鉄則とも言える選定フィルタリングファネルを定めています：

1. 第1優先順位：Lupi Editorial の全面的な検討。極細線、ドットマトリクス、個別レコードの描写、余白、傍注（サイドノート）を用いてデータを展開できないかを最優先で検討します。ここでの「Lupi風」とはリポジトリのギャラリー内の視覚文法を指すものであり、Giorgia Lupi本人による手描きスタイルの模倣ではありません。
2. 第2優先順位：基本形グループ（Lupi Basics）の検討。データ量が少なく項目がまばらであっても、ヘアラインや目盛りの質感を保ちたい場合は、ここからクラシックなチャートのバリエーションを探します。
3. 第3優先順位：Glance シリーズへのフォールバック。前2グループではデータを明確に表現できない場合、または「監視ダッシュボード、週報カードにしてほしい、3秒以内に読める必要がある」と明示的に要求された場合にのみ、太い線と強い集計性を持つGlanceシリーズの呼び出しが許可されます。
4. 特別な補足：地図は明示的な要求がある場合のみ。データに都市名、都道府県名、国名が含まれていても、デフォルトで地図を描くことはありません。「地域分布図を描いてほしい」と明示的に強調された場合にのみ地図を呼び出します。

システム全体において、L1–L15 と F1–F13 が日常的な図作成における主力部隊を構成します。それ以外の番号の多くは予備プランであり、主力の図ではどうしても表現できない場合に限って使用します。唯一の例外は F15（箱ひげ図）、F16（ストリーム図）、F17（ローソク足チャート）、L17（カレンダーヒートマップ）、L20（平行座標プロット）です。これらは主力ライブラリに対応する数学的エンコーディングが存在しないため、データ構造が完全に合致していれば直接呼び出すことができます。

カラーシステムとオフライン実行ルール

同一の記事や同一のレポート内では、全体を通じて単一体系の配色スキームに強制的に統一しなければなりません。1つの図で赤と青の対比を使い、別の図で急に草緑色に変えるような混在は禁止されています：

• Mono（ミニマルモノトーン）：デフォルトの基本スキーム。線の太さと明度差で階層を表現し、最も飽きが来ず、レイアウトの許容度も最大です。
• Porcelain（青磁ブルー）：単一色相スキーム。濃淡の変化によって順序を持つ数値や単一の連続指標を表現します。
• Palm（パームグリーン）：穏やかで低彩度のグリーン・イエロー系。少数の順序のないカテゴリを区別するために特化しています。
• Wire（エディトリアルモノクロ＋ネオンオレンジ）：全体をモノトーンのベースに保ち、鮮やかなオレンジ色のアクセントひとつで記事全体の中で最も重要なデータ着地点を際立たせます。

技術的基盤において、純粋なSVG形式でレンダリングされるチャート（大半のLupiおよびBasics系）はスタンドアロンのオフライン実行に完全対応しています。一方、Chart.jsやEChartsエンジン、またはWebフォントを採用しているチャートは、コードのインラインバンドルを行っていない場合、依存関係を読み込むためにインターネット接続が必要となります。

全61種のチャート一覧：データの形状、用途、使用境界

Lupi系・19種（ヘアライン極細線・レコードごとの精緻な描写・30秒以上の精読向け）

Lupi系は、1つの点、1本の線、1つの傍注を可能な限り実データの単位に対応させ、元データを性急に1つの結論へと要約して圧縮しません。ヘアライン、ドットマトリクス、台帳風ガイドライン、余白、傍注を駆使して読者に構造、分布、例外を提示し、論文、長文記事、アニュアルレポート、じっくり読み解くべきデータストーリーに適しています。

L1 Launch Fan（機能展開扇形図）

• データ形状：複数のビジネスエンティティ。各エンティティがリリース日時のタイムスタンプと現在の規模感を持つ。
• 適したタスク：プロダクトの進化史や重要機能のリリースの歩みを提示し、時間と規模をひとつの扇の上に凝縮する。
• 使い方：各スポークが1つの機能を表し、スポーク上の小さなドットがリリース後に経過した週を示す。大きなドットでリリース週を示し、その大きさで現在の規模を表す。
• 使ってはいけないケース：エンティティ数が15個を超える場合、または明確な時間属性を持たない一般的なカテゴリ比較。

L2 Dot Cascade（ドットカスケード積層図）

• データ形状：明確な順位付けがあり、具体的に数えられる単位を持つカテゴリ別集計データ。
• 適したタスク：無骨なランキング棒グラフの代替。各ドットが実際に発生した1単位（障害1件、顧客1人など）を表し、順位の差を質感豊かに表現する。
• 使い方：まずカテゴリを斜め方向にソートし、各カテゴリを縦方向のドットの連なりとして積み上げ、大きなドットと正確な数値を最上部に配置する。カテゴリ名が斜めに配置されるため、短いラベルにのみ適している。長い日本語名はF5、L5、またはL12に変更する。
• 使ってはいけないケース：単一の項目が数千〜数万に達し、微小な単一ドットで分解できないマクロな総量比較。

L3 Barcode Lollipop（バーコードロリポップ図）

• データ形状：約90日連続する日次高頻度測定値の時系列。
• 適したタスク：四半期の運用振り返り、日次アクティブユーザーの変動、連載プロジェクトの進捗記録。フルブリードの挿入図としてテキストサイドバーと組み合わせることが多い。
• 使い方：横方向に日単位で展開し、底部に極細のヘアライン垂直線、上端に小さなドットを配し、リズミカルなバーコードのように高低の起伏を描く。
• 使ってはいけないケース：タイムスパンが長すぎる場合（数年など）、またはデータ点が極めてまばらな場合（月1つの数値など）。

L4 Arc Matrix（円弧マトリクス図）

• データ形状：分類次元A × 分類次元Bのクロスネットワークで、総セル数が100マス以内。
• 適したタスク：軽量なマトリクス分析。例えば8つのプロダクトが12の中核都市それぞれに進出した展開密度など。
• 使い方：縦横の軸に2つのカテゴリを並べ、交点に無機質な数値を直接書き込むのではなく、精細な円弧や同心円リングを描き、弧の大きさで強度をマッピングする。
• 使ってはいけないケース：データグリッドが100マスを超える場合、または小数点単位で正確に突き合わせる必要がある財務会計テーブル。

L5 Radial Convergence（放射状収束図）

• データ形状：多対一の従属または分類関係で、総レコード数が60件以内。
• 適したタスク：何十項目もの細かなユーザーフィードバックや機能リクエストが、最終的にどのように4〜5個のコア戦略テーマへと集約・分類されたかを示す。
• 使い方：外周に具体的な課題のリストをびっしりと並べ、細い線が中心に向かって束ねられるように集まり、中心にあるいくつかのコアテーマノードへと収束する。
• 使ってはいけないケース：複雑に絡み合う多対多のネットワークトポロジー、または集約階層が全く存在しない離散的な項目。

L6 Cluster Field（クラスター星雲図）

• データ形状：コアノードと衛星ノードで構成される関係性ネットワーク。具体的な数値よりもアレイ全体の輪郭を重視する。
• 適したタスク：アニュアルレポートの表紙やブランドビジュアルポスターで、コミュニティ貢献者のエコシステムやパートナー同盟の広がりを示す。
• 使い方：中心にコアシステムを配置し、周囲に数百〜数千本のヘアライン引き出し線を放射状に伸ばして外部ノードに接続し、銀河のようなビジュアルフィールドを形成する。
• 使ってはいけないケース：特定のノード間の定量的重みを厳密に参照する必要がある業務シーン、または画面サイズが小さすぎてディテールを表示できない場合。

L7 Brand Spectrum（ブランドスペクトラム図）

• データ形状：両極の意味差尺度（軸の両端がともに合理的なポジショニングの選択肢であるもの。例：「ギーク vs マス」）に複数の競合他社比較を加えたもの。
• 適したタスク：ブランドポジショニング調査レポート、プロダクトのトーン＆マナーのメンタルマップ、企業戦略の志向性評価。
• 使い方：横方向にスペクトラムの線を引き、両端に対立する属性を明記し、調査対象の各ブランドを鍵盤上の微小な目盛りのように線上の特定位置に配置する。
• 使ってはいけないケース：単なるスコアの高低の評価（「満足度0〜100」など）で、両端がバランスの取れた設計哲学ではない場合。

L8 Dotty Matrix（空間ドットマトリクス積層図）

• データ形状：複数グループ × 離散グリッド × 頻度数値。等間隔アレイの視覚的厳粛さを強調する。
• 適したタスク：刊行物の見開きやパンフレットで、複数のアジャイルチームの戦力配置やリソース投入量を提示する。
• 使い方：整然としたグリッド座標系を区切り、各マスの中に規則正しく微小なドットマトリクスを重ね、その密集度によって規模感を表現する。
• 使ってはいけないケース：日常的な運用報告で重要な数値を素早く読み取る必要がある厳密な業務シーン。

L9 Bubble Almanac（バブル年鑑図）

• データ形状：長期の年数（5〜10年など）× 分類項目 × 規模感 × 最終状態。
• 適したタスク：プロダクトの発展年表、長サイクルの戦略的インキュベーションの軌跡。リッチテキストの余白注記や歴史的な重要マイルストーンの解説を追加するのに非常に適している。
• 使い方：時間軸に沿って左から右へと伸ばし、縦方向に事業ラインを区切り、交点に手描き風のバブル斑点を配置して、詳細な引き出し線の注釈を添える。
• 使ってはいけないケース：数週間や数か月程度の短いサイクルの臨時イベントのまとめ。

L10 Radial Patchwork（放射状デプロイタペストリー図）

• データ形状：24時間周期の円環 × イベント規模。複数日または数か月の重複レコードの重ね合わせを含む。
• 適したタスク：技術チームの四半期リリースリズムの総括、カスタマーサポートの終日入電ピーク分布、サーバー障害の周期的な振り返り。
• 使い方：360度の円周で1日の24時間をマッピングし、中心からの距離でイベント規模を表す。半透明のドットが重なり合い、色が濃い部分ほど密集したピークを表す。
• 使ってはいけないケース：線形に進行し、24時間サイクルの性質を持たない通常の時系列。

L11 Trend Lineage（機能ライフサイクル系譜図）

• データ形状：複数の機能の全ライフサイクルイベントシーケンス（企画、リニューアル、休眠、アクティブ、廃止を含む）。
• 適したタスク：過去数年間のプロダクトポートフォリオ全体の進化の血統を振り返り、各機能の盛衰を示す。
• 使い方：縦方向の年を時間軸とし、各プロダクトや機能が縦のレーンを1本ずつ占める。塗りつぶしドット、白抜きドット、破線、継続線によって、リリース、リニューアル、休眠、現在までアクティブかをそれぞれ記録する。
• 使ってはいけないケース：各プロダクト間に進化の関係性が全くなく、単発の孤立した売上数値の比較にすぎない場合。

L12 Type Colonnade（ローマ円柱リスト図）

• データ形状：多対一の帰属関係で、個別の明確な名簿リストが付随し、総項目数が50件以内。
• 適したタスク：組織構造のガバナンス監査、オープンソースリポジトリと帰属チームの責任範囲の整理。
• 使い方：左側に個別の詳細名簿を残し、各項目をヘアライン曲線で右側の帰属ノードへと渡し、ノードの横に集計数量を表示する。これにより、全体的な分担を俯瞰しつつ、単一レコードも失われない。
• 使ってはいけないケース：3階層を超える複雑な組織ツリー構造。

L13 Hourglass Stream（ファネル砂時計ストリーム図）

• データ形状：厳密に段階的に逓減していくプロセスのコンバージョン人数やファネル比率。
• 適したタスク：非エンジニアの役員や投資家に向けてコア事業の定着ボトルネックを報告し、無機質な幾何学的ファネルに代わって詩的な流体形態で伝える。
• 使い方：上から下に向かって収縮した後にわずかに広がる砂時計型の繊細な輪郭線を形成し、内部に微細な水流テクスチャを敷き詰め、各コンバージョン段階の離脱を明記する。
• 使ってはいけないケース：各段階の間に前後の因果・転換関係がなく、単に並列するいくつかのデータを並べただけの場合。

L14 Hundred Field（100人スクエアアレイ図）

• データ形状：合計がちょうど100%になる割合構成データで、カテゴリ数が6種以内。
• 適したタスク：小規模データサンプルの構造分析。ありきたりなドーナツグラフや円グラフの代わりに、それぞれの割合を100人のスクエアアレイのメンバーとして具現化する。
• 使い方：厳密な10×10の100マス微小アレイを描き、各ドットがちょうど1%または1人を表す。サブタイトルにカウント単位を明記する必要がある。
• 使ってはいけないケース：連続的な時系列データ、または割合カテゴリが多すぎて（6種超）識別が困難な場合。

L15 Ballot Tally（投票集計タスク図）

• データ形状：複数選択アンケートの割合。各選択肢が互いに独立しており（各数値が個別に0〜100の間）、選択肢が6項目以内。
• 適したタスク：ユーザーペルソナの好み調査、コアな要望やペインポイントの洗い出しなど、複数選択アンケートの結果表示。
• 使い方：各設問を行ごとに並べ、各行に100個の微小な目盛りまたはドットを敷き詰め、実際の得票率に応じて該当する長さを点灯させ、統計注釈を添える。
• 使ってはいけないケース：各項目の合計が100%になる排他的な単一選択式、または複数選択の選択肢が10項目を超えてレイアウトが極端に混雑する場合。

L16 Matrix Heat（精読ヒートマトリクス）

• データ形状：2つの離散次元が交差する具体的な数値で、セル数が100マス以内。
• 適したタスク：プロダクトポートフォリオのシナジー分析（「どの機能がよく組み合わせて使用されるか」など）、チャネル別コンバージョン細分の詳細審査。
• 使い方：Lupi系の予備プランに属する。グリッド内には極めて抑制された背景色と目立つヘアラインの輪郭を残し、重点セルはハイライト表示して正確な数値を表示する。
• 使ってはいけないケース：読者が3秒以内に結論を一読する必要がある監視画面や簡易週報（その場合はG20を選択する）。

L17 Calendar Heat（カレンダーヒートマップ）

• データ形状：丸1年分（52週 × 7日）の完全な日付シーケンスで、日次発生イベントの非負の頻度が付随するもの。
• 適したタスク：開発チームのコードコミット頻度の年報、ユーザーの1年を通じたチェックイン習慣の振り返り、日次システム異常頻度の分析。
• 使い方：主力ライブラリに対応する代替がない直接呼び出しチャート。横方向に52週を並べ、縦方向に月曜から日曜までを区切り、単色階調のグレースケールまたは青磁の濃淡で日々の規模を表現する。
• 使ってはいけないケース：期間が数日や数週間しかない場合、またはデータの粒度が時間単位の場合。

L19 Ridgeline（リッジラインプロット / 山稜図）

• データ形状：3〜8組の連続分布の確率密度輪郭。複数グループ間に明確な時間またはカテゴリの比較がある。
• 適したタスク：異なる事業ラインのチケット対応所要時間分布の比較、異なるチームのコードマージサイクルのロングテール形状の比較。
• 使い方：予備チャートに属する。起伏する複数の曲線が上から下へと適度に重なり合い、各層が1組のデータの分布の厚みを提示する。
• 使ってはいけないケース：離散カテゴリが1〜2個しかない場合、または各グループに単一の平均値しかなくサンプル分布が存在しない場合。

L20 Parallel Coordinates（平行座標プロット）

• データ形状：同一のエンティティサンプルの集合が3〜6個の異なる連続型評価次元にまたがり、1本の折れ線が1つのエンティティを貫くもの。
• 適したタスク：高次元かつ多指標のプロダクト評価（競合10製品の性能、価格、使いやすさ、バッテリー持続時間など複数次元での総合的パフォーマンスの比較など）。
• 使い方：主力ライブラリに対応する代替がない直接呼び出しチャート。縦方向に3〜6本のスケールを平行に立て、各線が1つのプロダクトを表し、左から右へと貫通する。
• 使ってはいけないケース：単純な次元が1〜2個しかない場合、またはサンプル数が数千件に達して線が団子状に潰れてしまう場合。

基本形グループ・17種（F1–F17・ヘアラインの質感 × クラシックなシルエット・まばらな小データに最適）

多くの執筆者が直面する悩ましい状況として、「手元のデータは極めてシンプル（例：4四半期の利益のみ、主力3製品の売上のみ）であり、複雑なネットワーク図を適用すれば理解の負担を増やしてしまうが、一般的なExcelの棒グラフを描くだけではあまりにも安っぽく見えてしまう」という点が挙げられます。

F1–F17の基本形グループは、まさにこの課題のために生まれました。遠目には棒グラフ、折れ線グラフ、ドーナツグラフなど、人間が直感的に認知しやすいクラシックなシルエットを維持しつつ、近づいて見ると、すべての柱や円弧が微小な目盛りや数えられるヘアラインの線によって構成されています。データが比較的まばらである場合、ここが最初の選択肢となります。

F1 Rung Bars（ラングステップ棒グラフ）

• データ形状：少数のカテゴリ比較（8個以内）。数値が明確に数えられる物理単位を持つ。
• 適したタスク：異なる料金プランの収益比較、各四半期の主要クライアント契約数。
• 使い方：棒グラフの直立構造を維持しつつ、柱の内部をベタ塗りの黒い大きな色ブロックにするのではなく、竹梯子のように横方向のヘアライン状の短い目盛りを1段ずつ刻む。
• 使ってはいけないケース：カテゴリが10個を超えて横軸のラベルが混雑・重複する場合、または純粋なパーセンテージ構成比の分布。

F2 Hairline Line（ヘアライン折れ線グラフ）

• データ形状：30日以内の連続した日次レベルの時系列で、日々の変動を正確に読み取ることが求められるもの。
• 適したタスク：新バージョンリリース後4週間の新規登録推移、大型キャンペーン期間中の日次売上。
• 使い方：極めて繊細な1ピクセルの折れ線が滑らかに推移し、データの変曲点には微小な円を添えて局所的な山や谷の数値を直接注記する。無骨な色ブロックの乱用は避ける。
• 使ってはいけないケース：期間が数年に及び折れ線が密集しすぎる場合、またはトレンド自体に周期的な規則性が全くない場合。

F3 Hairline Area（ヘアライン面グラフ）

• データ形状：30〜60日の連続した時系列で、マクロな推移、高低、全体の形状の把握に主眼が置かれるもの。
• 適したタスク：2か月間の同時接続ユーザー数推移、サーバーストレージ総使用容量の増加トレンド。
• 使い方：上部をヘアラインの折れ線で境界づけ、下部には垂直等間隔の緻密な微細ストライプを影の塗りつぶしとして敷き詰めることで、ボリューム感を保ちつつ透明感を際立たせる。
• 使ってはいけないケース：複数の系列が互いに交差・重複している場合。複数層のヘアライン面が重なると著しい視覚的混乱を招く。

F4 Tick Donut（目盛り付きドーナツ図）

• データ形状：合計が100%になる比率の分割で、カテゴリが6分割以内。
• 適したタスク：ウェブサイト全体の流入チャネル比率、部門の総予算における主要注力分野の配分比率。
• 使い方：無機質な通常の円グラフの代わりにリング状の軌道を用い、軌道上には精密な破線の目盛りを配置し、中央の余白領域に主要カテゴリの数値を大きく提示する。
• 使ってはいけないケース：カテゴリが6種を超えて小さなセクターが見分けにくくなる場合、または各項目が相互に排他的な全体を構成していない場合。

F5 Tick Rows（横方向目盛り付きバーグラフ）

• データ形状：長いテキストラベルを持つカテゴリの横方向ランキング比較で、項目が8行以内。
• 適したタスク：各事業の開発チームのリリース数比較、各マーケティング施策経由のリード獲得・コンバージョン順位。
• 使い方：カテゴリ名を左側にゆとりをもって配置し、右側には微細な垂直の刻み目からなる横方向のラスター目盛りバーを伸ばし、末端を目盛りスケールに正確に合わせる。
• 使ってはいけないケース：データカテゴリが極めて多く（15個超）、紙面が無限に伸びてしまう場合。

F6 Paired Rungs（ペアステップ対比棒グラフ）

• データ形状：グループ対比データで、各カテゴリ内に固定で2つの比較系列（今年 vs 昨年、目標 vs 実績など）を含むもの。
• 適したタスク：年次決算と前年同期の比較、各製品ラインの実績粗利と目標粗利の達成度評価。
• 使い方：カテゴリごとに2本の緻密な目盛りの柱を並べて立て、左側には薄いグレーの実線、右側には強調色または密度の異なる目盛りテクスチャを採用する。
• 使ってはいけないケース：比較系列が3つ以上になり、同一カテゴリ内が混雑しすぎる場合。

F7 Stacked Rungs（ステップ積み上げ棒グラフ）

• データ形状：カテゴリ別積み上げ構成で、カテゴリ数が4種以内、各カテゴリの積み上げ階層が3段階以内。
• 適したタスク：地域別の総売上と、その内訳（ベーシック版、プロ版、エンタープライズ版）の構成比分解。
• 使い方：垂直の柱を密度の異なる2〜3段階の微小テクスチャに明確に分割し、セグメント間を極めてわずかな余白または破線で区切る。
• 使ってはいけないケース：階層が深すぎて（4層超の積み上げ）、中間層の起伏の基準線が完全にドリフトして歪んでしまう場合。

F8 Plumb Scatter（下げ振り散布図）

• データ形状：2次元連続指標の交差（X軸指標 vs Y軸指標）で、サンプル数が20個以内。
• 適したタスク：プロダクトの客単価とNPS（ネットプロモータースコア）の関係性分析、機能の利用頻度と技術的保守コストの対比。
• 使い方：散布点が2次元直交座標系に浮遊し、各散布点からX軸に向かって真っ直ぐな軽やかな下げ振りのヘアラインを垂らし、読者が基準投影を素早く読み取れるようにする。
• 使ってはいけないケース：サンプル数が数百〜数千に達する場合（この場合、下げ振り線がキャンバス全体を覆ってしまうため、G15に変更すべき）。

F9 Rung Waterfall（ステップウォーターフォール図）

• データ形状：初期総量から複数段階の連続的な増減調整を経て最終的な純決済値を導出するプロセスで、段階が6段階以内。
• 適したタスク：売上総利益から純利益に至るコスト控除プロセスの振り返り、総訪問数から最終注文に至るユーザーのファネル離脱監査。
• 使い方：バーが左から右へ階段状に浮かび上がり、増加項目と減少項目で密度の異なる線の影を用い、段階間を水平の薄い破線で連結する。
• 使ってはいけないケース：推移・派生関係が全くない通常の離散カテゴリ。

F10 Dot Heat（ドットマトリクスミニヒートマップ）

• データ形状：曜日 × 時間の周期的な2つの時間次元で、各交差時間帯の頻度値が付随するもの。
• 適したタスク：テクニカルサポートチームの週報における問い合わせ入電規則の提示、コミュニティ運営担当者による投稿エンゲージメントのピーク時間帯の特定。
• 使い方：横方向に実際の時間単位で展開し、縦方向に月曜から日曜までを広げ、各交差点のドットのサイズや明暗で数量をマッピングする。
• 使ってはいけないケース：数年間にわたる長期のマクロトレンド分析（長周期にはL17を使用する）。

F11 Tick Gauge（目盛り付きゲージ図）

• データ形状：単一のコアKPI（重要業績評価指標）の進捗率（0%〜100%）。
• 適したタスク：四半期売上目標の達成率、メジャーバージョン開発納品のカウントダウン、システムリソースの警戒ライン表示。
• 使い方：半円または蹄鉄型の極細ヘアライン目盛り軌道を描き、針またはハイライト目盛りを現在のパーセンテージに正確に合わせ、中央に大きな太字数値を表示する。
• 使ってはいけないケース：複数のカテゴリやトレンド系列を含むデータセット。

F12 Dumbbell Queue（ダンベル対比列）

• データ形状：少数のカテゴリ（6種以内）における2つの特定時点（通常はBefore vs After、改修前 vs 改修後）の数値変化の幅。
• 適したタスク：オンボーディング体験改修前後の平均所要時間の短縮比較、戦略調整前後の各チャネルのコンバージョン率のジャンプ。
• 使い方：行ごとに基準ガイドラインを引き、レールの両端に微小な塗りつぶしビーズを通し、間を線で結んでダンベルを形成し、伸縮の距離を明瞭に示す。
• 使ってはいけないケース：2時点を超える長サイクルの連続的な推移プロセス。

F13 Nested Treemap（入れ子型ツリーマップ）

• データ形状：2階層のツリー構造に明確な正の重み付け配分があり、矩形の面積が数値と厳密に正比例するもの。
• 適したタスク：四半期の開発工数の技術モジュール別配分比率、全社の年間ITインフラにおけるハードウェア支出分布。
• 使い方：最外層で大きなブロックを区切り、内部をサブモジュールに細分化する。境界線はヘアラインで統一し、コンパクトで利用効率の高い矩形で画面を満たす。
• 使ってはいけないケース：負の値やゼロ値が存在する場合、または階層が4層以上に及び局所が見通せない場合。

F14 Rung Histogram（ステップヒストグラム）

• データ形状：単一変数の連続値の離散ビニング度数分布で、各区間が明確なビジネス上の意味を持つもの。
• 適したタスク：顧客からの問い合わせの大半が何時間以内に解決されているかの分析（例：0–2h、2–4h、4–8h、8h+に分割）。
• 使い方：予備チャートに属する。各柱が隙間なく密着して並び、柱の内部に等間隔の目盛り階段を敷き詰めて、サンプルの集中度を直接反映させる。
• 使ってはいけないケース：カテゴリが順序を持たない独立した名詞である場合（その場合はヒストグラムではなく棒グラフを使用すべき）。

F15 Tick Box（目盛り付き箱ひげ図）

• データ形状：複数グループの連続分布における「5数要約」（最小値、第1四分位数、中央値、第3四分位数、最大値）および外れ値。
• 適したタスク：科学実験の比較、異なるサーバークラスタのAPIレスポンス所要時間分布の精査、役職ごとの給与分布の分析。
• 使い方：主力ライブラリに対応する代替がない直接呼び出しチャート。極限まで削ぎ落とした細線で箱、中央値の横線、ヒゲの極値を描き、外れ値サンプルはヘアラインの白抜きドットとして外側に浮かべる。
• 使ってはいけないケース：要約された単一の平均値しか得られておらず、背後にある四分位数や外れ値データが欠けている場合。

F16 Stream Ribbon（ストリームリボン図）

• データ形状：2〜5個のカテゴリ系列が連続的な時間経過とともに推移するボリューム変化で、全体の体積変化と各シェアの増減を同時に観察する必要があるもの。
• 適したタスク：自社の3大主力製品の過去1年間における総売上ストリーム内のシェアの変遷。
• 使い方：主力ライブラリに対応する代替がない直接呼び出しチャート。波打つリボンが時間軸上で川のようにうねり、各支流の内部に密度の異なる微細な彫刻線を敷き詰めて区別する。
• 使ってはいけないケース：カテゴリが6個を超えてリボンが何層にも絡み合う場合、またはデータが時間軸上で連続しておらず不連続な断点である場合。

F17 Candlestick（ヘアラインローソク足チャート）

• データ形状：始値（Open）、高値（High）、安値（Low）、終値（Close）の4値を持つ金融時系列。
• 適したタスク：暗号資産の相場価格の振り返り、コモディティの週次価格変動の追跡、市場取引の振り返り。
• 使い方：主力ライブラリに対応する代替がない直接呼び出しチャート。白抜きの矩形が上昇、塗りつぶしの矩形が下落を表し、上下両端からヘアラインのようなヒゲ（影線）が伸びる。
• 使ってはいけないケース：通常の単一測定値の時系列（通常の折れ線で十分であり、無理にローソク足を適用してはならない）。

Glance系・20種（太いストローク・強い集計・素早い斜め読み向け）

ヘアラインとハンドクラフト感を強調するLupiのアプローチとは対照的に、Glanceシリーズは高効率でテンポの速い閲覧のために設計されています。ストロークはより力強く、背後で複雑なデータの集約と抽出をあらかじめ完了させておくことで、多忙な経営陣やモバイル端末の読者が3〜10秒以内に中核となる結論を把握できるようにします。役員向け週報、監視ダッシュボード、プレゼンテーションスライド、ショート動画の挿入図などに最適です。

そのうち G9、G12、G16、G17、G18 は、モーションを直接活用して形状の切り替え、順次登場、ランキングの変動、リアルタイムデータストリーム、累積成長を表現します。以下では、リポジトリのオリジナルテンプレートの実際のモーションを再生し、静止画カタログと照らし合わせて具体的な図型を選択できます。

G3 Chunky Bars（チャンキー棒グラフ）

• データ形状：少数のカテゴリの横方向または縦方向の順位比較（6個以内）。
• 適したタスク：週報での主要料金プラン製品の総売上比較、流入チャネルの1位から5位までの競合状況。
• 使い方：幅広で視認性の極めて高い太いバーを採用し、両端にわずかな角丸加工を施し、バーの真上に太字の大きなフォントで数値を直接印字する。
• 使ってはいけないケース：カテゴリが8個を超える場合、または1つ1つの詳細な明細を突き合わせる必要がある粒度の細かい分析。

G4 Dot Waffle（ドットワッフル図）

• データ形状：合計が100%になる構成比率で、カテゴリ数は読者が素早く識別できる少数に抑える。
• 適したタスク：モバイルページや週報ダッシュボードにおいて、通常の円グラフの代替として登録コンバージョンユーザーの流入チャネル構成を直感的に示す。
• 使い方：整然とした100個の大きな塗りつぶし円で正方形のアレイを構成し、コントラストの高いカラーブロックで各カテゴリを一気に点灯させ、モダンなグラフィックデザインの質感を演出する。
• 使ってはいけないケース：カテゴリが5個を超えて色の識別コストが高くなりすぎる場合、またはトレンド変化を表示する必要がある場合。

G5 Pictorial Bar（絵文字ピクトリアルバーグラフ）

• データ形状：年ごとまたはカテゴリごとのシンプルなカウント統計で、1つの具体的なシンボルが一定の物理数量を表すもの。
• 適したタスク：社外向けブランド広報、CSR・チャリティプロジェクトの展示（「植樹1,000本ごとに木アイコン1つを表示」など）。
• 使い方：抽象的な幾何学バーの代わりに、繰り返し並べられた具体的なベクターアイコンを使用し、読者がアイコンの数を数えるだけで総数を換算できるようにする。
• 使ってはいけないケース：極めて厳格かつ小数点を含む財務対照表や専門的な学術論文。

G6 Circular Graph（ミニ円形関係図）

• データ形状：ノードが12個以内の極めて軽量なネットワーク関係図。
• 適したタスク：週報のサマリーにおいて、部門横断コラボレーションの主要な流れや、コア技術コンポーネント間の呼び出し依存関係を素早く示す。
• 使い方：ノードを小さな円形に配置し、ノード間にシンプルで滑らかな円弧を引き、誰が中心的なハブであるかを3秒で把握できるようにする。
• 使ってはいけないケース：複雑なネットワークトポロジー（ノードが15個を超える場合は、独立した大型図B1に切り替える）。

G7 Tree LR（左右展開階層ツリー図）

• データ形状：階層が2〜3層の明確な従属・分類関係で、具体的な重み面積の表示を必要としないもの。
• 適したタスク：プロダクトのバージョンアップ時に公開する機能アーキテクチャマップ、企業の主要部門の職能分類クイックビュー。
• 使い方：左から右へと段階的に枝分かれを展開し、分岐線はシャープかつシンプルに仕上げ、末端に具体的な機能カードラベルを配置する。
• 使ってはいけないケース：各モジュールの資金やコード容量のシェアを精細に測定する必要があるシーン（その場合はF13ツリーマップを選択する）。

G8 Rainfall Dual Area（降雨デュアル面グラフ）

• データ形状：明確な因果関係や対比関係を持つ2つの同期した時系列（投入コスト vs 産出リターンなど）。
• 適したタスク：グロースチームがあるマーケティングキャンペーンにおける「広告出稿費用」と「回収売上金額」の連動とシザーズ格差を振り返る。
• 使い方：上部の系列が雨水のように下に向かって垂れ下がり、下部の系列が底から上に向かって伸び、両者が中央で交差して視覚的な落差ゾーンを形成する。
• 使ってはいけないケース：業務ロジック上の関連性が全くない2つの孤立した折れ線を無理につなぎ合わせた場合。

G9 Scatter Morph（散布図モーフィングカルーセル）

• データ形状：同一のエンティティデータ群が同時に3つ以上の独立した観察次元を持つもの。
• 適したタスク：オンライン新製品発表会のプレゼンスライド、ショート動画のダイナミックデータショー。
• 使い方：モーションを活用して3つの異なる散布図の投影間で滑らかに変形させ、同一のユーザー群が異なる次元でどのようにクラスタリングを切り替えるかを視聴者に見せる。
• 使ってはいけないケース：紙媒体に印刷するか、静的なPDFとしてエクスポートする必要がある印刷レポート。

G10 Diverging Bar（正負ダイバージングバーグラフ）

• データ形状：0を中心対称軸とし、プラスとマイナスに二極化するカテゴリ別の増減データ。
• 適したタスク：各地域の売上前年比成長率（+40%成長の地域と-15%縮小の地域など）、ユーザー満足度の損益分岐比較。
• 使い方：垂直の中心軸を中央に立て、プラス成長の太いバーは右へ、マイナス減少の太いバーは左へ伸ばし、色で強いコントラストをつける。
• 使ってはいけないケース：すべての数値がプラスのみ、またはマイナスのみの場合（その場合は通常の棒グラフで十分）。

G11 Force Graph（ミニ力学モデル関係図）

• データ形状：1つの中核ハブと複数の周辺衛星ノードで構成されるネットワークで、総ノード数が15個以内。
• 適したタスク：プロダクト統合エコシステムマップ（プラットフォームと周辺の10数個の外部APIとの接続状況の提示など）。
• 使い方：マウスでのドラッグ操作に対応し、中心ノードの引力が周囲のボールを引き寄せて弾力的に揺れる、生き生きとした表現を提供する。
• 使ってはいけないケース：ノード数が20個を超えてボール同士が激しく重なり合う場合（大型図はB2を参照）。

G12 Stagger Wave（スタッガーウェーブ分布図）

• データ形状：30〜60本の密集した項目を含む多数カテゴリのマクロ分布。
• 適したタスク：ショート動画のオープニングモーション、カンファレンスのメインスクリーンで各海外市場の階段状の配置をオープニングで提示する。
• 使い方：数十本の細長いバーが左から右へ微小な時間差で順次立ち上がり、起伏に富んだダイナミックな波形を形成する。
• 使ってはいけないケース：読者が定規を当てて特定の項目の正確な数値を1本ずつ確認するような振り返り分析。

G13 Big Slice / Custom Pie（極座標スライスパイ図）

• データ形状：多次元複合エンコーディング（セクターの中心角が数量比率を表し、外側に伸びる半径の長さが利用強度を表す）。
• 適したタスク：ディープなプロダクト分析（どの機能を最も多くのユーザーが使っているかだけでなく、ユーザー数は少ないものの利用頻度が高くヘビーユースされている機能はどれかも一目で判別できる）。
• 使い方：円盤が幅や長さの異なる特殊なのこぎり状スライスに分割され、2重の情報が同一視野内で同時に伝達される。
• 使ってはいけないケース：読者層が複雑な可視化ルールを理解していない一般的な非専門家であり、誤解を生みやすい場合。

G14 Single Axis（単軸パンチングドット図）

• データ形状：曜日 × 時間で構成される2次元時間周期のパンチデータで、数値の大きさが付随するもの。
• 適したタスク：システム運用保守チームが、サービスアラートが何曜日の何時に多発しているかを素早く特定する。
• 使い方：月曜から日曜までがそれぞれ1本の水平なsingle axisを占め、各軸上に0〜23時に従ってドットを配置し、ドットの大きさで数量を表す。これにより日々のリズムを維持しつつ、大きなグリッドが過度なスペースを占有するのを防ぐ。
• 使ってはいけないケース：標準的なカレンダーグリッドを残してシフト表と直感的に照合する必要がある総務・労務統計。

G15 Jitter Strip（ジッターストリップ帯）

• データ形状：複数グループの連続分布データで、下層に数百件の具体的な元ログレコードを含むもの。
• 適したタスク：テクニカルサポートのチケット対応時間分布の調査。突発的な極大遅延の極端なケースが存在するかどうかを直接あぶり出す。
• 使い方：横軸が連続数値（チケット解決時間など）を表し、縦方向はグループ分けされたレーンとなる。ドットは各レーン付近でわずかに縦方向にジッター（揺らぎ）を起こして重なりを避け、各元レコードを保持する。
• 使ってはいけないケース：高度に集計された後のいくつかの孤立した平均値しかなく、元のサンプル点が存在しない場合。

G16 Bar Race（動的レーシングバーチャート）

• データ形状：複数の離散期間（12か月、5四半期など）にまたがる複数エンティティの順位変動。
• 適したタスク：ショート動画プラットフォームで注目を集めるデータ動画、全社総会で年間の各事業部の業績ランキングの逆転劇を振り返る。
• 使い方：棒グラフが時間の経過に伴って滑らかに上下の位置を入れ替えながら上昇し、首位争いを動的に演出する。
• 使ってはいけないケース：静的な紙面レイアウト、長文記事の挿入図（静止状態では動的なプロセスを再生できない）。

G17 Dynamic Stream（リアルタイム動的ストリーム図）

• データ形状：秒単位や分単位で絶え間なく流入する高頻度のリアルタイムスクロールデータ。
• 適したタスク：サーバー監視センタースクリーン、大型セールイベントのライブ配信時における同時アクセス数のトラフィック波形表示。
• 使い方：波状の曲面が右から左へ等速でスライド移動し、新たに流入した最新データが右端でリアルタイムに波紋を起こす。
• 使ってはいけないケース：データがすでに確定してアーカイブされている静的なオフライン歴史振り返りレポート。

G18 Draw-in + Counter（一筆書き描画＆ビッグナンバーカウンター）

• データ形状：単一のコア累積指標の時間的推移で、最終的な重要ビッグナンバーが1つ付随するもの。
• 適したタスク：年末の業績報告やプレゼンスライドのオープニングで、「上半期の全社総売上が10億元（100億円）を突破」といった印象的なマイルストーンを演出する。
• 使い方：大きな数値カウンターが徐々に最終値に達すると同時に、累積トレンドラインが左から右へと描画される。双方が同一のデータを使用し、大きな数字と曲線の最終値の同期と整合性を担保する。
• 使ってはいけないケース：複数のサブ事業の原因の詳細を深く掘り下げる必要がある専門的な技術検討。

G19 Violin（バイオリン図）

• データ形状：グループ別連続数値の確率密度輪郭の全貌に、中央値の線を組み合わせたもの。
• 適したタスク：予備プランとして使用。ダッシュボードにおいて、異なる料金プランのユーザーのチケット対応時間分布の厚みを素早く比較する。
• 使い方：外形はバイオリンのようであり、最も膨らんでいる部分がデータが最も集中していることを示し、中央には白の中央値実心ドットがマークされる。
• 使ってはいけないケース：各グループのサンプルが少なすぎて密度推定が不安定な場合、またはタスクとして5数要約と外れ値を直接読み取る必要がある場合（後者の場合はF15に変更する）。

G20 Matrix Heat / Glance（概要マトリクスヒートマップ）

• データ形状：2つの離散次元の交差 × 数値で、総セル数が60マス以内。
• 適したタスク：予備プランとして使用。事業週報において、異なるソフトウェアバージョンと異なるOS間の互換性障害率を素早く巡回チェックする。
• 使い方：ブロックの面積が大きく、色のコントラストが明瞭で、大きな正方形の中に数値が中央揃えで直接印字されているため、マウスオーバーなしで3秒で斜め読みが完了する。
• 使ってはいけないケース：セル数が100マスを超えるディープな学術分析（その場合は細線版のL16を使用する）。

G21 Rank Strip（静的ランキングストリップ図）

• データ形状：複数のビジネスエンティティがいくつかの離散評価時点（Q1〜Q4など）において推移する順位の変動。
• 適したタスク：予備プランとして使用。静的な印刷レイアウトにおいて異なる製品ラインの順位変動を振り返る。動的レーシングバー（G16）の最適な静的代替品。
• 使い方：左右に評価時点をそれぞれ列挙し、エンティティの線が中央で色とりどりのリボンのように交差してレーンチェンジし、逆転の瞬間を鮮明に再現する。
• 使ってはいけないケース：エンティティや時点が多すぎて交差した線が追跡困難な場合は無理に詰め込まず、重点エンティティを絞り込むか、図を分割するか、インタラクティブなG16に変更する。

G22 Aggregate Sankey（粗集約サンキーダイアグラム）

• データ形状：左側の少数の起点から右側の少数の終点へと集約・分流する総量の流れで、微細な経路の1本1本は強調しないもの。
• 適したタスク：予備プランとして使用。全チャネルのマーケティング投資が最終的にどのコンバージョンファネル段階へ流入したかをマクロに報告する。
• 使い方：カラーバンドの幅がトラフィック量と厳密に比例し、両端が滑らかに遷移し、主に支流の太さの配分を確認する。
• 使ってはいけないケース：読者が100本以上の具体的な微視的事業ラインの経路を1本ずつ追跡する必要がある場合（経路の追跡には大型図B3を使用する）。

地図・2種（オンラインGeoJSONが必要・明示的な要求がある場合のみ呼び出し）

データに「東京」「カリフォルニア」「ドイツ」といった地理的な固有名詞が含まれているからといって、必ずしも地図を描くべきとは限りません。多くの場合、棒グラフや横棒グラフを用いて各地域のデータを比較する方が、地図よりもはるかに明確です。地図の面積は視覚的な誤認を招きやすいためです（面積が広大な地域の売上が極めて小さい場合など）。

AIに対して「地域分布図を描いてほしい」と明示的に強調した場合にのみ、以下の2つの図型が呼び出されます。地図の基盤にはEChartsが採用されており、オンラインのGeoJSON地理境界データに依存しているため、インターネットに接続された環境で実行する必要があります。

M1 US Choropleth（米国州別コロプレス図）

• データ形状：米国の50州のコードまたはフルネームで、非負の絶対値または比率指標が対応するもの。
• 適したタスク：米国本土での越境ECにおける各州の売上高の集計、北米市場における各州の浸透率の報告。
• 使い方：米国全土を州境ごとに分割し、色の明暗や濃淡を指標の高低に直接連動させ、凡例の説明を添える。
• 使ってはいけないケース：上位5州のみを純粋に比較する場合（棒グラフの方が効率的）、または正確な経度緯度の配送地点をプロットする必要があるシーン。

M2 World Choropleth（世界国別コロプレス図）

• データ形状：世界各国の国コードで、非負の指標数値が対応するもの。
• 適したタスク：グローバル展開ビジネスの進出概要、海外ユーザー登録数の大陸別分布レポート。
• 使い方：世界地図の輪郭を展開し、各国の数値に基づいて自動で着色し、マウスオーバーで該当国の数値ポップアップを表示する。
• 使ってはいけないケース：国内のローカル市場の調査、または異なる多国間都市間の物流航空路線の動線を表示する必要があるシーン。

独立インタラクティブ大図・3種（1ページ全幅・高密度な関係性データ向け）

データの関係性が極めて複雑で（例：100近くの提携ノード、数百本の交差するフローなど）、通常の小さなカードや記事の段落内には到底収まらない場合、Lieflat Charts は1つの図で1ページを構成する3種類の独立した大型インタラクティブコンポーネントを提供します。これらはそれぞれ単独のHTMLファイルを占有し、極めて繊細なインタラクションフィードバックを備えています。

B1はホバーでノードの関係性にフォーカスし、B2はノードをドラッグして力学モデルネットワークの弾力的なリバウンドを観察でき、B3は単一の経路または経路の束全体に沿ってデータフローを追跡できます。以下ではまず3種類のインタラクション状態の実際のデモを再生し、その後に各大型図がどのようなデータを担うのに適しているかを解説します。

B1 Big Circular（円形コードダイアグラム大図 · templates/big-circular.html）

• データ形状：ノードが15個を超える高密度な関係性ネットワーク。リポジトリのリファレンステンプレートでは60個のノードを使用。
• 適したタスク：大学・研究機関間の学術論文引用関係、全社の数百におよぶマイクロサービスAPI間の網状の依存関係調査。
• 使い方：すべてのノードを超大型の円環の外周に沿って等間隔に配置し、内部はヘアライン状の半透明な弦の線で完全に満たされる。特定のノードにマウスを合わせると、関係のない線が一瞬でフェードアウトして直接関連するノードのみがハイライトされ、クリックで収束アニメーションを再再生できる。
• 使ってはいけないケース：ノードが15個未満の軽量な関係性表現（軽量なケースにはG6を使用する）。

B2 Big Force（銀河力学モデル関係図 · templates/big-force.html）

• データ形状：ノードごとに調査する必要がある大規模なトポロジー関係ネットワーク。リポジトリのリファレンステンプレートでは180個のノードを使用。
• 適したタスク：巨大オープンソースコミュニティの全コントリビューター銀河図、金融取引アンチマネーロンダリングの異常資金フロー追跡ダッシュボード。
• 使い方：物理エンジンが引力と斥力をシミュレートし、数百の球体が満天の星々のようにゆっくりと回転しながら広がる。読者はマウスで中心のボールを自由にドラッグでき、銀河全体がそれに伴って弾力的に引き伸ばされ元に戻る。ホバーによってサブクラスターにフォーカスして詳細を確認できる。
• 使ってはいけないケース：厳密なデータテーブルの突き合わせが求められる会議での精査、または静止画のスクリーンショットをSNSに投稿するだけのシーン。

B3 Big Threads（百条スレッドパストラッキング図 · templates/big-threads.html）

• データ形状：3段階の経路の中に100本以上の実際のフローが含まれ、経路ごとの調査が必要なもの。
• 適したタスク：複雑な複数ステップのプロダクトUIにおけるユーザーの微視的な行動フロー追跡、エンドツーエンドの全パイプラインにおけるビジネス離脱要因分析。
• 使い方：無数のヘアラインのような微小な色付きスレッドが左から右へと縦横に交差して行き交う。カーソルを単一のスレッドまたはスレッドの束全体に重ねると、下部のステータスバーが正確にロックされ、その経路の完全な処理実績数値を表示する。クリックでビューを永続的に固定できる。
• 使ってはいけないケース：「合計で何人訪れて、最終的に何人残ったか」といった大まかな粒度の結果を上長に報告するだけの場合（その場合はL13やG22で十分）。

レポートテンプレートクイックリファレンス（R01–R12・ページ全体のレイアウト構造）

タスクが単一のチャートを描くだけにとどまらず、そのまま外部に公開できる調査レポート、縦長画像、またはダッシュボード画面を1ページ丸ごと出力することである場合、以下の12組のテンプレートを利用できます。これらは事前に設計されたレイアウトコンテナであり、内部のチャート比率、タイポグラフィグリッド、カラー仕様が最適化済みです。単体チャートライブラリの総数にはカウントされません。

12組のページ全体スケルトンの実際のプレビュー。まず情報密度とレイアウトを確認し、その後に下部の表で用途と依存関係を比較してください。

実際の利用にあたっては、対象読者とシーンに応じて少なくとも3組の候補を比較検討することをお勧めします。特定のテンプレートを決定した後は、その完全なレイアウトスケルトンを維持し、2つのテンプレートを勝手に切り貼りして混在させないようにしてください。

データをAgentに渡す：そのまま改編して使える3つのプロンプト

執筆者、マーケター、プロダクトマネージャーのいずれであっても、基盤コードを研究する必要はありません。以下にまとめたプロンプトをコピーして、Lieflat Charts スキルを導入したAIに貼り付け、ブラケット（【 】）内の内容を自身の実際のデータに置き換えるだけで十分です。

Web長文記事向けの深掘り挿絵

「私は現在、【ユーザーの課金習慣の変化】に関する業界深掘り記事を執筆しています。以下が整理した調査データです：【ここにデータを貼り付け。例：プラン別の継続更新率、ユーザーの主な不満点の比率など】。 記事内に埋め込むのに適したデータチャートを3枚作成してください。 選定ルールを厳格に順守してください：まず Lupi Editorial および Lupi Basics グループの中から候補となる図型を優先的に検討・選定してください。両グループとも当該データ構造の表現に適さない場合にのみ、Glance の検討に移行してください。チャート全体の配色は Porcelain（青磁ブルー）系に強制的に統一してください。独立しており、ダブルクリックでそのままプレビュー可能なHTMLファイルとして出力してください。」

役員向け週報と監視ダッシュボード

「以下は当チームの今週のコア事業監視データです：【ここにデータを貼り付け。例：主要5機能のDAU前週比、4つの獲得チャネルのCACなど】。 経営陣が10秒以内に変化を理解できるようにする必要があります。Glance の仕様に沿ってチャートを生成してください。線は太く明瞭にし、重点を際立たせ、大きな数字による直感的な結論を添えてください。配色は一貫して Wire（エディトリアルモノクロベース＋ネオンオレンジ強調）を採用し、最大の異常値またはハイライトとなる重要データにのみオレンジ色を使用し、それ以外のデータは落ち着いたグレースケールを維持してください。」

年間振り返りと調査ワンペーパー

「クライアント向けに年次サービス総括レポートを作成する必要があります。以下が通年のデータ明細です：【全データを貼り付け】。 レポートモードを有効にし、R01–R12 の中から最も適した3つのテンプレートを比較して推薦理由を提示してください。確認後、選定されたレポートスケルトンを厳格に適用して完全なHTML単一ページを生成してください。レイアウト幅は標準幅に抑え、各モジュール間の余白の呼吸感と、読みやすくエレガントなタイポグラフィを確保してください。」

GitHub で Lieflat Charts を入手する

AIにこれらのHTMLチャートやページ全体のレポートを直接生成させたい場合は、Lieflat Charts GitHub リポジトリ にアクセスして、完全なテンプレート、インストール手順、最新のコードをご確認ください。インストール完了後は、データ、利用シーン、想定する閲覧スピードをAgentに伝え、本記事のチャート番号に基づいて選定と生成を行わせてください。