モランディ配色オンラインストリームグラフ生成ツール - 青〜ピンクの河川グラフ

モランディ配色のストリームグラフとは？

モランディ配色のストリームグラフ（ThemeRiver とも呼ばれる）は、積み上げ面グラフの一種です。複数の系列が色とりどりの「川」のように、固定されたゼロラインから積み上がるのではなく、中央で揺れ動くベースラインを挟んで上下対称に広がります。各川の幅はその時点での系列の値を表します。本ツールは低彩度のモランディカラーを採用——ベースラインの下にディープネイビー・スチールブルー・グレイブルー・ライトブルーグレーの青系4色、上にグレイッシュパープル・ダスティピンク・ミドルピンク・ディープローズのピンク系4色を配置し、層と層の間を白い細線で区切り、上部には各色に合わせた文字色のスクエア凡例を表示します。柔らかく上品な学術ポスターのような仕上がりで、論文・レポート・プレゼンに最適です。

機能特徴

• テンプレート駆動で即座に反映：可視化の知識は不要。CSV テンプレートをダウンロードし、データを入力してアップロードするだけでグラフが完成
• ワイドテーブル形式：先頭列が X 軸カテゴリ（年・月・段階など）、以降の列が各系列。2〜16系列・3〜40行に対応
• モランディ青〜ピンク配色：先頭8系列は参考ポスターのディープネイビー→ディープローズの8色シーケンス、それ以降は同系統の拡張色を自動適用
• 揺れるベースライン：系列は総厚さの半分の中央線を挟んで上下対称に配置——青系は下に、ピンク系は上に
• なめらかな曲線：各レイヤーは Catmull-Rom スプライン補間でサンプリングされ、角のない自然な曲線に
• 白い層間ライン：隣接する流れの間を背景色の細線で区切る、クラシックな ThemeRiver スタイル
• 上部カラー凡例：グラフ上部にスクエアアイコンを横並びで表示し、凡例テキストも系列色に同色化
• ライト / ダークモード：ワンクリックで背景スタイルを切替。ダークモードでは配色全体を明るく調整
• 複数形式で出力：高解像度 PNG（2倍ピクセル比）とベクター SVG の両方に対応
• ローカル処理で安心：すべてのデータはブラウザ内で解析・描画され、サーバーにアップロードされません

活用シーン

• 学術論文・研究ポスター：低コントラストのモランディ配色はジャーナルやポスターの美観にマッチ
• 小売・EC：カテゴリ別売上の時系列変化と構成比の移り変わりを把握
• マーケティング・運用：チャネル別トラフィックやユーザーセグメントの規模変化を分析
• 音楽・メディア：ジャンル別・アーティスト別の再生数推移を表す定番の表現
• レポート・プレゼン：PPT や年次報告書にプロフェッショナルな時系列構成図を追加

各時点の細かな値の差を正確に比較したい場合はグループ棒グラフが適しています。ストリームグラフは「構造の変化」の全体感を伝えるのに最適です。

使い方

1. 「CSV テンプレートをダウンロード」をクリックしてサンプルファイルを取得
2. テンプレートに沿ってデータを入力：先頭列は X 軸カテゴリ、以降は系列ごとに1列
3. アップロードエリアをクリック、または CSV ファイルをページにドラッグ
4. モランディ配色のストリームグラフが自動生成されます。ライト / ダークモードでプレビュー可能
5. 「PNG を保存」または「SVG を保存」をクリックして画像を保存

データ形式

フィールド	必須	説明
x	はい	先頭列のヘッダー。X 軸カテゴリ名（年・月・段階など）
系列列	はい	系列ごとに1列。ヘッダーは系列名、値は非負の数値

制限：2〜16系列、3〜40行。値は非負の数値（0 可）。先頭8系列はモランディの青〜ピンク8色を順番に使用し、超過分は同系統の拡張色を循環します。

このグラフの読み方

低彩度でも読み方は同じ：全体の高さが合計、層の幅がシェアです。隣り合うモランディ層はコントラストが低いので、層間の白い細い隙間と上部凡例で境界を確認しましょう。まず「どの系列が変化を牽引しているか」を確かめ、相対的な幅の変化で構造の移行を追うのがコツです。

Gotokit について

Gotokit は、シンプルで効率的、そして美しいオンラインツールの提供に努めています。このモランディ配色ストリームグラフ生成ツールは ECharts レンダリングエンジンを採用し、登録不要ですぐに使え、データは完全にローカルで処理されるためプライバシーも安心です。