Apple ヒューマンインターフェースガイドライン日本語訳 - iOS Visual Design編

August 5, 2021

本記事は、本記事投稿時点の Human Interface Guidelines - iOS を日本語訳したものです。DeepL で機械翻訳を行った後、誤訳が見受けられた際には修正を加えています。

Human Interface Guidelines - iOS #

https://developer.apple.com/design/human-interface-guidelines/

1. Overview
2. App Architecture
3. User Interaction
4. System Capabilities
5. Visual Design
6. Icons and Images
7. Bars
8. Views
9. Controls
10. Extensions

Visual Design - Adaptivity and Layout #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

適応性とレイアウト #

人々は一般的に、お気に入りのアプリケーションをすべてのデバイスで、どのような状況でも使用できることを望んでいます。iOS アプリケーションでは、異なるデバイス、iPad でのマルチタスク時、分割表示時、画面の回転時などに、インターフェイスの要素やレイアウトが自動的に形や大きさを変えるように設定することができます。どのような環境でも優れた体験を提供できる、適応性の高いインターフェイスをデザインすることが重要です。

デバイスの画面サイズと方向性 #

iOS デバイスにはさまざまな画面サイズがあり、縦向きでも横向きでも使用することができます。iPhone X や iPad Pro のようなエッジ・トゥ・エッジのデバイスでは、ディスプレイの角が丸くなっており、デバイスの全体的な寸法と密接に一致しています。iPhone SE や iPad Air などのその他のデバイスでは、ディスプレイは長方形になっています。

アプリケーションが特定のデバイスで動作する場合は、そのデバイスのすべてのスクリーンサイズで動作することを確認してください。 言い換えれば、iPhone 専用アプリは iPhone のすべての画面サイズで動作する必要があり、iPad 専用アプリは iPad のすべての画面サイズで動作する必要があります。

注意

上の表のスケールファクターはすべて UIKit のスケールファクターであり、ネイティブのスケールファクターとは異なる場合があります。開発者向けのガイダンスとしては、scale および nativeScale を参照してください。

画面の解像度がアプリのアートワークに与える影響については、「画像のサイズと解像度」を参照してください。

オートレイアウト #

Auto Layout は、適応性のあるインターフェイスを構築するための開発ツールです。Auto Layout を使用すると、アプリ内のコンテンツを管理するルール（制約）を定義できます。たとえば、利用可能な画面スペースにかかわらず、ボタンを常に水平方向に中央に配置し、画像の下に 8 ポイント配置するように制約することができます。

Auto Layout は、特定の環境変化（特性）が検出されると、指定された制約条件に従って自動的にレイアウトを再調整します。以下のようなさまざまな特性に、アプリが動的に適応するように設定することができます。

• デバイスの画面サイズ、解像度、色域（sRGB/P3）の違い
• デバイスの向きの違い（ポートレート／ランドスケープ
• スプリットビュー
• iPad のマルチタスキングモード
• ダイナミックタイプによる文字サイズの変更
• ロケールに応じて有効になる国際化機能（左から右／右から左へのレイアウト方向、日付／時刻／数字のフォーマット、フォントのバリエーション、テキストの長さ）。
• システム機能の有効化（3D Touch）

開発者向けのガイダンスについては、「Auto Layout Guide」および「UITraitCollection」を参照してください。

レイアウトガイドとセーフエリア #

レイアウトガイドは、実際には画面上に表示されませんが、コンテンツの位置、配置、間隔を補助する長方形の領域を定義します。システムには、あらかじめ定義されたレイアウトガイドがあり、コンテンツの周囲に標準的な余白を適用したり、最適な読みやすさのためにテキストの幅を制限したりすることが簡単にできます。また、独自のレイアウトガイドを定義することもできます。

UIKit で定義されているセーフエリアとレイアウトマージンを遵守してください。 これらのレイアウトガイドは、デバイスやコンテキストに応じた適切なインセットを保証します。また、セーフエリアは、ステータスバー、ナビゲーションバー、ツールバー、タブバーにコンテンツが重ならないようにします。標準システムで提供されるビューには、セーフエリアのレイアウトガイドが自動的に採用されます。

開発者向けのガイダンスとしては、UILayoutGuide、layoutMarginsGuide、readableContentGuide、safeAreaLayoutGuide を参照してください。

サイズクラス #

サイズクラスとは、コンテンツエリアの大きさに応じて自動的に割り当てられる特徴のことです。このシステムでは、ビューの高さと幅を表す 2 つのサイズクラス、レギュラー（広い空間を表す）とコンパクト（狭い空間を表す）が定義されています。

1 つのビューは、サイズクラスの任意の組み合わせを持つことができます。

• レギュラー幅、レギュラー高さ
• コンパクト幅、コンパクト高さ
• 通常の幅、コンパクトな高さ
• コンパクトな幅、通常の高さ

他の環境の変化と同様に、iOS はコンテンツエリアのサイズクラスに基づいて動的にレイアウトを調整します。例えば、縦方向のサイズクラスがコンパクトハイトからレギュラーハイトに変更された場合（ユーザーがデバイスを横向きから縦向きに回転させた場合など）、タブバーの高さが高くなることがあります。

デバイスのサイズクラス #

フルスクリーン表示に適用されるサイズクラスの組み合わせは、画面サイズに応じてデバイスごとに異なります。

マルチタスクのサイズクラス #

iPad では、アプリがマルチタスク構成で動作する場合にもサイズクラスが適用されます。

レイアウトに関する一般的な注意事項 #

初期設定のサイズで主要なコンテンツが明確に表示されるようにします。 重要なテキストを読むために水平方向にスクロールしたり、主要な画像を見るためにズームしたりする必要はありません。

アプリ全体で一貫した外観を維持します。 一般的に、同じような機能を持つ要素は同じように見えるべきです。

重要性を伝えるために、視覚的な重みとバランスを使用します。 大きなアイテムは目を引き、小さなアイテムよりも重要であるように見えます。また、大きなアイテムはタップしやすいので、キッチンやジムなど、気が散りやすい環境でアプリを使用する場合には特に重要です。一般的には、主要な項目は画面の上半分に、左から右に読む場合は画面の左端に配置します。

整理整頓は、スキャンを容易にし、組織や階層を伝えるために使用します。 整列させることで、アプリがすっきりと整理されたように見え、スクロール中の人の集中力を高め、情報を見つけやすくします。また、インデントや配置によって、コンテンツのグループの関連性を示すこともできます。

可能であれば、縦向きと横向きの両方をサポートします。 人々はアプリをさまざまな向きで使いたいと思っているので、その期待に応えることができれば最高です。

文字サイズの変更に対応する。 ほとんどのアプリケーションは、「設定」で異なるテキストサイズを選択すると、それに対応することを期待しています。文字サイズの変更に対応するには、レイアウトの調整が必要な場合があります。アプリでのテキストの使用方法については、「タイポグラフィ」を参照してください。

インタラクティブな要素には、十分なタッチターゲットを用意してください。 すべてのコントロールにおいて、最小で 44pt x 44pt のタプタブルエリアを確保するようにしてください。

アプリを複数のデバイスでプレビューする。 ワイドカラーイメージのような機能は、実際のデバイスでプレビューするのが一般的ですが、Xcode に付属する Simulator を使って、クリッピングなどのレイアウトの問題をチェックすることができます。例えば、ランドスケープモードに対応しているアプリの場合、Simulator を使って、デバイスが左右に回転してもレイアウトが崩れないことを確認することができます。

注意

デフォルトでは、ビューコントローラーは、iPad ではすべての方向を、iPhone では上下逆さまのポートレートを除くすべての方向をサポートしています（開発者向けのガイダンスとしては、supportedInterfaceOrientations を参照）。iPhone X などの一部のデバイスでは、アプリがサポートしているかどうかにかかわらず、上下反転したポートレートモードをサポートしていません。

大きなデバイスでテキストを表示するときには、読みやすさのための余白を適用します。 この余白により、テキストの行が十分に短くなり、快適な読み心地が得られます。

コンテキストの変化への対応 #

コンテキストが変化しても、現在のコンテンツに集中します。 コンテンツは最優先事項です。環境が変化したときにフォーカスを変えると、混乱してイライラしたり、アプリをコントロールできなくなったように感じることがあります。

無駄なレイアウト変更は避けましょう。 デバイスを回転させても、レイアウト全体が変わる必要はありません。たとえば、アプリが縦向きで画像のグリッドを表示している場合、横向きで同じ画像をリストとして表示する必要はありません。代わりに、グリッドの寸法を調整するだけでよいのです。すべてのコンテキストで同等のエクスペリエンスを維持するようにしてください。

アプリがランドスケープでのみ動作することが不可欠な場合は、両方のバリエーションをサポートします。 ランドスケープのみのアプリは、デバイスを左に回転させても右に回転させても同じように動作するはずです。アプリを使うときにデバイスを回転させるように指示してはいけません。サポートされていない方向にデバイスを持ったときに、アプリが自動的に回転しないと、人は本能的にデバイスを回転させることを知ってしまいます。

回転に対するアプリの対応は、状況に応じてカスタマイズします。 例えば、デバイスを回転させてキャラクターを動かすゲームでは、ゲームプレイ中にデバイスの向きを変えるべきではありません。しかし、メニューやイントロを現在の方向に合わせて表示することは可能です。

iPad と iPhone の両方に対応することを目指します。 どちらのタイプの iOS デバイスでもアプリを実行できる柔軟性があると、ユーザーに喜ばれます。アプリの特定の機能（電話など）が iPhone 専用のハードウェアを必要とする場合は、iPad ではその機能を隠すか無効にして、アプリの他の機能を使ってもらうことを検討してください。

既存のアートワークを再利用する際は、アスペクト比の違いに注意してください。 画面サイズによってアスペクト比が異なるため、アートワークが切り取られたり、レターボックスやピラーボックスになったりすることがあります。どのディスプレイサイズでも、重要なビジュアルコンテンツが表示されるようにしてください。

フルスクリーンでのデザイン #

画面いっぱいにビジュアルエレメントを配置する。 背景はディスプレイの端まで表示され、テーブルやコレクションなどの縦方向にスクロール可能なレイアウトは下部まで表示されるようにします。

インタラクティブなコントロールを、画面の一番下や隅に明示的に配置することは避けてください。 人々は、ホーム画面やアプリケーションスイッチャーなどの機能にアクセスするために、ディスプレイの下端でスワイプジェスチャーを使用します。これらのジェスチャーは、この領域に実装するカスタムジェスチャーをキャンセルする可能性があります。また、画面の隅は、人が快適に手を伸ばすのが難しい場所でもあります。

クリッピングを防ぐために、必要なコンテンツを挿入します。 一般的に、コンテンツは中央に配置し、左右対称に挿入することで、どの方向から見ても美しく、角丸で切り取られたり、センサーの筐体で隠れたり、ホーム画面にアクセスするためのインジケータで隠れたりしないようにします。最良の結果を得るためには、システムが提供する標準的なインターフェース要素とオートレイアウトを使用してインターフェースを構築し、UIKit が定義するレイアウトガイドとセーフエリアを遵守してください。デバイスが横向きの場合、ゲームなどの一部のアプリケーションでは、コンテンツのためのスペースを確保するために、タップ可能なコントロールを画面の下側（セーフエリアの下側）に配置することが適切な場合があります。画面の上部と下部にコントロールを配置する場合は、一致したインセットを使用し、コントロールを操作しようとしたときに誤ってホームインジケータを狙ってしまうことがないように、ホームインジケータの周囲に十分なスペースを確保してください。ホームインジケータは画面の中央に配置されるため、アプリケーションのインターフェースとの相対的な位置が変わることがあります。

全角のボタンを挿入。 画面の端まではみ出したボタンは、ボタンに見えないかもしれません。全角ボタンの側面には、UIKit の標準的なマージンを取ります。画面の下部に表示される全角ボタンは、角を丸くしてセーフエリアの下部に合わせると最も見栄えが良くなります。これにより、ホームインジケーターと衝突しないようになります。

ディスプレイの主要な機能を隠したり、特別な注意を払ったりしないでください。 角が丸いデバイス、センサーハウジング、ホーム画面にアクセスするためのインジケータを、画面の上下に黒いバーを置いて隠そうとしないでください。また、ブラケット、ベゼル、図形、説明文などの視覚的な装飾を用いて、これらの部分に特別な注意を払うようなこともしないでください。

ステータスバーの高さに注意してください。 iPhone のフルスクリーンモデルでは、ステータスバーの高さが他のモデルに比べて高くなっています。ステータスバーの下にコンテンツを配置する際に、ステータスバーの高さが固定されていると想定している場合は、現在のデバイスに応じてコンテンツを動的に配置するようにアプリをアップデートする必要があります。なお、フルスクリーンの iPhone では、音声録音や位置情報の追跡などのバックグラウンドタスクがアクティブになっていても、ステータスバーの高さは変わりません。

現在ステータスバーを非表示にしている場合は、フルスクリーンの iPhone 上でアプリケーションを実行する際にその判断を再検討してください。 フルスクリーンの iPhone モデルは、他のモデルよりもコンテンツのための垂直方向のスペースが広く、ステータスバーは、アプリケーションが十分に活用できないであろう画面の領域を占めています。また、ステータスバーには、人々が有用と考える情報も表示されます。ステータスバーを隠すのは、付加価値と引き換えにすべきです。

ホーム画面にアクセスするためのインジケータの自動非表示は最小限にとどめてください。 自動非表示を有効にすると、ユーザーが数秒間画面に触れていない場合、インジケータが消えます。再び画面に触れると再び表示されます。この動作は、ビデオや写真のスライドショーのような受動的な表示の場合にのみ有効にしてください。

レイアウトに関するその他の検討事項 #

エッジツーエッジのディスプレイでウェブサイトが美しく見えるようにします。 webkit.org の「Designing Websites for iPhone X」をご覧ください。

Visual Design - Animation #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/animation/

アニメーション #

iOS 全体に施された美しく繊細なアニメーションは、人と画面上のコンテンツとのつながりを視覚的に感じさせます。適切に使用されたアニメーションは、状況を伝え、フィードバックを提供し、直接操作している感覚を高め、ユーザーが自分の行動の結果を視覚化するのに役立ちます。

アニメーションやモーション効果は、慎重に使用してください。 アニメーションを使うことが目的になってはいけません。過剰なアニメーションは、特に没入感のないアプリケーションでは、ユーザーに違和感を与える可能性があります。 iOS では、ホーム画面などで奥行きを感じさせるために、視差効果などのモーションエフェクトを使用しています。これらのエフェクトは、理解度や楽しさを向上させる効果がありますが、使いすぎるとアプリが見づらくなり、操作しづらくなることがあります。モーションエフェクトを導入する場合は、必ずテストを行い、効果を確認するようにしてください。

リアリティと信頼性を追求する。 人は芸術的な表現を受け入れる傾向がありますが、動きに意味がなかったり、物理的な法則に反していたりすると、違和感を覚えるものです。例えば、画面の上から下にスライドさせて景色を見せた場合、上に戻して景色を消すことができなければなりません。

一貫したアニメーションを使用する。 慣れ親しんだ、流れるような体験は、ユーザーを飽きさせません。ユーザーは、スムーズなトランジション、デバイスの向きの流動的な変化、物理ベースのスクロールなど、iOS 全体で使われている微妙なアニメーションに慣れています。ゲームのような没入感のある体験を提供する場合を除き、カスタムアニメーションは組み込みのアニメーションと同等のものにしましょう。

アニメーションをオプションにする。 アクセシビリティの環境設定でモーションを減らすオプションが有効になっている場合、アプリケーションのアニメーションを最小限にするか、なくすようにします。ガイダンスについては、「モーション」を参照してください。

Visual Design - Branding #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/branding/

ブランディング #

ブランディングを成功させるには、単にアプリにブランドアセットを追加するだけでは不十分です。優れたアプリは、スマートなフォント、カラー、イメージの決定によって、独自のブランドアイデンティティを表現します。ブランディングは、アプリの中で人々にコンテキストを与えるのに十分ですが、目障りになるほどではありません。

洗練された、目立たないブランディングを行う。 人々がアプリを利用するのは、広告を見るためではなく、楽しみ、情報を得たり、仕事をしたりするためです。最高の体験を得るためには、アプリのデザインにブランドをさりげなく組み込む必要があります。アプリのアイコンの色をインターフェイス全体に使用することは、アプリのコンテキストを提供する優れた方法の一つです。

優れたアプリのデザインをブランディングに邪魔されてはいけません。 何よりも、アプリが iOS アプリのように感じられるようにしましょう。直感的で、操作しやすく、使いやすく、コンテンツに重点を置いたものにしましょう。アプリが他のプラットフォームで提供されている場合でも、一貫したブランディングに注力しすぎてデザインが希薄になるのは避けましょう。

ブランディングよりもコンテンツを重視しましょう。 画面上部にブランド資産を表示するだけのバーを持続的に表示すると、コンテンツを表示するスペースが狭くなります。その代わりに、独自のカラースキームやフォントを使用したり、背景をさりげなくカスタマイズしたりするなど、ブランディングを邪魔しない方法を検討しましょう。

アプリ全体にロゴを表示する誘惑に負けない。 コンテキストを提供するために必要な場合を除き、アプリ全体にロゴを表示することは避けてください。これはナビゲーションバーでは特に重要で、タイトルがあった方が便利です。

Apple の商標ガイドラインを遵守する。 Apple の商標は、アプリの名前やイメージに表示すべきではありません。Apple の商標リストと Apple の商標を使用するためのガイドラインを参照してください。

ヒント

App Store では、お客様のブランドを強調する機会が増えます。ガイダンスについては、「App Store Marketing Guidelines」をご覧ください。

Visual Design - Color #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

カラー #

色は、活力を与えたり、視覚的な連続性を持たせたり、ステータス情報を伝えたり、ユーザーのアクションに応じてフィードバックを与えたり、データを視覚化したりするのに最適な方法です。アクセントカラーを選ぶ際には、システムのカラースキームを参考にしてください。単色でも複数色でも見栄えがよく、アクセシビリティやアピアランスモードにも適応します。

オブジェクトの区別や重要な情報の伝達を色だけに頼らないでください。 アプリで色を使って情報を伝える場合は、色覚障害やその他の視覚障害を持つユーザーが理解できるように、テキストラベルやグリフの形状を必ず提供してください。

コミュニケーションのために色を適切に使用してください。 重要な情報への注意を喚起する色の力は、控えめに使用することで高まります。例えば、重要な問題を警告する赤い三角形は、アプリ内の他の場所で重要でない理由で赤が使用されていると、効果が薄くなります。

アプリのロゴに合わせて、限られたカラーパレットを選択することを検討してください。 色をさりげなく使うことは、ブランドを伝える素晴らしい方法です。

アプリ全体のインタラクティブ性を示す色の選択を検討してください。 「メモ」では、インタラクティブな要素は黄色、「カレンダー」では、インタラクティブな要素は赤です。インタラクティブ性を示すアクセントカラーを定義した場合、アプリ内の他の色と競合しないように注意してください。

アクセントカラーの 2 つのバージョンを用意して、明るいモードと暗いモードの両方で見栄えがするようにします。 アクセントカラーにシステムカラーを使用すると、両方の表示モードが自動的にサポートされます。

インタラクティブな要素と非インタラクティブな要素に同じ色を使用しないでください。 インタラクティブな要素と非インタラクティブな要素の色が同じだと、どこをタップすればいいのかわからなくなってしまいます。

アートワークや半透明が周辺の色に与える影響を考慮する。 アートワークのバリエーションによっては、視覚的な連続性を維持し、インターフェイスの要素が強すぎたり弱すぎたりするのを防ぐために、近くの色を変更する必要がある場合があります。例えば、マップは、マップモードでは明るい配色で表示されますが、サテライトモードでは暗い配色に切り替わります。また、ツールバーのような半透明の要素の背後に配置されたり、その要素に適用されたりすると、色が異なって見えることがあります。

さまざまな照明条件でアプリの配色をテストする。 室内と屋外では、部屋の雰囲気、時間帯、天候などによって照明が大きく異なります。コンピュータ上で見ている色が、実際にアプリを使用したときにも同じように見えるとは限りません。晴れた日の屋外など、複数の照明条件でアプリをプレビューし、色の見え方を確認してください。必要に応じて色を調整し、大半の使用環境で最高の表示を実現します。

True Tone ディスプレイの色への影響を考慮する。 True Tone ディスプレイは、環境光センサーを使ってディスプレイの白色点を自動的に調整し、現在の環境の照明条件に適応させます。読書、写真、ビデオ、ゲームを主な目的とするアプリでは、白色点の適応スタイルを指定することで、この効果を強めたり弱めたりすることができます。開発者向けのガイダンスとして、「UIWhitePointAdaptivityStyle」を参照してください。

他の国や文化において、色の使用がどのように受け取られるかを考慮してください。 例えば、赤が危険を意味する文化もあれば、赤が肯定的な意味合いを持つ文化もあります。アプリの色が適切なメッセージを伝えるようにしてください。

アプリ内のコンテンツを認識しにくい色の使用は避けてください。 例えば、色覚障害のあるユーザーは、一部の色の組み合わせを識別できない場合があります。また、コントラストが不十分だと、アイコンやテキストが背景に溶け込んでしまい、視覚障害のあるユーザーにとってコンテンツが読みづらくなります。詳しくは、「色とコントラスト」を参照してください。

システムカラー #

iOS には、さまざまなシステムカラーが用意されており、鮮やかさや、「コントラストを上げる」や「透明度を下げる」などのアクセシビリティ設定の変更に自動的に適応します。システムカラーは、単独でも組み合わせても、明るい背景でも暗い背景でも、また、明るい外観でも暗い外観でもよく映えます。

システムカラーの値をアプリにハードコーディングしないでください。 以下に示すカラーバリューは、アプリのデザインプロセスの参考にするためのものです。実際の色の値は、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。システムカラーを適用するには、必ず API を使用してください。開発者向けのガイダンスとしては、UIColor（UIKit）および Color（SwiftUI）を参照してください。

また、iOS 13 では、半透明ではうまくいかないまれなケースで使用できる、6 種類の不透明なグレーカラーが導入されています。たとえば、グリッド内のラインやバーなど、交差したり重なったりする要素は、不透明にしたほうが見栄えがよくなります。一般に、UI 要素には意味的に定義されたシステムカラーを使用します。

ダイナミックなシステムカラー #

iOS では、ティントカラーに加えて、セマンティックに定義されたシステムカラーが用意されており、ライトモードとダークモードの両方に自動的に適応します。セマンティックカラーとは、見た目や色の値ではなく、その目的を伝える色のことです。例えば、iOS では、ラベル、セパレータ、塗りつぶしなど、背景領域と前景コンテンツで使用する色を定義しています。

iOS では、システムカラーとグループ化されたカラーの 2 つの背景色セットが定義されています。それぞれの背景色セットには、情報の階層を伝えるのに役立つ、一次、二次、三次のバリエーションが含まれています。一般的に、テーブルビューがグループ化されている場合はグループ化された背景色セットを使用し、そうでない場合はシステムの背景色セットを使用します。開発者向けのガイダンスとしては、「UI 要素の色」を参照してください。

どちらの背景色でも、一般的には以下のような方法で階層を表現します。

• 全体像を示すプライマリ
• 全体像の中でコンテンツや要素をグループ化するための二次色
• 二次的な要素の中でコンテンツや要素をグループ化するための三次的なもの

iOS では、フォアグラウンドコンテンツに以下の色を定義しています。

ダイナミックシステムカラーの意味を再定義しないでください。 人々に一貫した体験を提供し、あらゆる状況でインターフェイスが美しく見えるようにするために、ダイナミックシステムカラーを意図的に使用してください。

ダイナミックなシステムカラーを再現しようとしないでください。 ダイナミックシステムカラーは、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。システムカラーに合わせてカスタムカラーを作成するのではなく、ダイナミックシステムカラーを使用してください。

カラーマネージメント #

画像にカラープロファイルを適用します。 iOS のデフォルトのカラースペースは Standard RGB（sRGB）です。このカラースペースに色を正しくマッチさせるために、画像にカラープロファイルが埋め込まれていることを確認してください。

ワイドカラーを使用すると、互換性のあるディスプレイでの視覚体験が向上します。 ワイドカラーディスプレイは、P3 色空間に対応しており、sRGB よりも豊かで彩度の高い色を表現できます。その結果、ワイドカラーを使用した写真やビデオはよりリアルになり、ワイドカラーを使用したビジュアルデータやステータスインジケータはよりインパクトのあるものになります。必要に応じて、カラープロファイルは Display P3 を使用し、16 ビット/ピクセル（1 チャンネル）で、画像は PNG 形式で書き出します。なお、ワイドカラー画像の設計や P3 カラーの選択には、ワイドカラーディスプレイが必要です。

色空間に合わせた画像や色のバリエーションを必要に応じて提供する。 一般的に、P3 の色や画像は、sRGB のデバイスでは期待通りに表示される傾向があります。しかし、よく似た P3 の色同士を sRGB で表示すると、区別がつかないことがあります。また、P3 スペクトルの色を使ったグラデーションも、sRGB デバイスではクリップして見えることがある。このような問題を回避するためには、Xcode プロジェクトのアセットカタログに明確な画像と色を用意し、ワイドカラーと sRGB の両方のデバイスで視覚的な忠実性を確保することができます。

アプリケーションの色を、実際の sRGB およびワイドカラーディスプレイでプレビューします。 必要に応じて調整することで、どちらのディスプレイでも同じように優れたビジュアル体験が得られます。

ヒント

ワイドカラーディスプレイを搭載した Mac では、システムカラーピッカーを使って P3 カラーを選択してプレビューし、sRGB カラーと比較することができます。

Visual Design - Dark Mode #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

ダークモード #

iOS 13.0 以降では、「ダークモード」と呼ばれる、システム全体が暗い外観になるように選択できます。ダークモードでは、すべての画面、ビュー、メニュー、コントロールに暗めのカラーパレットが使用され、暗めの背景の中で前景のコンテンツが目立つように、より鮮やかな色が使われます。ダークモードは、すべてのアクセシビリティ機能をサポートしています。

「設定」では、ダークモードをデフォルトのインターフェーススタイルとして選択したり、外観モード間の自動変更をスケジュールすることができます。これらの選択はシステム全体のレベルで行われるため、一般的に、すべてのアプリケーションが自分の好みを尊重することが期待されます。

ユーザーが「設定」で選択した外観モードに対応する。 アプリ固有の外観モードオプションを提供すると、ユーザーは複数の設定を調整しなければならないため、手間がかかります。さらには、システム全体のアピアランス選択に対応していないため、アプリが壊れていると思われてしまうかもしれません。

明るい外観と暗い外観の両方でデザインをテストしてください。 両方の外観でインターフェイスがどのように見えるかを確認し、それぞれに対応するように必要に応じてデザインを調整します。一方の外観ではうまくいくデザインでも、もう一方の外観ではうまくいかない場合があります。

ダークモードでは、コントラストと透明度のアクセシビリティ設定を調整して、コンテンツが快適に読めるようにします。 ダークモードでは、「コントラストを上げる」と「透明度を下げる」を別々に、または同時にオンにして、コンテンツをテストする必要があります。暗い背景の上に暗い色のテキストを置くと、読みにくくなる場所があるかもしれません。また、ダークモードで「コントラストを上げる」をオンにすると、暗いテキストと暗い背景の間の視覚的なコントラストが低下することがあります。視力の強い人はコントラストの低いテキストを読むことができるかもしれませんが、視覚障害のある人にとってはそのようなテキストは読みづらいかもしれません。詳しくは、「色とコントラスト」を参照してください。

ダークモードの色 #

ダークモードのカラーパレットには、暗い色の背景色と明るい色の前景色が含まれています。これらの色は、モード間やアプリケーション間で一貫した感触を維持しながら、コントラストを確保するために慎重に選択されています。

ダークモードでは、ベースカラーとエレベーテッドカラーと呼ばれる 2 種類の背景色を使用して、ダークなインターフェースを重ねたときの奥行き感を強調しています。ベースカラーは暗い色で、背景のインターフェースが後退しているように見え、エレベーテッドカラーは明るい色で、前景のインターフェースが前進しているように見えます。

システムの背景色を優先します。 ダークモードはダイナミックで、ポップオーバーやモーダルシートなどのインターフェースが前面に出てくると、背景色がベースカラーからエレベーテッドカラーに自動的に変わります。また、マルチタスク環境ではアプリ間の、マルチウィンドウ環境ではウィンドウ間の視覚的な分離のために、システムは昇順の背景色を使用します。カスタムの背景色を使用すると、システムが提供するこれらの視覚的な区別を人々が認識しにくくなります。

現在の外観に適応するダイナミックカラーを使用する。 セパレータのような意味的な色は、現在の外観に自動的に適応します（ガイダンスについては、「動的なシステムカラー」を参照してください）。カスタムカラーが必要な場合は、アプリのアセットカタログにカラーセットアセットを追加し、カラーのライトバリエーションとダークバリエーションを指定することで、現在のアピアランスモードに適応できるようになります。ハードコードされた色の値や、適応できない色の使用は避けてください。

すべての表示において、十分なカラーコントラストを確保してください。 システムで定義された色を使用すると、前景と背景のコンテンツ間のコントラスト比が適切になります。カスタムカラーの場合は、特に小さいテキストの場合、7:1 のコントラスト比を目指してください。詳しくは、「動的なシステムカラー」を参照してください。

白い背景の色を和らげる。 ダークモードでコンテンツに白い背景を使用しなければならない場合は、周囲の暗いコンテンツに対して背景が光らないように、少し暗めの白を選びます。

関連するガイダンスについては、「色」を参照してください。

イメージ、アイコン、シンボルの色 #

本システムでは、ダークモードで自動的に美しく表示される SF 記号や、明暗両方の表示に最適化されたフルカラー画像を使用しています。

可能な限り、SF シンボルを使用してください。 シンボルは、ダイナミックカラーを使って色合いを変えたり、鮮やかさを加えたりすると、どちらの表示モードでも美しく見えます。

必要に応じて、個々のグリフを明暗の外観に合わせてデザインします。 ライトモードで中空のアウトラインを使用しているグリフは、ダークモードではソリッドな塗りつぶした形状にした方が見栄えがよい場合があります。

フルカラーの画像やアイコンが美しく見えるようにする。 ライトモードとダークモードの両方で見栄えがする場合は、同じアセットを使用してください。一方のモードでしか見栄えがしない場合は、アセットを変更するか、ライトモードとダークモードのアセットを別々に作成します。アセットカタログを使用して、アセットを 1 つの名前の付いた画像にまとめる。

素材 #

鮮やかな色は、暗い色の背景で文字のコントラストを保つのに役立ちます。

ラベルには、システムで提供されているラベルカラーを使用してください。 一次、二次、三次、四次のラベルカラーは、見た目の明るさや暗さに自動的に対応します。関連するガイダンスについては、「タイポグラフィ」を参照してください。

システムビューを使ってテキストフィールドやテキストビューを描画する。 システムビューとコントロールを使用すると、アプリのテキストがどのような背景でも美しく表示され、鮮やかさの有無に応じて自動的に調整されます。可能な場合は、自分でテキストを描画するのではなく、システムが提供するビューを使用してテキストを表示します。開発者向けのガイダンスとして、UITextField および UITextView を参照してください。

鮮やかさと素材の相互作用について詳しくは、「素材」をご覧ください。

Visual Design - Launch Screen #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

起動画面 #

ローンチスクリーンは、アプリの起動時に瞬時に表示され、すぐにアプリの最初の画面に切り替わることで、アプリの速さや反応の良さを印象づけます。起動画面は、芸術的な表現の場ではありません。あくまでも、アプリがすぐに起動し、すぐに使えるという印象を高めるためのものです。すべてのアプリは、起動画面を提供する必要があります。

異なるデバイスの画面サイズやマルチタスクなどの環境に対応するために、Xcode のストーリーボードを使用して起動画面を提供します。ストーリーボードは柔軟に対応できるので、1 つのストーリーボードですべての起動画面を管理することができます。開発者向けのガイダンスとしては、「Responding to the Launch of Your App」を参照してください。

重要

起動画面に静止画像を使用しないでください。デザインをレイアウトする際に、さまざまな画面サイズの寸法を知る必要がある場合は、「デバイスの画面サイズと向き」を参照してください。iOS 14 以降では、起動画面の容量は 25MB に制限されています。

起動画面は、アプリの最初の画面とほぼ同じになるようにデザインします。 アプリの起動が完了したときに異なる外観の要素が含まれていると、起動画面とアプリの最初の画面の間に不快なフラッシュが発生する可能性があります。また、起動画面がデバイスの現在の外観モードと一致していることを確認してください。詳しくは、「ダークモード」を参照してください。

起動画面にはテキストを表示しないようにしてください。 起動画面のコンテンツは変更されないため、表示されるテキストはローカライズされません。

起動を軽視する。 人々は、コンテンツにすばやくアクセスしてタスクを実行できるアプリケーションを重視します。アプリのインターフェイスに似せた起動画面をデザインすることで、アプリがすぐに起動するような錯覚を与えます。起動時間が短いことと合わせて、このデザインアプローチは、アプリがすぐに反応するように感じさせます。ゲームの場合、起動画面は、ゲームが最初に表示する画面にスムーズに移行するようにします。

宣伝はしない。 起動画面はブランディングの機会ではありません。スプラッシュスクリーンや「About」ウィンドウのようなエントリーエクスペリエンスをデザインしてはいけません。ロゴやその他のブランディング要素は、アプリの最初の画面に固定されている場合を除き、入れないでください。ゲームやその他の没入型アプリで、最初の画面に移行する前にソリッドカラーが表示される場合は、そのソリッドカラーのみを表示する起動画面を作成することができます。

Visual Design - Materials #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/materials/

マテリアル #

iOS には、奥行きを感じさせる半透明の効果を生み出すマテリアル（ぼかし効果）が用意されています。マテリアルの効果により、ビューやコントロールは、前景のコンテンツの邪魔になることなく、背景のコンテンツをほのめかすことができます。この効果を得るために、マテリアルは背景の色情報を前景のビューに通す一方で、背景のコンテキストをぼかして読みやすさを維持します。

システムで定義されたマテリアルを使用すると、システムのライトモードとダークモードにこれらの効果が自動的に適応するため、どのような状況でもエレメントが美しく見えます。

ヒント

マテリアルを使用するには、ビュー階層に視覚効果ビューが存在する必要があります。開発者向けのガイダンスとして、UIVisualEffectView を参照してください。

システムが使用している素材を参考にしてください。 可能な限り、同じ機能を持ち、同じ素材を使用しているシステム提供のビューと自分のカスタムビューを比較してください。

テキスト、塗りつぶし、グリフ、セパレータには、システムが提供する色を利用してください。 システムが提供する色は、半透明の背景でこれらのアイテムを自動的に美しく見せます。詳しくは、「ダイナミックなシステムカラー」を参照してください。

可能であれば、SF 記号を使用してください。 ダイナミックシステムカラーを使ってシンボルを着色したり、鮮やかな効果を適用したりすると、どのような状況でもシンボルが美しく見えます。一方、フルカラーのイメージは、背景とのコントラストが十分ではなく、背景が半透明のビューで使用すると、場違いな印象を与えることがあります。関連するガイダンスについては、「SF シンボル」を参照してください。

システムで定義されたマテリアルと鮮やかさ #

iOS では、前景のコンテンツと背景の外観の間の視覚的な分離を制御するために、特定の領域で使用できる素材が定義されています。システムが提供するマテリアルには、ほとんどの背景によく映える明るい色と暗い色のバリエーションがあります。

iOS 13 では、コンテンツコンテナで使用するために、透光性のレベルが異なる 4 つのマテリアルが定義されています（各マテリアルにはダークバリアントも含まれています）。

• システム超薄型マテリアル
• システム薄型マテリアル
• システムマテリアル (デフォルト)
• システム厚型マテリアル

素材を選ぶ際には、コントラストと視覚的な分離を考慮してください。 鮮やかさを演出する素材の選び方に絶対的なルールはありません。この選択をする際には、次のことを考慮してください。

• 厚みのある素材は、文字などの細かい部分のコントラストを高めます。
• 半透明の素材は、背景にあるコンテンツを目に見える形で思い出させることで、人々がコンテキストを維持するのに役立ちます。

iOS 13 では、ラベル、塗りつぶし、セパレータについて、それぞれの素材との相性を考慮した鮮やかさの値が定義されています。鮮やかさは、背景色をサンプリングし、彩度と値を変更することで、UI 要素を明るくしたり暗くしたりします。鮮やかな UI 要素は、素材との一体感が増し、半透明の効果を高めます。

ラベルと塗りつぶしにはそれぞれ複数のレベルの鮮やかさがあり、セパレータには 1 つのレベルがあります。レベルの名前は、要素と背景の間のコントラストの相対的な量を示しています。デフォルトのレベルが最もコントラストが高く、4 分の 1（存在する場合）が最もコントラストが低くなります。

第 4 世代を除き、あらゆる素材のラベルに以下の鮮やかさの値を使用できます。薄手の素材や超薄手の素材に 4 値を使用するのは、コントラストが低すぎるのでお勧めできません。

• ラベル (デフォルト)
• 二次ラベル
• 第三次ラベル
• 第四次ラベル

すべての素材の塗りつぶしには、以下のような鮮やかさの値を使用できます。

• フィル (デフォルト)
• 二次フィル
• 三次フィル

iOS では、セパレータ（separator）のデフォルトの鮮やかさの値を 1 つ定義しており、すべての素材でうまく機能します。

鮮やかさの効果は、そのセマンティックな意味に基づいて選択してください。 これらの効果を混在させないようにしてください。たとえば、セパレータにラベル効果を使用しないでください。

Visual Design - Terminology #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/terminology/

用語集 #

アプリ内のすべての単語は、ユーザーとの会話の一部です。この会話を利用して、ユーザーがアプリを快適に使えるようにしましょう。

慣れ親しんだ、わかりやすい言葉やフレーズを使う。 テクノロジーは人を威嚇するものです。理解できないような頭字語や専門用語は避けましょう。ある言葉やフレーズが適切かどうかは、ユーザーについて知っていることを参考にしてください。一般的に、万人受けするアプリでは、高度な技術用語は避けるべきです。上級者や技術者を対象としたアプリでは、そのような言葉が適切な場合もあります。

インターフェースのテキストは、明確で簡潔にしてください。 人は、短くて直接的なテキストを素早く簡単に吸収し、タスクを達成するために長い文章を読まされることを好みません。最も重要な情報を特定し、それを簡潔に表現し、目立つように表示することで、探しているものを見つけたり、次に何をすべきかを理解するために多くの文章を読む必要がなくなります。

インタラクティブな要素を適切に識別する。 ある要素が何をするものなのか、一目でわかるようにしましょう。ボタンやその他のインタラクティブな要素をラベル付けする際には、「接続」「送信」「追加」などの動作動詞を使用してください。

恩着せがましく聞こえるような言葉は避けましょう。 we、our、me、および my は避けてください（例：「our tutorial」や「my workouts」）。これらの言葉は、侮辱的または恩着せがましいと解釈されることがあります。

くだけた、親しみやすい口調を心がけましょう。 インフォーマルで親しみやすいスタイルは、ランチタイムに人と話すときのような感覚です。たまには短縮形を使ったり、you や your を使ってユーザーに直接話しかけるようにしましょう。

ユーモアを使うときは注意が必要です。 ユーザーはインターフェイスのテキストを何度も読む可能性があることを忘れないでください。また、ある文化でのユーモアが他の文化でも通用するとは限らないことも覚えておいてください。

適切で一貫性のある言葉とイメージを使用してください。 ガイダンスは常にその場の状況に応じて適切なものを選びましょう。例えば、iPad を使っている人に、iPhone のヒントや画像を見せてはいけません。プラットフォームに合った言葉を使う。タッチスクリーン上のコンテンツは、タップ、フリック、スワイプ、ピンチ、ドラッグして操作します。物理的なボタンや 3D Touch に対応したコンテンツを押します。デバイスを回転させたり、振ったりする。

日付を正確に伝える。 「今日」や「明日」などの親しみやすい言葉を使うのは適切ですが、現在の地域を考慮しないと、これらの言葉は混乱を招いたり、不正確になったりします。例えば、午前 0 時前に始まるイベントがあるとします。あるタイムゾーンでは、そのイベントは今日始まるかもしれません。別のタイムゾーンでは、同じイベントが昨日始まったかもしれません。一般的に、日付はイベントを見る人のタイムゾーンを反映すべきです。しかし、フライトトラッキングアプリなどでは、フライトの開始日と出発地のタイムゾーンを明示した方がわかりやすい場合があります。

Visual Design - Typography #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/

タイポグラフィ #

Apple は、iOS アプリケーションで使用できる 2 つのタイプファミリーを提供しています。

San Francisco（SF） San Francisco は、SF Pro、SF Pro Rounded、SF Mono、SF Compact、SF Compact Rounded を含むサンセリフ体のタイプファミリーです。SF Pro は iOS、macOS、tvOS のシステムフォントで、SF Compact は watchOS のシステムフォントです。それぞれのプラットフォームの UI に合わせてデザインされたシステムフォントは、読みやすく、ニュートラルなフォントです。

ニューヨーク（NY） New York は、SF フォントを引き立てるためにデザインされた独特のトーンを持つセリフ書体です。NY は、グラフィックディスプレイ（大きなサイズ）でも、リーディングコンテクスト（テキストサイズ）でも効果を発揮します。

San Francisco と New York のフォントはこちらからダウンロードできます。

iOS 14 以降、システムは San Francisco と New York のフォントを可変フォントフォーマットで提供しています。このフォーマットは、異なるフォントスタイルを 1 つのファイルにまとめ、スタイル間の補間をサポートして中間的なフォントを作成します。補間機能により、各サイズに合わせてデザインされたように見せながら、すべてのサイズに対応することができます。

また、補間によってオプティカルサイジング（異なるサイズに合わせて異なるタイポグラフィデザインを作成すること）も可能になります。iOS 14 以降では、システムフォントがダイナミックオプティカルサイズに対応しており、SF Pro と SF Compact の Text と Display、New York の Small、Medium、Large、Extra Large など、フォントの個別のオプティカルサイズが、単一の連続したデザインに統合されます。このデザインにより、各グリフやレターフォームを補間して、ポイントサイズに正確に適合した構造を作り出すことができます。

注意

以前のバージョンの iOS を使用しているデザインツールで可変フォントを使用すると、予期しない結果になることがあります。その場合は、引き続き「テキストと表示」を使用してください。

SF Pro と NY は互換性があるため、一貫したルック＆フィールを維持しながら、タイポグラフィのコントラストや多様性を iOS インターフェイスに取り入れる方法は数多くあります。例えば、両方の書体を使うことで、より強い視覚的な階層を作ったり、コンテンツの意味的な違いを強調することができます。

Apple がデザインした書体は、幅広いウエイト、サイズ、スタイル、言語をサポートしているので、アプリケーション全体で快適で美しい読書体験をデザインすることができます。システムフォントでテキストスタイルを使用すると、ダイナミックタイプとより大きなアクセシビリティタイプサイズのサポートも得られます。これにより、ユーザーは自分に合ったテキストサイズを選ぶことができます。具体的な値については、「ダイナミックタイプのサイズ」と「より大きなアクセシビリティタイプのサイズ」を参照してください。トラッキング値を含むサイズ情報は、iOS 用の Sketch、Photoshop、Adobe XD Apple Design Resources でも利用できます。

システムでは、SF および NY 書体を簡単に使用できる API を定義しています。開発者向けのガイダンスについては、UIFontDescriptor の withDesign メソッドおよび SystemDesign 構造体を参照してください。

SF Pro と SF Compact #

システムフォントの柔軟性は、あらゆるポイントサイズで最適な読みやすさを実現し、アプリ全体の精密な組版に必要な幅と深さを提供します。

SF Pro および SF Compact は以下をサポートしています。

• 100 以上の言語（ラテン文字、ギリシャ文字、キリル文字）に対応
• Ultralight から Black までの 9 種類のウェイトを、アップライトとイタリックの両方で使用可能
• テキストのサイズに応じて自動的に調整される可変文字間隔
• スモールキャピタル、分数、および下・上の数字
• ダイナミックなオプティカルサイズ

開発者向けのガイダンスについては、SystemDesign 構造体のデフォルトプロパティを参照してください。

SF Pro Rounded と SF Compact Rounded #

システムフォントの丸みを帯びたバリエーションは、テキストスタイルをソフトまたは丸みを帯びた UI 要素の外観と調和させたり、代替のタイポグラフィボイスを提供するのに役立ちます。

SF Pro Rounded と SF Compact Rounded が対応しています。

• 100 以上の言語（ラテン文字、ギリシャ文字、キリル文字）に対応
• Ultralight から Black までの 9 種類のウェイトのアップライト
• 文字の大きさに応じて自動的に調整される可変文字間隔
• スモールキャピタル、分数、下・上の数字
• ダイナミックなオプティカルサイズ

開発者向けのガイダンスとしては、SystemDesign 構造体の rounded プロパティを参照してください。

SF Mono #

SF Mono は San Francisco の等幅バージョンで、すべての文字の幅が同じである書体です。一般的に等幅の書体を使うのは、コーディング環境などでテキストの列を揃える場合です。例えば、Xcode や Swift Playgrounds では、デフォルトで SF Mono を使用しています。

注意

SF Pro では、OpenType の表組み機能を使用して、等幅の数字や通貨の表示をサポートしています。

SF Mono は以下をサポートしています。

• 100 以上の言語（ラテン文字、ギリシャ文字、キリル文字）に対応
• ライトからヘビーまでの 6 つのウェイト（アップライトとイタリック）をサポート
• すべてのウェイトで等幅表示（フォントウェイトを変更してもテキストがリフローしない
• ダイナミックなオプティカルサイズ

開発者向けのガイダンスとしては、SystemDesign 構造体の monospaced プロパティを参照してください。

New York #

New York は、インターフェイスや伝統的な読書体験を提供するために使用できる古典的なセリフ書体です。

NY は以下をサポートしています。

• 100 以上の言語（ラテン文字、ギリシャ文字、キリル文字）に対応
• レギュラーからブラックまでの 6 種類のウエイト、アップライトとイタリックの両方に対応
• テキストのサイズに応じて自動的に調整される可変文字間隔
• ダイナミックなオプティカルサイズ

開発者向けのガイダンスとしては、SystemDesign 構造体の serif プロパティを参照してください。

アプリを強化するためのフォントの選択 #

可能な限り内蔵のテキストスタイルを使用します。 内蔵されているテキストスタイルを使えば、読みやすさを維持しつつ、視覚的にはっきりとした方法でコンテンツを表現できます。見出し、本文、吹き出し、数サイズのタイトルなどのスタイルは、システムフォントをベースにしており、フォントサイズごとにトラッキングとリーディングを自動的に調整する Dynamic Type などの主要なタイポグラフィ機能を利用することができます。開発者向けのガイダンスは、UIFontTextStyle を参照してください。

重要な情報を強調する。 フォントの太さ、サイズ、および色を使用して、アプリ内の最も重要な情報を強調します。

テキストサイズの変更に対応する際は、コンテンツを優先してください。 すべてのコンテンツが同じように重要なわけではありません。大きなサイズを選択する人は、重要なコンテンツを読みやすくしたいのであって、必ずしも画面上のすべての文字を大きくしたいわけではありません。

インターフェイスに使用する書体の数は最小限に抑えましょう。 あまりにも多くの異なる書体を混在させると、アプリが断片的でだらしない印象を与えてしまいます。

読みやすさを向上させたり、スペースを節約するためにリーディングを変更します。 リーディングとは、テキストの行間のスペースのことです。場合によっては、このスペースを増やしたり減らしたりすることで、テキストのレイアウトがうまくいくことがあります。幅の広いコラムや長い文章を表示する場合は、行間のスペースを広く取る（リーディングを緩くする）ことで、人が次の行に移動する際に自分の場所を確保しやすくなります。逆に、リストのように高さが制限されている場所に 2 行のテキストを表示する場合は、行間のスペースを小さくする（タイトリード）ことで、テキストがうまく収まるようになります。3 行以上のテキストを表示する必要がある場合は、高さが制限されている場所でもタイトリードは避けてください。システムでは、行間のスペースを 2 ポイント増減できる API を定義しています。開発者向けのガイダンスとしては、ルーズとタイト (SwiftUI)、および traitLooseLeading と traitTightLeading (UIKit) を参照してください。

カスタムフォントが読みやすいことを確認します。 カスタム書体は iOS でサポートされていますが、読みにくい場合があります。特に、小さなサイズで表示されたときに文字の形を判別しにくくするようなスタイル属性を持っている場合は、読みにくい可能性があります。ブランディングや没入感のあるゲーム体験の実現など、アプリケーションにカスタムフォントがどうしても必要な場合を除き、通常はシステムフォントを使用するのが最善です。カスタムフォントを表示用テキストにのみ使用することを検討してください。読み物やインターフェイスのテキストに使用する場合は、小さいサイズでも読みやすいことを確認してください。

カスタムフォントにアクセシビリティ機能を実装する。 システムフォントは、太字や大きな文字などのアクセシビリティ機能に自動的に対応します。カスタムフォントを使用するアプリでも、アクセシビリティ機能が有効になっていることを確認し、変更されたときの通知を登録することで、同じ動作を実現します。詳しくは、「文字のサイズと太さ」を参照してください。

インターフェイスのモックアップでは、必要に応じてトラッキングを調整します。 実行中のアプリでは、システムフォントがポイントサイズごとに動的にトラッキングを調整します。可変システムフォントを使用する UI の正確なインターフェイスモックアップを作成するには、トラッキングの調整が必要な場合があります。トラッキングの値については、Apple Design Resources に掲載されている値を参照してください。

注意

iOS では、ラテン文字、ギリシャ文字、キリル文字のシステムフォントとして San Francisco が使用され、その他の文字にはさまざまな書体が使用されます。

ダイナミックタイプのサイズ #

ダイナミックタイプでは、読者が好みのテキストサイズを選択できるため、柔軟性が高まります

アクセシビリティに配慮した大きな文字サイズ #

標準的なダイナミックタイプのサイズに加えて、アクセシビリティを必要とするユーザーのために、さらに大きなサイズが用意されています。

トラッキングバリュー #

正確なインターフェイスのモックアップを作成するために、SF Pro、SF Pro Rounded、New York の各サイズにシステムが定義するトラッキング値を使用します。

Visual Design - Video #

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/video/

ビデオ #

システムが提供するビデオプレーヤーには、フルスクリーン（アスペクトフィル）と画面に合わせる（アスペクト）という 2 つの表示モードがあります。デフォルトでは、システムはビデオのアスペクト比に応じて表示モードを選択しますが、ユーザーは再生中にモードを切り替えることができます。開発者向けのガイダンスとしては、AVPlayerViewController を参照してください。

• フルスクリーン（アスペクトフィル）表示モード。 ビデオはディスプレイに合わせて拡大されます。エッジの切り取りが発生する場合があります。このモードは、ワイドビデオ（2:1 ～ 2.40:1）のデフォルトの表示モードです。開発者向けの情報は、resizeAspectFill を参照してください。
• 画面に合わせた（アスペクト）表示モード。 映像全体が画面に表示されます。レターボックス化またはピラーボックス化が発生します。これは、標準ビデオ（4:3、16:9、および 2:1 までのすべて）およびウルトラワイドビデオ（2.40:1 以上）のデフォルトの表示モードです。開発者向けのガイダンスとしては、resizeAspect を参照してください。

接続された Bluetooth キーボードで Space を押すと、メディアの再生や一時停止ができるようになりました。 メディアの再生をコントロールするために Space を押すことは、使用しているキーボードにかかわらず、人々が期待するインタラクションです。

カスタムビデオプレーヤーが期待通りに動作することを確認します。 フルスクリーンデバイスでビデオコンテンツを再生する場合、デフォルトではディスプレイいっぱいに表示することが目的です。しかし、ディスプレイいっぱいに再生するとトリミングが多くなる場合は、画面に合わせて動画を拡大する必要があります。また、個人の好みに応じて、フルスクリーン表示と画面に合わせた表示を切り替えられるようにする必要があります。開発者向けのガイダンスとしては、AVPlayerLayer を参照してください。

ビデオコンテンツは常にオリジナルのアスペクト比で表示してください。 動画コンテンツが特定のアスペクト比に合わせて埋め込まれたレターボックスまたはピラーボックスのパディングを使用している場合、iOS はユーザーが選択した表示モードに基づいて動画を正しくスケーリングすることができません。ビデオフレーム内に埋め込まれたパディングにより、フルスクリーンモードや画面に合わせるモードでビデオが小さく表示されることがあります。また、iPad の Picture in Picture モードのように、フルスクリーンではない端から端までの状況では、ビデオが正しく表示されません。いくつかの例については、「iPhone Xs でのパディングの例」をご覧ください。