成功
カラー設定
背景、テキスト、ボタン、バナー、カード、スウォッチなど、テーマ全体のカラーパレットを設定します。
カラー設定では、テーマ全体で使用する共通パレットを管理します。これらの選択は複数のテンプレート、コンテンツエリア、カード、フォーム、インタラクティブ状態に同時に影響するため、エリアごとに個別に色を調整するのではなく、統一されたシステムとして設定すると便利です。より広い設定の背景については、テーマのカスタマイズに関するShopifyドキュメントを参照してください。
まずメインのサーフェスとテキストカラーを選択し、それらを基にボタン、バナー、カードのスタイルを構築します。アクセシビリティに関するガイダンスについては、カラー設定のアクセシビリティガイダンスに関するCompany XYZドキュメントを参照してください。
背景色は、テーマの基本となるサーフェスを設定します。本文の背景はページ全体のトーンを決め、代替背景は、太い境界線や強い視覚効果を使わずにコンテンツエリアを区切るのに役立ちます。
グラデーションは奥行きを加えられますが、テキストを読みにくくしないようにしてください。グラデーションが表示される可能性のある場所では、見出し、段落テキスト、カードを確認し、色の全範囲で使いやすさが保たれるようにします。
背景の変更はグローバルに適用されます。あるエリアで洗練されて見える色が、別のテンプレートやコンテンツセクションでテキストのコントラストを低下させる場合があります。
テキスト設定は、テーマ全体の主な読みやすさを形作ります。見出しと本文のテキストカラーには関連性を持たせながら、明確に区別できる色を使用し、リンクカラーにはインタラクティブ要素だと簡単に識別できる色を選択します。
ホバーカラーでは、リンクが周囲のテキストに埋もれないよう、明確な反応を作り出します。デフォルト状態とホバー状態が似すぎていると、リンクをクリックできることに気付かれない可能性があります。
プライマリボタン
Section titled “プライマリボタン”プライマリボタンの色は、インターフェース内の主要なアクションを強調する必要があります。通常、テーマ内で最も強いアクションスタイルとなるため、背景、枠線、テキストが連携し、表示されるすべてのサーフェスで見やすくなるようにします。
ホバースタイルは、まったく別のボタンスタイルではなく、明確なインタラクション状態として感じられるものにします。小さく意図的な変化の方が、大きな変更よりも洗練されて見えることが多くあります。
セカンダリボタン
Section titled “セカンダリボタン”セカンダリボタンは優先度の低いアクションを補助するもので、プライマリボタンより明らかに目立たないようにします。ただし、特に強い行動喚起の隣に表示される場合でも、意図的に設計され、使いやすく見える必要があります。
優れたセカンダリスタイルは、無効状態に見せることなく階層構造を加えます。両方のボタンタイプが同時に表示される場所を確認し、主要なアクションが明確にわかるようにします。
バナー設定では、背景、枠線、見出し、アイコン、テキスト、オーバーレイ処理など、大きなプロモーションエリアや画像を背景にしたコンテンツエリアを管理します。バナーはテキストとメディアを組み合わせ、目立つ位置に表示されることが多いため、これらの選択は視覚的に大きな影響を与えます。
より具体的なテキストカラーが設定されていない場合、バナーテキストはバナーテキストカラーにフォールバックすることがあります。そのため、異なるコンテンツの組み合わせでバナーを確認することをおすすめします。オーバーレイカラー、グラデーション、透明度を使うと、メディアを見せながら画像上の読みやすさを維持できます。
実際に使用する画像に基づいてバナーのオーバーレイを設定してください。暗い画像で適切なオーバーレイでも、明るい画像や複雑な画像では弱すぎる場合があります。
カード設定では、グリッドや補助的なコンテンツエリアで使用する小さなコンテンツサーフェスを定義します。カードを使って、全体のパレットのまとまりを保ちながら、周囲のページ背景からグループ化されたコンテンツを区切ります。
カードが代替背景上に表示される場合は、カードの背景と枠線によって十分な視覚的区別が生まれることを確認してください。カードの見出しとテキストカラーは、情報量の多いレイアウトでも簡単に読み取れるようにします。
アイコンカラーは、ナビゲーション、アクション、補助的な UI 全体に表示される小さなインターフェース上の手がかりに影響します。ホバー状態と非アクティブ状態は、テキストラベルだけに頼らず、操作性と階層構造を伝えるのに役立ちます。
非アクティブなアイコンは控えめにしつつ、見つけられる状態に保ちます。薄すぎると、便利なコントロールが使用できないように見えたり、完全に見落とされたりする可能性があります。
入力欄の色は、検索や顧客向けフォームエリア全体のフォームの印象を形作ります。プレースホルダーテキストは入力済みのテキストより控えめにしますが、入力を始める前の案内として十分に読めるようにします。
フィールドの背景と枠線によって、ページ上で入力欄を簡単に見つけられるようにします。周囲のレイアウトに溶け込んでしまうと、フォームが使いにくく感じられる可能性があります。
これらのコントロールは、さまざまな場所に表示される共通のインターフェース詳細を管理します。枠線の色は構造を定義し、ページオーバーレイカラーはアクティブなメニュー、検索、ミニカートの表示など、ページ全体のオーバーレイ状態に影響します。また、セール価格の色は割引価格を強調します。
ここでは控えめに使用してください。枠線は視覚的なノイズを加えずにコンテンツを整理し、オーバーレイは前景の読みやすさを損なわずにページを暗くし、セール価格はアクションカラーと衝突せずに目立つようにします。
カスタムスウォッチを使うと、オプション名を特定のカラー値に対応付けられるため、バリアントスウォッチをより正確かつ一貫して表示できます。標準のオプション名では希望するスウォッチカラーにならない場合に特に便利です。
オプション値が正しく認識されるよう、想定されるカンマ区切り形式でスウォッチ定義を入力します。書式設定のガイダンスとバリアント関連の詳細については、商品バリアントに関するCompany XYZドキュメントを参照してください。
使用上の注意
Section titled “使用上の注意”- サーフェスを最初に設定します。 テキスト、ボタン、カードを調整する前に本文と代替背景を選択し、コントラストに関する判断の一貫性を保ちます。
- あらゆる場所でコントラストを確認します。 各主要背景上でテキスト、リンク、ボタン、フォームフィールドを確認し、早い段階で読みやすさの問題を見つけます。
- ボタンの階層を明確に保ちます。 プライマリボタンをセカンダリボタンより明らかに強調し、主要なアクションを常に簡単に識別できるようにします。
- 実際のメディアでバナーをテストします。 プレースホルダー画像ではなく、使用予定の実際の画像でバナーテキストとオーバーレイの透明度を再確認します。
- グローバルな影響を確認します。 枠線、オーバーレイ、アイコンなどの共通カラーを変更した後、主要なテンプレートを確認し、テーマ全体で更新が適切に機能することを確認します。
- 両方のビューポートを確認します。 デスクトップとモバイルのカラーコントロールは、レイアウト、配置、表示、メディア処理に異なる影響を与える可能性があるため、変更後は両方のサイズを確認します。
- オーバーライドは意図的に使用します。 空の値やデフォルトスタイルの値では通常フォールバックスタイルが維持されますが、明示的なカラー、グラデーション、メディアの選択を行うと、セクションがより自己完結したものになります。
- メディアの多いエリアを再確認します。 デスクトップとモバイルのメディアを個別に設定している場合は、それぞれのバージョンでトリミング、読み込み、フォールバック表示、テキストの読みやすさを確認します。