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