【Polaris和訳】Design/Icons
この記事について
この記事は、Polaris/Design/Iconsの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Icons
Shopify 管理画面のアイコンは、マーチャントがタスクを完了するための視覚的な補助として機能します。シンプルで情報量が多く、デザインシステムの視覚的な言語に基づいて作られています。
原則 | Principles
シンプルであることが重要 | Simple over detailed
詳細なアイコンは、認知的な負荷を増加させます。シンプルさを追求することで、マーチャントはアイコンが表すコンセプトを理解し、小さな画面でもアイコンを認識できるようになります。
文字通りの表現 | Literally literal
文字通りのシンボルは、抽象的なシンボルよりも理解しやすいものです。
可能な限り、比喩的なシンボルではなく、最も基本的なアイデアやコンセプトを表すシンボルを使用してください。
概念が文字通りに伝えられない場合（ガーデニングのような活動、医者のような職業）は、論理的に関連するシンボルを選びます（シャベル、聴診器）。
プロフェッショナルであること | Stay professional
アイコンのデザインは、組み合わせるコンテンツと同様にトーンを伝えます。
喜んでもらえるかどうかよりも、メッセージの効果を重視してください。
言い換えれば、見た目の美しさよりも機能を表現することを優先してください。
アイコンの作成 | Creating icons
定番のアイコンを使う | Use established icons
世界的に長く使われているアイコンは、すぐに認識・理解される可能性が高くなります。
慣例となっているアイコンを新たに作るのはやめましょう。削除」、「設定」、「検索」などの概念には、世界的に確立された慣習があります。
これらのシンボルは効果的であり、再定義する必要はありません。
バリエーションの制限 | Limit variations
同じコンセプトのバリエーションを表すには、1 つのアイコンを使用します。
配送設定、ストア設定、アカウント設定、その他の新しい設定には歯車のアイコンを使用します。
これらのコンセプトごとにカスタムアイコンを作成しないでください。アイコンライブラリが肥大化し、マーチャントがコンセプトに沿った強いつながりを作ることが難しくなります。
アイコンとテキストの組み合わせ | Pair icons with text
アイコンの目的は、視覚的な手がかりを提供することでコンテンツを明確にし、ユーザーインターフェースの読みやすさとスキャンしやすさを向上させることにあります。
一般的に、アイコンはラベルやタイトルの近くに置くべきです。
ただし、削除を表すゴミ箱アイコンのように、誰もが理解できる動作を表すアイコンは例外です。
国際化を意識して | Keep internationalization in mind
可能な限り、世界共通のアイコンを使用してください。しかし、あるコンセプトを伝えるためには、現地で理解されているアイコンでなければならない場合もあります。
異なる文化や背景を持つ人々が一目で理解できるかどうかを確認しながら、使用するシンボルを決定してください。
アイコンを使用する場合 | When to use icons
アイコンは強力なビジュアルヘルパーですが、使用には注意が必要です。使いすぎると、視覚的に圧倒されたり、気が散ったりするようなユーザー・インターフェースになってしまいます。アイコンはよく使われます。
- プライマリー・ナビゲーション
- ページのヘッダーやセクションのタイトル
- アナウンスやエラーなど、特定のテーマに注目させるためのバナー
- テキストと一緒に表示してわかりやすくする
- マーチャントがアクションを起こせるものに注目させるため
利用可能なすべてのアイコンのリストは、polaris-iconsサイトをご覧ください。
システムアイコン | System icons
システムアイコンは、マーチャントの道案内に役立つもので、装飾的なものであってはなりません。
スポットアイコンよりも小さいサイズですが、これは常に製品体験に適用されるため、ユーザー体験を補完し、圧倒しないことが重要だからです。
また、アイコンは特定のアクション、オブジェクト、コンセプトを表すものでなければなりません。
主要アイコン-20×20 | Major icons—20×20
主要なシステムアイコンは
- 主にナビゲーションに使用され、道案内をサポートする。
- 特定のエリアやメタファーを促進、強化、または特別な注意を喚起するために使用される。
- サイズが 20×20 であること
- 20×20 のバウンディングボックス内
マイナーアイコン-16×16 | Minor icons—16×16
マイナーなシステムアイコンは
- アクションを明確にするためにインラインで使用されます。
- フォーム要素（
<input>、<button>など）に使用されます。 - サイズは 16×16
- 20×20 のバウンディングボックス内
スポットアイコン | Spot icons
スポットアイコンは、何度も目にする製品体験のメッセージ性を強化します。
スポットアイコンは
- システムアイコンよりも大きく、ストロークの重みが強いため、レイアウトに視覚的なバランスをもたらします。
- 60×60 のサイズ
- 60×60 のバウンディングボックス内
次 | Next
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion