【Polaris和訳】Design/Data visualizations
この記事について
この記事は、Polaris/Design/Interaction statesの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
データビジュアライゼーション
ビジュアライゼーションは、データのパターンを明らかにし、特定の質問に対する答えを即座に提供します。
このセクションでは、Shopify におけるデータビジュアライゼーションの手法と、その活用方法について説明します。
Shopify でのデータビジュアライゼーション
データビジュアライゼーションのプロセスは、常にデータセット、質問、そして答えを見つけるためのデータの分析から始まります。それぞれのビジュアライゼーションは、データセットに関する 1 つの質問に答えることに焦点を当てるべきです。例えば、"時系列での売上はどうなっているのか？"などです。
データビジュアライゼーションに一貫したスタイルとフォーマットを維持することで、マーチャントとの整合性を保つために、データが真実かつ正確な方法で提示されることを保証します。
ガイドライン
データビジュアライゼーションは、次のようなアプローチが必要です。
問題を解決する
答えなければならない明確な質問があること。複数の質問に対する複数の答えがビジュアル化されていると、複雑で理解しにくいものになってしまいます。
実データでテストする
実際のデータを使ってテストすることで、ビジュアライゼーションの効果がわかります。また、データポイントが少ない場合（1 ～ 2 個）と多い場合（100 個以上）に分けてテストします。
データポイントの数によるスケーリング
データポイントの数が多い場合と少ない場合で、ビジュアライゼーションがどのようにスケールするかを考えます。データがまばらであったり（ほとんどがゼロ）、とがっていたり（いくつかの値が他よりもはるかに大きい）する場合に注意してください。
5 つのコア特性
効果的なデータビジュアライゼーションは、5 つのコア特性（正確性、直感性、エンゲージメント、フォーカス、データ粒度）のバランスが取れています。ターゲットとなるユーザーにとって最適な方法で特定の質問に答えるためには、これらのうちどれを重視し、どれを重視しないかを意図的に決定することが重要です。これらの特徴を理解することで、ビジュアライゼーションの効果を評価するための言葉を得ることができ、数あるデータのビジュアライゼーション方法の中から選択することができます。
精度
精度とは、ビジュアライゼーションがどれだけオリジナルのデータセットに忠実にマッチしているかということです。メッセージを伝えるためには、どれくらいの精度が必要でしょうか？トレンドやパターンを伝えるためには、必ずしも高い精度が必要とは限りません。
直感性
直感性とは、ビジュアライゼーションの解釈のしやすさのことです。マーチャントは表現されていることをすぐに理解できるでしょうか、それとも説明が必要でしょうか？直感的であればあるほど良いのですが、時には柔軟性を犠牲にすることもあります。
エンゲージメント
エンゲージメントとは、ビジュアライゼーションが一見してどれだけ注目されるかということです。それはショーの主役なのか、それとも背景にあるものなのか。エンゲージメントが高ければ良いというわけではありません。場合によっては、最高のビジュアライゼーションは、脇役であることもあります。
フォーカス
フォーカスとは、マーチャントの注意をどのように向けるかということです。1 つのパターンやトレンドが他よりも目立つように表示されているのか、それともいくつかのトレンドが同じように重要視されているのか。焦点を絞ったビジュアライゼーションは、認知的な過負荷を軽減しますが、伝えられるメッセージの幅は狭くなります。
データの粒度
データグラニュラリティとは、ビジュアライゼーションで表示されるデータセットの詳細レベルのことです。粒度が高ければデータポイントが多くなり、認知的な処理が増える可能性がありますが、粒度が低ければ詳細さに欠けることになります。適切なデータ粒度のレベルは、答えようとしている特定の質問と、伝えようとしている対象者によって完全に異なります。
軸とラベルの規則
定量的なデータを表示する標準的なチャートには 2 つの軸があり、分かりやすくするためにラベルを付ける必要があります。
- ラベル付けは、データ領域の外側で、分離して行う必要があります。これにより、ユーザーはデータからフォーカスを外すことなく、データの範囲を理解することができます。
- すべてのラベルが明確で、何を表しているか正確であることを確認してください。シンプルで短い言葉を使用してください。
細かいガイドライン
軸線
アクシスラインは、定量的なデータを表示するためのガイドラインとして、目立たないように使用します。
ラベルをスキップする
Y 軸と X 軸の目盛りにラベルを付けることで、何を表しているのかがより明確になります。
X 軸の略記号
Shopify では、ビジュアル化する際の混乱を避けるために、月や平日に標準的な略語を使用しています。
- 時間には 12 時間形式を使用し、小文字を使用しています。
- 曜日には最初の 3 文字を使用 (Sun, Mon)
- 月には最初の 3 文字を使用（2 月、3 月
- 特定の日には、「日＋月」の形式を使用します（10 Apr, 11 Apr）。
- 特定の月については、「月＋年」の形式を使用します（Apr 2011, May 2017
Y 軸の略記号
Shopify では、Y 軸に標準的な金額の略語を使用することで、煩雑さを解消しています。
X 軸のラベル付けの規則
ラベルは明確で簡潔でなければなりません。
Y 軸のラベル付けの規則
ラベルは明確で簡潔でなければならない。
カラーパレット
データビジュアライゼーションにおける色は、非常に特殊な意味を持っています。データビジュアライゼーションのカラーパレットには、目的に応じて単独またはグループで使用できる特定の色が用意されています。
単一データ系列
データ系列が 1 つの場合に使用します。例えば、棒グラフ、列グラフ、単一の折れ線グラフなどです。
過去との単一比較
データセットを過去の値と比較する場合に使用します。例えば、今年の月別総売上高を昨年と比較した場合。この場合、現在の値は紫色、過去の値は灰色となります。
複数のデータ
比較したいデータが複数ある場合に使用します。例えば、多項式折れ線グラフです。データセットの数が多いほど、リストが下に進みます。
バイアス
特定のデータの必要性を否定的または肯定的に表示する場合に用いる。例えば、基準値に対する変化がプラスかマイナスかを示す場合など。
横棒グラフ
棒グラフは、離散的なカテゴリを比較するために使用されます。ビジュアライゼーションに表示できるデータポイントの数に制約がある場合、棒グラフを使用すると、スケーリングが困難になります。
次のような場合に最適です。
製品」と「売上」のように、データの別々のカテゴリを表示する場合。
使用しないでください
データポイントの数が 6 を超える可能性がある場合、テーブルを使用してください。
棒グラフのラベル
各棒には、表示内容と値を表示します。ベストプラクティスについては、「軸とラベルの規則」を参照してください。
色
すべてのバーに 1 色を使用してください。
バーの配置
バーの幅は、バーとバーの間のスペースの約 2 倍の大きさで、比例していることを確認してください。
縦型カラムチャート
カラムチャートは、時間的な変化やトレンド、個々のデータポイントを示すために使用されます。データポイントの数が 30 以下の場合は、カラムチャートを使用し、それ以外はラインチャートを使用します。
次のような場合に最適です。
- 1 時間あたりの売上や 1 ヶ月あたりの受注など、連続したデータを表示する場合
- 時間の小さな粒度（1 時間ごと、1 日ごと、1 週間ごと、1 ヶ月ごと）の表示
使用しない場合
データポイントの数が 31 を超えることがある。このような場合には、折れ線グラフを使用してください。
色
すべてのバーが同じ色であること。
バーの配置
バーの幅は、バーとバーの間のスペースの約 2 倍の大きさで、比例していることを確認してください。
インタラクティビティ
ユーザーは個々のデータポイントを見ることになるので、カーソルを置いたときにバーに何らかのインタラクティブ性を持たせましょう。ツールチップの一番上の行は X 軸の略語と表示のガイドラインに沿って、一番下の行のツールチップは Y 軸の略語と表示のガイドラインに沿って表示します。
ラインチャート
ラインチャートは、一連のデータポイントを線で結んで作成します。折れ線グラフは、時間的な変化や比較、傾向を示すのに適しています。データポイントの数が 30 以上の場合は、折れ線グラフを使用します。
次のような場合に最適です。
- 売上や注文などの連続したデータを時系列で表示したい場合
- 時間の大きな粒度を表示したい場合（年間、四半期など
- データの全体的な傾向や形を把握する
軸とラベルの設定
軸とラベルのガイドラインを使用して、チャートエリアを設定します。
複数行のグラフ
折れ線グラフは、複数のデータセットを比較したい場合に有効です。カラーパレットを使って色を選択する。
ディスプレイ・メトリクス
表示メトリックとは、特定のプロセスの状態を追跡し、表示するために使用される定量化可能な尺度のことである。例えば、合計値、平均値、プラスまたはマイナス方向の動きなどがある。
次のような場合に最適です。
1 つの値を基本単位で表示する場合。
単位
メトリクスは、数値の近くに基本単位と対になっている必要があります。メトリクスには、簡潔で明確な言葉を使用してください。
スコープ
メトリクスは、データの時間軸を示すためにスコープを設定する必要があります。
動き
必要に応じて、前回との比較や平均値など、比較指標を入れることを検討する。
テーブル
テーブルは、さまざまな列や各エンティティに表示するデータを持つ大量の情報を表示するのに適した方法です。テーブルは、複数の指標やカテゴリーをまとめて表示する必要があり、データのパターンを示すことよりもデータ値を正確に検索することが重要な場合に使用します。
次のような場合に最適です。
- 変数の多い大量の離散的なデータの表示
- 複数のカテゴリーや指標の値を表示する場合
- 比較が優先されない場合のフィルタリングと順序付け
アライメント
表の中の値をすばやく視覚的に比較するには、一貫した垂直方向の配置が重要です。
分離
データが散乱したり、データ以外のインクが付着したりするのを防ぐために、各行を微妙に分離することが推奨されます。
合計
合計はマーチャントがデータを総合的に理解するためのもので、簡単に見つけることができます。
アクセシビリティ
分かりやすいビジュアライゼーションをデザインする上で重要なのは、誰もがデータにアクセスできることです。
オプションの提供
視力に問題のあるマーチャントは、支援ソフトウェアを使用しても、データのビジュアル表示を理解するのが難しい場合があります。
手先の器用さや運動能力に問題のあるお客様は、微細な運動制御に依存するインタラクティブなビジュアライゼーションを使用するのが難しいかもしれません。
また、単にチャートやグラフに表示されたデータを理解するのが難しい場合もあります。
さまざまなマーチャントのニーズをサポートするために、データビジュアライゼーションには常に複数のフォーマットを提供してください。
色の使用
色はビジュアライゼーションに欠かせないものですが、色覚異常やロービジョンを持つマーチャントにとっては問題となることがあります。視覚的な問題を抱えるマーチャントを含め、すべてのマーチャントの視覚情報の解釈をサポートする方法でカラーを使用する必要があります。
詳細については、Polaris のアクセシブルカラーに関するガイダンスをご覧ください。
スケーラブルベクターグラフィックス（SVGs)
<svg>および<canvas>要素は、HTML で魅力的でダイナミックなビジュアライゼーションを作成するための優れたツールです。しかし、これらの要素は、支援技術を使用してアクセスすることが困難な場合が多くあります。支援技術のユーザーは、コンテンツに正しい順序でアクセスできなかったり、視覚情報に相当するテキストを見つけられなかったり、キーボードでインタラクションにアクセスできなかったりします。
一般的には、aria-hidden="true "を使用して<svg>要素をスクリーン・リーダーから非表示にし、グラフやチャートに相当するテキストを別途用意します。ビジュアライゼーションの種類によっては、異なる処理が有効な場合がありますが、一貫したエクスペリエンスを実現することを優先してください。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion