フォント設定

フォントファミリー

ポイント:
使用フォントを設定します。ボタンの印象とブランド整合性に直結します。

この設定で変わること:
同じ文言でも書体で信頼感・親しみやすさが変わります。

調整のコツ:
本文フォントと乖離しすぎると違和感が出るため、まずはサイト全体と同系統で合わせるのが安全です。

設定項目

• フォント一覧（Default / System / テーマフォント）: 使用フォントを選択し、ブランドトーンと可読性を整えます。
• Weight（100〜900）: フォントの太さを設定し、情報の優先度を調整します。レスポンシブ対応で、デバイスごとに異なるウェイトを指定可能です。
• Edit Font: フォント設定画面を開き、詳細な書体調整を行います。

ホバー状態のフォントファミリー・ウェイトも個別に設定可能です。デバイスごとの変更が必要な場合は、レスポンシブ切り替えを有効にしてください。

ホバー時のレイアウトシフト制限:
ホバー時にフォントウェイトを変更すると、文字幅が変動してボタンサイズやテキストの折り返しが変わる（レイアウトシフト）場合があります。これを防ぐには、ボタンの Width / Height を固定するか、ウェイト変化量を小さくしてください（例: 400→500程度）。

フォントサイズ

ポイント:
文字サイズを設定します。可読性・クリック率に直結する重要設定です。

この設定で変わること:
特にSPで小さすぎると、意図した訴求が伝わりません。

調整のコツ:
PCで整えた後にSPで1段階上げるか、行数を抑えるかをセットで調整すると崩れにくいです。

設定項目

• プリセット選択（Default / Theme / Custom）: サイズプリセットを選択し、初期値を素早く適用します。
• Custom Size: 文字サイズを数値で直接指定し、細かく調整します。
• Unit（px / em / rem / vw）: サイズ単位を選択し、固定/可変の挙動を決めます。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
• Edit Font Size: サイズ設定を編集し、デバイスごとの見え方を最適化します。

em / rem を使用すると、ブラウザやテーマの基本文字サイズに対する相対指定になります。vw を使うとビューポート幅に連動して文字サイズが変動するため、レスポンシブデザインに有効ですが、極端に大きく/小さくなるケースがあるため最小・最大値の確認を推奨します。ホバー状態のフォントサイズも個別に設定可能です。

行間

ポイント:
複数行表示時の行間を設定します。読みやすさと密度感のバランスを調整します。

この設定で変わること:
行間が詰まりすぎると認識速度が落ち、広すぎるとまとまりが弱くなります。

調整のコツ:
1.2〜1.6付近を基準に、文量が増えるほど少し広めにすると安定します。

設定項目

• プリセット選択（Default / Tight / Normal / Loose など）: 行間プリセットを選択し、読みやすさを素早く調整します。
• Custom Line Height: 行間を数値指定し、2行以上の可読性を最適化します。
• Unit（なし / px / em / rem / %）: 行間の単位を指定し、比率か固定値かを選択します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

単位なし（例: 1.5）で指定すると、フォントサイズに対する倍率として計算されます。フォントサイズが変わっても比率が維持されるため、レスポンシブ設計では単位なし指定が推奨されます。デフォルト値は 1.2 です。ホバー状態の行間も個別に設定可能です。

CSS変数による制御:
行間（Line Height）と文字間（Letter Spacing）は内部的にCSS変数（--line-height-pc / --letter-spacing-pc 等）のみで制御されています。インラインスタイルではなくCSS変数経由で子要素にも継承されるため、マイクロテキスト・サブテキストなど内部要素のフォント設定と干渉しません。

文字間

ポイント:
文字同士の間隔を設定します。見出し感・高級感・可読性のニュアンス調整に使います。

この設定で変わること:
見た目の印象変化が大きい一方で、過剰設定は読みにくさの原因になります。

調整のコツ:
日本語では極端に広げず、0〜0.5px相当から小さく調整するのが扱いやすいです。

設定項目

• プリセット選択（Tight / Normal / Wide など）: 字間プリセットを選択し、文字密度の印象を調整します。
• Custom Value: 字間をカスタム指定し、可読性とデザイン性を微調整します。
• Unit（px / em / rem / %）: 字間単位を選択し、固定/相対の調整方法を決めます。デフォルト単位は em です。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

em 単位の場合、フォントサイズに対する比率で字間が決まります。例: 0.05em はフォントサイズの5%分の間隔です。マイナス値を指定すると文字を詰めることもできますが、可読性の低下に注意してください。ホバー状態の文字間も個別に設定可能です。

関連FAQ

• テキストが読みづらい時の調整順
• デバイス別設定が反映されない時の確認