Apple ヒューマンインターフェースガイドライン日本語訳 - iOS Icons and Images編
August 6, 2021
本記事は、本記事投稿時点の Human Interface Guidelines - iOS を日本語訳したものです。DeepL で機械翻訳を行った後、誤訳が見受けられた際には修正を加えています。
Human Interface Guidelines - iOS #
https://developer.apple.com/design/human-interface-guidelines/
- Overview
- App Architecture
- User Interaction
- System Capabilities
- Visual Design
- Icons and Images
- Bars
- Views
- Controls
- Extensions
Icons and Images - Image Size and Resolution #
画像サイズと解像度 #
iOS が画面上にコンテンツを配置する際に使用する座標系は、ディスプレイ上のピクセルに対応するポイントの測定値に基づいています。標準解像度のディスプレイは、ピクセル密度が 1:1（または@1x）で、1 ピクセルが 1 ポイントに相当します。高解像度のディスプレイは、より高いピクセル密度を持ち、2.0 または 3.0 のスケールファクター（@2x および@3x と呼ばれる）を提供する。そのため、高解像度ディスプレイでは、より多くの画素数の画像が求められる。
例えば、100px×100px の標準解像度（@1x）の画像があったとします。この画像を@2 倍にすると 200px×200px、@3 倍にすると 300px×300px になります。
アプリ内のすべてのアートワークに、アプリがサポートするすべてのデバイス用の高解像度画像を提供します。デバイスに応じて、各画像のピクセル数に特定のスケールファクターを乗じることで実現します。
| デバイス | スケールファクター |
|---|---|
| 12.9 インチ iPad Pro | @2 倍 |
| 11 インチ iPad Pro | @2 倍 |
| 10.5 インチ iPad Pro | @2 倍 |
| 9.7" iPad | @2 倍 |
| 7.9 インチ iPad mini 4 | @2 倍 |
| iPhone XS Max | @3 倍 |
| iPhone XS | @3 倍 |
| iPhone XR | @2 倍 |
| iPhone X | @3 倍 |
| iPhone 8 Plus | @3 倍 |
| iPhone 8 | @2 倍 |
| iPhone 7 Plus | @3 倍 |
| iPhone 7 | @2 倍 |
| iPhone 6s Plus | @3 倍 |
| iPhone 6s | @2 倍 |
| iPhone SE | @2 倍 |
高解像度のアートワークをデザインする #
8px×8px のグリッドを使用する。 グリッドを使用することで、線がシャープに保たれ、どのサイズでもコンテンツができるだけ鮮明になるため、レタッチやシャープネス処理が少なくて済みます。画像の境界線をグリッドに合わせてスナップすることで、縮小時に発生するハーフピクセルや細部のぼやけを最小限に抑えることができます。
アートワークは適切なフォーマットで作成する。 一般的に、ビットマップ/ラスターアートワークには、デインターレースされた PNG ファイルを使用します。PNG は透明度をサポートしており、可逆圧縮のため、重要なディテールがぼやけたり、色が変わったりすることがありません。陰影、テクスチャ、ハイライトなどの効果を必要とする複雑なアートワークに適しています。写真には JPEG を使用してください。JPEG の圧縮アルゴリズムは通常、ロスレスフォーマットよりも小さいサイズを生成し、写真ではアーチファクトが見分けにくくなります。ただし、フォトリアリスティックなアプリアイコンは、PNG が最適です。グリフなどのフラットなベクターアートで高解像度のスケーリングが必要な場合は、PDF を使用します。
完全な 24 ビットカラーを必要としない PNG 画像には、8 ビットカラーパレットを使用してください。 8 ビットのカラーパレットを使うと、画質を落とさずにファイルサイズを小さくすることができます。このパレットは写真には適していません。
JPEG ファイルを最適化して、サイズと画質のバランスをとることができます。 ほとんどの JPEG ファイルは、画像を劣化させることなく圧縮することができます。少量の圧縮でも、ディスクスペースを大幅に節約できます。各画像の圧縮設定を試して、納得のいく結果が得られる最適な値を見つけてください。
画像やアイコンに代替テキストラベルを表示する。 代替テキストラベルは画面上には表示されませんが、VoiceOver が画面上の内容を音声で説明することで、視覚障害者の方のナビゲーションを容易にします。
Icons and Images - App Icon #
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
アプリのアイコン #
すべてのアプリケーションには、App Store で注目を集め、ホーム画面で際立つ、美しく印象的なアイコンが必要です。アイコンは、アプリケーションの目的をひと目で伝える最初の機会です。アイコンは、設定や検索結果など、システム全体に表示されます。
シンプルさを追求する。 アプリの本質を表現する一つの要素を見つけ、その要素をシンプルでユニークな形で表現します。ディテールは慎重に。アイコンの内容や形が複雑になりすぎると、特に小さいサイズでは細部がわかりにくくなります。
フォーカスポイントは 1 つにする。 アイコンをデザインする際には、注目を集め、アプリを明確に識別できるように、1 つの中心となるポイントを設定します。
認識できるアイコンをデザインする。 アイコンが何を表しているのかを理解するために、アイコンを分析する必要はありません。例えば、メールアプリのアイコンは、一般的に郵便物を連想させる「封筒」を使用しています。アプリの目的を芸術的に表現した、美しく魅力的な抽象的アイコンを時間をかけてデザインしてください。
背景はシンプルにして、透明性は避けます。 アイコンを不透明にして、背景をごちゃごちゃさせないようにしましょう。シンプルな背景にして、近くにある他のアプリのアイコンを圧倒しないようにしましょう。また、アイコン全体をコンテンツで埋め尽くす必要はありません。
文字は必要不可欠なものか、ロゴの一部として使うだけにしましょう。 ホーム画面では、アイコンの下にアプリの名前が表示されます。“Watch “や “Play “のように、名前を繰り返したり、アプリで何をするのかを伝えたりする、必要のない言葉は入れないようにしましょう。デザインにテキストが含まれる場合は、アプリが提供する実際のコンテンツに関連する言葉を強調します。
写真、スクリーンショット、インターフェース要素は含めないでください。 写真の詳細は、小さなサイズでは非常に見づらくなります。スクリーンショットは、アプリのアイコンとしては複雑すぎ、一般的にアプリの目的を伝えるのには役立ちません。アイコンにインターフェース要素が含まれていると、誤解を招きやすく、混乱を招く恐れがあります。
Apple のハードウェア製品の複製を使用しないでください。 Apple 製品には著作権があり、アイコンや画像で複製することはできません。一般的に、ハードウェアのデザインは頻繁に変更される傾向があり、アイコンが古く見える可能性があるため、デバイスのレプリカの表示は避けてください。
アプリアイコンをインターフェイス全体に配置しない。 1 つのアイコンがアプリ内で異なる用途に使われていると、混乱を招く恐れがあります。代わりに、アイコンのカラースキームを取り入れることを検討してください。詳しくは「カラー」をご覧ください。
アイコンをさまざまな壁紙でテストする。 人々がホーム画面にどのような壁紙を選ぶかを予測することはできません。そのため、アプリを明るい色や暗い色でテストするだけではありません。異なる写真の上でどのように見えるかを確認しましょう。実際のデバイスでは、デバイスの動きに合わせて背景の見え方が変わるようなダイナミックな背景で試してみましょう。
アイコンの角を四角くする。 アイコンの角が丸くなるように、システムが自動的にマスクを適用します。
アプリアイコンの属性 #
すべてのアプリアイコンは、以下の仕様に準拠する必要があります。
| 属性 | 値 |
|---|---|
| 形式 | PNG |
| カラースペース | Display P3（広色域）、sRGB（カラー）、Gray Gamma 2.2（グレースケール）のいずれか。「カラーマネージメント」参照。 |
| レイヤー | 透過性のないフラットな状態 |
| 解像度 | 様々です。「画像サイズと解像度」を参照。 |
| 形状 | 角が丸くない正方形 |
アプリのアイコンサイズ #
すべてのアプリケーションには、アプリケーションをインストールしたときにホーム画面やシステム全体に表示される小さなアイコンと、App Store で表示される大きなアイコンが必要です。
| デバイスまたはコンテキスト | アイコンサイズ |
|---|---|
| iPhone | 60x60 pt (180x180 px @3x) |
| 0x60 pt (120x120 px @2x) | |
| iPad Pro | 83.5x83.5 pt (167x167 px @2x) |
| iPad, iPad mini | 76x76 pt (152x152 px @2x) |
| App Store | 1024x1024 pt (1024x1024 px @1x) |
デバイスごとに異なるサイズのアイコンを用意する。 サポートしているすべてのデバイスで、アプリのアイコンがきれいに見えるようにしましょう。
App Store のアイコンを使って小さいアイコンを模倣する。 App Store のアイコンは小さいアイコンとは使用方法が異なりますが、アプリのアイコンであることに変わりはありません。外観は小さいアイコンとほぼ同じですが、ビジュアルエフェクトが適用されていないため、微妙にリッチで詳細な表現になっている可能性があります。
スポットライト、設定、通知アイコン #
すべてのアプリは、アプリの名前が Spotlight 検索の語句と一致したときに iOS が表示できる小さなアイコンも提供する必要があります。さらに、設定を備えたアプリは、内蔵の設定アプリに表示される小さなアイコンを提供する必要があります。また、通知をサポートするアプリは、通知に表示される小さなアイコンを提供する必要があります。すべてのアイコンは、アプリを明確に識別する必要があります。理想的には、アプリのアイコンと一致している必要があります。これらのアイコンを提供していない場合、iOS はこれらの場所に表示されるプライマリアプリのアイコンを縮小することがあります。
| デバイス | スポットライトのアイコンサイズ |
|---|---|
| iPhone | 40x40 pt (120x120 px @3x) |
| 40x40 pt (80x80 px @2x) | |
| iPad Pro、iPad、iPad mini | 40x40 pt (80x80 px @2x) |
| デバイス | 設定アイコンのサイズ |
|---|---|
| iPhone | 29x29 pt (87x87 px @3x) |
| 29x29 pt (58x58 px @2x) | |
| iPad Pro、iPad、iPad mini | 29x29 pt (58x58 px @2x) |
| デバイス | 通知のアイコンサイズ |
|---|---|
| iPhone | 20x20 pt (60x60 px @3x) |
| 20x20 pt (40x40 px @2x) | |
| iPad Pro、iPad、iPad mini | 20x20 pt (40x40 px @2x) |
設定アイコンにオーバーレイやボーダーを追加しないでください。 iOS は、設定の白い背景に映えるように、すべてのアイコンに 1 ピクセルのストロークを自動的に追加します。
ヒント
アプリケーションがカスタムドキュメントを作成する場合、iOS はアプリケーションのアイコンを使ってドキュメントのアイコンを自動的に作成するので、ドキュメントのアイコンをデザインする必要はありません。
ユーザーが選択できるアプリのアイコン #
アプリによっては、カスタマイズが個人的なつながりを呼び起こし、ユーザー体験を向上させる機能となる場合があります。アプリの価値を高めることができるのであれば、アプリに組み込まれている定義済みのアイコンのセットから、ユーザーが別のアプリのアイコンを選択できるようにすることができます。例えば、スポーツアプリでは、異なるチームのアイコンを提供したり、ライトモードとダークモードを持つアプリでは、対応するライトとダークのアイコンを提供したりすることができます。提供した代替アプリのアイコンを選択できるのはユーザーのみで、ユーザーがこの変更を行ったときには、システムが常に確認を行います。
視覚的に一貫した代替アイコンを、必要なすべてのサイズで提供します。 プライマリアプリアイコンと同様に、各代替アプリアイコンも、サイズが異なる関連画像の集合体として提供します。ユーザーが代替アイコンを選択すると、ホーム画面や Spotlight などのシステム上で、プライマリアプリのアイコンが適切なサイズの代替アイコンに置き換えられます。代替アイコンがシステム全体に一貫して表示されるように、プライマリアプリのアイコンと同じサイズのアイコンを用意してください。
開発者向けのガイダンスとしては、UIApplication の setAlternateIconName メソッドを参照してください。
注意
代替アプリアイコンはアプリのレビューの対象となり、App Store Review Guidelines に準拠する必要があります。
Icons and Images - System Icons #
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/
システムアイコン（iOS 12 およびそれ以前のバージョン #
iOS 13 以降では、アプリ内のタスクやコンテンツの種類を表現するために、SF シンボルの使用をお勧めします。iOS 12 以前のアプリをお使いの場合は、以下のガイダンスに従ってください。
システムには、さまざまなユースケースで一般的なタスクやコンテンツの種類を表すアイコンが組み込まれています。
- ナビゲーションバーとツールバーのアイコン
- タブバーのアイコン
- ホーム画面のクイックアクションアイコン
iOS 12 以前のアプリでは、これらの内蔵アイコンをできるだけ使用するのがよいでしょう。
システムアイコンは意図的に使用する。 システムが提供する画像には、それぞれよく知られた特定の意味があります。ユーザーを混乱させないためにも、それぞれの画像が持つ意味や推奨される使用方法に沿って使用することが重要です。
アイコンに代替テキストラベルを付ける。 代替テキストラベルは画面上には表示されませんが、VoiceOver が画面上の内容を音声で説明することで、視覚障害者のナビゲーションを容易にします。
システムで提供されているアイコンがニーズに合ったものでない場合は、カスタムアイコンをデザインしてください。 システムで提供されている画像を誤用するよりも、自分でデザインした方が良いでしょう。詳しくは、「グリフ」を参照してください。
ナビゲーションバーとツールバーのアイコン #
ナビゲーションバーやツールバーには、以下のアイコンを使用します。開発者向けのガイダンスは、「UIBarButtonSystemItem」を参照してください。
ヒント
ナビゲーションバーやツールバーのアイテムを表現するのに、アイコンではなくテキストを使用することができます。たとえば、カレンダーでは、ツールバーに「今日」、「カレンダー」、「受信箱」を使用しています。また、固定スペース要素を使って、ナビゲーションやツールバーのアイコンの間にパディングを入れることもできます。
タブバーアイコン #
以下のアイコンをタブバーで使用します。開発者向けのガイダンスは UITabBarSystemItem を参照してください。
ホーム画面のクイックアクションアイコン #
ホーム画面のクイックアクションメニューには、以下のアイコンを使用します。開発者向けのガイダンスとして、UIApplicationShortcutIconType を参照してください。