Relation 基本設定

全体共通の設定 (色とロゴ)

ショップロゴの設定

このテーマではトップページのメインビジュアルが主体であるという性質上、ロゴの表示は控えめになります。
まずヘッダーエリアはトップページ以外は、後に設定するアクセントカラーのシンプルなバーになり、ロゴ画像はとても小さく表示されます。トップページでのみ、ある程度の大きさまで配置することができますが、メインビジュアルやキャッチコピーとの兼ね合いから、あまり大きなロゴはお勧めしません。

ロゴ画像を使う場合、縦横日はできるだけ横長のものを推奨します。もしくはシンプルにテキストロゴにするのが最も読みやすくなります。

カラースキーム設定

アクセントカラー

「アクセントカラー」はサイト内各所のワンポイント、動画再生ボタン、中ページのヘッダーバー、スマホ表示でのヘッダーバーに採用されます。

中ページヘッダーカラーのメニュー文字色は白となりますので、「アクセントカラー」はそれを考慮した色合いにします。

　⌊ アクセントカラー上の文字色

サイト内には設定したアクセントカラーの上に文字が重なるパーツがあります。そこで文字の読みやすさが損なわれないよう設定します。デフォルトでは白となっており、アクセントカラーが極端に明るい色でない限り白のままで大丈夫です。

ボタンカラー

「ボタンカラー」はトップに配置するコミットボタン（入会や登録といった最終的に誘導したい画面へのボタン）、そして商品ページのカートに入れるボタンの色として採用されます。

サイト各所に用いられるアクセントカラーと比べ、より重要な決定ボタンの色というイメージです。視認性の高い色、またはアクセントカラーとの対比で目立ちやすい色に。あえてアクセントカラーと同色、同トーンにしてシックな雰囲気にするのもおすすめです。

　⌊ ボタンカラー上の文字色

「ボタン上の文字色」は「ボタンカラー」の上で文字が読みやすい色に設定します。

テキストカラー

「テキストカラー」はサイト全体の文字色になります。背景が白の場合は特に変更する必要はありません。もし背景を変更した場合、その上でも読みやすい文字色に変更します。（商品サムネイルなど、デザイン上白枠がついている部分については文字色は固定されています。）

　⌊ 白枠上テキストにも反映

「白枠上テキストにも反映」をONにすると、「テキストカラー」が白枠上テキストにも反映されます。

デザイン上、文字を白枠のボックスに囲んでいる箇所があり、文字色はもっとも読みやすい「黒」に固定されています。（例：商品一覧画面の商品名や価格が表示される部分など）
これは「背景色が黒、テキストカラーを白」と設定した場合に、白枠上の文字まで白くなると読めなくなってしまうためで、白枠上だけは「テキストカラー」は反映させないようになっています。

一方で、「背景色を白」にした場合、白枠は背景と同化しますので実質は白枠は見えなくなり、意図的にそのようなデザインを採用したい場合もあります。この時、真っ白の白地に対してテキストカラーが黒であれば問題ありませんが、もし「背景色が白、テキストカラーを赤」などに設定した場合、全体のテキストカラーが赤なのに白枠部分だけが黒く残ってしまう状態になります。 そのような色設定をした場合、「白枠上テキストにも反映」をONにすることで、「テキストカラー」が白枠上テキストにも反映されます。

通常は初期値のOFFで問題ありませんが、「白背景 + カラフル文字色」で設定する場合にONにしてみてください。

全体のフォント設定

■全体：見出し・ナビテキスト書体

サイト全体の見出し、ナビゲーション項目の書体をゴシック体か明朝体から選べます。

■全体：本文テキスト書体

サイト全体の平文の書体をゴシック体か明朝体から選べます。

■全体の文字サイズ

サイト全体の文字サイズを調整します。Relationは全体の文字サイズの初期値は少し大きめになっています。ここで初期値の「95%〜80%」まで小さく調整することができます。

■ロゴ文字サイズ(ロゴがテキストの場合)

ショップロゴをテキストにした場合の文字サイズを微調整できます。ショップ名が長い場合は改行して表示できますが、サイズを小さくすることで見栄えを損なうことなく表示させることができます。

サイズは「標準値、S、XS」と2段階小さくすることができます。PCで表示した場合やモバイルでチェックして調整してください。

またこのテーマではナビゲーションの項目名もカスタマイズが可能です。ロゴの調整だけでどうしてもバランスが決まらない場合、ナビゲーション項目の表示、項目名の文言表現なども調整してみてください。

---