成功
バナーカラー設定
バナーの色、グラデーション、オーバーレイをカスタマイズして、より明確で個性のあるバナー内容を表示します。
バナーを使ったコンテンツに、テーマの他の配色を変更せずに独自のカラー表現を与えるには、この設定グループを使用します。これらのコントロールは、バナーのデフォルトのテーマカラーを上書きするため、プロモーション、告知、ヒーローコンテンツ、その他、より印象を際立たせたいエリアに便利です。これらの設定の調整場所については、テーマエディターに関するShopifyドキュメントを参照してください。バナーエリアがどのように構成されるかの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
主なカラーコントロールでは、バナーの表面とその上に表示されるコンテンツを定義します。背景色と枠線の色で全体の見た目を整え、さらに見出し、サブ見出し、テキスト、アイコンの個別の色でコンテンツの階層を調整できます。
最もすっきりした仕上がりにするには、最初に背景色と主要なテキストカラーを選択します。バナーテキストカラーは、より具体的なテキストカラーが適用されない場合にバナーテキストコンテンツのフォールバックとして機能するため、読みやすいコントラストを確立するための最適な出発点です。
バナーの色は、1つずつではなく、セットとして構成してください。背景、テキスト、アイコン、枠線に明確なコントラストの関係がないと、バナーは見づらく、意図が伝わりにくくなります。
グラデーションと視覚的な奥行き
Section titled “グラデーションと視覚的な奥行き”単色では少し平坦すぎる、または重く感じる場合は、バナー背景にグラデーションを追加できます。これは、追加の画像に頼らず、より視覚的な奥行きが必要なバナーに適しています。
控えめなグラデーションのほうが、劇的なグラデーションよりも洗練されて見えることが多いです。バナーにすでに強いテキスト、印象的な画像、複数のコンテンツレイヤーが含まれている場合は、グラデーションを控えめにすると、メッセージの焦点がぶれにくくなります。
オーバーレイと不透明度
Section titled “オーバーレイと不透明度”オーバーレイのコントロールは、バナー領域の上に色付きのレイヤーを追加し、テキストを背景から分離するのに役立ちます。これは、バナーコンテンツが画像や他の視覚的に情報量の多い背景の上に配置される場合に特に便利です。
オーバーレイの不透明度は、そのレイヤーがどの程度見えるかを制御します。0% にするとオーバーレイは完全に透明になり、フォールバック設定ではメインのカラー設定で既に定義されている不透明度が使用されます。このフォールバックは、バナーのオーバーレイをサイト全体のスタイルに合わせたままにしたい場合に便利です。
枠線、アイコン、補助的な詳細
Section titled “枠線、アイコン、補助的な詳細”枠線とアイコンの色はバナーのスタイルを仕上げるのに役立ちますが、あくまで補助的なアクセントとして使うのが最適です。背景に近すぎると消えて見えることがあり、テキストよりはるかに強いと、主メッセージの妨げになります。
良い方法は、枠線を控えめに保ち、アイコンの色でコンテンツの階層を補助することです。バナーがアイコン主体でない限り、見出しと主要なアクションに視覚的な強調の大部分を担わせてください。
使用上の注意
Section titled “使用上の注意”- コントラストから始めます。 背景色と主要なテキストカラーを最初に設定し、他のすべてのバナー色を読みやすい基準の周囲で調整できるようにします。
- グラデーションは控えめに使います。 バナーにすでに強い画像、太いタイポグラフィ、複数のコンテンツレイヤーがある場合は、グラデーションを控えめに保ちます。
- パレットを書き直す前にオーバーレイを調整します。 より強いオーバーレイは、多くの場合、複数のテキストカラーやアクセントカラーを変更するよりも早く、テキストの明瞭さを改善します。
- アクセントは補助的に保ちます。 枠線とアイコンの色は、バナーのスタイルを補強しつつ、主な注目点にならないようにします。
- フォールバックは意図的に使います。 空、透明、またはデフォルトスタイルの値は通常、周囲のバナースタイルを維持し、明示的な色やグラデーションはバナー領域をより独立した印象にします。