Icons｜HIG Foundations 日本語訳まとめvol.7
効果的なアイコンは、人々が即座に理解できる方法で単一の概念を表現するグラフィックアセットです。
■ 本noteの見方
2022年6月7日、Appleのイベント「WWDC22」に合わせHIGが改訂されていたので、その概要となる「Foundations（基礎）」のところだけザックGoogle翻訳したものをインデックスとしてまとめておきました。
■Icons (アイコン)
アプリやゲームでは、さまざまなシンプルなアイコンを使用して、選択できるアイテム、アクション、モードを理解できるようにしています。シェーディング、テクスチャリング、ハイライトなどの豊富な視覚的詳細を使用してアプリの個性を呼び起こすことができるアプリアイコンとは異なり、インターフェイスアイコンは通常、合理化された形状と色のタッチを使用して、わかりやすいアイデアを伝えます。
インターフェイスアイコン（グリフまたはテンプレートイメージとも呼ばれます）をデザインするか、SFシンボルアプリからシンボルをそのまま使用するか、ニーズに合わせてカスタマイズしてシンボルを選択できます。インターフェイスアイコンとシンボルはどちらも、形状を定義するために黒とクリアカラーを使用しています。システムは、各画像の黒い領域に他の色を適用できます。ガイダンスについては、SFシンボルを参照してください。
ベストプラクティス
認識可能で非常に単純化されたデザインを作成します。詳細が多すぎると、インターフェイスアイコンが混乱したり、判読できなくなったりする可能性があります。ほとんどの人がすぐに認識できるシンプルでユニバーサルなデザインを目指してください。一般に、アイコンは、開始するアクションまたはアイコンが表すコンテンツに直接関連する見慣れた視覚的なメタファーを使用する場合に最適に機能します。
アプリのすべてのインターフェースアイコンで視覚的な一貫性を維持します。カスタムアイコンのみを使用する場合でも、カスタムアイコンとシステム提供のアイコンを混在させる場合でも、アプリのすべてのインターフェースアイコンは、一貫したサイズ、詳細レベル、線の太さ（または太さ）、および遠近法を使用する必要があります。アイコンの視覚的な重みによっては、他のアイコンと視覚的に一致するように表示されるように、アイコンのサイズを調整する必要がある場合があります。
一般に、インターフェイスアイコンと隣接するテキストの重みを一致させます。アイコンまたはテキストのいずれかを強調したい場合を除いて、両方に同じ重みを使用すると、コンテンツに一貫した外観と強調レベルが与えられます。
必要に応じて、カスタムインターフェイスアイコンにパディングを追加して、光学的位置合わせを実現します。一部のアイコン（特に非対称アイコン）は、光学的ではなく幾何学的に中央に配置すると、不均衡に見える場合があります。たとえば、以下に示すダウンロードアイコンは、上部よりも下部の方が視覚的に重みがあり、幾何学的に中央に配置されていると、見た目が低くなりすぎる可能性があります。
このような場合、アイコンが光学的に中央に配置されるまで、アイコンの位置をわずかに調整できます。インターフェースアイコンの周りのパディングとして調整を含むアセットを作成する場合（右下に示すように）、アセットを幾何学的に中央に配置することにより、アイコンを光学的に中央に配置できます。
オプティカルセンタリングの調整は通常非常に小さいですが、アプリの外観に大きな影響を与える可能性があります。
必要な場合にのみ、選択状態バージョンのインターフェースアイコンを提供してください。コントロールおよび選択を自動的に示す領域で使用されるアイコンに、選択された外観と選択されていない外観を提供する必要はありません。たとえば、サイドバー、iOSタブバー、macOSツールバーは、アプリのアクセントカラーを適用したり、背景の外観を追加したりすることで、選択状態を伝えることができます。
対照的に、iOSツールバーとナビゲーションバーは選択の外観を提供しないため、これらの領域に提供する各インターフェイスアイコンの塗りつぶしバージョンと塗りつぶしなしバージョンの両方を作成する必要があります。
包括的なデザインを作成します。特定の性別を不必要に参照せずに人物を描写することを好み、アイコンがすべての人を歓迎し、理解できるようにします。ガイダンスについては、包含を参照してください。
意味を伝えるために不可欠な場合にのみ、デザインにテキストを含めます。たとえば、テキストの書式設定を表すインターフェイスアイコンで文字を使用することは、概念を伝える最も直接的な方法です。アイコンに個々の文字を表示する必要がある場合は、必ずそれらをローカライズしてください。テキストの一節を提案する必要がある場合は、その抽象的な表現をデザインし、コンテキストが右から左の場合に使用するアイコンの反転バージョンを含めます。ガイダンスについては、右から左を参照してください。
カスタムインターフェイスアイコンを作成する場合は、PDFやSVGなどのベクター形式を使用してください。システムは、高解像度ディスプレイ用のベクターベースのインターフェイスアイコンを自動的に拡大縮小するため、高解像度バージョンを提供する必要はありません。対照的に、PNG —シェーディング、テクスチャ、ハイライトなどの効果を含むアプリアイコンやその他の画像に使用される—はスケーリングをサポートしていないため、PNGベースのインターフェイスアイコンごとに複数のバージョンを提供する必要があります。または、カスタムSFシンボルを作成し、シンボルの強調が隣接するテキストと一致するようにスケールを指定することもできます。ガイダンスについては、 SFシンボルを参照してください。
カスタムインターフェイスアイコンの代替テキストラベルを提供します。代替テキストラベル（またはアクセシビリティの説明）は表示されませんが、VoiceOverで画面に表示されている内容を音声で説明できるため、視覚障害を持つ人々のナビゲーションが簡素化されます。ガイダンスについては、コンテンツの説明を参照してください。
Appleハードウェア製品のレプリカの使用は避けてください。ハードウェアの設計は頻繁に変更される傾向があり、インターフェイスアイコンやその他のコンテンツが古くなっているように見える可能性があります。Appleハードウェアを表示する必要がある場合は、AppleDesignResourcesで入手可能な画像またはさまざまなApple製品を表すSFシンボルのみを使用してください。
プラットフォームに関する考慮事項
iOS、iPadOS、tvOS、またはwatchOSに関する追加の考慮事項はありません。
マックOS
ドキュメントアイコン
macOSアプリでカスタムドキュメントタイプを使用できる場合は、それを表すドキュメントアイコンを作成できます。従来、ドキュメントアイコンは、右上隅が折りたたまれた一枚の紙のように見えます。この独特の外観は、アイコンのサイズが小さい場合でも、ドキュメントをアプリやその他のコンテンツと区別するのに役立ちます。
サポートしているファイルタイプのドキュメントアイコンを指定しない場合、macOSはアプリアイコンとファイルの拡張子をキャンバスに合成することでドキュメントアイコンを作成します。たとえば、プレビューでは、システムで生成されたドキュメントアイコンを使用してJPGファイルを表します。
場合によっては、アプリが処理するさまざまなファイルタイプを表す一連のドキュメントアイコンを作成することが理にかなっています。たとえば、Xcodeはカスタムドキュメントアイコンを使用して、プロジェクト、ARオブジェクト、およびSwiftコードファイルを区別できるようにします。
カスタムドキュメントアイコンを作成するには、背景の塗りつぶし、中央の画像、テキストの任意の組み合わせを指定できます。macOS 11以降、システムは必要に応じてこれらの要素をレイヤー化、配置、マスクし、おなじみの折り畳まれたコーナーのアイコン形状に合成します。
Apple Design Resourcesは、ドキュメントアイコンのカスタム背景塗りつぶしと中央の画像を作成するために使用できるテンプレートを提供しています。このテンプレートを使用するときは、以下のガイドラインに従ってください。
ドキュメントの種類を明確に伝えるシンプルな画像をデザインします。背景の塗りつぶし、中央の画像、またはその両方を使用するかどうかにかかわらず、複雑でない形状と明確な色の縮小されたパレットを好みます。ドキュメントアイコンは16x16ピクセルまで表示できるため、あらゆるサイズで認識できるデザインを作成する必要があります。
背景の塗りつぶし用に単一の表現力豊かな画像をデザインすることは、人々がドキュメントの種類を理解して認識するのに役立つ優れた方法です。たとえば、XcodeとTextEditはどちらも、中央の画像を含まないリッチな背景画像を使用します。
ドキュメントアイコンの小さいバージョンの複雑さを軽減することを検討してください。大きいバージョンでは明確なアイコンの詳細がぼやけて見え、小さいバージョンでは認識しにくい場合があります。たとえば、カスタムハートドキュメントアイコンのグリッド線を中間サイズで明確に保つには、使用する線を少なくし、縮小されたピクセルグリッドに揃えて太くします。
16x16 px @ 1xアイコンには、EKGラインとグリッドラインがありません。
背景の塗りつぶしの右上隅に重要なコンテンツを配置することは避けてください。システムは、ドキュメントアイコンの形状に合うように画像を自動的にマスクし、塗りつぶしの上に白い折り畳まれた角を描画します。以下に示すサイズの背景画像のセットを作成します。
512x512 px @ 1x、1024x1024 px @ 2x
256x256 px @ 1x、512x512 px @ 2x
128x128 px @ 1x、256x256 px @ 2x
32x32 px @ 1x、64x64 px @ 2x
16x16 px @ 1x、32x32 px @ 2x
使い慣れたオブジェクトがドキュメントのタイプやアプリとの関係を伝えることができる場合は、それを表す中央の画像を作成することを検討してください。あらゆるサイズで鮮明で認識可能な、シンプルで明確な画像をデザインします。中央の画像は、ドキュメントアイコンキャンバス全体の半分のサイズです。たとえば、32x32ピクセルのドキュメントアイコンの中央の画像を作成するには、16x16ピクセルの画像キャンバスを使用します。次のサイズで中央の画像を提供できます。
256x256 px @ 1x、512x512 px @ 2x
128x128 px @ 1x、256x256 px @ 2x
32x32 px @ 1x、64x64 px @ 2x
16x16 px @ 1x、32x32 px @ 2x
画像キャンバスの約10％を測定するマージンを定義し、その中に画像の大部分を保持します。画像の一部は光学的位置合わせのためにこのマージンまで拡張できますが、画像が画像キャンバスの約80％を占める場合に最適です。たとえば、256x256ピクセルのキャンバスの中央の画像のほとんどは、205x205ピクセルの領域に収まります。
人々があなたのドキュメントタイプを理解するのに役立つ場合は、簡潔な用語を指定してください。デフォルトでは、システムはドキュメントアイコンの下端にドキュメントの拡張子を表示しますが、拡張子がよくわからない場合は、よりわかりやすい用語を指定できます。たとえば、SceneKitシーンファイルのドキュメントアイコンでは、ファイル拡張子scnの代わりにシーンという用語が使用されます。システムは、ドキュメントアイコンに収まるように拡張テキストを自動的に拡大縮小するため、小さいサイズでも判読できるように十分に短い用語を使用してください。デフォルトでは、システムはテキスト内のすべての文字を大文字にします。
リソース
関連している
ビデオ