Shopifyの色や文字は、テーマ設定と各部品の設定を分けて調整します。テーマや版によって配色の方式が異なり、全ての表示へ一律に反映されるとは限りません。変更範囲と読みやすさを確認して進めましょう。
テーマ設定を開き、変更前を残す
管理画面のオンラインストアから対象テーマを編集し、テーマ設定の色やタイポグラフィの項目を開きます。公開中か下書きかを確認し、現在の設定を残します。画面幅でパネルの位置が変わる場合があるため、歯車の場所を固定して探すより、設定名と対象テーマを確かめます。
配色の方式をテーマの版で確認する
色の組み合わせをセクションへ適用するカラースキームや、複数の設定で同じ色を参照するパレットなどの方式があります。利用するテーマの説明と表示項目を確認し、全テーマにスキーム1が共通の基本色として存在すると考えません。共有する色を変えた場合は、参照している他の場所にも影響がないかを見ます。
文字と背景の組み合わせを点検する
本文、見出し、ボタン、リンク、補足条件を実際の背景で確認します。WCAGの文字コントラストでは通常4.5対1以上、大きな文字3対1以上の基準と例外があります。ブランドカラーだけを優先して読みにくくしないようにし、画像を背景にした場所も別に確認します。
見出しと本文の文字を試す
タイポグラフィの項目で、対応する見出しや本文の書体・大きさを変更します。使える書体はテーマの開発元によって異なります。日本語、英数字、価格、長い商品名を表示し、代替書体や読み込みも確認します。端末にあるシステムフォントは新たなフォント取得を避けられますが、見え方はOSにより変わります。
複数ページとモバイルで反映を確かめる
ホームだけでなく商品、コレクション、ブログ、カートやアプリの表示を確認します。独自CSSやアプリ側の設定では全体設定と異なる場合があります。文字を拡大しても内容が読めるか、ボタン名が切れないか、販売条件が見つかるかを点検し、保存と公開の影響を区別して進めます。
導入前の確認事項
- テーマと版の配色方式を確認したか
- 共有色の変更範囲を確かめたか
- 日本語・価格・長い名前で文字を試したか
- 複数ページと拡大・モバイルを確認したか
公式資料・関連記事
関連記事：ECデザインの配色・配置と心理効果の考え方、Shopifyテーマエディタの基本操作。
運用設計や確認項目の整理は、現在の業務と対象URLを添えて株式会社AOへご相談ください。
公式資料の確認日：2026年11月2日。記入例や手順は編集上の提案で、導入成果を保証するものではありません。
コメント