実際と少し異なる場合があります。
この設定は補助テキストに反映されます
テキスト
実際と少し異なる場合があります。
ポイント:
ボタン下側（ボタン外）に表示する補助文言を設定します。注意書きや条件補足に有効です。
この設定で変わること:
主ボタンの訴求を保ったまま、誤解を減らす情報を付加できます。
調整のコツ:
本文よりコントラストを少し下げると、主従関係を保ちやすくなります。
設定項目
Sub Copy（2行まで）: 条件や注釈を短く記載し、クリック前の誤認を減らします。
サブコピーはボタンの外側下部に表示されます。ボタン内下段に表示される「サブテキスト」とは配置が異なるため、用途に応じて使い分けてください。テキストが空の場合、サブコピー領域は表示されません。利用規約への同意文言や注意事項の表示に適しています。
ホバー非対応:
サブコピーにはホバー状態の設定はありません。ホバー時の変化はボタン本体（スタイル設定・背景設定・アイコン設定など）で制御してください。
カラー
実際と少し異なる場合があります。
ポイント:
ベースカラーを設定します。レイヤー構成の土台になる色です。
この設定で変わること:
オーバーレイや文字色との関係で最終印象が決まります。
調整のコツ:
単体で映える色より、文字と背景の組み合わせで読める色を優先してください。
設定項目
Text Color+Alpha: 文字色と透明度。主文言より弱めのコントラストで主従関係を維持します。
フォント
実際と少し異なる場合があります。
ポイント:
サブコピーの書体と文字組みを設定します。注意書きが読み飛ばされない見え方を作る設定です。
この設定で変わること:
太さやサイズを適切化すると、主文言を邪魔せずに補足情報を届けられます。
調整のコツ:
最初にFont SizeとLine Heightを決め、最後にLetter Spacingを微調整すると安定します。
設定項目
Font Family: 書体。本文と同系統にすると情報の連続性が保たれます。Font Weight: 太さ。補足文としては Regular 前後を基準に設定します。Font Size: 文字サイズ。SPで最小可読サイズを確保してからPC側を整えます。Line Height: 行間。2行構成時の詰まりや読みにくさを防ぎます。Letter Spacing: 字間。読みやすさが落ちない範囲でごく小さく調整します。
テキストシャドウ
実際と少し異なる場合があります。
ポイント:
文字の影を設定します。背景画像上の可読性を補強したい場面で有効です。
この設定で変わること:
影の強さで視認性と装飾感のバランスが変わります。
調整のコツ:
まずはBlurを小さめ、Alphaも低めで始め、必要な分だけ段階的に足すのが安全です。
設定項目
Color+Alpha: 影色と透明度。背景画像上で文字輪郭を補強します。Blur: ぼかし量。強すぎるとにじむため低め設定を推奨します。Horizontal: 横ずれ量。違和感が出やすいので極小値で管理します。Vertical: 縦ずれ量。下方向にわずかに付けると自然な影になりやすいです。
レイアウト
実際と少し異なる場合があります。
ポイント:
サブコピーの配置と余白を設定します。主ボタンとの距離感を整えるための項目です。
この設定で変わること:
距離が適切だと補足情報として認識され、読み順が安定します。
調整のコツ:
まずMarginで上下の距離を確定し、背景付きの場合だけPaddingを追加します。
設定項目
Margin: 外側余白。ボタンとの離れ具合を調整して視線誘導を整えます。Padding: 内側余白。背景色を敷いた際の窮屈さを防ぎます。Transform > Rotation (deg): 回転。装飾用途として小さな角度で使います。デフォルト値は0です。
サブコピーの各設定はレスポンシブ対応です。マージン・パディング・フォントサイズなどをデバイスごとに個別設定できます。マイクロコピーとサブコピーを同時に使用する場合は、情報過多にならないよう文言量のバランスに注意してください。
マイクロコピーとの違い:
サブコピーにはスタイルプリセット・ボーダー・角丸・背景カラー/グラデーションの設定がありません（マイクロコピーのみ対応）。サブコピーで枠線や背景色を使いたい場合は、CSSカスタマイズで対応する必要があります。設定可能な項目はテキスト・文字色・フォント・テキストシャドウ・レイアウト（マージン・パディング・回転）です。