メインテーマカラー
メインテーマカラーは、Plain Jane テーマ全体でブランドの視覚的アイデンティティを定義する主要な色です。この色は、ボタン、リンク、アクセント、インタラクティブな要素などの重要な部分に表示されます。
🌈 テーマカラーの理解
メインカラーが制御するもの
メインのテーマカラーが影響するのは：
プライマリボタン （カートに追加、今すぐ購入、送信）
リンクの色 サイト全体で
アクティブなメニューの状態 およびナビゲーションのハイライト
フォームのフォーカス状態 および入力フィールドのハイライト
読み込みインジケーター およびプログレスバー
アイコンのアクセント および装飾要素
ホバー効果 インタラクティブな要素上で
Eコマースにおける色の心理学
ブランドの性格に合った色を選んでください：
信頼性・信頼感
ブルー系 （#2563EB、#1E40AF）：プロフェッショナルで信頼できる印象
グリーン系 （#059669、#047857）：成長、安定、金銭的イメージ
エネルギーと緊急性
レッド系 （#DC2626、#B91C1C）：興奮、緊急性、力強さ
オレンジ系 （#EA580C、#C2410C）：熱意、温かさ、行動喚起
高級感と洗練
パープル系 （#7C3AED、#5B21B6）：プレミアム、クリエイティブ、高級感
ブラック／チャコール （#1F2937、#111827）：エレガント、洗練、モダン
自然でオーガニック
アーストーン （#A3A3A3、#78716C）：自然、持続可能、本物志向
ソフトグリーン （#10B981、#059669）：エコフレンドリー、健康、自然
🛠️ メインカラーの設定
ステップ 1: テーマ設定にアクセス
テーマカスタマイザーに移動
に移動 オンラインストア → テーマ
クリック カスタマイズ あなたのPlain Janeテーマで
テーマ設定を見つける
下にスクロールして テーマ設定 セクション
次を探してください 色 または メインテーマカラー
ステップ2：色を選ぶ
カラーピッカーの使い方
カラーボックスをクリック ピッカーを開くために
サークルをドラッグ 色相を選択するために
明るさを調整 垂直スライダーで
16進コードで微調整 正確な色のために
16進カラー入力
16進コードを使って色を直接入力：
ステップ3：変更をプレビュー
プレビューモードを使用 変更をリアルタイムで確認するために
異なるページでテスト （ホームページ、商品ページ、コレクション）
モバイル表示を確認 一貫性のために
可読性を確認 カラー要素上のテキストの読みやすさ
🎯 ベストプラクティス
アクセシビリティに関する考慮事項
色の選択がアクセシビリティ基準を満たしていることを確認してください：
コントラスト比
標準テキスト：最小 4.5:1 のコントラスト比
大きなテキスト （18pt以上）：最小 3:1 のコントラスト比
インタラクティブ要素：明確な視覚的区別
ブランドの一貫性
既存のブランドカラーに合わせる ロゴやマーケティング素材から
季節ごとのバリエーションを検討 特別なキャンペーン用に
一貫性を維持 すべての接点で
色の選択を文書化 チームの参照のために
コンバージョン最適化
高コントラストのCTA：ボタンを明確に目立たせる
信頼のシグナル：ブルーやグリーンはしばしば効果的
緊急性の要素：時間限定のオファーにはレッドやオレンジ
A/Bテスト：コンバージョン最適化のために異なる色を試す
📱 モバイルに関する考慮点
タッチターゲットの色
十分なコントラストを確保 タッチ要素向けに
実際のデバイスでテスト 異なる照明条件下で
より大きなタッチ領域を検討 カラー背景を持つ場合
視認性を確認 明るい日光下での見え方を
パフォーマンスへの影響
CSS の最適化：モダンなテーマは効率的な色レンダリングを使用します
複雑なグラデーションを避ける パフォーマンスに影響を与える可能性があるため
読み込み時間をテスト 特に低速デバイスで
🐛 トラブルシューティング
一般的な問題
色が表示されない場合
ブラウザのキャッシュをクリアする ページを更新して再読み込みしてください
テーマ設定を確認 設定が正しく保存されているかを確認する
色の形式を確認 （16進コードには # を含める必要があります）
コントラスト不足
より良いテキストの可読性のために暗めの色を使用する テキストの可読性向上のために
アクセシビリティツールでテストする コントラストを検証するために
塗りつぶしボタンの代わりに アウトラインボタンを検討する
表示の不一致
異なるページで確認する 一貫性のために
さまざまなデバイスでテストする および画面タイプで
カスタムコードによって CSS が上書きされていないか確認する カスタムコードによる上書きがないか確認する
パフォーマンスの問題
カラー構成を簡素化する 遅延が発生している場合は
ローエンドデバイスでのアニメ化された色変化を避ける 低性能デバイスではアニメーション色遷移を避ける
システムカラーを使用する 可能な場合はパフォーマンス向上のためにシステムカラーを使用する
最終更新