実際と少し異なる場合があります。
この設定は補助テキストに反映されます
テキスト
実際と少し異なる場合があります。
ポイント:
ボタン内上段に表示する補助テキストを設定します。主文言のカテゴリ説明に向いています。
この設定で変わること:
一つのボタンに情報階層を持たせることができます。
調整のコツ:
主文言より小さく・薄く設定し、主役を奪わないように調整してください。
設定項目
Micro Text（2行まで）: 主文言の前提情報を短く補足し、内容理解を早めます。
マイクロテキストはボタンの内側上段（メインテキストの上）に表示されます。ボタン外側上部に表示される「マイクロコピー」とは配置が異なります。テキストが空の場合、マイクロテキスト領域は表示されません。カテゴリ名やラベル的な短い文言に適しています。
ホバー非対応:
マイクロテキストにはホバー状態の設定はありません。ホバー時の変化はボタン本体（スタイル設定・背景設定・アイコン設定など）で制御してください。
カラー
実際と少し異なる場合があります。
ポイント:
ベースカラーを設定します。レイヤー構成の土台になる色です。
この設定で変わること:
オーバーレイや文字色との関係で最終印象が決まります。
調整のコツ:
単体で映える色より、文字と背景の組み合わせで読める色を優先してください。
設定項目
Text Color+Alpha: 文字色と透明度。主文言より弱く設定して情報階層を明確にします。
フォント
実際と少し異なる場合があります。
ポイント:
マイクロテキストのフォントを設定します。小さな補助文でも読める文字組みにするための設定です。
この設定で変わること:
サイズ・太さ・行間の組み合わせで、視認性と主文言との主従バランスが決まります。
調整のコツ:
先にFont SizeとLine Heightを決め、WeightとLetter Spacingは最後に微調整します。
設定項目
Font Family: 書体。本文フォントと合わせると一体感を維持できます。Font Weight: 太さ。主文言より軽めにして補助情報として見せます。Font Size: 文字サイズ。SPで潰れない最小サイズを起点に設定します。Line Height: 行間。2行時の読みやすさを担保します。Letter Spacing: 字間。詰まりを解消する範囲で小さく調整します。
テキストシャドウ
実際と少し異なる場合があります。
ポイント:
文字の影を設定します。背景画像上の可読性を補強したい場面で有効です。
この設定で変わること:
影の強さで視認性と装飾感のバランスが変わります。
調整のコツ:
まずはBlurを小さめ、Alphaも低めで始め、必要な分だけ段階的に足すのが安全です。
設定項目
Color+Alpha: 影色と透明度。背景との明度差が不足する場合の補助に使います。Blur: ぼかし量。値を上げすぎると文字輪郭が曖昧になります。Horizontal: 横方向のずれ。極端な値は読みにくさの原因になります。Vertical: 縦方向のずれ。下方向に少量付与すると自然です。
レイアウト
実際と少し異なる場合があります。
ポイント:
マイクロテキストの位置と余白を設定します。主文言との距離で読み順をコントロールします。
この設定で変わること:
上下余白が整うと、狭いボタンでも情報を段階的に読ませられます。
調整のコツ:
Marginで外側距離を優先調整し、必要時のみPaddingと回転を使って仕上げます。
設定項目
Margin: 外側余白。主文言との距離感を作り、視線の流れを整えます。Padding: 内側余白。背景付き装飾時に文字詰まりを防ぎます。Transform > Rotation (deg): 回転。アクセント用途として微小角度で利用します。デフォルト値は0です。
マイクロテキストの各設定はレスポンシブ対応です。ボタン内に収まるよう、フォントサイズとマージンをSPで必ず確認してください。
マイクロコピーとの違い:
マイクロテキストにはスタイルプリセット・ボーダー・角丸・背景カラー/グラデーションの設定がありません（マイクロコピーのみ対応）。設定可能な項目はテキスト・文字色・フォント・テキストシャドウ・レイアウト（マージン・パディング・回転）です。装飾付きの補助テキストが必要な場合は、ボタン外側に配置される「マイクロコピー」の利用を検討してください。