タイポグラフィック・積み重ね棒グラフ（Typographic Stacked Bar Chart）は、積み重ね棒グラフの各セグメント内に配置されたラベルテキストに、フォントウェイト・サイズ・大文字小文字・斜体などのタイポグラフィ属性を付与し、位置と面積だけでは表現しきれない追加のデータ次元をエンコードする可視化手法です。Richard Brathの著書『Visualizing with Text』（2020年、CRC Press / AK Peters）に基づくタイポグラフィック可視化の一形態であり、テキストを単なる注釈ではなく、データの視覚的な担い手として活用します。

歴史的経緯

積み重ね棒グラフ（Stacked Bar Chart）は、William Playfairが18世紀後半に棒グラフを発明して以降、構成比率を表現するための基本的な手法として広く利用されてきました。各棒の中にセグメントを積み重ねることで、全体の値と内部構成の両方を一つの棒で表現できる点が特徴です。

タイポグラフィを用いたデータの視覚エンコーディングという概念は、Richard Brathの研究によって体系化されました。Brathは2020年の著書『Visualizing with Text』において、テキストが持つ視覚的属性（フォントサイズ、ウェイト、色、斜体、大文字小文字、下線など）が、数量的・カテゴリカルなデータを効果的にエンコードできることを実証しました。

タイポグラフィック・積み重ね棒グラフは、この考え方を積み重ね棒グラフに適用したものです。通常の積み重ね棒グラフでは、セグメントの位置と長さ（面積）、そして色がデータエンコーディングの主な手段ですが、タイポグラフィ属性を加えることで、各セグメントに関連する追加のデータ変数を直接セル内で表現できるようになります。

データ構造

タイポグラフィック・積み重ね棒グラフには、通常の積み重ね棒グラフのデータに加え、テキスト属性にマッピングする追加データ列が必要です。

この例では、横軸に「年度」、各棒のセグメントの長さに「売上」を使用します。各セグメントに表示される「部門名」のテキストに対し、以下のようにタイポグラフィ属性がマッピングされます。

目的

タイポグラフィック・積み重ね棒グラフの主な目的は以下のとおりです。

• 追加次元のインライン表示：積み重ね棒グラフが本来表現する「全体量」と「構成比率」に加え、テキスト属性で利益率や成長率などの追加データを、各セグメントの内部に直接表現します。読み手は視線を別のチャートに移すことなく、複合的な情報を得ることができます。
• セグメントの相対的な重要度の強調：フォントサイズやウェイトの差異により、特定のセグメントが視覚的に目立つため、注目すべきセグメント（例：高成長・高利益）を自然に強調できます。
• テキストラベルの有効活用：積み重ね棒グラフではセグメント内にラベルが配置されることが多いですが、通常はそのテキストの視覚属性が活用されていません。この手法は、すでに存在するテキスト要素にデータを重畳することで、追加のスペースを消費せずに情報密度を高めます。

ユースケース

• 事業部門別業績の俯瞰：各年度の売上構成（棒の長さ）を部門別に積み重ねて表示し、部門名のフォントウェイトで利益率を、フォントサイズで成長率を同時に表現します。経営者は一つのチャートで売上構成・利益性・成長性を一望できます。
• 予算配分と執行率の分析：部門ごとの予算配分（セグメント長さ）を示しつつ、各部門名のテキスト色で予算執行率の高低を、斜体で未承認予算のフラグを示します。
• プロジェクトポートフォリオ管理：プロジェクトフェーズごとの工数配分（セグメント長さ）を表示し、各プロジェクト名のフォントウェイトで進捗率を、色でリスクレベルを表現します。
• 製品カテゴリ別の売上と顧客満足度：製品カテゴリごとの売上構成を積み重ね棒グラフで示し、各カテゴリ名のフォントサイズで顧客満足度スコアを表現します。

特徴

• 既存のテキスト空間を活用する：積み重ね棒グラフのセグメントラベルとして既に存在するテキストにデータをエンコードするため、追加のチャート要素やスペースが不要です。
• 段階的な読み取りが可能：まず通常の積み重ね棒グラフとして全体構造を把握し、次にテキスト属性に注目することで追加次元の情報を読み取るという、段階的な情報取得が可能です。
• テキストの事前注意的処理：フォントサイズやウェイトの大きな差異は、読み手の事前注意的処理（pre-attentive processing）によって瞬時に知覚されるため、太い文字や大きい文字が目に飛び込んでくる効果があります。
• セグメントサイズによる制約：小さいセグメントでは十分なテキストスペースが確保できず、タイポグラフィ属性の表現が困難になることがあります。
• 学習コスト：タイポグラフィ属性とデータの対応関係を理解するための学習コストが発生します。

チャートの見方

タイポグラフィック・積み重ね棒グラフを読み取る際には、二段階のアプローチが有効です。

第一段階：積み重ね棒グラフとしての読み取り

まず、通常の積み重ね棒グラフと同様に、各棒の全体の長さから総量を把握します。次に、各セグメントの長さの割合から構成比率を確認します。色分けにより、セグメントの種類を識別します。

第二段階：タイポグラフィ属性の読み取り

次に、セグメント内のテキストの視覚的な差異に注目します。

チャート内で特に太く大きいテキストが集中している箇所は、成長性と利益性の両方が高いセグメントであり、戦略的に重要な領域を示唆します。

デザイン上の注意点

• セグメントの最小サイズを確保する：テキストが判読可能なサイズで表示されるためには、セグメントに一定の面積が必要です。セグメントが小さすぎる場合は、テキストを省略するか、ツールチップでの表示に切り替えることを検討します。
• タイポグラフィ属性の優先順位をつける：すべてのタイポグラフィ属性を同時に使用するのではなく、最も重要なデータ変数に対して最も知覚しやすい属性（フォントウェイト、フォントサイズ）を割り当てます。
• 大文字小文字の使用は慎重に：ALL CAPSは視覚的に目立ちますが、長いテキストでは可読性が低下します。短いラベル（1〜2語）に限定して使用します。
• 色とウェイトの組み合わせに注意する：テキスト色が薄い場合にフォントウェイトが細いと、視認性が大幅に低下します。色とウェイトの組み合わせが常に読み取り可能であることを確認します。
• 凡例の配置：タイポグラフィ属性のマッピングルールを示す凡例は、チャートの近くに明確に配置します。属性の数が多い場合は、チャートの上部や下部にインラインで説明を加える方法も効果的です。
• 背景色とのコントラスト：セグメントの色とテキスト色のコントラスト比を十分に確保します。WCAG 2.1のコントラスト比基準（4.5:1以上）を目安にします。

応用例

• タイポグラフィック・グループ化棒グラフ：グループ化棒グラフ（Grouped Bar Chart）の各棒のラベルにタイポグラフィ属性を適用し、棒の位置と長さに加えてテキスト属性で追加次元を表現する形式です。
• タイポグラフィック・百分率積み重ね棒グラフ：すべての棒を100%に正規化した積み重ね棒グラフにタイポグラフィ属性を適用し、構成比率の比較とテキストによる追加情報を組み合わせた形式です。
• 時系列タイポグラフィック・積み重ね棒グラフ：横軸を時間にとり、時系列の変化を追いながら、各時点のセグメントラベルのタイポグラフィ属性の変化も同時に追跡できる形式です。テキストの太さや大きさの時系列変化が、追加データの傾向を示します。

代替例

まとめ

タイポグラフィック・積み重ね棒グラフは、積み重ね棒グラフの各セグメントラベルにタイポグラフィ属性を付与することで、位置と面積による従来のデータエンコーディングに加えて、テキストの視覚属性による追加次元を重ね合わせる可視化手法です。

Richard Brathが『Visualizing with Text』で提唱したように、テキストは従来の可視化において十分に活用されていなかった視覚的チャネルです。フォントウェイト・サイズ・大文字小文字・斜体・色といったタイポグラフィ属性は、人間の知覚システムによって事前注意的に処理されるため、データのエンコーディング手段として有効に機能します。

ただし、テキストの可読性を維持しつつデータをエンコードするためには、属性数の制限、セグメントサイズの確保、明確な凡例の配置など、注意深いデザインが求められます。適切に設計された場合、この手法は限られたスペースで多次元のデータを効果的に伝達する強力な手段となります。

参考・出典

1

- [Visualizing with Text Book Companion Web Site - Richard Brath](https://richardbrath.wordpress.com/books-and-chapters-by-richard-brath/visualizing-with-text-book-companion-web-site/)