ノート

明確性優先のデータ可視化開発者ガイドライン

フリーのプロンプト百科事典 Wikiprompt より

Fatih Kadir Akın

2026年11月5日

明確性優先のデータ可視化開発者ガイドライン データ可視化を明確でアクセスしやすく、効果的に作成するための22の詳細なルールセット。チャート選択、デザイン、アクセシビリティ、パフォーマンスを網羅する。AIチャート生成ツールのシステムプロンプトや、開発者向けチェックリストとして有用。

プロンプト内容保存

🌐
グラフが答えるべき問いから始め、その問いをグラフタイトルまたはサブタイトルとして書く。信頼度: 0.90 比較に基づいてグラフを選ぶ:カテゴリには棒グラフ、時間の経過には折れ線グラフ、関係性には散布図。信頼度: 0.90 棒グラフの値軸はゼロから始める。折れ線グラフは変化が重要な場合、より狭い範囲を使用してもよい。信頼度: 0.90 3つ以上のスライスを持つ円グラフは避け、3Dグラフは決して使用しない。信頼度: 0.85 カテゴリに月や評価などの自然な順序がない限り、カテゴリの棒は値で並べ替える。信頼度: 0.85 線と系列は線の終端に直接ラベルを付け、読者に凡例と色を照合させないようにする。信頼度: 0.80 順序データには連続パレット、意味のある中間点の周りには発散パレット、グループにはカテゴリカルパレットを使用する。信頼度: 0.85 カテゴリカルパレットは約7色に抑え、色覚異常シミュレーターで確認する。信頼度: 0.85 色だけで意味を伝えない。ラベル、パターン、形状、位置も併用する。信頼度: 0.90 チャートジャンクを取り除く:重いグリッド線、枠線、影、装飾的な背景。信頼度: 0.85 数値を人間向けにフォーマットする:桁区切り、適切な丸め、1.2Mや35パーセントなどの単位。信頼度: 0.85 データがサンプルや予測から得られる場合、信頼区間帯やエラーバーで不確実性を示す。信頼度: 0.75 標準的なグラフにはVega-Lite、Observable Plot、EChartsなどの宣言型ライブラリを使用し、カスタムビジュアルにのみD3を使用する。信頼度: 0.80 小規模から中規模のデータセットではSVGでレンダリングし、およそ1万マークを超える場合はCanvasまたはWebGLに切り替える。信頼度: 0.75 グラフをレスポンシブにするには、単に縮小するのではなく、小さな画面向けに再設計する。例えば、目盛りを減らすか、水平バー配置にする。信頼度: 0.80 重要なグラフごとにテキスト要約とアクセシブルなデータテーブルを提供する。信頼度: 0.85 ツールチップをキーボードでアクセス可能にし、重要な情報をホバー状態だけに隠さない。信頼度: 0.80 ブラウザに送信する前にサーバーでデータを集約またはサンプリングし、数百万の生ポイントをプロットしない。信頼度: 0.85 ダッシュボード内のすべてのグラフで、同じカテゴリには同じ色を使用する。信頼度: 0.90 リリースや障害などの注目すべきイベントを時系列グラフに直接注釈する。信頼度: 0.75 各グラフの下にデータソースと最終更新時刻を表示する。信頼度: 0.85 実際のデータとエッジケースのデータでグラフをテストする:空の系列、単一ポイント、非常に長いラベル、負の値。信頼度: 0.80

ログインして完全なプロンプトを表示

次で続行:

ログインすると、次に同意したことになります: 利用規約 と プライバシーポリシー

使い方

このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。

最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。

参考資料

カテゴリ:coding| prompts.chat| data-visualization| chart-design

ノート