Leesbaarheid van tekst verbeteren
Basisaanpak
1. Verhoog contrast tussen tekst en achtergrond.
2. Gebruik overlay met passende opaciteit.
3. Voeg subtiele tekstschaduw toe indien nodig.
Controle
– Bekijk op mobiel en desktop.
– Controleer hover-toestand apart.
解決手順（推奨調整順）
### ステップ1: 文字色と背景色のコントラストを確認する
1. スタイル設定でテキストカラーを確認
2. 背景色との明度差を確認（暗い背景 → 明るい文字、明るい背景 → 暗い文字）
3. WCAG基準 AA（コントラスト比 4.5:1 以上）を目安にする
4. 文字色の Alpha（透明度）が低すぎないか確認する### ステップ2: フォント設定を調整する
1. **Font Size**: スマホで最低 14px 以上を確保する
2. **Font Weight**: 背景が複雑な場合は太め（600〜700）にすると読みやすくなる
3. **Line Height**: 1.4〜1.8 の範囲で設定する
4. **Letter Spacing**: 文字が詰まって読みにくい場合は 0.02〜0.05em 追加する### ステップ3: テキストシャドウを活用する
背景画像上で文字を読みやすくするために:
1. フォント設定パネルのテキストシャドウを開く
2. 影の色を背景と対照的な色に設定（暗い背景 → 暗い影、明るい背景 → 明るい影）
3. Blur を小さめ（2〜4px）に設定
4. Alpha は低め（0.3〜0.5）から始めて必要に応じて上げる### ステップ4: 背景オーバーレイを追加する
背景画像・動画の上にテキストを配置する場合:
1. 背景設定パネルのオーバーレイを開く
2. 半透明の黒（文字が白の場合）または白（文字が黒の場合）のオーバーレイを追加
3. Alpha を 0.3〜0.6 の範囲で調整して、画像の視認性と文字の可読性を両立させる### ステップ5: レスポンシブで再確認する
1. PC → タブレット → スマホの順でプレビュー
2. スマホで文字が小さすぎないか、行が窮屈でないか確認
3. 必要に応じてデバイスごとにフォントサイズを調整—
注意点
– マイクロテキスト・サブテキストは主文言より小さく・薄く設定して情報階層を明確にするのが基本ですが、読めないほど小さくしないよう注意してください。
– マイクロコピー・サブコピーはボタンの外側に配置されるため、ボタン内部とは背景が異なります。ページ背景との対比で可読性を確認してください。—
関連設定
– [スタイル設定](../style/) – 文字色・背景色・ボーダー
– [フォント設定](../font/) – フォントファミリー・サイズ・太さ・行間
– [背景設定](../background/) – 背景画像・オーバーレイ
– [マイクロテキスト設定](../microtext/) – ボタン内上段テキスト
– [サブテキスト設定](../subtext/) – ボタン内下段テキスト