実際と少し異なる場合があります。
この設定は補助テキストに反映されます
テキスト
実際と少し異なる場合があります。
ポイント:
ボタン内下段に表示する補助テキストを設定します。補足条件や短い説明の追加に使えます。
この設定で変わること:
主文言の意味を明確化し、クリック後の期待値ずれを減らします。
調整のコツ:
2行化しやすいので、SP表示で折返しと行間を必ず確認してください。
設定項目
Sub Text（2行まで）: 主文言の補足や条件を明記し、クリック後の期待値を合わせます。
サブテキストはボタンの内側下段（メインテキストの下）に表示されます。ボタン外側下部に表示される「サブコピー」とは配置が異なります。テキストが空の場合、サブテキスト領域は表示されません。価格情報や「初回無料」などの短い補足条件の表示に適しています。
ホバー非対応:
サブテキストにはホバー状態の設定はありません。ホバー時の変化はボタン本体（スタイル設定・背景設定・アイコン設定など）で制御してください。
カラー
実際と少し異なる場合があります。
ポイント:
ベースカラーを設定します。レイヤー構成の土台になる色です。
この設定で変わること:
オーバーレイや文字色との関係で最終印象が決まります。
調整のコツ:
単体で映える色より、文字と背景の組み合わせで読める色を優先してください。
設定項目
Text Color+Alpha: 文字色と透明度。主文言より一段弱くして情報階層を明確にします。
フォント
実際と少し異なる場合があります。
ポイント:
サブテキストのフォントを設定します。読みやすさを維持しつつ主文言より控えめに見せる調整です。
この設定で変わること:
サイズと行間の最適化で、ボタン内情報が詰まりにくくなります。
調整のコツ:
SPで2行になった状態を基準に設定し、PCはそこから主に見栄え調整します。
設定項目
Font Family: 書体。全体デザインとの整合を取る基準設定です。Font Weight: 太さ。主文言より軽めを基本に、必要時のみ強めます。Font Size: 文字サイズ。小さすぎると読まれないため可読下限を優先します。Line Height: 行間。2行時の可読性と窮屈さを調整します。Letter Spacing: 字間。可読性改善のために微量調整します。
テキストシャドウ
実際と少し異なる場合があります。
ポイント:
文字の影を設定します。背景画像上の可読性を補強したい場面で有効です。
この設定で変わること:
影の強さで視認性と装飾感のバランスが変わります。
調整のコツ:
まずはBlurを小さめ、Alphaも低めで始め、必要な分だけ段階的に足すのが安全です。
設定項目
Color+Alpha: 影色と透明度。背景との明暗差不足を補います。Blur: ぼかし量。大きすぎるとにじむため低め運用が基本です。Horizontal: 横ずれ量。装飾感が強く出るため控えめ設定にします。Vertical: 縦ずれ量。下方向にわずかに付けると自然な影になります。
レイアウト
実際と少し異なる場合があります。
ポイント:
サブテキストの余白と位置を設定します。主文言との距離を整えるための調整項目です。
この設定で変わること:
余白が適切だと情報のまとまりが良くなり、読み飛ばしを減らせます。
調整のコツ:
Marginで外側距離を固定し、必要時のみPaddingと回転を追加してください。
設定項目
Margin: 外側余白。主文言との間隔を調整して情報順序を明確にします。Padding: 内側余白。背景付き表示時の視認性を確保します。Transform > Rotation (deg): 回転。強い演出は避け、微小角度でアクセント化します。デフォルト値は0です。
サブテキストの各設定はレスポンシブ対応です。ボタン内に収まるよう、フォントサイズとマージンをSPで必ず確認してください。マイクロテキストとサブテキストを同時に使用する場合、ボタン内の情報量が増えるためパディングを十分に確保してください。
マイクロコピーとの違い:
サブテキストにはスタイルプリセット・ボーダー・角丸・背景カラー/グラデーションの設定がありません（マイクロコピーのみ対応）。設定可能な項目はテキスト・文字色・フォント・テキストシャドウ・レイアウト（マージン・パディング・回転）です。装飾付きの補助テキストが必要な場合は、ボタン外側に配置される「サブコピー」ではなく「マイクロコピー」の利用を検討してください。