Shopifyストアの色を選択するには、次の3 つの役割から始めます: 読みやすくするニュートラルなベース、ブランドを表現するメインカラー、重要なアクションのために確保されたアクセントカラー。効果的なパレットには色がほとんど含まれておらず、すべてのページで一貫性があり、デスクトップとモバイルの両方で十分なコントラストを維持します。
各色に特定の役割を与えます
色はインターフェイスで安定した機能を実行する必要があります。同じ青が背景、リンク、セカンダリボタン、エラーメッセージとして機能する場合、訪問者は何を見るべきかわかりません。
中立的な色
オフホワイト、非常に明るいグレー、ほぼ黒の青、または深いグレーが背景とテキストを構成します。それらはページの大部分を占め、作成されたビジュアルにスペースを与えます。
メインカラー
ロゴ、特定のタイトル、グラフィック要素、強力な領域を接続します。店舗全体に侵入することなく、認識可能な状態を維持する必要があります。
アクセントの色
重要なボタン、便利なバッジ、または優先情報のために予約してください。その希少性により、彩度よりも大きな影響を与えます。
機能的な色
成功、エラー、アラート、ブレーク、または検証は理解できる状態にしておく必要があります。常にテキストまたはアイコンを追加します。色だけでは十分ではありません。
簡単な6 段階の方法
ロゴだけで決めないでください 名刺のスタイリッシュな色は、それが全画面をカバーするときに疲れることがあります 実際のタイトル、写真、価格、バリエーション、ボタンでパレットをテストします。
バランス パレットの 3 つの例
これらの例は出発点として機能します。適切な組み合わせは、ブランドにすでにリンクされている製品、写真、位置、色によって異なります。
プレミアム 地味
真夜中の青、非常に明るい背景とマットゴールドのアクセント ゴールドが装飾的なままであるか、十分に暗いテキストを受信する場合、ハイエンドのプレゼンテーションに適しています。
暖かい 自然
深い緑、象牙、テラコッタ このパレットは、小さなテキストの読みやすさを保つ限り、天然素材とうまく機能します。
ダイナミック モダン
ネイビーブルー、明るい青とオレンジ 青はインターフェースを整理します; オレンジは、各コンポーネントに表示されずに、選択したアクションに注意を引きます。
甘いエディトリアル
紫色の無煙炭、ピンクがかった白、マッフルされたラズベリー。テキストとボタンが輝度の明確な違いを維持している場合、ソフトパレットはプロフェッショナルなままです。
コントラスト: 美学よりも優先されるルール
日常的なテキストでは、少なくとも4.5:1 のコントラスト比を目指します 本当に大きなテキストの場合、最小しきい値は3:1 です 必要なアイコン、境界線、視覚情報も区別可能なままにする必要があります これらのしきい値は、W3CのWCAG推奨事項から来ています。
| エレメント | コントロール推奨 | 頻繁なエラー |
|---|---|---|
| 共通テキスト | 底部とのコントラストは少なくとも 4.5:1 | 白地に灰色すぎライト |
| メインボタン | 読み取り可能なテキスト、輪郭、または識別可能な形状 | 明るい色の白いテキストが明るすぎます |
| 段落内のリンク | 対照的な色と下線またはその他の手がかり | 色によってのみ認識できる違い |
| エラーメッセージ | 色、アイコン、明示的なテキスト | 赤い境界線のみがマークされたフィールド |
| キーボードの状態 | すべての背景に目に見えるフォーカス輪郭 | 美的理由からフォーカスは削除されました |
でパレットを適用する方法 Shopify?
Shopify テーマエディターでは、配色に背景、テキスト、リンク、境界線、ボタンが含まれます ブロックごとに新しい組み合わせを作成するのではなく、互換性のあるセクションにいくつかの一貫した図を適用します。
主なクリア図
白または非常に明るい背景、暗いテキスト、目に見えるリンク。コレクション、製品シート、コンテンツの大部分に使用します。
暗色パターン
フッター、エディトリアルインサート、または強力なセクションで予約してください 明確なテキストとセルを強制的に独自の色を維持します。
アクセントスキーム
発表や行動喚起に時々使用してください。 normal、visited、hovered、disabled、focus のすべての状態を確認してください。
一貫したチェックアウト
支払いを過充電することなくブランドを取り戻す コントラスト、フィールドの理解、店舗との継続性が引き続き優先事項です。
この作業を拡張するには、こちらもご相談ください アクションボタンガイド そして モバイル体験のガイド.
ストアを一貫性にしないエラー
アクセントを乗算します
同じ強度で使用される 3 つの明るい色が互いに競合します。訪問者はボタン、バッジ、二次情報を区別できなくなります。
すべての背景を色付けします
生成された写真は精度を失い、ページは疲れます。ニュートラルベースは通常、より安定したフレームを提供します。
ページによって変更します
ホームページの青いボタン、フォームの緑、バスケットのオレンジは、コースの視覚学習を弱めます。
技術的な状態を忘れてください
訪問したリンク、無効なボタン、エラー、焦点、および選択したバリアントは、特にアプリケーションを追加した後にテストする必要があります。
必要に応じてどのサービスを選択すればよいですか?
色を検証する前にチェックリスト
- パレットにはベース、メインカラー、アクセントが含まれています。
- 各色はすべてのページで同じ役割を維持します。
- 現在のテキストは、その背景との十分なコントラストを実現しています。
- ボタンはすべての州で引き続き読み取り可能です。
- リンクは色だけで識別されるわけではありません。
- エラー メッセージにはテキストまたはアイコンも使用されます。
- 作成された写真は忠実であり、背景から十分に切り離されたままです。
- ダークスキーマはライトマップに白いテキストを課しません。
- パレットは 375 px の幅で制御されます。
- ウェルカム、コレクション、カード、バスケット、チェックアウトがテストされます。
Shopify ストアの色に関するよくある質問
Shopifyストアで何色を使用する必要がありますか?
多くの場合、3 つの主要な役割で十分です: ニュートラルベース、ブランドカラー、アクセント 追加の色合いは、新しい支配的な色になることなく、境界、二次背景、機能状態に使用できます。
どの色が一番売れているのか?
色は、より多くの販売を保証しません。 offerの明確さ、ボタンの可視性、コントラストと旅の一貫性は、いわゆるユニバーサル変換色よりもカウントされます。
カートに追加ボタンは緑色でなければなりませんか?
いいえ 何よりも、それは環境から自分自身を区別し、ブランドとの一貫性を保ち、読み取り可能なテキストを提示する必要があります 同じアクションの色は、メインページで同じ役割を維持する必要があります。
店全体に黒の背景を使用できますか?
はい、製品、テキスト、フィールド、インタラクティブな状態が完全に読みやすい状態を維持している場合。暗い宇宙にはより多くの制御が必要であり、特定の写真やカテゴリにはあまり適していない可能性があります。
テキストに対してどのようなコントラストを尊重する必要がありますか?
日常的なテキストでは少なくとも4.5:1、真に大きなテキストでは3:1 を目指す 機能情報や重要な視覚的指標も区別可能なままにしておく必要があります。
Shopifyで色を変更する方法は?
テーマエディタを開き、次にテーマの設定と色のセクションを開きます テーマに応じて、配色を管理し、互換性のあるセクションに適用できます。
ロゴの色を正確に使用する必要がありますか?
いいえ ロゴは基礎を提供しますが、インターフェースには中立、コントラスト、機能状態が必要です。一部のロゴの色は、メインの背景ではなくアクセントとして保持できます。
ストアを中断せずに新しいパレットをテストする方法は?
テーマのコピーを作成し、パレットをいくつかの代表的なテンプレートに適用してから、コンピューター、モバイル、バリエーション、ショッピング カート、フォーム、チェックアウトをチェックしてからライブを開始します。
ストアを飾る前に、明確なパレットを作成します
SiteQuiVendは、主要なShopifyモデルで色の一貫性、テキストとボタンのコントラスト、およびアプリケーションを分析できます。目的は、対象を絞った修正からよりグローバルな見直しまで、本当に必要な介入を選択することです。
