カラー設定

注目のリンク

1. テーマエディターに関するShopifyドキュメント
2. カラー設定に関するCompany XYZドキュメント

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

Shopify Academy動画：ストアのカスタマイズ

これらの設定を使用すると、テーマエディターに関するShopifyドキュメントにある特定のテーマ領域に、独自の前景色を設定できます。これらはテーマ全体に適用される色を上書きするため、注目を集める領域、プロモーション用の領域、コンテンツ量の多い領域で、より良いコントラストや、より調整された外観が必要な場合に便利です。

これらの上書きがどのように機能するかについての一般的な参考情報は、カラー設定リファレンスをご覧ください。

カラーの上書き

このグループでは、枠線、アイコン、見出し、サブ見出し、本文テキストに使用する色を設定します。ストア全体のパレットを変更する代わりに、1つの領域でコンテンツがどのように表示されるかを微調整して、より明確でバランスの取れた、または特徴のある印象にできます。

周囲の背景が変わる場合、キャンペーンにブランドカラーのアクセントが必要な場合、またはデフォルトの色ではコンテンツの階層間を十分に区別できない場合に、上書きを使用します。メインパレットでその領域がすでに見やすく表示されている場合は、通常、これらの設定を変更しないことをおすすめします。

これらの設定は、適用先の領域における、テーマ全体に適用される色の選択を上書きします。カスタム領域が視覚的に分断されるのではなく、意図的にデザインされた印象になるよう、目的を持って使用してください。

明確なテキスト階層の構築

見出し、サブ見出し、テキストの色は、視線を誘導できるように調和させます。最も重要なテキストには最も強いコントラストを保ち、本文には信頼性のある色を使用し、サブ見出しには読みやすさを損なわない範囲で、より柔らかな補助色を選びます。

すべてのテキスト色が似すぎていると、コンテンツが平坦な印象になります。色の違いが大きすぎると、デザインがまとまりのない印象になる可能性があります。類似したコンテンツ領域全体で一貫性を保てる、シンプルな階層を目指してください。

枠線とアイコンを効果的に使用する

枠線とアイコンは、通常、補助的な要素として使用すると最も効果的です。枠線はコンテンツを分けたり、カードを囲んだり、構造を加えたりできます。一方、アイコンの色は、メインメッセージと競合することなく、小さな視覚的手がかりを強調するのに役立ちます。

アイコンが枠線付きの図形の中に表示される場合は、アイコンの色とアイコンの枠線色が調和していることを確認してください。控えめな枠線は洗練された印象になりますが、薄すぎると背景に溶け込んで見えなくなる可能性があります。

読みやすい組み合わせを選ぶ

色は設定ごとに個別に確認するのではなく、組み合わせて確認してください。単独では印象的に見える見出し色でも、領域全体を組み立てたときに、柔らかなサブ見出しのテキストや薄い枠線と合わない場合があります。

小さなテキスト、装飾的なアイコン、細い枠線のコントラストには特に注意してください。色が明るすぎたり、コントラストが低すぎたりすると、これらの要素は見えにくくなりやすいものです。

使用上の注意

1. 目的を持って上書きする。 領域に本当に異なる前景色が必要な場合にカスタムカラーを使用し、単に変化を加える目的では使用しないでください。
2. 読みやすさを保つ。 その領域で実際に使用される背景に対して、見出し、サブ見出し、テキスト、アイコン、枠線を確認してください。
3. 両方のビューポートを確認する。 デスクトップとモバイルではコントロールの動作が異なる場合があるため、両方の画面サイズでレイアウト、配置、表示、メディアの動作を確認してください。
4. フォールバックスタイルを考慮する。 空白、透明、またはデフォルトスタイルの値は通常、テーマ全体の外観を維持します。一方、明示的な色、グラデーション、またはメディアの上書きを設定すると、その領域はより独立した外観になります。
5. アクセントは補助的に扱う。 コンテンツから注意をそらすことなく、構造と強調を支えるために枠線とアイコンの色を使用してください。
6. メディアの選択を慎重に確認する。 デスクトップとモバイルのメディアを個別に設定している場合は、両方のバージョンでトリミング、読み込み、フォールバック、読みやすさを確認してください。