30 秒概要： このページは Taiwan.md の視覚化システムの「ライブサンプル」です——10種類の記事内視覚モジュールをそれぞれ一度ずつレンダリングし、すべて同一の実際の台湾居住データ（住宅価格所得比、国宅、社宅、国際比較）を使っています。これは編集ガイド graph.md のパートナーです。graph.md が「いつどれを使うか、どう作ればよいか、文法はどう書くか」を説明するのに対し、このページでは「実際にどのように見えるか」を直接見ることができます。 各モジュールはすべて純粋な HTML／SVG でレンダリングされるため、人、スクリーンリーダー、Google、AI クローラーがすべて同じデータにアクセスできます——これが私たちがインタラクティブなチャートではなく静的視覚化を選んだ理由です。
数字について書く記事を書くとき、最も避けたいのはデータを数字の羅列として書いてしまい、読者が3つ目のパーセンテージで頭が真っ白になってしまうことです。視覚化の役割は、「密集した数字の prose」を「一目で読める構造」に逆エントロピー化することです。
しかし Taiwan.md の視覚化には他にはない規律があります：私たちは「LLM にも読める」視覚化だけを行います。 D3 や Canvas で描かれたインタラクティブなチャートは華やかですが、GPTBot、PerplexityBot、ClaudeBot といった AI クローラーは JavaScript を実行しないため、それらのチャートは空白に見えます。一方、私たちがセマンティック HTML とインライン SVG で作った図は、データがソースコード内にあり、AI が6つの言語すべてで台湾の一人称データにアクセスし、引用できます。LLM に読める視覚化こそが、主権の視覚化です。
以下の10個のモジュールは、最もシンプルな「大きな1つの数字」から「複数系列の折れ線図」まで、順番に紹介します。文法の書き方とデザイン原則の完全版は graph.md にあり、ここでは「これは何か、いつ使うか」の一言だけを載せます。
データ大字 tw-figure
最もシンプルで最も力強いタイプです。劇的な数字を最大サイズにし、前後の対比で一つの転換を語ります。冒頭の「sledgehammer stat」として最適です。
データ組 tw-stat
一つの段落に3〜4個の並列する重要な数字がある場合、長い文章で書くのではなくカード形式に並べて、読者が一目で読み切れるようにします。
対比卡 tw-versus
二つの制度、二つの立場、または前後の二つの状態を項目ごとに対比します。左を暖色、右を寒色にし、中央に「vs」を置き、違いを一行ずつ読み下せます。
比例条 tw-bars
少数のカテゴリの数値比較やランキングに適しており、水平バーの長さは数値に応じて自動的にスケーリングされ、最大値がいっぱいに広がります。データモジュールの最後に 來源： の列を追加すると、自動的に下部の出典注釈になります。
資料來源：内政部不動産情報プラットフォーム、政大不動産研究センター
方格图 tw-waffle
部分と全体の比率構成を表し、100マスが100%を表します。円グラフより直感的で——実際にマスを数えることができます。「各カテゴリがどれくらいの割合か」で合計が約100になるデータに適しています。
資料來源：ウィーン市政府（Stadt Wien）住宅統計
政策轴 tw-timeline
制度や政策の重要な節目の流れを、ノード付きタイムラインで繋ぎます。これは「視覚補助」であり、本文の小見出しで編年体（「1975年…」をタイトルにする）を使うこととは別の話です。
引语卡 tw-quote
一言で全体の核心となる緊張を表せる場合、それを引用カードとして拡大表示します。引用符は自分で追加する必要はなく、モジュールが自動的に追加します。引用は逐語で、検証可能でなければなりません。
市価3000万元の住宅が、6000万〜7000万元の住宅になってしまう……貧者から富者への略奪であり、国家が金持ちの住宅改築に資金を出している
来源条 tw-source
一連の分析のデータソースを控えめなチップとしてまとめ、段落の横に配置します。信頼性はキュレーションの一部です——台湾のデジタルメディアは出典を忘れがちですが、これは私たちが違うことができる点です。
内政部不動産情報プラットフォーム、実価登録、政大不動産研究センター、立法院公報、香港房屋委員会
折线图 tw-line
4つ以上の時点のトレンドを、インライン SVG で折れ線として描画し、y 軸の上限と下限を明示して読者に範囲を見せます。最も重要なのは——自動的に隠しデータテーブルを生成し、スクリーンリーダーと AI クローラーがオリジナルデータを読めるようにすることです。図は人のためにあり、テーブルは機械のためにあり、両者は同じソースから生成されます。
| 年 | 全国 |
|---|---|
| 2014 | 8.41 |
| 2016 | 9.32 |
| 2018 | 8.57 |
| 2020 | 9.2 |
| 2022 | 9.61 |
| 2024 | 10.76 |
資料來源：政大不動産研究センター、内政部不動産情報プラットフォーム
热力图 tw-heatmap
地域×指標、または年×カテゴリのマトリクス比較です。各列は色の濃さに正規化され、数値が大きいほど暖色になります。それ自体が HTML テーブルであるため、AI が読み取り可能です——これが、私たちのシステムにおいてヒートマップが「カラフルな画像1枚」より優れている理由です。
| 県市 | 住宅価格所得比（倍） | 住宅ローン負担率（%） |
|---|---|---|
| 台北 | 16.60 | 63.9 |
| 新北 | 13.03 | 56.9 |
| 台中 | 11.11 | 48.0 |
| 桃園 | 9.0 | 40.0 |
資料來源：内政部不動産情報プラットフォーム
これらのモジュールの使い方
各モジュールは、記事の Markdown 内に ```tw-* ブロックを書き、| で区切ることで、ビルド時に自動的に上記のような表示に変換されます——作者は HTML や JavaScript を一切書く必要がありません。完全な文法、いつどれを使うか、色や座標軸をどう設定すれば誤解を招かないか、公開前の視覚化チェックリストのすべては graph.md にあります。
このシステムは、視覚的ナラティブメディア The Pudding の編集哲学——データより先に問いがあり、結論は明確で、注釈が主役——を参考にしていますが、Taiwan.md 独自の器官として成長しました：静的、多言語、AI 可読。デザインの完全な背景は 視覚化システム設計報告書 に書かれています。
これらのモジュールが実際の深い記事の中でどのように物語に組み込まれているかを見たい場合は、国宅と居住正義 をお読みください——本ページのデータの多くはその記事の研究に基づいています。
関連記事：
- 国宅と居住正義 —— これらの居住データの背景にある完全な物語：国宅がどのようにして安価な住宅から資産のエスカレーターへと変わったか、本ページの多くのモジュールのデータソースです
- 社会住宅と居住正義 —— 2016年以降の「賃貸専用」社宅路線
- 台湾の少子化危機 —— 住宅が買えないことと子供を産めないこと、世代的正義のもう一面
参考資料
画像出典
本記事では1枚のクリエイティブ・コモンズライセンス画像を使用しており、public/article-images/society/ にキャッシュされています：
- 台北市住宅のスカイライン（象山からの眺望） — 撮影：Heeheemalu, 2026, CC BY-SA 4.0（hero）