効果的なグラフのデザイン

（音楽）

こんにちは Haldenです Lilianです 今日は効果的なグラフの 作り方を紹介します グラフはAppを興味深く 有益なものにする パワフルなツールです 天気予報のグラフから プランを立てたり 株価で財務上の決断をしたり フィットネスデータを反映した ゴールが立てられます グラフをデザインする時 まずApp体験を デザインする必要があります ニーズを確認することで いつグラフが必要で どう使用しどのデザインで 統一させるか決まります

デザインにおける 第一歩については 「グラフを使ったApp体験の デザイン」をご覧ください ここでは次のステップに ついてお話しします グラフ自体のデザインです 特に効果的なグラフのデザイン つまり伝えたいことに フォーカスを当て わかりやすく障がいがある方も 使用できるグラフです そこでサンフランシスコと クパチーノで 国際色豊かな パンケーキを販売する フードトラックのAppを 例に取ってみます この完成済みのAppには パンケーキ販売の 計画と管理に 役立つグラフが満載です 今日はその１つの デザインに焦点を当て 過去30日の売り上げを グラフにします まずグラフの目的を 確認することから始まります Appのこのページの目的は 過去30日間の売上状況です このような目的には いろんな方向性があります 売上の浮き沈みを調べて パターンがあるか調べたり 売上範囲を 調べることもできます また日による値を 調べるのも便利です 他には最高売上日や外れ値 曜日や場所による 違いなどがあり 可能性は無限です フードトラックにとって どれが重要でしょうか？ 効果的なグラフはいくつかの 重要情報に焦点を当て 意図を持って グラフをデザインします パンケーキの売上の場合 全体像として 売上状況をチェックし 特定の日について 調べたいはずです つまりパターンと 範囲と値に 焦点を当てるのが 最もでしょう これらをどう このグラフにするのか？ デザイン過程を １つずつ見ていきましょう デザイン過程は５つあります マークは 棒グラフのバーのような 視覚的な構成要素です 軸はマークに対し フレームを与えるものです 説明はグラフを 親しみ理解しやすくします インタラクションはさらなる データの探究を可能にし アクセッシビリティにおいて 重要です そしてカラーは個性を加え 次のグラフでわかるように 明確さを高めます 最初のステップは マークと呼ばれる構成要素で どのようなグラフにするか 決定します マークは棒グラフのバー 折れ線グラフのライン そして散布図のポイントで データのアイテムを示す 視覚要素です マークには いろんな種類があり それぞれ違った 表現の仕方があります 例えばバーの場合 並べてデータの 変化具合を比べたり 積み重ねて割合を示し 違ったカテゴリの 構成具合を表示できます また２つ並べて 違うカテゴリの 値も比較できます これらはマークでデータを リッチに表現できる例です 私たちのグラフの場合 どれが最適でしょうか？ マークはゴールとデータを 念頭にデザインすべきです 先程 決めたように 過去30日の売上グラフの場合 ３つのことを考えるべきです パターンと範囲 そして値です マークを選ぶにあたり パターンに注目しましょう フードトラックの場合 売上の変動や軌道が 見えると役に立ちます 時間を横軸に することから始め 売上を縦軸に指定します このグラフはまだ未完成です １つのオプションは点を 毎日の売上に使うことです スムーズなグラフを 想像するなら点が最高です しかし実際のデータは これほど綺麗ではありません 現実のデータでは 点を使って パターンを調べるのは 困難です 最初から実際のデータで デザインを試してみましょう 点は外れ値やクラスタなどを 確認するのには 適していますが この場合は違います 売上パターンを 見やすくするため 折れ線で売上数を つなげることができます 折れ線は変化の象徴に 適しています ここではパターンと軌道が 明らかです しかし ある月に ５日ほど１日おきに 店を閉じるとしたら？ その場合 パターンが 明らかではなくなります これは著しい変化を 示す箇所が 目立ちすぎるからです いろんなシナリオを考え デザインしましょう この場合 棒グラフは 柔軟性があります ここではゼロが見えますが 邪魔にはなりません また直感的に読み取れます 白いほど売上が 良かったことになります 売上は累積的なので 過去30日間の売上高の重みが グラフから伝わってきます

素敵！ 売上を視覚的に表示できる マークを選びました しかしアクセシブルにする 大切な要素があります 視覚的に見せる情報を 視覚的でなく示せる デザインが必要です つまり これらのマークと それが示す情報を VoiceOverでアクセシブル にせねばなりません VoiceOverは スクリーンリーダーです 画面上の情報を 点字かスピーチで読め 目の不自由な方でも Appを使用できます

パンケーキ1,234枚 VoiceOverで グラフの詳細を 読むことができます ５月８日 パンケーキ54枚 ５月９日 パンケーキ36枚 １年 ボタン ２つの２番目 インタラクションも可能です 選択 １年 ２つの２番目 オーディオグラフという 機能もあります オーディオグラフ グラフの音による表現を 再生します オーディオグラフを再生 （iPhoneの音）

以上です マークを アクセシブルにするには VoiceOverがどうデータを ナビゲートするかデザインし オーディオグラフを使用します 幸いにもSwift Charts APIで 作成されたグラフには アクセシビリティラベルと オーディオグラフが 自動的に含まれています オーディオグラフと Swift Chartsの詳細は デベロッパドキュメントと 「App内のチャートへの アクセシビリティの導入」と 「Swift Chartsの紹介」を ご覧ください ナイス！ ゴールとデータに合わせて マークをデザインし VoiceOverで アクセシブルにしました この決断で質問の１つに 答えられました 過去30日の パンケーキの売上状況 特にそのパターンです これで売上の変動が 確認できます しかし変動の範囲は どうでしょう？ そして特定の日の値は？ そこで軸をデザインします 軸はマークの値への 参照を形作ります 例えばパンケーキの グラフの場合 横軸に最初と 最後の日をつけると ５月８日から６月６日の 30日であるとわかります 縦軸はどうでしょう？ この値はフードトラックの 売上によります このような軸の場合 範囲を考慮することが大切です 一定でも動的でも構いません 一定の範囲のいい例が バッテリーグラフの縦軸です バッテリーは常に ０から100％の値です 縦軸をこの範囲で固定すると バッテリーがフルかどうか すぐにわかります このグラフの縦軸の範囲を 変えると混乱しがちですが 必要な場合もあります これはヘルスケアAppの 歩数グラフです 動的な範囲が使われています 決まった最大歩数はなく データに合わせて動的に範囲を 決めるのが適しています これなら歩数が少なくても 棒グラフは スペースを有効に使え 変動が容易に観察できます パンケーキの売上グラフに 戻りましょう 歩数同様 売上の上限はありません ですので動的な範囲として 自動的に 縦軸の上限をデータに 合わせることにしましょう 下限は０のままです バーの高さを有意義にするため 棒グラフでは通常 これが適切です これでバーの長さが２倍だと 売上も２倍となります 上限と下限のラベルは 有意義ですが グラフの理解のためには 中央部分にも何かが必要です そこで次のコンセプトです 目盛線とラベルの密度を 調整せねばなりません 目盛線は値の推定の 基準点となります 目盛線が多いほど 値の推定が楽になります 目盛線やラベルが 必要ないグラフもあります ヘルスケアAppの トレンドのグラフがその例です これらはより大きなグラフの プレビューであるため パターンがわかるだけで 十分なので 目盛線などは逆に 邪魔になります 目盛線とラベルは より詳細なグラフに使用され これらが値の分析などに 役立ちます 先程 フードトラックの オーナーは 売上の範囲と値を 調べたいと言いました 現在 横軸の目盛線が ２つあり １つは０で もう１つは 月の最高売上に近い値です これではグラフの真ん中の 値の推定が困難です また目盛線が多すぎると 邪魔になります ここでは目盛線が７つあり 少し多すぎます これらを考慮して 密度を考えてください このグラフの場合 内容と用途から ４つの目盛線が 適切かと思われ 軸の範囲が変われば それに合わせ調整します 目盛線やラベルをつける時 理解しやすい 直感的な値を使います この場合 20の倍数です 同様に 時間の経過は ７日おきが直感的なので 30日の場合 5つの目盛線になります 範囲を考慮しながら 軸をデザインし 目盛線とラベルの密度を 調整しました グラフが効果的なものに なってきましたが グラフは複雑な視覚的要素で まだやるべきことがあります どうすれば 棒グラフや軸の意味を 素早く直感的に 伝えられるでしょう？ そこで次のトピック 説明です 説明はグラフの目的を 伝えるのに重要で わかりやすく また アクセシブルにします 説明 つまりグラフに 先立って表示される記述は グラフをより わかりやすくします 過去30日のパンケーキ売上 グラフだと明確にできます これは簡潔で グラフの一部として 見られるべきです このグラフを AppのUIで見ると タイトルの 総売上 が 既にコンテキストを与え セグメントコントロールの ラベルが 30日 と表示されて 時間の範囲が 素早く組み立てられます いいスタートですね もう１つ明瞭にすべきなのは 縦軸が何を表すかです 売上金額を表すのか？ パンケーキの売上数なのか？ 解決策の１つがラベルです 縦軸の上に“パンケーキ 売上数”と書きます でもここでは小さいですね グラフの意味を 明確にしたいので もう１つの解決策は タイトルによるコンテキスト化です 見出しを“パンケーキの 売上数”にすれば グラフの意味が明瞭です コンテキストの提供は グラフ作りに重要です グラフの１番の理由を 要約すれば 説明度合いがかなり向上します 多くのグラフが この方法を使用します 例えば天気の 降水量グラフの上には 主題が説明されています ここでは “弱い雨が予測される” “弱い雨が９分以内に始まり 36分間続く”とあります

文章からグリフに至るまで いろいろな方法で 要点を伝達できます この例では シンプルに行きます グラフのタイトルを書き換え 要点を伝達します “総売上 パンケーキ1,234枚” これによって グラフの値が形作られ 最も重要な情報を要約します データを文脈化することで 要点を要約でき グラフの導入が楽になります 誰にとってもわかりやすく アクセシブルになるのです 何を見るかが明瞭になり グラフの詳細を 調べるのが困難な 障害を持つ方にとっては これは非常に 役に立ちます アクセシビリティと言えば オーディオグラフはVoiceOverの 重要な解説になります オーディオグラフを使うと... オーディオグラフ VoiceOverが軸について 説明してくれます グラフの説明 横軸は時間　縦軸は売上 データ系列が１つあります オーディオグラフはデータを いくつかに要約し カスタマイズもできます これらの解説 特に縦軸と横軸に関しては 視覚なしの グラフの伝達に重要です オーディオグラフが無理なら アクセシビリティテキスト ラベルなどで VoiceOverがアクセス できるようにしましょう コンテキストを与え 要点を要約し オーディオグラフなどを 使用することで 必要なものが揃いました しかしインタラクションで さらに効果的にできます インタラクションで さらに深いレベルで データを探究し理解できます 例えばインタラクションで グラフの一部に焦点を当て 幅広いコンテキストで データを探究できます また日･週･月･年別で 見ることも可能です インタラクションでパンケーキの 売上グラフを充実させられます ある特定の日の売上数を 調べられるのは オーナーにとって便利です インタラクション ツールチップで グラフに触って特定の値を ハイライトし読むことができます タッチベースのインタ ラクションを簡単にするため タッチターゲットを 大きめにしましょう タッチターゲットをマークと 同じ大きさにする代わりに ターゲットをグラフの高さ 全部を使うことによって 棒グラフの上の 白い部分もタッチして ツールチップを 使いやすくできます

インタラクションは タッチだけではなく 状況や障害などによって いろんな方法で デバイスとインタラクション することができます ですのでいろんな インプット方法で グラフを使いやすく アクセシブルにします つまりタッチやクリックの インタラクションごとに 同様のインプット経験を キーボードやVoice Control スイッチコントロールや VoiceOverで提供すべきです これらをデザインするにつき 画面上の変化を 明瞭にすべきで スイッチコントロールや VoiceOverの フォーカスインディケータを タッチターゲット同様大きめ にデザインするべきです

VoiceOverを サポートするためには アクセシビリティラベルを 考慮せねばなりません マークをデザインした時 VoiceOverがデータ値を 探索できるようにしました VoiceOverが 棒グラフの１つを指すと “６月１日 パンケーキ 36枚”と読み上げます では このラベルの いい点を見てみましょう 非常に簡明です オーディオグラフが既に描写した 時間などの軸の名前など 不要な情報は繰り返しません 略語など 短縮した言葉は使いません “６−１”ではなく “６月１日”と読み上げます そして36は枚数で あることも明瞭にします またデータ値の 文脈化の際の順序にも 気をつけます この場合日付が最初です こうすれば特定値の検索が 簡単になります

５月27日　５月28日 ５月29日　５月30日 パンケーキ41枚 またデータが 理解しやすくなります 特にグラフの 別の箇所にジャンプして コンテキストで 情報が得られるからです

ラベルのデザインは グラフのゴールに基づきます 例えばマップの 自転車ルートの標高グラフは 値は表示しませんが ルートの標高の 変化パターンは 多くの棒グラフが使用され 個々を見るのは困難です しかし いいデザインだと ラベルを部分付けします “3.6から4.4マイル” “100フィート登り ５フィート下る” 逆に グラフが詳細が見れる 大きなグラフの 小さなプレビューの ボタン内なら ボタンを含めたグラフ全体を １つのラベルとして 要約するべきでしょう グラフの焦点 わかりやすさ アクセシビリティを デザインに組み込み もう１つ トピックがあります カラーです カラーは個性を足し 明瞭さを高めます これまで白黒のグラフでした カラーはAppの中で グラフを浮き上がらせますが それ以上に伝達できることが あります カラーでカテゴリを 選別できます フィットネスAppの アクティビティリングがいい例です また天気Appの 暑さのように 強度を示すこともできます また色を省いて 機能に焦点を当てられます ヘルスケアAppでは 最大･最小心拍数を ハイライトします

強調に色を使います グラフを理解しやすく するための追加として 重要な情報を伝える方法の １つとして色を使います 例としてAppでフード トラック２台を追跡します １台はサンフランシスコに もう１台はクパチーノです この２つの場所での 売上を比較するため グラフに変更を加えます どうすればいいか？ 折れ線グラフを使えますが どっちがどっちか わかりません ラベルもレイアウトも 識別できません １日１日を識別するため 印をつけて 区別することができます サンフランシスコは丸 クパチーノは四角です 凡例が必要になります 色を足して 違いを明確にできます 色は印の上に 足さねばなりません 色盲の方には違いが わからないかもしれません カラー以外で区別 のような システム設定で 重要になります カラーでデータを表示する時 考慮すべきことがあります まず カラーには意味が あることを考えること 例えばバッテリーの 充電具合の緑と赤 文化によって色に 意味があるときもあります アメリカでは 株式の利益を緑で示し 損失を赤で示すのが普通です しかし中国のように 他国では赤が利益を示し 緑が損失を 示すこともあります

この例では青と緑で いいでしょう 特にこれといった 色の意味合いはありません しかしAppのルックスと 感覚に色をカスタマイズ したいとしたら？

カラーをカテゴリに使用する時 比重を考えましょう ある色が他を圧倒するなら 階級の意味かもしれません サンフランシスコに 濃い紫色を使い クパチーノに鮮やかな ピンクを使うとします クパチーノの明るいピンクが サンフランシスコの 暗い紫に勝り クパチーノが重要に見えます 彩度と光度を調整し 均等に見えるようにします よくなりました もう少し調整が必要ですが 均等な比重になり どちらの都市が上だとは 見えないようになりました カラーで比重を調整するのは １つのツールです グラフの何かに 焦点を当てたいなら 色で比重を持たせるのが 適切な場合もあります フィットネスAppの トレンドグラフはこの方法で 最近の活動を ハイライトします パレットを選ぶ時 アクセシビリティと 読みやすさを考慮しましょう 名前で識別しやすく 対照的な色を選ぶのが 基本ルールです サンフランシスコの紫と クパチーノのピンクの代わり 紫と緑を使いましょう また お互い識別 できるだけでなく 背景も考慮しましょう お互いはっきり区別でき グラフ全体で見て 目立たせることで 目の不自由な方も使用でき 全体的にもいいデザインです 色盲の方にもわかるよう 色を選びましょう 色盲フィルターで 確認できます 最後にダークモードにも ライトモードにも対応するよう システム設定を 尊重しましょう コントラストの場合も そうです それでは今日のおさらいです パンケーキトラックAppの グラフをデザインしました そのためにゴールを伝え VoiceOverに最適な マークを選びました 一見して値を読み取れる 軸と範囲と目盛線を設定し コンテキストと概要で 解説を加え 詳細を表示できる インタラクションを追加し カラーを足してグラフを さらに向上させた上 さらに色を使って ２つの都市での売上を 比較できる２つ目のグラフを 作成しました どのステップでも グラフのデザインにおいて その焦点と 使いやすさとアクセシビリティに 注目しました これにより効果的なグラフに なりました ここでデザインしたグラフは Appのコンテキスト内にある 全グラフシステムの一部です 同様のデザインプロセスで 素敵なパンケーキグラフを さらにデザインできます パンケーキが食べたいな ええ 私も

ありがとうございました