焦点と選択

焦点は、マウスクリック、キーボードコマンド、リモコンのボタン押下などの操作に応答するスクリーン上のオブジェクトを視覚的に識別します。

焦点は、現在の入力デバイスが必ずしもスクリーンのすべての部分にアクセスできるとは限らない状況に合わせて調整された、簡素化された要素ベースのナビゲーション体験を可能にします。たとえば、人々が指、ポインティングデバイス、または Apple Pencil を使用する多くの場合、ピクセルレベルの精度でスクリーン上の任意の領域をターゲットにすることができます。対照的に、人々がキーボード、リモコン、ゲームコントローラなどの入力デバイスを使用する場合、ピクセルではなく、特定のインターフェイス要素をターゲットにします。

アイテムをフォーカスすることは、必ずしもアイテムを選択することと同じではないことを理解することが重要です。たとえば、tvOS では、一般的に、人々があるジェスチャを使用してインターフェイスコンポーネントに焦点を当て、別のジェスチャでそれを選択します。iPadOS では、新しいビューに切り替えたり、アラートを表示したりするなど、気を散らす動作が選択によって生成されない限り、アイテムに焦点を移動することで項目を選択することもできます。

異なるプラットフォームは、異なる視覚的インジケータを使用して焦点を伝えます。たとえば、iPadOS と macOS では、焦点を当てられたアイテムの周りにリングを描いたり強調表示したりすることで、そのアイテムに注意を向けることができます。tvOS は通常、視差効果を使用して、焦点を合わせたアイテムに奥行きと活気を与えます。焦点効果と操作のシステムの実装は、フォーカスシステム または フォーカスモデル と呼ばれることがあります。

ベストプラクティス

システムが提供するフォーカス効果に依存して下さい。 システムが定義するフォーカス効果は、触覚、応答性、流動性を感じる体験を提供できます。たとえば、tvOS では、人々がすばやくスワイプしてスクリーンの一方の端からもう一方の端に焦点を移動すると、スクリーン上の項目によって焦点が微妙に加速したり減速したりするため、システムは自然な慣性感覚を伝えます。絶対に必要な場合にのみ、カスタムフォーカスシステムの作成を検討してください。

焦点の移動を可能な限り人々が制御できるようにします。 人々はフォーカスシステムを利用して自分があなたのアプリ内のどこにいるのかを知ることができるため、操作なしで焦点を別の項目に移動しないようにすることが重要です。例外は、以前に焦点を当てられたアイテムがもう存在しない場合です。このシナリオでは、視覚的な焦点表示を非表示にするよりも、焦点を新しいアイテムに移動する方が混乱しません。

プラットフォームの考慮事項

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

iPadOS、macOS

ボタン、スライダー、トグルなどのコントロールではなく、リスト項目、テキストフィールド、検索フィールドなどのコンテンツ要素に人々が焦点を当てられるようにします。 iPadOS と macOS では、人々は フルキーボードアクセス (Full Keyboard Access) を使用して、キーボード操作を通じてすべてのコントロールにアクセスできるため、あなたのアプリの主要なコンテンツ機能にのみ焦点を有効にする必要があります。iPadOS アプリでの焦点動作のサポートについて詳しくは、iPad でのキーボードナビゲーションを参照してください。

焦点を当てた項目には、一貫した視覚的外観を使用してください。 たとえば、焦点を当てられたリスト項目にあなたのアプリのアクセントカラーを使用する反転強調を与え、焦点を当てられていないリスト項目が選択されたときに薄い灰色の強調を与えます (開発者向けのガイダンスについては、UICollectionView (UICollectionView) と NSTableView (NSTableView) を参照してください)。

一般に、テキストまたは検索フィールドには焦点リングを使用しますが、リストまたは選択ではハイライトを使用します。 焦点リングを使用して写真などのセルを埋める項目に注意を向けることはできますが、行全体が強調表示されていると、リストやコレクションが見やすくなります。

tvOS

人々があなたのアプリのすべての要素に焦点を当てられるようにします。 スクリーン上のすべての要素にアクセスするには、リモコンまたはゲームコントローラの方向ジェスチャ (または接続されたキーボードの矢印キーを押す事) を使用する必要があります。

フルスクリーン体験では、人々は焦点を移動するのではなく、ジェスチャを使用してコンテンツを操作できるようにします。 項目がフルスクリーンで表示されると、焦点が表示されないため、人々は自然にジェスチャが焦点状態ではなくオブジェクトに影響を与えると想定します。

ポインタを表示しないようにします。 人々は、巨大なスクリーン上で小さなポインタをドラッグしようとするのではなく、焦点を変更することによって一定数の項目をナビゲートすることを期待します。隠しオブジェクトを探すときや飛行機を飛ばすときなど、ゲームプレイ中は自由な動きが理にかなっていますが、人々がメニューやその他のインターフェイス要素をナビゲートするときは焦点モデルを使用してください。あなたのアプリにポインタが必要な場合は、ポインタが非常に目立ち、あなたの体験に統合されていることを確認してください。

さまざまな焦点状態のコンポーネントに対応するインターフェイスを設計して下さい。 tvOS では、焦点を当てることが可能な項目は最大 5 つの異なる状態を持つことができ、それぞれが視覚的に区別されます。項目に焦点を当てるとそのスケールが大きくなることが多いため、常にシャープに見えるように、より大きく焦点を絞ったサイズのアセットを提供する必要があります。また、大きな項目が周囲のインターフェイスを混雑させないようにする必要があります。

状態	説明
	ビューアが項目に焦点を当てていません。焦点を当てられていない項目は、焦点を当てられている項目より目立たないように見えます。
	ビューアは項目に焦点を当てています。焦点を当てられた項目は、前景への上昇、照明、およびアニメーションによって、他のスクリーン上のコンテンツから視覚的に目立ちます。
	ビューアは焦点を当てられた項目を選択します。焦点を当てられた項目は、人々が選択したときに即座に視覚的なフィードバックを提供します。たとえば、ボタンは、選択した外観に遷移する前に、その色を一時的に反転させてアニメーション化します。
	ビューアが何らかの方法で項目を選択またはアクティブにしました。たとえば、写真をお気に入りに追加するために使用できるハート型のボタンは、選択された状態では塗りつぶされ、選択されていない状態では空です。
	ビューアは項目に焦点を移動したり選択したりできません。無効化された項目はアクティブでなく見えます。