マイクロコピー

マイクロコピー設定
テキスト
スタイル
ボーダー
角丸
カラー
フォント
テキストシャドウ
レイアウト

実際と少し異なる場合があります。

変更プレビュー
ここにマイクロコピーを入力

この設定は補助テキストに反映されます

テキスト

テキスト
Text

実際と少し異なる場合があります。

ポイント:
ボタン上側(ボタン外)に表示する補助文言を設定します。短い訴求やタグライン表示に適しています。

この設定で変わること:
主文言を邪魔せず、追加情報を先に伝える導線を作れます。

調整のコツ:
1行目で価値、2行目で補足の順に構成すると読み取りやすくなります。

設定項目

  • Text(2行まで): 1行目に訴求、2行目に補足を入れると役割分担が明確になります。

マイクロコピーはボタンの外側上部に表示されます。ボタン内上段に表示される「マイクロテキスト」とは配置が異なるため、用途に応じて使い分けてください。テキストが空の場合、マイクロコピー領域は表示されません。

ホバー非対応:
マイクロコピーにはホバー状態の設定はありません。ホバー時の変化はボタン本体(スタイル設定・背景設定・アイコン設定など)で制御してください。

スタイル

スタイル
スタイル
01

実際と少し異なる場合があります。

ポイント:
装飾スタイルの種類を設定します。補助テキストの見せ方を短時間で切り替えられます。

この設定で変わること:
同じ文言でもスタイルで「強調」か「補足」かの印象が変わります。

調整のコツ:
主ボタンより目立たせないことを前提に、補助情報としての役割を保ってください。

設定項目

  • Style(01〜05): 装飾の強さや囲み方を切り替え、情報の優先度を視覚的に調整します。デフォルトは 01 です。

スタイル番号によって背景色・枠線・角丸などのプリセット装飾が変わります。スタイル適用後でも、ボーダー・角丸・カラー設定で個別に上書きできます。

ボーダー

ボーダー
カラー
ブラック
#000000
パレットを編集クリア
不透明度
1
横幅
1
スタイル
solid

実際と少し異なる場合があります。

ポイント:
枠線の色・太さ・線種を設定します。ボタンの輪郭を明確にし、クリック可能要素として認識させます。

この設定で変わること:
背景色が薄いデザインでも、境界をはっきり見せる効果があります。

調整のコツ:
太すぎる枠線は文字の主張を弱めるため、まず1px前後から調整するのが扱いやすいです。

設定項目

  • Color + Alpha: 枠線色と透明度。背景に埋もれる場合は先にここを調整します。
  • Width: 枠線の太さ。細めから始めると主文言との競合を避けられます。
  • Style: 線種(実線・点線など)。装飾トーンを整える目的で使用します。

角丸

角丸
角丸
0

実際と少し異なる場合があります。

ポイント:
要素の角の丸みを設定します。ブランドトーン(堅い/柔らかい)を印象レベルで調整できます。

この設定で変わること:
角丸の値はボタンサイズとの比率で見え方が変わります。

調整のコツ:
高さの約20〜35%を目安にすると、丸すぎず硬すぎないバランスになりやすいです。

設定項目

  • Border Radius: 角の丸み。主ボタンより少し小さくすると主従関係が保ちやすくなります。

カラー

カラー
テキストカラー
ブラック
#000000
パレットを編集クリア
不透明度
1
背景カラー
ベース
#FFFFFF
パレットを編集クリア
不透明度
1

実際と少し異なる場合があります。

ポイント:
ベースカラーを設定します。レイヤー構成の土台になる色です。

この設定で変わること:
オーバーレイや文字色との関係で最終印象が決まります。

調整のコツ:
単体で映える色より、文字と背景の組み合わせで読める色を優先してください。

設定項目

  • Text Color + Alpha: 文字色。主文言より1段階弱いコントラストを目安にします。
  • Background Color / Gradient + Alpha: 背景色。補助要素として主張しすぎない濃度に調整します。

フォント

フォント
フォントファミリー
デフォルト
ウェイト
400
フォントサイズ
12
行間
1.4
文字間隔
0

実際と少し異なる場合があります。

ポイント:
マイクロコピーの書体と文字組みを設定します。短文でも読みやすさと情報階層を作る要になります。

この設定で変わること:
サイズ・太さ・行間の組み合わせで、補足情報の「目立ちすぎ」を防げます。

調整のコツ:
主ボタンより 1〜2段階小さいサイズやや軽いウェイト から始めると調整しやすいです。

設定項目

  • Font Family: 書体。本文と系統を揃えるとページ全体の統一感を維持できます。
  • Font Weight: 太さ。主文言より軽くすると情報の優先順位が自然に伝わります。
  • Font Size: 文字サイズ。SPで潰れない最小値を先に決めてからPCを調整します。
  • Line Height: 行間。2行表示時の詰まりを防ぎ、読み流しやすさを確保します。
  • Letter Spacing: 字間。日本語は広げすぎると読みにくいため微調整に留めます。

テキストシャドウ

テキストシャドウ
テキストシャドウOFFON
カラー
ブラック
#000000
パレットを編集クリア
ぼかし
0
水平
0
垂直
0

実際と少し異なる場合があります。

ポイント:
文字の影を設定します。背景画像上の可読性を補強したい場面で有効です。

この設定で変わること:
影の強さで視認性と装飾感のバランスが変わります。

調整のコツ:
まずは Blur を小さめ、Alpha も低めで始め、必要な分だけ段階的に足すのが安全です。

設定項目

  • Color + Alpha: 影色と透明度。背景画像上での視認性補助に使います。
  • Blur: ぼかし量。大きすぎると輪郭が崩れるため小さめが基本です。
  • Horizontal: 横方向のずれ。違和感が出やすいので値は控えめに設定します。
  • Vertical: 縦方向のずれ。下方向へ微量に振ると自然な見え方になりやすいです。

レイアウト

レイアウト
マージン
0
パディング
0
回転(deg)
0

実際と少し異なる場合があります。

ポイント:
マイクロコピーの余白と位置を設定します。主ボタンとの距離で情報のまとまりを作ります。

この設定で変わること:
余白が適切だと「読み順」が安定し、情報を一目で理解しやすくなります。

調整のコツ:
まず Margin で外側距離を決め、必要時のみ PaddingRotation を使うと破綻しにくいです。

設定項目

  • Margin: 外側余白。主ボタンとの距離を制御し、要素の分離感を調整します。
  • Padding: 内側余白。背景付きスタイル時の窮屈さを解消します。
  • Transform > Rotation (deg): 回転。アクセント用途のみで使い、可読性優先で控えめにします。デフォルト値は 0 です。

マイクロコピーの各設定はレスポンシブ対応です。SP表示で2行に折り返された場合のレイアウト確認を忘れずに行ってください。マージン・パディングの値はデバイスごとに個別設定可能です。

他の補助テキストとの違い:
マイクロコピーは4種の補助テキスト(マイクロコピー・サブコピー・マイクロテキスト・サブテキスト)の中で最も設定項目が豊富です。スタイルプリセット・ボーダー・角丸・背景カラー/グラデーションはマイクロコピーのみに用意されており、他の3種にはありません。装飾を伴う補助テキストが必要な場合はマイクロコピーを選択してください。

関連FAQ

関連FAQ