ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
グラフを使ったApp体験のデザイン
明確で訴求力のあるデータのグラフで、Appを強化する方法をご確認ください。グラフを使用するタイミング、グラフの使用方法、グラフのデザインシステムにグラフを連携させる方法を紹介します。
リソース
関連ビデオ
WWDC22
-
ダウンロード
(音楽)
こんにちは Nicholas Feltonです Human Interfaceチームの デザイナーです 今日はグラフを使って素晴らしい App体験を作るお話しです グラフは複雑な情報を伝える 素晴らしい手段で プロダクトの充実のため 我々も使用しています
ヘルスケアで身体の 理解のためにグラフを使用し フィットネスはグラフで アクティブであることを促し 天気はグラフで プランの助けとなります
デベロッパも大好きで 各カテゴリで 素晴らしい例が見られます Stravaの ワークアウトの詳細分析や Duolingoの楽しい 進捗度などです グラフはあちこちにあり 文字で伝えられない 微妙なデータを伝達できます さらに実用性だけでなく Appに個性を加え UIに視覚的興味を 与えることができます
グラフでどうAppを 向上できるか パンケーキを売る フードトラックの Appを見てみましょう Appには注文を 入力するタブと 売上情報を見れる タブがあります 売上を追えるのは いいことですが この情報はさらに 役に立つものになり得ます 今年 Swift Charts を 発表しました Appleデバイス用の グラフ作りが簡単になります 以降のセクションでAppleで グラフをデザインする際の 原則をみなさんに 共有したいと思います そしてそのコンセプトに基づき より有益なAppのワイヤーフレームを 作成したいと思います 素晴らしいグラフの体験には 3つ要素があります いつグラフを使うか どう使うか そしてグラフのデザインシステムに どう関連させるのかです まず いつグラフを 使うかについてです これらはグラフで 伝達する情報を 向上させられる例です 過去や予想される値を示す時 グラフはデータの変化を 鮮明に表すことができます
全体像の一部を視覚化し 終了間近や進展途中 または空になるものを グラフで表現できます
物やカテゴリを比べる時 グラフで簡単に評価できます
Appにこれらを 適用するためには まず体験に何が必要かを 考えることから始めます Appのゴールをグラフで どうサポートするかです 正しく使えば グラフは フォーカスを与えます クリエーターとして 視覚化の対象は豊富でしょうが 最も重要なものを グラフにすべきです ユーザーにとって グラフはパワフルです 理解させたい情報に 関心を向けます フードトラックAppの ゴールは運営を 向上させることです 売上のリストを グラフに変えて アクション可能な 情報にすれば オーナーはその改善を 歓迎してくれることでしょう フードトラックにとって 有益で重要な情報は 最近の売上高 人気商品を理解すること そして曜日ごとの 売上の良い場所の把握です
Appをデザインする際 グラフは注意を惹き 最も重要な情報に 関心を集めねばなりません 伝達したいものがわかれば 次はグラフでどう達成するかです
売上を図解するには 時間による変化の グラフが最適です その1つが棒グラフで 過去 30日間の 売上高を見せる方法です 軸にラベルをつける前に このグラフが何か 解説をつけます
“過去30日間の売上”という タイトルは 当然ながらも それ以上が伝わりません どう情報を 要約できるでしょう?
グラフには中身を表す言葉が 伴うべきです 読んだだけで 参考になるべきです タイトルにパンケーキの 売上数を足せば それだけで十分な 解説になります これを読むだけですぐ 重要な情報がわかり グラフが詳細を補足します
グラフが複雑な場合 解説に文章を使えば 簡単に理解できるようになります 例えば“過去30日間の売上 パンケーキ1,234枚”です
もう1つはデータを 解釈することです “過去30日間の売上12%増” “パンケーキ計1,234枚” こうすれば最近の売上が 高いか低いか または増加か減少かが わかりやすくなります この方法は見慣れていない データのケースなどに 非常に有効です
いずれもグラフの描写の いい例ですが これらは売上データの 説明の1つにしかなりません 他にどのような方法が あるでしょう?
他の見方からの詳細を 組み入れてみましょう データの要約は大切ですが カテゴリや 個々のデータを ハイライトできれば グラフは多面的になります これらの見方を 考慮してみましょう マクロレベルでは 全体像を表す方法を探します 総計や平均値がその例です ミディアムレベルでは サブセットのデータに注目します 平日と週末を比べる 時間ベースなどもそうですし 1日の時間による 売上を調べることもできます またパンケーキの種類で 分類したり 売られた町で分類できます
ミクロレベルでは個々の データポイントに焦点を当てます その日最後の売上や 最大の売り上げなどの詳細を グラフに盛り込めます
データセットをよく見れば 詳細が出てきます これらの見方は オーナーにとって 在庫状況や売る場所の計画に 役に立つかもしれません これらの詳細を 売上グラフに足すのは 有益でもありえます このためにグラフの下に タップ可能な行を用意します 各行とも 統計値の要約を提供し タップすると グラフが更新されます 1日の平均値や 平日と週末の売上量の違いや 最高売上日など表示できます 非常に便利ですが これらの情報を表示するのに 大きいスペースが 必要になります
グラフの機能性が増すと サイズも増します 小さいグラフは静的です Watchコンプリケーションが いい例で 株価のサムネールのグラフや ヘルスケアの トレンドグラフもです 静的グラフは普通 単独では使われず 別の大きいグラフの プレビューとして使われます 通常 小さいため 目盛線やラベル インタラクティビティは 別に詳細が見られることから 必要はありません インタラクティブなグラフは 基本的には大きく 詳細を含むものです 株価やヘルスケアのグラフが その例です インタラクティブなグラフは 通常 横幅はフルですが 縦幅は違います 値を推定できるよう 軸やラベルを含むべきです
インタラクティビティは この大きさだとグラフ上で 値にアクセスでき 時間の幅や範囲の変更で 探索の手助けになります
インタラクティブで大きい グラフは深く探索でき 最大限の縦幅が必要です グラフが パワフルになるにつれ 徐々に追加機能を 紹介するべきです グラフの複雑性を 段階的に紹介し 興味にあったレベルの情報を 提供すべきです
小さな静的なグラフを ナビゲーション階層の高いところに置き さらに詳細のグラフへのパスを 提供します
2種類の同じグラフを リンクする場合 値とコンテキストと 状態を維持させ 継続性を 持たせるようにしましょう
誰かがグラフに 興味があることは すでに見たものを さらに見たいということです つまりグラフは その形を維持し 以前出てきた数値は 維持すべきです
情報は追加できますが 違う情報だと 混乱を招きかねません
サイズの違うグラフの 機能を考えている間 フードトラックAppで グラフをどうするか 決めましょう 現在タブが2つあり 1つは注文用 もう1つは売上です この記録を視覚化するので ここにグラフを足すべきです
売上を「すべての売上を表示」 の後ろに移し タブを綺麗にしましょう グラフのキャンバスが できました データの詳細を見る判断を 委ねるため 静的グラフを使うのが 適切です
最近の売上を示した 静的グラフです インタラクティブグラフが タップで開きます これで体験が完全になります このグラフは詳細分析を サポートし 30日や1年ビュー といった サマリー統計にタップで アクセスできます
Appをデザインする上で グラフにはその内容と 要点を伝える解説が必要です 詳細なデータは グラフに豊かさを与え 徐々にグラフの複雑さを 示すべきです
ではグラフのデザインシステム を見てみましょう Appにグラフが 1つ以上あると グラフのデザインシステムを 作成したことになります その場合 これらを考慮しましょう
見慣れたフォームを使うこと 理解力を増やすため よくあるグラフから始めます 馴染みのあるグラフなら 簡単に理解してもらえます 棒グラフや折れ線グラフは 日常よく見るものです 散布図はあまり 浸透していないため グラフの理解に 説明が必要かもしれません 何かユニークなことをする場合は それを明瞭に説明します アクティビティのオンボーディング がそのいい例です アクティビティリングが現れた後 別々になりムーブとエクササイズ そしてスタンドが表示されます
新しいフォームのグラフはAppの メインであるのが理想です 卓越させることで 人々がさらに探究し 理解しようとします
それを支持するグラフは メインのものより目立たない 見慣れたグラフが最適です
違いは大切で グラフ間の変動は 変化のシグナルとなります 例として 2つの同じ 売上グラフを見てみます 変化を示すため 徐々に 右のグラフに変化を与え デザインを進めていく上で 違いが明らかになります まず右のグラフの 時間範囲を変えます 最近の売上ではなく 過去12カ月の売上にします それに伴い 解説とラベルも変更します これらはあくまで 最低限の変更です もしデータのタイプを 変えてしまうと 解説の変更だけでは 十分ではなくなります 文字の変化は 気づきにくいので さらなる変化が必要です 色を変えるのが役に立ちます これらのグラフが 違うことがわかります これでおそらく解説を 読むことになるでしょう
最後に右側のグラフで 過去12カ月の売上幅が 見れるように変更します そのためには解説と データの表示に 変更が必要です
この大きな違いを 強調するため 棒グラフのスタイルを 変更します 右側のグラフは 左側とは違う主題 時間範囲と測定基準です わざと違うデザインで 違いを明白にします これらの原則をAppの もう2つのグラフに 適用します
売上グラフと共に 人気の商品のグラフを 足すことにします 人気の商品を示す1つの方法は それぞれのパンケーキと 比べることです 過去30日を見たいので 人気を比べるには 1つの棒で十分です
棒を切り離せば 比べやすくなりますが 先程のグラフと似ています
棒を横にすることで 先程のグラフと 違いを出すことができます
また横にすることで 棒が長くなり 縦幅のスペースが 省略できます このプレビューでは ラベルをつけませんでした
詳細ビューではラベルと値が 記載されています
最後のグラフは トラックが行く 2つの町の売上状況です これには少し 特別なものが必要です このグラフのコンテキストは 曜日別の売上です この場合 毎日それぞれを 別々に確認したいです これは過去30日間の 曜日別の 平均売上数です クパチーノと サンフランシスコで この棒グラフを 分ける必要があります 最後に折れ線グラフにして 日々の変化に注目します 売上タブにこれを足し データの要約を 解説に足しました この場合 過去30日間の 曜日別売上最高日は 日曜日の サンフランシスコです 詳細ページのグラフが 最後のグラフです インタラクティビティと さらなる詳細を追加します
フードトラックAppに 追加する グラフができました グラフで 売上高や人気メニュー 売上最高日と場所がわかり このAppの使い道が 著しく向上しました
Appをデザインする上で わかりやすくするため 見慣れたグラフを使い 理解度を向上させるため グラフに違いを出します ここではいつグラフを使い どう使って どう関連を 持たせるかお見せしました これらの原則を採用し Appのデータの伝達を より明瞭に魅力的にできます さらに学びたい場合は 「効果的なグラフのデザイン」 をご覧ください また 「Swift Chartsの紹介」も ご覧ください
(音楽)
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。
クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。