01 機能概要
グラフの選択、ビジュアルエンコーディング、文脈に沿ったラベル付け、アクセシビリティ、レスポンシブな表示。
Data Visualizationはグラフデザインのスキルです。比較、推移、構成、分布、関係といった問いを候補となるグラフ形式に対応付け、そのうえでラベル、軸、文脈、ビジュアルエンコーディングを扱います。
対象はデータ収集や統計的な証明ではなく、表現です。実際のデータ、直接の注釈、色以外の手がかり、表などのレスポンシブな代替表示を重視します。製品全体のカラーパレットの設計は別の課題です。
想定される成果物
閲覧者が理解すべき比較やパターンを特定します。
シンプルなグラフを選び、軸、ラベル、単位、系列の一貫した扱いを定めます。
実際のデータを使い、有用な文脈を加え、色以外の手がかりと小画面での挙動を確認します。
02 利用場面
実際のデータ、フィールド定義、読み手の問い、表示上の制約を用意してください。このスキルはグラフのデザインを導くもので、データの検証やグラフの実装は別のタスクです。
03 重要な判断
グラフの形式は、明らかにすべき関係によって正当化されます。
色相だけでは伝えられない情報を、ラベル、形、パターンで伝えます。
04 依頼例
以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。
このタスクのSKILL.mdをdesigner-skillsリポジトリから、お使いのエージェントが対応するスキルの場所に読み込んでください。エントリファイルでは、共通のインストールコマンドは定められていません。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/data-visualization/SKILL.md実際のデータ、フィールド定義、読み手の問い、表示上の制約を用意してください。このスキルはグラフのデザインを導くもので、データの検証やグラフの実装は別のタスクです。
スキルを実行する前に、このブリーフの範囲、ソース資料、制約を調整してください。
data-visualizationを使って、提供された月次の値から、この目標対実績のグラフを再設計してください。単位と文脈が明確なグラフを提案し、軸の選択理由を説明し、読みやすいモバイル向けの代替表示とテキストの要約を含めてください。推移から原因を推測しないでください。実際の出力を、次の観察可能な基準に照らして確認します。
OpenDesignは、コーディングエージェント向けのローカルなデザインワークスペースを提供します。この掲載は、スキルが同梱されていることや、外部ツール、認証情報、ソフトウェアの依存関係が含まれていることを意味しません。
05 ソースとライセンス
このページは、下にリンクされた固定されたソースリビジョンについて説明しています。アップストリームの挙動や要件は変わる可能性があります。
9a6930cf84a8グラフの選択、ビジュアルエンコーディング、文脈に沿ったラベル付け、アクセシビリティ、レスポンシブな表示。
リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の目安であり、スキルの利用状況や品質の評価ではありません。
06 開始前の質問
OpenDesign
ブリーフ、ソース資料、デザイン作業をローカルのワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自身のセットアップを確認してください。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/data-visualization/SKILL.md