Custom Icons
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/
Custom Icons
カスタムアイコン
If your app includes tasks or modes that can’t be represented by a system icon, or if the system icons don’t match your app’s style, you can create your own icons.
アプリにシステムアイコンで表現できないタスクやモードが含まれている場合や、システムアイコンがアプリのスタイルと一致しない場合は、独自のアイコンを作成できます。
Create recognizable, highly-simplified designs. Too many details can make an icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly and won’t find offensive. The best icons use familiar visual metaphors that are directly related to the actions they initiate or content they reveal.
認識しやすく、高度に単純化されたデザインを作成します。 細かすぎると、アイコンが混乱したり読めなくなったりすることがあります。 ほとんどの人がすぐに認識し、不快にならないシンプルでユニバーサルなデザインを目指してください。 最善のアイコンは、開始するアクションまたはそれが明らかにするコンテンツに直接関係する親しみやすい視覚的メタファを使用します。
App icon
Glyph
Glyph (color applied)
Design icons as glyphs. A glyph, also known as a template image, is a monochromatic image with transparency, anti-aliasing, and no drop shadow that uses a mask to define its shape. Glyphs automatically receive the appropriate appearance—including coloring, highlighting, and vibrancy—based on the context and user interactions. A variety of standard interface elements support glyphs, including navigation bars, tab bars, toolbars, and Home screen quick actions.
グリフとしてのアイコンのデザイン。 グリフは、テンプレート画像とも呼ばれ、透過性、アンチエイリアス、およびマスクを使用してその形状を定義するドロップシャドウのない単色画像です。 グリフは、文脈やユーザーとのやりとりに基づいて、適切な外観（着色、ハイライト、活気など）を自動的に受け取ります。 ナビゲーションバー、タブバー、ツールバー、ホーム画面のクイックアクションなど、さまざまな標準インターフェイス要素がグリフをサポートしています。
Prepare glyphs with a scale factor of @2x and save them as PDFs. Because PDF is a vector format that allows for high-resolution scaling, it's typically sufficient to provide a single @2x version in your app and allow it to scale for other resolutions.
グリフを@ 2xの倍率で準備し、PDFとして保存します。 PDFは高解像度のスケーリングを可能にするベクトル形式なので、通常はアプリで@ 2xの単一のバージョンを用意し、他の解像度の場合はそれを拡大することができます。
Keep your icons consistent. Whether you use only custom icons or mix custom and system icons, all icons in your app should be the same in terms of level of detail, optical weight, stroke weight, position, and perspective.
あなたのアイコンの一貫性を保つ。 カスタムアイコンのみを使用する場合でも、カスタムアイコンとシステムアイコンを組み合わせる場合でも、アプリ内のすべてのアイコンは、詳細レベル、光学重量、ストロークウェイト、位置、およびパースペクティブの点で同じである必要があります。
Make sure icons are legible. In general, solid icons tend to be clearer than outlined icons. If an icon must includes lines, coordinate the weight with other icons and your app's typography.
アイコンが見やすいことを確認してください。 一般に、ソリッドアイコンはアウトラインアイコンよりも明確になる傾向があります。 アイコンに線が含まれている必要がある場合は、他のアイコンとアプリのタイポグラフィとの重さを調整します。
Use color to communicate selected and deselected states. Avoid toggling between two different icon designs, like a solid version and an outlined version.
選択した状態と選択解除した状態を連携するには、色を使用します。 ソリッドバージョンとアウトラインバージョンのような、2つの異なるアイコンデザインの切り替えは避けてください。
Avoid including text in an icon. If you need text, display a label beneath the icon and adjust its placement accordingly.
アイコンにテキストを含めないでください。 テキストが必要な場合は、アイコンの下にラベルを表示し、それに応じて配置を調整します。
Don’t use replicas of Apple hardware products. Apple products are copyrighted and can’t be reproduced in your icons or images. In general, avoid displaying replicas of devices because hardware designs tend to change frequently and can make your icon look dated.
Appleハードウェア製品の複製は使用しないでください。 アップル製品は著作権で保護されており、アイコンや画像で再現することはできません。 一般的には、ハードウェアのデザインが頻繁に変更される傾向があり、アイコンが古いものとなる可能性があるため、デバイスの複製を表示しないでください。
Provide alternative text labels for icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.
アイコンの代替テキストラベルを提供する。代替テキストラベルは画面上には表示されませんが、VoiceOverは画面上に表示されているものを音声で表現できるため、視覚障害のある人にとってナビゲーションが容易になります。
Custom Icon Sizes
カスタムアイコンサイズ
Above all, your app's icon family should be visually consistent in size. If individual icon designs vary in weight, some icons may need to be slightly larger than others to achieve this effect.
とりわけ、あなたのアプリのアイコンファミリは視覚的に一貫している必要があります。 個々のアイコンのデザインのウェイトが異なる場合、この効果を得るにはアイコンのサイズが他のアイコンのサイズよりわずかに大きくなる必要があります。
Navigation Bar and Toolbar Icon Size
ナビゲーションバーとツールバーのアイコンサイズ
Use the following sizes for guidance when preparing custom navigation bar and toolbar icons, but adjust as needed to create balance.
カスタムナビゲーションバーとツールバーのアイコンを準備する際には、以下のサイズを参考にしてください。必要に応じてバランスを調整してください。
Tab Bar Icon Size
タブバーアイコンサイズ
In portrait orientation, tab bar icons appear above tab titles. In landscape orientation, the icons and titles appear side-by-side. Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.
縦向きでは、タブタイトルの上にタブバーアイコンが表示されます。 横向きの向きでは、アイコンとタイトルが並べて表示されます。 デバイスと向きに応じて、通常のタブバーまたはコンパクトタブバーが表示されます。 あなたのアプリには、両方のサイズのカスタムタブバーアイコンが含まれている必要があります。
