iOSヒューマンインターフェイスガイドラインまとめ

iOSヒューマンインターフェイスガイドラインまとめ UIデザイン
2021.09.20
UIデザイン

UIデザインへの理解を深めるために、iOSのヒューマンインターフェイスガイドラインを項目ごとにまとめてみました。

今回はバーとビューとコントロールについてです。

2021年9月の情報です。

バー

ナビゲーションバー

注意
  • 没入型のアクション時に一時的に非表示にすることを検討
  • ビューのタイトルを表示することを検討
  • コンテキストを強調したい場合は大きなタイトルを使用
  • 大きなタイトルの時のナビゲーションバーの境界線を非表示に
  • 多すぎるコントロールは使用しない
  • 標準の戻るボタンの使用
  • パンくずリストは含めない
  • ボタンの間に十分なスペースを入れる
  • セグメント化されたコントロールを使用して階層のフラット化を検討

検索バー

注意
  • 検索を実装するときはテキストフィールドではなく、検索バーを使用
  • [クリア]ボタンを有効にする
  • 必要に応じて[キャンセル]ボタンを有効にする
  • 必要に応じて、ヒントになるプレースホルダーや１行の説明文を上に表示
  • 検索バーの下に結果リストなどのショートカットを表示することを検討
  • スコープバーにより検索範囲を絞ることができる（検索結果を改善すればスコープバーは必要ない）

サイドバー

ナビゲーションとアクションへクイックアクセスできる

分割ビューのプライマリー列に配置

注意
  • コレクションビューリストレイアウトのサイドバーを使用
  • 階層をフラット化しトップレベルの画面に素早く移動
  • 可能であれば、ユーザーがサイドバーのコンテンツをカスタマイズできると良い
  • ユーザーがサイドバーを非表示にすることができる（デフォルトは表示）
  • 階層が２レベルより深い場合は、分割ビューの補足列としてリストビューを使う

ステータスバー

画面の上端にあり、時間や、セルラーキャリア、バッテリー量などのデバイスの状態の情報を提供。

注意
  • システム提供のステータスバーを使用
  • 明るいか暗いかをアプリに合わせて決める
  • ナビゲーションバーを使用すると背景が自動的に表示される
  • ステータスバーの背景は透明なので後ろに単一の色やグラデーション、ぼやけたビューを配置すると読みやすくなる
  • フルスクリーンで表示中は一時的にステータスバーを隠す
  • ステータスバーを永久に非表示にはしない

タブバー

トップレベルのセクションへ素早く切り替える。デフォルトではタブバーは半透明。キーバードが表示されているときは非表示。

注意
  • タブバーとツールバーが同じビューに一緒に表示されることはない
  • アクションを実行するためには使用しない
  • ３〜５個の最小限のタブを使用
  • iPadOSアプリはタブバーの代わりにサイドバーの使用を検討
  • モーダルビュー内以外のビューで非表示にはしない
  • タブを削除したり、無効にしたりしない（利用できない理由を表示する）
  • タブバーに接続されているビューのみに影響する
  • バッジを利用して新しい情報が利用可能であることを示す
  • SFシンボルを使用し、デバイスサイズや向きに応じたサイズにすることを検討（縦向きではグリフルとタイトルは縦に並び、横向きではグリフとタイトルは並べて表示できる）

ツールバー

現在にビューに関するアクションを実行するためのボタンがある

デフォルトでは半透明。

キーボードのある画面では非表示。

注意
  • 現在のビューで実行する可能性が最も高いアクションを目立つ場所に配置できる（ビューを変えいる場合はタブバー）
  • iPadOSアプリではツールバーでなく、ナビゲーションバーを検討（ナビゲーションバーは下部にあるボタンよりも目立つ）
  • ボタンが３つや数個のツールバーではタイトルを簡潔にしボタンの間にスペースを開ける
  • ボタンが３つ以上のツールバーではSFシンボルを使ってスペースの節約を検討
  • ツールバーにセグメント化されたコントロールは使用しない（ツールバーのアクションは現在のページに固有）

ビュー

アクションシート

現在のコンテキストに関連する２つ遺贈の選択肢を提示するアラート。小さい画面では下からスライド表示。大きい画面ではポップオーバー。

注意
  • 破壊的なアクションを実行する前にアクションシートで確認
  • 破壊的なアクションを再考できるようにキャンセルボタンを配置
  • アクションシートはスクロールさせない

アクティビティビュー

アクティビティは、コピー、お気に入り、検索など、現在のコンテキストで役立つタスク。

アクティビティを使用して、アプリが実行できるカスタムサービスやタスクにユーザーがアクセスできる。

注意
  • カスタムアクティビティで使用する画像はアンチエイリアシングを使用し、ドロップシャドを含めない
  • テンプレート画像はマスクを使用アイコンを作成し、約70px✖️70pxの領域の中央に配置
  • アクティビティタイトルは短くする（長すぎる場合はテキストの縮小、切り捨てをする）
  • タイトルに会社名や製品名は含めない
  • アプリに適用できないタスクは除外できる
  • [アクション]ボタンを使用してアクティビティビューを表示

アラート

アラートは、アプリまたはデバイスの状態に関連する重要な情報を伝え、フィードバックを要求する。

タイトル、オプションのメッセージ、1つ以上のボタン、および入力を収集するためのオプションのテキストフィールドで構成。

これらの構成可能な要素を除いて、カスタマイズすることはできません。

注意
  • 使用頻度は最小限にする（重要度が高まる）
  • 横向きと縦向きの両方で外観をテストする
  • 可能な限りタイトルは１行
  • メッセージを必要とする場合は１行または２行に収まるように短く
  • ネガティブで直接的な表現の方が良い。”あなた”や”私”のような代名詞は避ける
  • ボタンの説明はいらない
  • ボタンのタイトルを引用符で囲まない
  • 通常、２つのボタンから選択できるようにする
  • ボタンには動詞を使用し、受け入れる場合は[OK]を使い”はい／いいえ”の使用は避ける
  • タップする可能性が高いボタンを右側に配置（キャンセルボタンは常に左側）
  • 破壊的なボタンはスタイルで特定する
  • アラートが表示されているときにアプリを終了すると[キャンセル]される

コレクション

コレクションは、写真のセットなど、順序付けられたコンテンツのセットを管理し、カスタマイズ可能で視覚性の高いレイアウトで表示。

サイズが異なるアイテムを表示するのに特に適している。一般的に、コレクションは画像ベースのコンテンツを披露するのに理想的。

注意
  • 標準のグリッドレイアウトで十分であれば、新しいデザインは作成しない
  • テキストのコレクションの代わりにテーブルを使用することを検討
  • レイアウト変更はできるが注意が必要

画像ビュー

透明または不透明な背景上に単一の画像または一連のアニメーション画像を表示する。

画像ビュー内では、画像を特定の場所に拡大、拡大縮小、サイズ変更、または固定することができる。デフォルトでは、画像ビューは非対話型。

注意
  • システムがスケーリングを行う必要がないように、画像はビューに合うように事前にスケーリングするのが理想
  • システムがスケーリングする場合はすべての画像が同じサイズと形状であると望ましい結果を得やすい

ページ

コンテンツのページ間で線形ナビゲーションを実装する。スクロールまたはページカールのいずれかを使用して、ナビゲーション中のページ間の遷移を管理。

スクロールトランジションには特定の外観はない。ページカールトランジションを使用すると、実際の本のページのようにめくる。

注意

ページビューコントローラに隣接していないページ間をジャンプする方法はないので、必要な場合はカスタムコントロールを実装する

ポップオーバー

コントロールまたは領域をタップしたときに画面上のコンテンツの上に表示される一時的なビューのこと。

ポップオーバーは大画面に最適で、ナビゲーションバー、ツールバー、タブバー、テーブル、コレクション、画像、マップ、カスタムビューなどのさまざまな要素を含めることができる。

ポップオーバーが表示されている間は他のビューとの対話は通常無効になる。

注意
  • iPhoneではポップオーバーではなく、フルスクリーンのモーダルビューを使用する
  • [キャンセル]や[完了]などの閉じるボタンを含める必要がある（変更を保存するかに関係なくポップオーバーが不要になったときに閉じる必要がある）
  • 非モーダルのポップオーバーを自動的に閉じるときは作業内容を保存する（明示的に[キャンセル]ボタンを押した場合のみ作業を破棄する）
  • ポップオーバーの矢印でそれを表した要素を示す必要がある（ポップオーバーを表示するためにタップした要素をカバーすべきではない）
  • 一度に１つのポップオーバーを表示する
  • ポップオーバーの上にはビューを表示しない（アラートは除く）
  • １つのポップオーバーを閉じて別のポップオーバーを開く時に１回のタップでできるようにする（余計なタップを避けることが望ましい）
  • ポップオーバーを大きくしすぎない
  • ポップオーバーはカスタムできるが、ユーザーにポップオーバーとして認識されるようにする（標準のコントロールとビューを含める）
  • ポップオーバーのサイズを調整する時はアニメーションを使用し新しいポップオーバーが古いポップオーバーにとって変わったような印象を与えない

スクロールビュー

スクロールビューを使用するとドキュメント内のテキストや画像のコレクションなど、表示領域よりも大きいコンテンツを参照する。

スワイプ、フリック、ドラッグ、タップ、ピンチすると、スクロールビューがジェスチャーに従い、コンテンツを表示またはズームする。スクロールビュー自体には外観はないが、ユーザーが操作すると、一時的なスクロールインジケーターが表示される。

ページングモードでは、スクロールすると、現在のページを移動するのではなく、コンテンツのまったく新しいページが表示される。

注意
  • アプリで理にかなっている場合にピンチやダブルタップでズームインやズームアウトをできるようにする（最大と最小値を設定する）
  • ページングモードの時はページコントロールの表示を検討する（同じ軸のスクロールインンジケータじゃ無効にする）
  • スクロールビュー内にスクロールビューを表示しない
  • １つの画面に１つのスクロールビュー（２つのスクロールビューが必要な場合は影響を避けるため、異なる方向にスクロールさせることを検討する）

シート

シートは、現在のコンテキストから離れることなく、親ビューに関連する個別のタスクを実行するのに役立つ。

たとえば、Mailはシートを使用してメールボックスを離れることなくメールを作成し、Translateはシートを使用して翻訳したい単語を定義するのに役立つ辞書ビューを表示する。

注意
  • 没入型でない簡単なタスクにシートを使用する（没入型の場合はフルスクリーンモーダルを使う）
  • シートを途中で止めることで内容を段階的に開示することを検討する
  • メインタスクを一時停止せずに使用できる補足のアイテムは非モーダルシートで表示する（非モーダルシートでアイテムを選択すると親ビューはそれに応じて更新されフィードバックを提供する）
  • サイズ変更可能なシートには一般的にグラバーを含める
  • ポップオーバーの上にシートを表示しない（シートを表示する前にポップオーバーを閉じる）

分割ビュー

分割ビューは、アプリのトップレベルでの階層コンテンツの表示を管理する。

分割ビューは、プライマリ列、オプションの補足列、およびコンテンツのセカンダリペインを表示する2〜3列で構成。

プライマリ列の変更は、オプションの補足列の変更を促進する。

コンテンツ階層の複数のレベルをナビゲートするのに役立つ。

注意
  • iPadではタブバーの代わりに分割ビューを使う
  • 列のタイプごとに適切なスタイルにする（プライマリ列にはサイドバーの外観）
  • プライマリ列と補足列でアクティブな選択と永続的に強調表示する
  • 必要に応じて、列間でコンテンツをドラッグアンドドロップできるようにする

テーブル

セクションまたはグループに分割できる行のスクロールする単一列のリストとしてデータを表示する。

上の写真の右からプレーン／グループ化／インセットグループ化の３つのスタイルがある

注意
  • テーブルの幅は広すぎず、狭すぎず
  • テーブルの内容を素早く表示し始める。行にデータを入力し、画像は利用可能になった時に表示する。（広範囲なテーブルコンテンツの読み込みは待たない）
  • コンテンツの読み込み時に進捗状態を伝える（アクティビティインジケーター）
  • コンテンツを新鮮に保つ（テーブルの最初または最後にコンテンツを追加し、準備ができたらスクロールできるようにする）
  • 更新コントロールの表示を推奨
  • インデックスを右揃えの要素を含むテーブル行と組み合わせない

テーブルセル

すべての標準のテーブルセルスタイルでは、チェックマークや開示インジケーターなどのグラフィカル要素も使用できる。これらの要素を追加すると、タイトルとサブタイトルに使用できるスペースが減少する。

上の写真は右からBasic（基本）/Subtitle（サブタイトル）/Right Detail（右揃えのサブタイトル）/Left Detail（左揃えのサブタイトル）

注意
  • クリッピングを避けるためテキストは簡潔にする
  • [削除]ボタンにカスタムタイトルを使用することを検討
  • セルの選択が行われたらフィードバックを返す
  • 非標準のテーブル行のカスタムテーブルスタイルを設計する（アプリによって大幅にカスタマイズされたテーブルが必要になる場合がある）テーブルビューを参照
テーブルビュー

テキストビュー

テキストビューには、複数行のスタイル付きテキストコンテンツが表示される。

任意の高さにすることができ、コンテンツがビューの外側に広がるときにスクロールを有効にする。

デフォルトでは、テキストビュー内のコンテンツは左揃えで、システムフォントを黒で使用する。テキストビューが編集可能な場合、ビュー内をタップするとキーボードが表示される。

注意
  • テキストを読みやすくする（ダイナミックタイプの使用を推奨）
  • 太字などのユーザー補助オプションを有効にしてテストする必要がある
  • 適切なキーボードタイプを表示

Webビュー

Webビューは、埋め込みHTMLやWebサイトなどのリッチWebコンテンツをアプリ内に直接ロードして表示する。

メールは、たとえばWebビューを使用して、メッセージにHTMLコンテンツを表示する。

注意
  • 必要に応じて、前後のナビゲーションを有効にする
  • Webビューを使用してWebブラウザを構築することは避ける

コントロール

ボタン

システムボタンはPlain/Gray/Tinted/Filledの４つのスタイルがあり、Small/Medium/Largeの３つのサイズで量できる。

注意
  • グリフとタイトルを使用して人々が即座に理解できるようにコンテンツを作成する
  • タイトルの下にサブタイトルをつけることができる（サブタイトルは説明文ではなく、”カートに追加”の場合はアイテムの個数など）
  • すぐに完了しないアクションにはアクティビティインジケータを表示するボタンを作成
  • 最も使われる可能性の高いボタンには塗りつぶしを使用（塗りつぶしは多用しない）
  • ボタンのサイズではなく、スタイルで複数のオプションから優先度を強調する
  • ボタンには（Normal/Primary/Cancel/Destructive）の４つの役割がある
  • 最も選択する可能性が高いものにPrimaryの役割を与える
  • 破壊的なアクションにはPrimaryび役割を与えない（そのアクションが最も選択される可能性があったとしても）

トグルボタン

オンとオフ、表示と非表示など反対の状態を切り替えるシステムボタンの一種。

特徴
  • コンテンツなたはビューの状態を管理する
  • トグルボタンの状態を伝えるために色だけに頼らない（カスタマイズする場合は背景の形状を変えたり、ボタンのコンテンツを変えるなど）

ポップアップボタン

排他制御するメニューを表示できるシステムボタンの一種。

特徴
  • 排他制御するオプションのフラットリストを表示できる
  • デフォルトの選択を表示する
  • スペースが限られ、全てのオプションを表示する必要がないときはポップアップボタンを検討

プルダウンボタン

ボタンの目的に直接関係するアクションメニューを表示するシステムボタンの一種。

特徴
  • ビューのすべてのアクションをプルダウンボタンに配置しない（主要なボタンは含めない）
  • 目立つ必要のないアイテムは[その他]ボタンを使ってプルダウンで表示することを検討
  • メニューの目的が破壊的であるときはアクションシートやポップオーバーで石の確認をする（誤ってデータを失うことを防ぐ）
  • セパレーターを使って、メニューの関連するアイテムをグループ化する（3つ以上のクループの使用は見づらくなる）
  • アイテムの意味を明解にする場合はグリフを使用する
  • メインメニューを短くしたい場合はサブメニューの使用を検討（メインメニューにグリフを使うなど意味を明確にし、内容を確認するためにサブメニューを開く必要がないようにする）

閉じるボタン

閉じるボタンはその親ビューを閉じる。

特徴
  • ビュー内で”閉じる”ボタンまたは"完了"ボタンのどちらかを表示し、両方を表示しない
  • ”完了”と”キャンセル”のように反対のアクションのペアがある場合は、閉じるボタンはいらない

一般的なボタン

特徴
  • 情報ボタンは現在のコンテキストやビューの詳細を表示する
  • 行の内容に関する詳細を表示する場合のみ、リストまたはテーブル行で情報ボタンを使用する
  • リストの子ビューに移動するなどナビゲートが必要な場合は開示インジケータのアクセサリコントロールを使用する

カラーウェルズ

タップするとシステムのカラーぴっかーが表示される。乾ピッカーを使用して、テキスト、図形、マーキングツールやその他の要素の色を選択できる。

注意
  • システムが提供するカラーピッカーの使用を推奨

コンテキストメニュー

iOS 13以降では、コンテキストメニューを使用して、インターフェイスを乱雑にすることなく、画面上のアイテムに関連する追加機能にアクセスできる。

注意
  • コンテキストメニューは一貫している（ページ特有のメニューは作らない）
  • 最も一般的に使用されるコマンドのみを含める
  • 各コマンドにグリフを含める
  • サブメニューを使って管理する（細部メニュのレベルは１つまで）
  • 最も頻繁に使うメニューを上部に配置
  • セパレータを使って関連するメニューをグループ化
  • 同じアイテムにコンテキストメニューと編集メニューを提供するのは避ける
  • アイテムのプレビューボタンは避ける（タップでプレビューできるので、明示的な[開く]ボタンはいらない）

メニューの編集

ユーザーは、テキストフィールド、テキストビュー、Webビュー、または画像ビューの要素を長押しまたはダブルタップして、コンテンツを選択し、コピーや貼り付けなどの編集オプションを表示できる。

注意
  • デフォルトでは、オプションには[切り取り]、[コピー]、[貼り付け]、[選択]、[すべて選択]、および[削除]コマンドが含まれ、オプションで無効にすることができる（何かがすでに選択されている場合、メニューに[選択]オプションを含めるべきではない）
  • メニューの形状を変更することはできないが、配置は必要に応じて変えられる
  • 編集メニューと同じ機能のコントロールは実装しない（編集メニューからコピーできる場合は[コピー]ボタンを設置しない）
  • 多くの場合、画像ラベルやソーシャルメディアのステータスなどの静的コンテンツをコピーする
  • ボタンに編集オプションは追加しない
  • 編集操作を元に戻せる（実行を確認する必要はないが、元に戻すサポートが必要）
  • カスタムコマンドの追加が可能（システム提供のコマンドの後に表示）
  • カスタムコマンドの数は最小限にする
  • カスタムコマンド名は短くする

ラベル

ラベルは、画面上のインターフェイス要素を説明するか、短いメッセージを提供する。

ラベルを編集することはできませんが、ラベルの内容をコピーできる場合がある。

ラベルには任意の量の静的テキストを表示できるが、短くすることを推奨。

注意
  • ラベルを読みやすくする
  • 動的タイプの採用を推奨
  • 太字などのユーザー補助オプションを有効にしてテストする必要がある

ページコントロール

ページコントロールは、インジケーター画像の行を表示する。

各画像はフラットリストのページを表す。

スクロールするインジケーターの行は、リストをナビゲートして目的のページを見つけるのに役立つ。

ページコントロールは任意の数のページを処理できるため、カスタムリストを作成する時に特に役に立つ。

注意
  • ページ数が多い場合はページのリストビューの提供を検討
  • スクロールトランジションのアニメーションはタップした時のみ使用
  • ページコントロールは画面下部の中央に配置
  • ページコントロールの全体的な意味を強化するう場合のみ、インンジケータ画像をカスタマイズする
  • インジケータ画像はシンプルで、３つ以上の異なる画像を使用しない
  • インジケータ画像の着色はさせる

ピッカー

ピッカーは、ユーザーが選択できる個別の値の1つ以上のスクロール可能なリストを表示できる。

日付ピッカーは、カレンダービューで日を選択したり、テンキーを使用して日付と時刻を入力したりするなど、値を選択するための方法をサポートする。

下画像は順番にコンパクト／インライン／ホイールのスタイル。これにプラットフォームと日付ピッカーモードに基づいてシステムが決定するスタイルがある

モードが４つある

  • 日付（月、日、および年を表示）
  • 時間（時間、分、および（オプションで）AM / PM指定を表示）
  • 日付と時刻（日付、時間、分、および（オプションで）AM / PM指定を表示）
  • カウントダウンタイマー（最大23時間59分までの時間と分を表示）

カウントダウンタイマーのモードはコンパクトやインラインスタイルでは使用できない

注意
  • スペースに制約がある場合はコンパクトな日付ピッカーを使用
  • デフォルトで分リストは６０個の値（０〜59）が含まれる。15分間隔（0、15、30、および45）のようにインターバルは増やすことができる

進行状態インジケーター

アクティビティインジケーターとプログレスバーを使用して、アプリが停止していないことをユーザーに知らせ、待機時間を明示する。

注意
  • アクティビティが定量化できる場合はプログレスバーを使用する（プログレスバーはタスクを完了するのに必要な時間を伝えるのに最適）
  • アクティビティインジケータを動かし続ける
  • アクティビティインジケーターの上にラベル（待っている間に役立つ情報）を含める
  • ナビゲーションバーやツールバーでプログレスバーを使用する場合はトラックの埋められていない部分を非表示にするよう構成する必要がある
  • アプリに合わせてプログレスバーをカスタマイズすることを検討

コンテンツコントロールの更新

更新コントロールは特殊なタイプのアクティビティインジケーターであり、デフォルトでは非表示になっており、再読み込みするビューを下にドラッグすると表示される。

たとえば、メールでは、受信トレイメッセージのリストを下にドラッグして、新しいメッセージを確認できる。

注意
  • 自動で更新する（自動更新を定期的に行う）
  • オプションで更新コントロールにタイトルを含めることができる
  • タイトルは更新されるコンテンツに関する情報（最後の更新日時など）を提供し、更新の実行方法の説明ではない

セグメント化されたコントロール

セグメント化されたコントロールは、2つ以上のセグメントの線形セットであり、各セグメントは相互に排他的なボタンとして機能する。すべてのセグメントの幅が同じ。

ボタンと同様に、セグメントにはテキストまたは画像を含めることができる。

セグメント化されたコントロールは、さまざまなビューを表示するためによく使用される。

注意
  • セグメントの数は5つ以下
  • テキストと画像を混在させない
  • カスタマイズする場合は見栄えが良く、位置がずれていないことを確認する

スライダー

スライダーは、親指と呼ばれるコントロールを備えた水平トラックであり、指でスライドして、画面の輝度レベルやメディア再生中の位置などの最小値と最大値の間を移動できる。

スライダーの値が変化すると、親指までのトラックの部分が色で塗りつぶされる。

オプションで、最小値と最大値の意味を示す左右のアイコンを表示できる。

注意
  • スライダーに付加価値がある場合は外観をカスタマイズする
  • スライダーでボリュームをコントロールしない（ボリュームビューを使用）

ステッパー

ステッパーは、増分値を増減するために使用される2セグメントのコントロール。

デフォルトでは、ステッパーの一方のセグメントにはプラス記号が表示され、もう一方のセグメントにはマイナス記号が表示される。これらの記号は、必要に応じてカスタム画像に置き換えることができる。

注意
  • ステッパー自体には値がないので、影響する値を明確にする
  • 値が大きく変化する場合はステッパーは使用しない（数回タップする小さな変更に向いている）

スイッチ

スイッチは、相互に排他的な2つの状態（オンとオフ）を視覚的に切り替える。

注意
  • アプリのスタイルに合わせてスイッチに色をつけることを検討
  • テーブル行のみでスイッチを使用する
  • スイッチの値を説明するラベルはさせる
  • スイッチを使用して関連するインターフェイスの可用性を管理することを検討

テキストフィールド

テキストフィールドは、1行の固定高さのフィールドであり、多くの場合、角が丸く、ユーザーがキーボードをタップすると自動的にキーボードが表示される。

テキストフィールドを使用して、電子メールアドレスなどの少量の情報を要求する。

注意
  • プレースホルダーなど目的を伝えるヒントをテキストフィールドに表示する
  • 必要に応じて、テキストフィールドの右端に[クリア]ボタンを表示する
  • パスワードなどの機密データを要求するときは安全なテキストフィールドを使用する
  • 画像とボタンを使用して、テキストフィールドに明快さと機能を提供する（一般的にテキストフィールドの左端に目的を表示し、右端を使用してブックマークなどの追加機能の存在を示す）
タイトルとURLをコピーしました