Design an effective chart

ハイライト

パンケーキレストランの売上データを例に、Apple のデザインチームは情報に重点を置き、ラベルの選択、軸のデザイン、説明のコピーライティング、インタラクション方法、色の使用という 5 つの側面からすべてのユーザーがアクセスできるチャートをデザインする方法を説明しました。

主要内容

チャート設計の最初のステップ: 目標を明確にする

（01:35）

多くの開発者がデータを取得した後の最初の反応は、「見栄えの良い」グラフの種類を選択することです。しかし、効果的なグラフィックデザインは、次の質問から始める必要があります。「伝えたいメッセージは何ですか?」

セッションでは全体を通してパンケーキトラックの例を使用します。フードトラックのオーナーは、「過去 30 日間の売上状況」を知りたいと考えています。この単純な質問は、傾向の変動、数値の範囲、特定の日の売上、異常値、拠点間での比較など、複数の洞察に分解できます。

効果的なチャートは、少数の重要な情報のみに焦点を当てています。この場合、設計者はパターン (傾向)、範囲 (範囲)、および値 (特定の値) の 3 つの優先順位を選択しました。

マーカーの選択: 実際のデータから開始

（03:13）

マークはグラフの視覚要素であり、棒グラフの列、折れ線グラフの線、散布図の点です。

設計者は最初に散布図を試しました。理想的なデータでは、ドットプロットは鮮明に見えます。しかし、実際のデータでテストしたところ、ドットプロットには目立った傾向は示されませんでした。

次に折れ線グラフを試してみましょう。ポリラインは変化率を示すのに適しており、傾向が明確です。しかし、現実のシナリオを考えてみましょう。フードトラックには 5 日おきの休みがあります。ポリラインは遠く離れたデータポイントを接続しており、データよりも接続自体の方が目を引きます。

最後に棒グラフを選択しました。棒グラフはより柔軟です。ゼロ値は邪魔にならずにはっきりと表示され、視覚的な重みは総売上高に直接対応します。一方の柱の高さが他方の柱の 2 倍であれば、売上は 2 倍になります。

この選択プロセスからの重要な教訓は、理想的なデータだけでなく実際のデータを使用して設計をテストすることです。

軸: 範囲と密度

（08:25）

軸はマーカーの基準フレームを提供します。縦軸には 2 つの範囲戦略があります。

固定範囲: バッテリーのグラフが常に 0 ～ 100% の場合、完全に充電されているか、空であるか、またはその中間であるかが一目でわかります。
ダイナミックレンジ: ステップチャートに固定の上限がない場合、ダイナミック調整により変動がより明確になります。

パンケーキの販売には上限がないため、ダイナミックレンジが使用されます。ただし、基数は 0 に固定されており、列の高さは同等に保たれます。

グリッド線の密度のバランスをとる必要があります。多すぎると気が散る可能性があり、少なすぎると中間の値を推定することが困難になる可能性があります。この例では、20 の整数倍を使用して約 4 本の水平グリッド線を選択し、7 日ステップを使用して 30 日の期間を選択します。

説明文のコピーライティング: 理解の敷居を下げる

（12:14）

チャートは独立したものではなく、アプリケーションのインターフェイスに埋め込まれています。画面タイトル「Total Sales」とセグメントコントローラー「30 Days」は、すでにある程度のコンテキストを提供しています。

しかし、縦軸の単位はまだ明確にする必要があります - それは量ですか、それともパンケーキの数ですか?解決策は、グラフのタイトルに「パンケーキが売れました」と直接記載することです。

より良いアプローチは、「総売上高: 1,234 個のパンケーキ」という見出しで重要なポイントを要約することです。この特定の番号により、ユーザーは最も重要な情報をすぐに取得できるようになります。

天気アプリの降水量グラフにも同様のアプローチが使用されます。「小雨の予報 — 小雨は 9 分以内に降り始め、36 分間続くと予想されます」。

インタラクションデザイン: 複数の入力方法

（15:37）

タッチインタラクションには、十分に大きなタッチターゲットが必要です。タッチ領域を列自体に限定しないでください。列の上の空きスペースも含めて、グラフの高さ全体まで拡張します。

しかし、インタラクションデザインではタッチだけを考慮することはできません。キーボード、音声コントロール、スイッチコントロール、および VoiceOver はすべて同等のサポートを必要とします。フォーカスインジケーターは、タッチターゲットと一致するのに十分な大きさである必要があります。

VoiceOver を使用してチャートを移動する場合、ラベルのデザインはいくつかの原則に従います。

簡潔で、軸名の繰り返しはありません
完全な単語を使用し、省略形は使用しないでください (「Jun」の代わりに「Jun」)
コンテキスト情報が最初に来ます (日付が最初に、値が最後に来ます)
ユーザーが特定の値を素早く見つけられるようにする

色の使用: ユニークではなく強調

（19:32）

色は個性を加えたり、透明感を高めたりすることができます。ただし、色は重要な情報を伝える唯一の方法ではなく、補助的な手段として使用されるべきです。

セッションには、2 つの都市の売上高を比較する折れ線グラフが表示されます。色のみを使用して 2 つの線を区別すると、色盲のユーザーは違いを見分けることができません。正しいアプローチは、最初に形状マーカー (円と四角形) を追加し、次に色を使用して違いを強調することです。

色を選択する際の考慮事項:

さまざまな文化における色の意味（米国とは逆に、中国の株式市場は赤が上昇し、緑が下落するなど）
主要な関係と二次的な関係を暗示することを避けるための視覚的なウェイトバランス
読みやすさを確保するための色のコントラスト
色覚異常に対応、フィルターでチェック
ダークモードを適応させ、コントラスト設定を増加します

詳細

Swift Chart のアクセシビリティのサポート

（06:08）

Swift Charts は、マーカーのカスタマイズ可能なアクセシビリティラベルを自動的に生成し、オーディオグラフのサポートを組み込みます。音声チャートはデータの傾向を音声に変換し、視覚障害のあるユーザーがチャートを「聞く」ことができるようにします。

VoiceOver では次のことができます。

ナビゲーションチャートデータ値 (「5 月 8 日。パンケーキ 54 枚。」)
インタラクティブな切り替え時間範囲 (「選択: 1 年、2 年のうち 2 つ」)
オーディオグラフを再生する (「オーディオグラフを再生する」)
軸の説明（「X 軸は時間、Y 軸は売上」）

オーディオチャートのデータ概要

（14:45）

音声チャートは、カスタマイズ可能な概要を含むさまざまなデータ概要を提供します。軸の説明は非視覚的なコミュニケーションにとって重要です。音声チャートが利用できない場合は、アクセス可能なテキストラベルを通じてこの情報を提供します。

さまざまなシナリオに応じたマーキング戦略

（18:42）

マップアプリの自転車ルート標高マップは、別のラベル付け戦略を示しています。このグラフには単一の値が表示されるのではなく、標高の増減のパターンが表示されます。柱が多すぎて 1 つずつ進むことができません。アクセシビリティラベルには、「5.6 マイルから 4.4 マイルまで: 100 フィート登り、5 フィート下り」と書かれています。

グラフがボタン内のサムネイルプレビューである場合、「週ごとのアクティビティの概要、タップして詳細を表示」というラベルを付けてボタン全体を要約できます。

重要ポイント

やるべきこと: 健康アプリの歩数傾向グラフをデザインする
実行する価値がある理由: ユーザーは自分の活動パターンを迅速に理解する必要があり、優れたグラフのデザインによりデータが一目で明確になります。
開始方法: 核となる情報 (傾向と目標の完了) を決定し、棒グラフまたは折れ線グラフを選択し、「今週の平均 X 歩数」という概要のタイトルを追加します。
やるべきこと: 財務アプリに経費カテゴリの視覚化を追加します。
価値がある理由: 色と形状の組み合わせにより、色盲のユーザーがさまざまな支出カテゴリを区別できるようになります。
開始方法: Swift チャートの使用SectorMarkまたはBarMark、各カテゴリに色で強化された固有の形状タグを割り当てます。
やるべきこと: 気象アプリケーションの降水量予測グラフをデザインする
実行する価値がある理由: セッション内の天気アプリケーションの説明コピーライティングモードを直接再利用できます。
開始方法: グラフの上に要約文 (「9 分後に雨が降り始める」) を追加し、縦軸にダイナミックレンジを使用し、降水強度を示すために色の強度を使用します。
内容: データダッシュボード用のグラフシステムを構築する
実行する価値がある理由: 個々の図の設計上の決定は、システム全体で一貫している必要があります。
開始方法: まず、すべてのグラフが同じルールに従うように、グラフのデザインシステム (色、グリッド線の密度、ラベルの形式) を定義します。