テキストが読みづらい時の調整順 – ZenBlocks buttonBasic
結論
テキストの読みにくさは、**コントラスト不足 → フォント設定 → テキストシャドウ → 背景オーバーレイ** の順で調整すると効率的に解決できます。一度に複数を変更せず、1つずつ確認するのがポイントです。
—
原因
- **文字色と背景色のコントラスト不足**: 色相は違っても明度差が小さいと読みづらくなります
- **フォントサイズが小さすぎる**: 特にスマホ表示で可読性が低下します
- **背景画像の上に文字を直接配置**: オーバーレイなしだと背景と文字が混ざります
- **行間・字間の設定不適切**: 狭すぎると可読性が落ちます
解決手順（推奨調整順）
- スタイル設定でテキストカラーを確認
- 背景色との明度差を確認（暗い背景 → 明るい文字、明るい背景 → 暗い文字）
- WCAG基準 AA（コントラスト比 4.5:1 以上）を目安にする
- 文字色の Alpha（透明度）が低すぎないか確認する
- **Font Size**: スマホで最低 14px 以上を確保する
- **Font Weight**: 背景が複雑な場合は太め（600〜700）にすると読みやすくなる
- **Line Height**: 1.4〜1.8 の範囲で設定する
- **Letter Spacing**: 文字が詰まって読みにくい場合は 0.02〜0.05em 追加する
- フォント設定パネルのテキストシャドウを開く
- 影の色を背景と対照的な色に設定（暗い背景 → 暗い影、明るい背景 → 明るい影）
- Blur を小さめ（2〜4px）に設定
- Alpha は低め（0.3〜0.5）から始めて必要に応じて上げる
- 背景設定パネルのオーバーレイを開く
- 半透明の黒（文字が白の場合）または白（文字が黒の場合）のオーバーレイを追加
- Alpha を 0.3〜0.6 の範囲で調整して、画像の視認性と文字の可読性を両立させる
- PC → タブレット → スマホの順でプレビュー
- スマホで文字が小さすぎないか、行が窮屈でないか確認
- 必要に応じてデバイスごとにフォントサイズを調整
注意点
マイクロテキスト・サブテキストは主文言より小さく・薄く設定して情報階層を明確にするのが基本ですが、読めないほど小さくしないよう注意してください。
マイクロコピー・サブコピーはボタンの外側に配置されるため、ボタン内部とは背景が異なります。ページ背景との対比で可読性を確認してください。