Human Interface Guidelines -Content編-

2023.01.27
Apple iOS iPad iPhone
Tweet

今回は Human Interface Guidelines – Components Content編-です
HIGの以下のページを日本語訳しました。
https://developer.apple.com/design/human-interface-guidelines/components/all-components

		  目次
		  
		  
		  1. ▼ Charts1.1. ■ Anatomy
1.2. ■ Marks
1.3. ■ Axes
1.4. ■ Descriptive content
1.5. ■ Charts Best practices
1.6. ■ プラットフォームごとの考慮事項
2. ▼ Image views2.1. ■ ImageView Best practices
2.2. ■ Content
2.3. ■ プラットフォームごとの考慮事項
3. ▼ Text views3.1. ■ TextView Best practices
3.2. ■ プラットフォームごとの考慮事項
4. ▼ Web views4.1. ■ WebView Best practices
4.2. ■ プラットフォームごとの考慮事項

		
▼ Chartsグラフは、データをグラフィカルで親しみやすい方法で伝えるのに役立ちます。 効果的なチャートは、データ内のいくつかの重要な情報を強調し、人々が考えて意思決定を行うことに役立ちます。

例えば、以下のような目的でグラフを使用することができます。
今後の天候が自分の計画にどのように影響するか知る
株価を分析して、過去のパフォーマンスを理解し、トレンドを発見する
フィットネスデータを確認して、トレーニングの進捗を確認し、新しい目標を設定する
■ Anatomyグラフは、データ内の値を描写し。それらに関する情報と伝える幾つかの要素で構成されています。
マーク

マークはデータを視覚的に表現したものです。

チャートは1つまたは複数のデータ値のシリーズを提供し、各値をマークに割り当てることによって作成します。

棒グラフ・折れ線グラフ・散布図など、表示するグラフのスタイルを指定するには、棒・線・点などのマークの種類を選択します。

ここのデータをチャートに描写する作業をプロットと呼び、マークを含む領域をプロットエリアと呼びます。
それぞれのマークは、数値・日付・カテゴリなどのデータ値を、位置・色・高さなどの視覚的特性と尺度によって、値を描写します。

例えば、特定の高さで値の大きさを表し、特定の位置で値の発生時刻を表すことができます。
グラフに描写されている視覚的な特性を説明するためのコンテンツも提供します。
軸

一連のマークで表現されるデータの参照枠を定義するために使用します。

多くのグラフでは、プロットエリアの端に水平軸と垂直軸の２本の軸が表示され、それぞれの軸は例えば時間やカテゴリといった変数を表します。
軸にはメモリをつけることができ、0%、50%、100%といった軸上の値を視覚的に確認できる基準点となります。

目盛りが、軸の近くにない場合データ値を推定できるように、メモリを基点にプロット領域を区切るグリッド線が表示されます。
また、データを読み取りやすくし、伝えたい重要な情報を強調するためにグラフの要素を複数の方法で記述することができます。

例えば、軸・グリッド線・メモリ・マーク等の項目に名前をつけるラベルや、グラフ要素を説明するアクセシビリティラベルを提供することが可能です。

文脈や詳細を説明するために、説明的なタイトル・サブタイトル・注釈を作成することができます。

必要に応じて凡例も作成し、異なるカテゴリを示す色や形など、マークの位置とは関係ないグラフのプロパティについて説明します。
■ Marks伝えたい情報に基づいてマークの種類を選択します。

最も馴染みのあるマークは、棒・線・点です。
棒グラフ

棒グラフは、異なるカテゴリの値を比較したり相対的な割合を表示するのに役立つグラフです。

時間と共に変化するデータを理解するために使用され、例えば1日の合計歩数のように、それぞれの値から合計を表すことができるデータの場合よく機能します。
折れ線グラフ

線グラフは、時間の経過とともに値がどのように変化するかを示すことができます。

折れ線グラフでは、データ系列内のすべてのデータを線で結びます。

線の傾きによってデータ間の変化がわかり、全体の傾向を視覚化することができます。
ポイントマークグラフ

ポイントマークは、個々のデータを視覚的に区別できるマークとして描写するのに役立ちます。

データの異なる特性がどのように関連しているかを示すことができ、ここのデータを検査し外れ値やクラスターを識別するのに役立ちます。
グラフをよりわかりやすくするために、マークの種類を組み合わせることを検討してください。

例えば、折れ線グラフで経過時間の変化を表す場合、ここのデータポイントを強調するために折れ線の上にポイントマークを追加すると良いでしょう。

線と点を組み合わせることで、全体の傾向を把握品川個々の値にも注目させることができます。
■ Axesグラフの意味によって、固定軸範囲と動的軸範囲を使い分けます。
軸

固定軸範囲では軸の上限と下限は変わりませんが、動的範囲では上限と下限は現在のデータによって変化する可能性があります。
グラフに記載されるデータに対して、最小値と最大値が意味を持つ場合は固定軸での表示を検討してください。

例えば、バッテリーの現在の充電量を示す際の固定軸は、最小値0% 最大値100%であることが期待されます。
一方、データ値が大きく変動する可能性があり、グラフ領域いっぱいにマークを表示したい場合は、ダイナミックレンジの使用を検討してください。

例えば、健康アプリの歩数チャートY軸は、特定の期間内の最大歩数値がグラフの上端に近くなるように変化します。
下限

下限の値は、マークの種類とグラフの用途に基づいて定義します。

例えば、棒グラフではY軸の下限をゼロにするとうまくいきます。

そうすることで、それぞれの棒の相対的な高さを視覚的に比較し、その値を合理的に推定することができるからです。
一方下限をゼロにすると、値間の生きのある差異を見分けることが難しくなる可能性があります。

例えば、心拍数のグラフで常に下限が0であると安静時と活動時の違いが、0から遠く離れた範囲に記載されるため判らなくなる可能性があります。
グリッドライン

軸のメモリとグリッドラインには、使い慣れた値の並びを優先させます。

例えば、0・5・10などの一般的な数列を使用すると、各メモリの値が前の値に5を加えたものだと一目でわかります。

1・6・11という数列も同じ間隔ですが、一般的ではないので値の間隔を考えるのに時間がかかってしまいます。
グリッド線のラベルの外観は、グラフの用途に合わせて調整してください。

グリッド線が多すぎると視覚的に圧倒され、データから注意をそらすことになり、グリッド線が少なすぎると値を推定するのが難しくなります。

これらの要素の適切な密度と視覚的な重みを極めるために、インターフェースないのグラフのコンテキスト・サポートするインタラクション・グラフが可能にするタスクを考慮します。
例えば、グラフを操作して各データポイントを確認できる場合は、グリッド線を少なくしラベルの色を薄くしてデータが視覚的に目立たせることが可能です。
■ Descriptive contentその図表が何を意味するか理解できる説明をつける

図表の目的や機能を説明する情報量の多いタイトルやラベルをつけると、詳細情報を見る際に必要な基本的な情報を提供することができます。
この情報を提供することは、VoiceOverユーザーや特定の種類の認知障害を持つユーザーにとって特に重要です。

なぜなら、調査することを決める前に説明文を頼りに、グラフの目的と主要なメッセージを理解できるからです。
グラフの主要なメッセージを要約し誰にでも親しみやすく役に立つグラフにする

グラフを利用する主な利用は、メインメッセージを支えるデータを表示することですが、ユーザーが素早く把握できるように重要な情報を要約することが不可欠です。
例えば「天気アプリ」では、タイトルとサブタイトルで今度1時間の降水量予測を簡潔に表現し、グラフの詳細を確認することなく最も重要な情報を定評します。
■ Charts Best practices様々なグラフ要素の相対的な重要性を伝えるために、一貫した視覚的な階層を確立してください。

データそのものを一番目立たせ、説明や軸はデータと競合することなく、追加的なコンテキストを提供するようにするのが良いです。
コンパクトな環境では、プロットエリアの幅を最大にし、快適にグラフを検討できるようなスペースを確保する

重要なデータが一定の幅に収まるように、縦軸のラベルをできるだけ短くして、わかりやすさを失わないようにしてください。

また、タイトルなど他の部分に単位を記載し、カテゴリ名などの長い軸のラベルは、重要な情報が見えなくならない範囲でプロットエリア内に配置することも検討してください。
アプリ内のすべてのグラフにアクセスできるようにする

グラフは他のグラフィックと同様に、コンテンツの捉え方にかかわらず誰にとっても完全にアクセス可能である必要があります。

例えば、VoiceOverをサポートすることが不可欠です。

VoiceOverは、画面を見ることなく情報を取得しナビゲートできるように、画面上のコンテンツを説明します。

グラフの構成要素を説明するアクセシビリティ用ラベルを用意するだけではなく、オーディオ・グラフを使用することで、VoiceOverの体験を向上させることができます。

オーディオグラフは、グラフのデータ値やその傾向を音声で表現する一連のトーンを作成し、VoiceOverにグラフの情報を提供します。
データとの相互作用が必要な場合は許可するが、重要な情報は相互作用なしで確認できるようにする

例えば株価の場合、人々は株式の長期的なパフォーマンスに最も関心があることが多いため、アプリでは1日・3か月・5年など、人々が選択した期間のパフォーマンスを示す折れ線グラフが表示されます。

さらに詳しく知りたい場合は、折れ線グラフの中で垂直のインジケータをドラッグすると、選択した時間帯の値が表示されます。
誰もが簡単にグラフを操作できるようにする

グラフのマークが小さすぎて指やポインターで照準が定まらないことがあります。

運動機能の低下した人には使いづらく、誰にとっても不快なグラフになってしまいます。

タップ領域をエリア全体に広げ、そのエリアを横切るようにスクラブしてさまざまな値を表示させることを検討してください。
キーボードコマンドやスイッチコントロールの使用時に、インタラクティブチャートを簡単に操作できるようにする

デフォルトでは、入力タイプはデータファイルの値のシーケンスのように、直線的なシーケンスで個々の画面上の要素を訪問する傾向があります。

もし、チャートでカスタムナビゲーション体験を有効にしたい場合に以下の方法を使用します
アクセシビリティAPIを使用して、チャートの情報を通る論理的で予測可能な経路を指定する方法

前後にジャンプするのではなく、X軸に沿ってナビゲートさせることができます。
グラフの重要な変更に気づきやすくする

マークや軸が変化したときにそれに気づかないと、グラフを読み間違えてしまう可能性があります。

しかし、VoiceOverユーザーやアニメーションをオフにしている人にもわかるように、他の方法でも変化を強調する必要があります。

開発者のためのガイダンスとして、UIAccessibility.Notification（UIKit）またはNSAccessibility.Notification（AppKit）を参照してください。
グラフを周囲のインターフェイスの要素に合わせて配置する

例えば、グラフの先端を画面内の他のビューの先端と揃えるとうまく機能することがあります。

グラフの先端をきれいに保つ方法の1つは、各縦グリッドのラベルをその後方に表示することです。

また、Y軸の目盛りラベルがチャートの先端からはみ出さないように、Y軸を末尾側に移動させることも検討できます。

もし、ラベルが何も関連付けられていないように見える場合は、目盛りを使ってグリッド線に固定することができます。
■ プラットフォームごとの考慮事項iOS・iPadOS・macOS・tvOSについて、追加の考慮事項はありません。
watchOS

一般的にwatchOSアプリで複雑なグラフの操作を必要とすることは避けてください。

可能な限り、一目でわかるように焦点を絞った有益な情報を開示し、付加価値がある場合はシンプルなインタラクションを有効にすることが望まれます。
他のプラットフォームでもアプリを提供している場合、より詳細な情報を表示し、グラフの操作反映を可能にするためにアプリを使用することを検討してください。
例えば、watchOSの心拍数アプリではその日の心拍数データを表示し、iPhone側では複数の異なる機関の心拍数データを表示し、個々のマークを調べることができるようにします。
 
▼ Image viewsImageViewは、透明または不透明な背景上に1枚の画像、場合によっては一連の画像をアニメーションで表示します。 画像の引き伸ばし、拡大縮小、サイズ調整、特定の場所への固定が可能です。 通常、インタラクティブはありません。
■ ImageView Best practicesViewの主な目的が画像を表示するだけの場合、ImageViewを表示します。

画像をユーザーの動作によって変化させたい場合は、ImageViewにボタン動作を追加する代わりに、システムが提供するButtonに画像を表示するよう設定します。
インターフェースにアイコンを表示したい場合、ImageViewの代わりにsymbolやインターフェースアイコンを使用することを検討する

SF Symbolは様々な色と不透明度でレンダリングできる、ベクターベース画像の大規模なライブラリを提供します。

インターフェースアイコンは通常、不透明なピクセルが色を受け取ることができるビットマップイメージです。

シンボルもインターフェースアイコンも、ユーザーが洗濯したアクセントカラーを使用することができます。
■ ContentImageViewには、PNG・JPEG・PDF等のさまざまな形式のリッチな画像データを含めることができます。
画像にテキストを重ねる場合は注意する

画像の上にテキストを合成すると、画像の鮮明度とテキストの読みやすさの両方が低下することがあります。

テキストと画像のコントラストを調整し、テキストシャドウや背景レイヤーを追加するなど、テキストオブジェクトを目立たせる方法を検討するとより効果的です。
アニメーションのシーケンスに含まれる全ての画像に、一貫したサイズを使用することを心がける

ビューに合わせてあらかじめ画像サイズを合わせておくと、システム側で画像調整をする必要がありません。

システムが画像調整を行う必要がある場合、調整対象の画像サイズと形状が同じであればパフォーマンスが向上します。
■ プラットフォームごとの考慮事項iOS・iPadOSについては、追加の考慮事項はありません。
macOS

アプリで編集可能なImageViewが必要な場合は、ImageWellを使用します。

ImageWellは、コピー・ペースト・ドラッグ・デリートキーを使用したコンテンツのクリアをサポートするImageViewです。
クリック可能な画像を作成するには、ImageViewの代わりにImageButtonを使用します。

ImageButtonは画像またはアイコンを含み、ビューに表示され、アプリ固有のアクションを瞬時に開始します。
tvOS

多くのtvOS画像は、複数のレイヤーと透明度を組み合わせて、奥行きのある感じを作り出しています。
watchOS

可能な限り、アニメーションを作成するためにSwiftUIを使用してください。

必要であれば、WatchKitを使用して要素内の画像シーケンスをアニメーション化することができます。
 
▼ Text viewsTextViewは、複数行のスタイル付きテキストコンテンツを表示し、任意に編集することが可能です。

TextViewは任意の高さに設定でき、コンテンツがViewの外側にはみ出すとコンテンツ内でスクロールすることができます。

デフォルトではテキストは左側に揃えられ、システムラベルのテキストカラーが適用されます。

iOSやiPadOSでは編集可能な場合、そのビューを選択するとキーボードが表示されます。
■ TextView Best practices長いテキスト・編集可能なテキスト・特殊な形式のテキストを表示する必要がある場合に使用する

TextViewはTextFieldやLabelと異なり、特殊なテキストを表示し、テキスト入力を受け取るための最も多くのオプションを提供します。

少量のテキストを表示する必要がある場合は、代わりにLabelを使用するか、テキストが編集可能な場合はTextFieldを使用すると簡単です。
テキストを読みやすくする

複数のフォントや色、配置を工夫することは可能ですが、コンテンツの読みやすさを維持することが重要です。

Dynamic Typeを採用し、端末の文字サイズが変わってもテキストが見やすくなるようにすると良いでしょう。

また、太字などのアクセシビリティオプションを有効にして、コンテンツをテストすることも必要です。
有用なテキストは選択できるようにする

エラーメッセージ・シリアル番号・IPアドレス等、有益な情報がTextViewに含まれている場合、それを選択してコピーし別の場所へ貼り付けができるように検討してください。
※ Dynamic Typeとは

iOS全体のテキストサイズを変更することができる機能

設定>アクセシビリティ>画面表示とテキストサイズ>さらに大きな文字から変更可能
※ アクセシビリティオプション

製品をより使いやすくするために、様々な調整が可能な機能のこと

設定>アクセシビリティから変更可能
■ プラットフォームごとの考慮事項macOSの場合追加の考慮事項はありません。
iOS・iPadOS

適切なキーボードの種類を表示します。

キーボードにはいくつかの種類があり、それぞれ異なるタイプの入力を容易にするために設計されています。

データ入力を効率化するために、TextViewの編集時に表示されるキーボードはコンテンツの種類に適したものである必要があります。
tvOS

tvOSでは、TextViewを使用してテキストを表示することができます。

tvOSでのテキスト入力は設計上最小限のため、tvOSでは代わりに編集可能なテキストにTextFieldを使用します。
watchOS

watchOSでは、WatchKitのLabelもしくはSwiftUIのTextViewとしてテキストを表示することができます。
 
▼ Web viewsWebViewは、アプリ内に埋め込まれたHTMLやWebサイト等のリッチなウェブコンテンツを直接読み込み表示するViewです。

例えば、メールアプリはメッセージをHTMLで表示するためWebビューを使用しています。
■ WebView Best practices必要に応じて、現在表示しているページから戻る・進む用のナビゲーションを有効にする

WebViewは進む・戻るナビゲーションをサポートしていますが、この動作はデフォルトで無効になっています。

WebViewを使用して複数のページを訪問する場合はナビゲーション機能を有効にして、操作用のボタンを設置します。
ウェブブラウザを構築するために、Webviewを使用することは避ける

アプリから離れずWebサイトに簡単にアクセスするためにWebViewを使用することは問題ありませんが、

ユーザーがWeb閲覧でメインで使用する「Safari」の機能をアプリで再現することは不要であり推奨されません。
■ プラットフォームごとの考慮事項iOS・iPadOS・macOSでは追加の考慮事項はありません。

また、tvOS・watchOSではサポートされていません。