【Polaris和訳】Design/Colors
この記事について
この記事は、Polaris/Design/Colorsの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Colors
私たちのカラーシステムは、Shopify のブランドカラーを認識した上で、管理画面をより使いやすくするために構築されています。
原理 | Principle
コミュニケーションが重要 | Communication is key
私たちは、美しい色使いを大切にしていますが、それ以上に明確なコミュニケーションに価値を置いています。色はコンテンツの目的をサポートするものであり、情報の階層、インタラクティブな状態、異なる要素の違いなどを伝えます。
色には意味がある | Colors have meaning
色には役割があり、インターフェースの中でどのように機能するかによって、特定の意味を持ちます。色の役割が定義されていると、後からの修正やカスタマイズが容易になります。また、カラーシステムを拡張し、Shopify のどのタッチポイントでも使用できるようになっています。
アクセシビリティのガイドラインに沿ったカラー | Colors follow accessibility guidelines
カラーシステムは、WCAG 2.1 に準拠したコントラスト比を満たすテーマを生成するために、HSLuv カラースペース内で設計されています。これにより、見つけやすく、識別しやすく、操作しやすくなっています。また、色覚異常や弱視のマーチャントにとっても、体験全体がよりアクセスしやすくなります。ただし、色だけで情報を伝えてはいけません。
色の役割 | Color roles
私たちは、インターフェースの中で果たす役割に基づいて色を定義しています。色の役割は 10 種類あり、パレット内のすべての色のバリエーションの値を生成するために使用しています。
カラーバリアント | Color variants
カラーバリエーションは、UI に色を適用するための変数であり、その値はカラーロールから生成されます。カラーバリエーションはトークンとして利用できます。
バリアントは、カラーロール、定義されたインタラクションの状態、リンクされている UI 要素を参照するネーミングパターンを共有しています。
カラーシステムの動作 | The color system in action
色の役割がどのようにバリアントと関連しているか、そしてそれらがどのようにインターフェイス全体に適用されているか。
表面 | Surface
表面の色は、ページ、カード、シート、ポップオーバーなどのコンポーネントの表面に影響を与えます。
主に黒と濃いグレーの色で構成された、表面上の色の役割を示す図
表面 | On surface
ボーダー、セカンダリーアイコン、テキスト要素など、ニュートラルな表面に表示される要素に表面色を適用します。
緑を中心とした原色の役割を示す図
原色 | Primary
ナビゲーションやタブのボタン、アイコン、テキストなどの主要なアクションや、ナビゲーションやタブのインタラクティブな状態の背景には、原色を使用します。
二次色の役割を示す図で、主に白とグレーの色を使用しています。
二次色 | Secondary
2 次および 3 次ボタンとフォーム要素の背景に 2 次色を使用します。
インタラクティブカラーの役割を示す図で、主にブルーの色を使用しています。
インタラクティブ | Interactive
インタラクティブカラーは、リンク、フォーカスインジケータ、選択されたインタラクティブな状態などに使用します。
サクセスカラーの役割を示す図で、主にグリーンの色が使われています。
成功 | Success
成功色は、マーチャントのアクションの成功や成長を示すなど、ポジティブなものを示します。
警告色の役割を示す図で、主に黄色とオレンジの色で構成されています。
警告 | Warning
警告色は、マーチャントがアクションを起こす必要があることを知らせる色で、バッジ、バナー、例外リストなどに適用されます。
赤色を中心としたクリティカルカラーの役割を示す図
クリティカル | Critical
クリティカルカラーは、破壊的なインタラクティブ要素、エラー、即時対応を必要とする重要なイベントに使用されます。
ハイライトカラーの役割を示す図で、主にシアン色とティール色で構成されています。
ハイライト | Highlight
ハイライトカラーは、すぐに対処する必要のない重要な要素を示します。情報を提供するバナーやバッジ、新しい情報に注意を喚起するインジケータ、ローディングバーやプログレスバー、データの視覚化などで使用されます。
イエロー、ターコイズ、ローズなど、さまざまな色で構成された装飾色の役割を示す図
デコラティブ | Decorative
装飾色は、Shopify ブランドの存在感を主張する表現力のあるコミュニケーションのための色です。
リソース | Resources
カラーシステムの詳細については、polaris-tokens の GitHub リポジトリに掲載されています。
次 | Next
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion