data-forms

data-forms

スタイルではなく、チャート形式のレパートリーです。Lenny's Newsletter のデータイラスト（2025-2026 年の調査号）から要点を抽出しました。これらのチャートが機能する理由は配色ではなく、形式の選択とエンコーディングの規律にあります。どちらも、どんなビジュアル言語にも応用できます。

ビジュアルレイヤーには、使用先にすでにあるものを活用してください。製品内の画面には製品のブランドトークン、パレットの構築とアクセシビリティには組み込みの dataviz スキル、個人サイトには独自のスタイルを使います。このスキルが決めるのは、データをどんな形で表すかです。色の上位にあるレイヤーです。

まずはこちら：選択ガイド

データの特徴	選ぶ形式	形式 #
1つの質問、順序のある回答が3～6個	順序付きコラム・ワッフル・入れ子の帯	1・6・7
1つの質問、複数選択の回答が多数	ランキング棒・感情価値棒	3・4
同じ指標、異なる2時点	ペアコラム・スロープ	2・9
同じ指標、3時点以上	時系列エリア・バンプ	13・18
7～10個の順序付きバケットにわたる1つの指標	階段状コラム	14
順序のない多数のセグメントにわたる1つの指標	スモールマルチプル・ドットプロット	8・17
符号付きスコア（-100…+100、純値、差分）	発散棒	5
多数の行にわたる2グループの比較	ダンベル	16
複数の設問に対する同意度／リッカート尺度	中央揃えの積み上げ行	19
複数の指標にわたるセグメント	ピルマトリックス	10
自由記述の回答	ワードクラウド・テーマ別棒	11・3
数値では伝えきれない関係性	メタファー図・2列フロー	12・20
クラスタリングによる名称付きのセグメンテーション	ペルソナカード	15
2つの次元、ラベル付きの点が少数	名称付き象限散布図	21

モックアップと失敗例を含む全形式のカタログ：references/forms.md。

形式よりも重要な6つの判断

1. 形式を選ぶ前に、要点を書きます。 「このチャートの要点は＿＿＿です。」という文を完成させます。完成できないなら、それはチャートではなく表であり、どの形式を選んでも解決しません。その文を見出しにします。見出しには、次の2つの正当な形式があります。

• 主張。比較や分析向けです。「燃え尽き症候群が急増し、楽観的な見方が薄れています」
• 質問文をそのまま使う。チャートが回答の分布を示す場合です。「レイオフをどの程度心配していますか？」

項目名だけを見出しにしてはいけません。「企業規模別の燃え尽き症候群」は、スプレッドシートのタブ名です。

2. すべての値を表示します。 読者が軸を見て値を推定する必要があってはいけません。数値は対応するマークの隣に置きます。これが、#3を行う理由になります。

3. 軸を削除します。 ベースラインだけを残し、Y軸、グリッド線、目盛りはなくします。例外は時系列とスロープチャートです。ここでは形状がメッセージであり、参照用のグリッドが必要です。それ以外では、軸は削除し忘れた補助要素です。

4. 直接ラベルを付けられるなら、凡例は使いません。 カテゴリ名はマークの上か横に置きます。1つのキーを複数のパネル（スモールマルチプル）で共有する場合や、位置とは別の次元（感情価値、グループ所属）を表す場合に限り、凡例が正当化されます。

5. 2つを強調し、残りは目立たなくします。 9カテゴリの比較では、見出しに挙げた1つか2つだけを強調し、それ以外は控えめにします。チャートは見出しを論拠づけるものであり、表を提示するものではありません。強調した対象が実際には外れ値でないなら、そのチャートは見出しの誤りを示したことになります。データではなく、見出しを変えてください。

6. 注意事項をチャート内に示します。 サンプル数が少ないこと、誤差範囲、無回答、「複数選択のため合計が100％を超える」といった事項は、脚注ではなくチャート内に記載します。有意でない棒に破線の輪郭を付け、「誤差範囲内の差」と記した括弧を添えるほうが、きれいなチャートに誰も読まない免責文を付けるよりも信頼できます。

そして、もう1つの節度です。注釈は最大1つまで。 読者が見落としそうな点を示します。注釈がなくてもかまいません。2つあればごちゃつきます。

エンコーディングの基本ルール

• 色には意味を持たせ、意味がなければ使いません。 ラベルですでに区別できる棒に色を付けないでください。彩度は見出しの主題に使います。
• シーケンシャルなランプ＝大きさまたは順位。ダイバージングなランプ＝正負。カテゴリカル＝識別。 これらを混在させることが、グラフが誤解を招く最も一般的な原因です。
• マトリックスでは列ごとにスケールを設定します。 フォーム 10 では、指標ごとに独自のランプと方向を設定します。そうしないと、「濃い＝高い」と「濃い＝悪い」が競合します。
• 中立は塗りつぶしのない輪郭で表します。グレーではありません。 グレーはデータ欠損と受け取られます。
• 軸がない場合は、冗長なエンコーディングでも問題ありません。 ワードクラウドなら、頻度をサイズと色の両方で表せます。無駄になる情報はありません。
• 順序にも意味があります。 カテゴリに固有の順序（時間、区分、リッカート尺度）がある場合を除き、値で並べ替えます。スモールマルチプルのすべてのパネルで、同じ順序を保ちます。
• 棒は必ずゼロから始めます。 指標にとってゼロが意味を持たないなら、棒グラフではなくドットプロット（フォーム 17）を選びます。
• 擬人化するのは、対象が人間の場合に限ります。 人を表すワッフルグリッド、絵文字のアンカー、ペルソナのイラストは、感情や人数を示す場合には効果的ですが、レイテンシや収益に使うと安っぽく見えます。

ワークフロー

1. 要点を一文で述べます。
2. データの性質（分布／ランキング／比較／傾向／相関／構成／定性的）を分類し、選択表から形式を選びます。
3. references/forms.md で該当する形式の項目を確認します。特に、その形式がうまく機能しなくなる条件を確認してください。データがその条件に当てはまる場合は、そこに記載された代替案を選びます。
4. 6 つの判断事項とエンコーディングのルールを適用します。
5. 出力先で使用されている方法で作成します。
6. レンダリングして画像を確認します。 DOM でも仕様書でもなく、ピクセルを確認します。チェックリストを実行し、問題を修正して再レンダリングします。

公開前チェックリスト

レンダリングされた画像を確認し、各項目に回答します。「いいえ」は記録するだけではなく、修正が必要です。

• 見出しがフィールド名ではなく、発見したことを述べている、または文字どおりの質問をしている
• すべてのマークが値を示しており、50％のズームでも読み取れる
• 直接ラベルで置き換えられる凡例がない
• 強調が見出しの主題に向けられており、ほかの要素は目立たなくなっている
• 最も長いラベルがマークと重ならず、その下に折り返されず、はみ出していない
• 棒がゼロから始まっており、スケールが途中で切られていない
• 注釈が 1 つ以下
• 目を細めて確認するテスト：25％のズームでも答えの形が読み取れる
• 注記（n、誤差の範囲、複数選択）がフレーム内に表示されている
• references/forms.md に記載された、その形式固有の機能しなくなる条件に当てはまらない

リファレンス

references/forms.md — ASCII のモックアップ、使用する場面、機能しなくなる条件を記載した 21 種類の形式