Design app experiences with charts

ハイライト

Apple は WWDC22 で Swift Charts フレームワークを発表し、開発者がチャートを使用してアプリケーション内でデータをより明確かつ魅力的に伝えるのに役立つ一連のチャート設計原則もリリースしました。

主要内容

チャートを使用する場合

（01:53）

アプリに表示するデータがたくさんあるかもしれませんが、すべてのデータをグラフにすると、ユーザーは見失ってしまうだけです。チャートの中核となる機能は、ユーザーの注意を誘導し、最も重要な情報を素早く把握できるようにすることです。

チャートが適している 3 つのシナリオ:

• 履歴値または予測値を表示: 時系列データは、チャートを使用して変化する傾向を視覚的に表示できます。
• 部分と全体の関係を表示: 進行状況、完了、残量などのステータス情報。
• 異なるアイテムやカテゴリを比較: ユーザーが一目で違いを確認できるようにします

Apple は例としてパンケーキ トラック アプリを使用しています。このアプリには当初、注文入力と取引記録の 2 つのタブしかありませんでした。取引記録は単なるリストであり、フードトラックのオーナーはそこから情報を自分で抽出する必要があります。グラフを使用すると、このリストを実用的な洞察に変えることができます。たとえば、最近の売上、どのフレーバーが最も人気があるか、毎日どの場所で最も業績が良いかなどです。

チャートの記述方法

（03:29）

グラフにタイトルを 1 つだけ含めることはできません。タイトルは図の要素にラベルを付けるだけであり、情報は伝えません。

タイトルを自己完結型の説明に変更します。

• 基本: 「過去 30 日間に販売されたパンケーキ 1,234 個」
• 応用編：「過去 30 日間で売上が 12% 増加し、パンケーキは合計 1,234 枚売れました」

2 番目の方法は、ユーザーがデータが高いか低いか、上昇か下降かを判断するのに役立ち、特に馴染みのないデータの場合に役立ちます。

複数の観点からデータを強化する

（05:06）

グラフには、次の 3 つのレベルで詳細を追加できます。

• マクロ: 合計、平均など、データセット全体の概要
• Meso: データのサブセット (平日と週末、異なるフレーバー、異なる都市など)
• マイクロ: 最後の取引、最大の単一販売などの個々のデータポイント

Pancake Truck アプリでは、売上グラフの下にクリック可能な概要データを数行追加できます。 「日次売上」をクリックすると、チャートが平均線に重ねて表示されます。 「平日と週末」をクリックすると、グラフで比較が強調表示されます。 「最も売れた日」をクリックすると、チャートがその日にジャンプします。

グラフのサイズとインタラクション レベル

（06:42）

チャートは、インタラクションのサイズと深さに基づいて 3 つのレベルに分けられます。

静的な小さなチャート: 時計のダイヤルの合併症、株価のサムネイル、健康傾向カード。これらは多くの場合、クリックすると大きな図につながるポータルとして機能します。ユーザーはクリックして詳細を確認することを期待しているため、小さなグラフにはグリッド線、ラベル、または対話機能は必要ありません。

インタラクティブなミディアム チャート: 通常、ビューの幅全体が占め、高さ全体よりも小さくなります。座標軸とラベルが必要で、タッチによる正確な値の表示をサポートし、時間範囲を切り替えることができます。

大きな深さのチャート: 垂直方向に大きなスペースを占有し、詳細なデータ探索をサポートします。機能は段階的に展開され、ユーザーが独自の情報密度を選択できるようにする必要があります。

小さなチャートから完全なチャートへの移行には連続性があり、形状は変更されず、表示される数値も保持されます。情報を追加することはできますが、まったく異なるものに置き換えることはできません。

チャートデザインシステム

（10:01）

アプリケーション内に複数のチャートがある場合、チャート設計システムが形成されます。

使い慣れたグラフ形式を使用します。棒グラフと折れ線グラフは、ほとんどの人が日常的に触れる形式です。散布図は比較的まれであり、追加のガイダンスが必要です。独自のグラフ (アクティビティ リングなど) を作成したい場合は、それをアドオン機能ではなくアプリケーションのコアにする必要があります。

違いは意味のあるシグナルです。 2 つのグラフが異なる情報を表示する場合、デザインの違いによりユーザーはそれに気づきやすくなります。 Apple は、「最近の売上」から「過去 12 か月の売上」への進化を示しています。

1. 説明のみを変更します - 変更は見落とされやすいです
2. 2 番目のグラフに別の色を付けます – 別のグラフであることに気づきやすくなります
3. データの表示方法を変更します (棒グラフから月間売上範囲を示すグラフに) - 説明とスタイルの変更を調整して、テーマ、期間、指標が異なることをユーザーが確実に認識できるようにします。

詳細

Swift チャート フレームワーク

（01:22）

WWDC22 で導入された新しい Swift Charts フレームワークにより、Apple デバイスでのチャートの作成が簡単になります。このセッションは設計原則に焦点を当てていますが、フレームワーク自体は宣言型 API を提供し、SwiftUI と深く統合されています。

チャートの説明のベスト プラクティス

// 悪い例: 要素名だけを示す
Text("Sales in the Past 30 Days")

// 良い例: それだけで意味が分かる説明
Text("Sales in the past 30 days totaled 1,234 pancakes.")

// より良い例: データを解釈する
Text("Sales for the past 30 days are up 12%, totaling 1,234 pancakes.")

重要なポイント:

• 説明は単独で読んでも有益である必要があります
• 馴染みのないデータについては、完全な文を使用して理解のコストを削減します
• ユーザーがデータの意味を判断できるように、傾向の解釈 (パーセントの増加と減少) を追加します。

段階的な拡張の複雑さ

// 小さな静的チャートを入口として使う
SalesChart(data: last7Days)
    .frame(height: 80)
    .onTapGesture {
        // タップして完全なチャートへ移動
        showDetailChart = true
    }

// 完全なチャートでも同じデータコンテキストを維持
DetailSalesChart(data: last30Days)
    .frame(height: 300)
    // インタラクションを追加: 期間の切り替え、正確な数値の確認

重要なポイント:

• 小さなグラフと完全なグラフは同じデータ形状を示します
• 小さなチャートに表示されている数字は、完全なチャートでも表示されます
• 情報を追加することはできますが、まったく異なるものに置き換えることはできません

差別化されたグラフを設計する

アプリに複数のグラフがある場合は、次の方法で意味のある違いを作成します。

• 色: 異なるテーマのグラフでは異なるメインカラーが使用されます
• 方向: 異なるデータ型を区別するための水平ヒストグラムと垂直ヒストグラム
• スタイル: 実線バーと範囲バーは異なるインジケーターの意味を示します

// 最近の売上 -- 縦棒グラフ、メインカラー
BarChart(data: recentSales)
    .foregroundStyle(.blue)

// 人気フレーバー -- 横棒グラフ、比較を強調
HorizontalBarChart(data: popularFlavors)
    .foregroundStyle(.green)

// 都市別の売上傾向 -- 折れ線グラフ、変化を表示
LineChart(data: citySales)
    .foregroundStyle(.orange)

重要ポイント

1.フィットネス アプリにトレンド グラフを追加

• 作業内容: ユーザーのトレーニング記録をリストから週次/月次の傾向グラフに変更します。
• 実行する価値がある理由: Swift Charts により、このタスクのコード量が数百行から数十行に削減され、ユーザーは進行状況の曲線を直感的に確認できます。
• 開始方法: を使用しますChartビューはトレーニング データをラップし、適切なマーカー タイプを選択します (BarMarkまたはLineMark）

2.会計アプリに消費量分析を追加

• 操作方法: カテゴリ別の消費割合を表示、時間ごとの消費傾向を表示
• 実行する価値がある理由: ユーザー アカウンティングの中心的な魅力は、「お金がどこに使われるか」です。チャートは数値リストよりもはるかに直感的です。
• 開始方法: を使用しますSectorMarkカテゴリの割合を表示する円グラフを作成します。BarMark毎月比較する

3.完了の視覚化を習慣追跡アプリに追加

• やるべきこと: ドーナツ グラフまたは進行状況バーを使用して、今週/毎月の習慣完了率を表示します。
• 実行する価値がある理由: 進捗状況の視覚化は、行動心理学における効果的なポジティブ フィードバック メカニズムです。
• 開始方法: を使用しますSectorMarkのinnerRadius円形の進行状況グラフを作成するためのパラメータ

4.天気予報アプリに気温傾向を追加

• 操作方法: 今後 24 時間の気温変化曲線を降水確率と重ねて表示します。
• 実行する価値がある理由: 温度数値のリストは曲線ほど直感的ではありません。情報をオーバーレイすると、1 つのグラフでより多くの情報を伝えることができます。
• 開始方法: を使用しますLineMark温度曲線を描くには、次を使用します。AreaMark重ね合わせ降水確率エリア

関連セッション

• Hello Swift Charts — Swift Charts フレームワークと基本的な使用法の概要
• iPad の SwiftUI: インターフェイスを整理する — iPad インターフェイスの構成とナビゲーションのデザイン
• SwiftUI の新機能 — SwiftUI の年次新機能の概要