チャートブロック：正直な軸を持つアクセシブルなグラフ

チャートブロックは、グラフとその要点、タイトル、ラベル、ソース、期間、およびアクセシブルなデータ代替手段を組み合わせた、範囲を限定したデータ表示です。データの形状が正確な値の羅列よりも速く質問に答える場合に使用します。

この要素が重要な理由

チャートは視覚的なパターン認識を活用します。読者は、同じ値をセルごとに比較する前に、上昇、ギャップ、クラスター、または傾きの変化を検出できます。これは、正確な参照ではなくパターンが重要な場合に役立ちます。しかし、危険でもあります。切り取られた軸、不均等な間隔、または面積効果によって、小さな差が決定的に見えることがあります。チャートは、証拠を変えずに労力を削減する場合にのみ、その役割を果たします。

読者の心理から、文章による要点の記述が不可欠です。人々は脚注よりも方向性や相対的な大きさを容易に記憶する可能性があります。結論をテキストで範囲を限定して記述し、必要に応じて母集団と期間を含めます。相関関係から因果関係を、または選択された区間から一般的な傾向を決して主張しないでください。

機械による抽出可能性には、系列名、ラベル、値、単位、ソース、期間、結論がテキストとして必要です。クローラーやAI回答エンジンは、SVGパス、キャンバス、スクリーンショット、ホバー状態、または色の凡例を解釈できない場合があります。したがって、このブロックはビジュアルと順序付けられたデータを組み合わせて、支援技術、インデックス作成、検証、再利用を可能にします。

要素作成ルール が優先されます：文章の目的が定量的なパターンを明らかにすることであって、グラフがページを装飾するためではない場合に、この要素を選択します。タスクが正確な参照や項目ごとの比較である場合は、チャート作成ソフトウェアが利用可能であっても表を使用します。

使用すべきタイミング

読者が次の4つの形状のいずれかを確認する必要がある場合にチャートを使用します：順序付けられた系列にわたる変化、管理可能なカテゴリセット間の差異、観測値の分布、または2つの量的変数間の関係。折れ線グラフは時間経過に伴う方向性を明らかにでき、棒グラフはカテゴリをランク付けでき、ヒストグラムは分布を明らかにでき、散布図は関連性と外れ値を明らかにできます。データセットは十分に完全で、一貫して測定され、主張に関連している必要があります。

チャートと表を区別する簡単なテストがあります：読者が最初にパターンに気づくべきであればチャートを選択し、正確な値を見つけるべきであれば表を選択します。両方が重要な場合は、チャートブロック内にコンパクトな表を含めて、2つの出力が乖離しないようにします。

よくある失敗例は次のとおりです：

• 2つの値のみ： 文章または小さな比較で記述します。2本の棒では、パターンを直接的に明らかにすることはほとんどありません。
• 長いカテゴリリスト： グループ化された表を使用します。30本の棒では、ラベルとモバイルレイアウトの問題が発生します。
• 少数の主要指標： 数値が1つの系列ではなく独立したハイライトである場合は、統計バンドを使用します。
• プロセスまたは時系列： マークが数量をエンコードしない場合は、タイムラインを使用します。
• 関連性からの因果関係の主張： 散布図は2つの変数が一緒に動くことを示せても、一方が他方を引き起こしたことを立証できません。
• 装飾的な「データストーリー」： チャートを削除しても結論が失われない場合は、削除します。
• 長い質的基準との比較： 比較表 を使用します。サポートポリシーや実装の適合性などのカテゴリは、棒の長さとして正直にエンコードできません。

配置する場所

質問、母集団、測定基準、期間を紹介する段落の後にチャートを配置します。要点はその直前または直接後に配置し、その後、影響と制限事項を説明します。リサーチでは、各チャートはその知見の隣に属します。ケーススタディでは、変化を示す前にベースラインと介入を確立します。

タイトル、ビジュアル、凡例、要点、データ代替手段、ソース、メモは1つのfigure境界内に保持します。脚注はfigureの後に続いても構いませんが、広告、サインアップフォーム、または無関係な画像がそれを中断してはなりません。ソースはデータ代替手段を開かなくても表示される必要があります。

同程度に目立つ別のチャート、そのデータを繰り返す独立した表や統計バンド、価格表、カルーセル、または強調度の高いコールトゥアクションの隣に配置しないでください。これらの組み合わせは競合するか、複数の情報源を生み出します。データ表示は説明で区切ってください。

構成要素

ラベル付きスクリーンショットは、次の領域を識別する必要があります：

1. 要点： 画像なしでパターンを述べる一文。
2. Figureタイトル： 測定基準、母集団、期間の中立的な説明。
3. プロット： 位置、長さ、または方向が値をエンコードする領域。
4. 軸とスケール： 表示されるラベル、単位、目盛り、間隔、ベースライン。
5. 系列ラベル： 可能な場合は直接ラベル、そうでない場合は色だけに依存しない凡例。
6. 注釈： データポイントに関連付けられたオプションのメモ。方法論の代わりにはなりません。
7. データ代替手段： プロットされた値を含む表または順序付けられたテキスト。
8. キャプションとソース： 範囲、出典、報告期間、および計算に関する注意事項。

デザイン例

すべてのバリエーションは、二次元のマーク、表示された単位、要点、ソースデータ、およびアクセシブルな代替手段を使用します。3D、ピクトグラム、ゲージ、または二重軸のバリエーションはありません。装飾や競合するスケールが比較を歪めるためです。

折れ線グラフ： 一貫した順序間隔（通常は時間）で測定された値に使用します。欠測値は、架空の接続ではなくギャップとして表示する必要があります。4つを超える系列は、通常、チャートを分割するか表を選択する必要があります。

棒グラフ： 個別のカテゴリ間の比較またはランク付けに使用します。棒の長さが大きさを表すため、量的軸はゼロから開始します。ラベルが長い場合は水平棒を優先し、自然な順序に意味がある場合を除き、値で並べ替えます。

散布図： 2つの量的変数間の関係に使用します。個々の観測値を表示し、両方の測定基準を指定し、適合されたトレンドラインを開示し、研究デザインがそれを支持しない限り因果的な表現を避けます。

積み上げ棒グラフ： 少数のグループにわたって合計と構成の両方が重要な場合に使用します。セグメントの順序を安定させ、スタックを4カテゴリに制限します。主に各コンポーネントを比較する必要がある読者は、代わりにグループ化された棒グラフまたはスモールマルチプルを使用します。

パラメータ

以下の「ソース」とは、レンダラーがフィールドを取得する作成元の場所を指し、チャートが引用する証拠提供者ではありません。

show-data=false は、同等のデータテーブルまたは完全な値ごとのテキスト代替手段がすでにプログラムでfigureに関連付けられている場合にのみ許可されます。これは、ビジュアルのみのチャートを公開するライセンスではありません。

構文とコード例

3つの表記法すべてで、同じタイトル、要点、データセット、スケール、ソース、期間、代替テキストが保持されます。図は例示です。

ポータブルMarkdownディレクティブ

:::chart-block{type=bar y-label="Requests" y-min=0 source="Illustrative editorial dataset" period="2026 Q1–Q4" alt="Requests decrease in every quarter, from 120 in Q1 to 72 in Q4."}
## Illustrative support requests by quarter

Takeaway: Requests decline each quarter, from 120 in Q1 to 72 in Q4.

| Quarter | Requests |
|---|--:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

最初の見出しが title にマッピングされ、要点と正規データテーブルが本文フィールドにマッピングされます。

Hugoショートコード

Hugoアダプターは名前付きパラメーターを使用し、1つの本文データセットからビジュアルとテーブルを導出します。この表記法は意図されたマッピングを指定します。

{{< chart-block type="bar" yLabel="Requests" yMin="0" source="Illustrative editorial dataset" period="2026 Q1–Q4" alt="Requests decrease in every quarter, from 120 in Q1 to 72 in Q4." >}}
## Illustrative support requests by quarter

Takeaway: Requests decline each quarter, from 120 in Q1 to 72 in Q4.

| Quarter | Requests |
|---|--:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}

WordPressブロック

<!-- wp:amicited/chart-block {"type":"bar","title":"Illustrative support requests by quarter","yLabel":"Requests","yMin":0,"source":"Illustrative editorial dataset","period":"2026 Q1–Q4","alt":"Requests decrease in every quarter, from 120 in Q1 to 72 in Q4.","takeaway":"Requests decline each quarter, from 120 in Q1 to 72 in Q4."} -->
<table><thead><tr><th>Quarter</th><th>Requests</th></tr></thead><tbody><tr><th>Q1</th><td>120</td></tr><tr><th>Q2</th><td>108</td></tr><tr><th>Q3</th><td>84</td></tr><tr><th>Q4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

ブロックはSVGまたはキャンバスをレンダリングする場合がありますが、保存およびサーバーレンダリングされた出力は要点とテーブルを保持する必要があります。JavaScriptはインタラクションを強化することはできても、唯一のラベルや値を提供してはなりません。

例

良例：ビジュアルと文章が同じ範囲限定のストーリーを伝える

要点： 例示データセットでは、中央値解決時間は1月の18時間から4月の12時間に減少しています。チャートはその理由を立証していません。

折れ線グラフは、均等な月次間隔と10～20のラベル付き「時間」軸を使用しています。この開示された非ゼロの線形スケールは、棒の長さではなく位置が値をエンコードするため適切です。テーブルはすべてのポイントを公開し、テキストは減少を介入に帰していません。

不良例：グラフが緊急性を捏造する

「起動後に解決時間が激減」というタイトルの棒グラフが、11.5から始まる軸上に同じ18、17、14、12時間の値を示しています。棒はほぼ無に等しく見えます。1月は「前」、4月は「後」とラベル付けされ、中間の月はホバーの背後に隠れ、介入日もソースも表示されていません。赤から緑への色だけが唯一のパフォーマンスの意味を提供しています。

これは、棒にはゼロベースラインが必要であり、タイトルが因果関係を主張し、選択的なラベルが検証を妨げるため、失敗です。ホバー専用の値は、キーボード、タッチ、抽出、支援技術のコンテキストを排除します。ゼロベースラインまたは明確にスケーリングされた折れ線グラフ、すべての観測値、ソース、期間、データテーブル、および非因果的な要点で修正します。

スキーママークアップとアクセシビリティ

Schema.orgには一般的な Chart または Graph タイプはありません。チャートは、Article、Report、または Dataset など、該当するページレベルのエンティティ内の証拠のままです。リサーチでは、時間的カバレッジ、変数、作成者、配布などのプロパティを持つ実際のダウンロード可能なデータセットを説明する場合があります。チャートが存在するという理由だけで、データセット、評価、トレンド、または結果のプロパティを決して捏造しないでください。

アクセシビリティにはaltテキスト以上のものが必要です。figureにタイトルとキャプションを、SVGにアクセシブルな名前と説明を提供します。キャンバスには同等のDOM表現が必要です。プロットされた値を実際のヘッダーを持つテーブルで提供し、要点をグラフィックの外側に保持して、印刷、抽出、画像の失敗でも残るようにします。

色だけを系列識別子として使用しないでください。直接ラベル、線のパターン、点の形状、またはテキストを追加します。ツールチップはキーボードで到達可能で、閉じ可能で、補足的なものでなければなりません。200%のズームと狭い幅では、ラベル付きのチャート領域をページレベルのスクロールを作成せずにリフローまたはスクロール可能にします。

動きの軽減設定を尊重し、アニメーション描画や自動トランジションを避けます。フィルターがデータを変更する場合は、状態を通知し、アクティブなフィルターをテキストで表示します。実際のコントロールがない限り、静的チャートはキーボードターゲットではありません。

作成ルール

これらのルールは、チャートの視覚的な権威をその証拠に比例させます：

• 15～35語で1つの要点を記述します。方向性または関係性、関連するエンドポイント、母集団、および期間が曖昧さを防ぐ場合にそれらを指定します。
• 系列あたり2～20ポイント、最大4系列を使用します。より密集した作業は、スモールマルチプル、表、またはダウンロード可能なデータセットに分割します。
• タイトルは5～16語、ラベルは1～6語に抑えます。タイトルは説明し、要点は結論を述べます。
• 系列全体で同じ単位と測定定義を使用します。方法が変更された場合は、線を区切り、不連続性を説明します。
• 棒グラフと積み上げ棒グラフの量的軸はゼロから開始します。折れ線または散布図のスケールは、境界と単位が表示されたままで、その選択がノイズを誇張しない場合にのみ、より狭くすることができます。
• 等しい数値間隔または時間間隔には、等しい視覚的間隔を使用します。2月と12月を、間に他の期間がないのに隣接する月のように配置しないでください。
• 欠損値は欠損として表示します。ゼロに変換したり、黙って接続したり、表明された方法なしに補間したりしないでください。
• 予測、推定値、モデル化された値、季節調整値を直接ラベル付けします。観測データとしてスタイル設定しないでください。
• 二重軸、3D効果、遠近法、絵画的面積スケーリング、破断軸、虹色パレット、および測定されていない値を暗示する平滑化曲線を避けます。
• ソース、カバレッジ期間、該当する場合はサンプルまたはコホート、およびインデックス化、正規化、移動平均などの変換を明記します。
• コールトゥアクション、推薦文、プロモーションバッジ、支持されていない因果関係の主張、または重要な注意事項を画像内だけに決して配置しないでください。
• グラフとそのテーブルは1つの正規データセットから導出します。値が変更された場合は、一度更新して両方の出力を再生成します。

詳細な方法論と引用は、近くのソースブロック に続けることができますが、チャート自体にも可視のソースと期間が必要です。

使用する投稿タイプ

postTypes フロントマター項目は、以下の承認された関係を定義します。含まれていることは、実際の定量的パターンが存在する場合にチャートを許可するものであり、すべてのページにグラフを作成することを著者に要求するものではありません。

QAチェックリスト

• 読者の主なタスクはパターンを確認することであり、正確な参照だけでは表の方が適切である。
• 要点はHTMLテキストの完全な文であり、プロットされたデータと一致し、証拠の範囲内にある。
• タイトルは、figureを理解するために必要な測定基準、母集団、期間を指定している。
• チャートタイプが分析タスク（系列、カテゴリ比較、分布、または関係性）と一致している。
• 棒グラフのベースラインはゼロから始まる。その他のすべてのスケールは可視で、正当化され、欺瞞的でない。
• 間隔、単位、分母、計算、欠損値が正直に表現されている。
• 系列は直接ラベル付けされているか、色だけでなく識別可能である。
• すべての必須値が、ホバー、JavaScript、アニメーション、または画像解釈なしで利用可能である。
• データテーブルまたは完全なテキスト代替手段は実際のヘッダーを使用し、ビジュアルと正確に一致している。
• ソース、カバレッジ期間、コホートまたはサンプル、および変換がチャートの横に表示されている。
• チャートとアクセシブルな代替手段は1つの正規データセットから導出されている。
• ブロックは、重複するデータ表示、変換モジュール、または競合する強調度の高いビジュアルの隣に配置されていない。
• チャートはキーボード入力、ハイコントラスト設定、200%ズーム、狭い画面、動きの軽減で機能する。
• 3D効果、二重軸、破断軸、絵画的スケーリング、支持されていない因果関係の主張、または装飾的な系列が残っていない。
• ページレベルの構造化データは該当し、可視の証拠と一貫している。
• 選択された投稿タイプには、そのコンテンツ契約にチャートブロックが含まれている。

FAQ

表の代わりにチャートを使用すべきなのはどのような場合ですか？

最初のタスクが傾向、分布、順位、または関係性を確認することである場合はチャートを使用します。読者が多くのフィールドにわたって正確な参照を必要とする場合は表を使用します。両方のタスクが重要な場合は、チャートブロック内にコンパクトな表をアクセシブルなデータ代替手段として保持します。

棒グラフはゼロから始める必要がありますか？

はい。棒の長さはベースラインからの大きさを表すため、そのベースラインを切り取ると見かけの比率が変わります。折れ線グラフは、可視範囲と単位が明示され、狭いビューが分析的に必要な場合に、非ゼロのスケールを使用できます。

チャートをアクセシブルにするには、altテキストで十分ですか？

通常は不十分です。altテキストは表示内容を識別し、その主なパターンを要約します。複数値のチャートには、ラベル、値、単位、ソース、期間を含む近くのデータテーブルまたは同等のテキストも必要です。

要点はチャートのタイトルだけに記載してもよいですか？

いいえ。タイトルはfigureが何を示すかを識別し、要点は読者が注目すべきことを述べます。画像が認識または抽出されない場合でも利用可能なように、要点をグラフィックの外側の完全な文として保持します。

チャートブロックはSchema.orgマークアップを生成しますか？

いいえ。ページが独立して該当する場合にのみ、Article、Report、または Dataset などの有効なページレベルのマークアップを使用します。チャートは新しいスキーマの権利を生み出したり、可視の証拠に存在しない構造化された主張を正当化したりしません。