Accessibility
文字間隔変更でも読めるUIにする
文字間隔の変更は、読みやすさを確保するためのユーザー調整です。固定高さや小さなボタンに文字を閉じ込めていると、拡大や間隔変更で破綻します。
ui.design: text-spacing
まず確認する症状
- テキスト間隔を広げると、ボタン内の文言が欠ける。
- カードやナビの高さが固定で、行が重なる。
なぜ問題か
- 読字に困難があるユーザーは、文字間隔や行間を調整して読むことがあります。
- 長い日本語・英語・多言語文言にも同じ問題が再発します。
診断で見る指標
line-height
固定height
overflow hidden
折り返し
text-spacing検査
修正方法
最小修正
固定高さを外す
ボタン、カード、タブは内容に応じて高さが伸びるようにします。
推奨修正
折り返しと余白を許可する
長い語や2行文言を想定し、paddingとmin-heightで安定させます。
さらに改善
UI文言の長さをテストする
日本語、英語、長い商品名、エラー文で崩れないか確認します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
コーディングエージェント向け修正指示
目的: 文字間隔変更時にテキストが欠けたり重なったりしないよう、固定高さ、overflow、折り返し、余白を修正してください。ボタンやカードのレイアウトシフトも確認してください。
参考資料
よくある失敗
- overflow hiddenで欠けた文字を隠す。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。