読みやすい本文と説明密度に整える

読みにくさは文字サイズだけでは決まりません。誰に向けた説明か、専門用語の補助があるか、本文とCTAの距離が適切かを合わせて見ます。

ui.design: llm-visualui.design: llm-marketing

まず確認する症状

DOM、決定論、リフローなどの専門語だけで説明している。
短いカードが多く、具体例や判断材料が不足している。
PCでは整って見えるが、スマホ、ズーム、長い文言、低速表示で判断順が崩れる。
カードや装飾の量が多く、見出し、本文、CTA、入力欄の役割差が弱い。

なぜ問題か

マーケ担当、事業責任者、開発者が同じページを読む場合、用語の橋渡しが必要です。
情報密度が低すぎると信頼が弱く、高すぎるとCTAまで進めません。
UXの問題は単一コンポーネントではなく、読む順番、操作順、待ち時間、復帰導線のつながりで発生します。
AIに画面修正を依頼する場合も、見た目の好みではなく、ユーザーが判断・操作できる条件へ落とす必要があります。

診断で見る指標

専門用語の補足

段落の長さ

箇条書きの具体性

CTAまでの読了負荷

スマホ390px/320pxでの読了と操作

視覚順とDOM順の一致

主CTAまでのスクロール量

エラーや待ち時間からの復帰率

1段落の論点数

専門語の補足率

箇条書きの行動具体性

CTA前の読了負荷

修正方法

最小修正

専門語に言い換えを添える

リフローなら「拡大時の崩れ」のように、非エンジニアにも通じる補足を入れます。

推奨修正

1段落1論点にする

課題、理由、成果物、次アクションを短いまとまりへ分けます。

さらに改善

対象読者別の入口を作る

SaaS/EC/制作会社/開発者のように、読みたい文脈へ移動できる導線を置きます。

受け入れ条件

01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
04PC、スマホ、320px幅、長い文言のいずれでも、主要情報と操作が重なりや欠けなく確認できる。
05ユーザーが読む順番とTab移動や画面構造の順番が大きく矛盾しない。
06非エンジニアにも必要な判断ができるよう、専門語に短い言い換えや例が添えられている。
07本文は、課題、理由、直し方、確認方法が混ざらず、必要な場所では箇条書き化されている。

コーディングエージェント向け修正指示

目的: 専門用語に直感的な補足を添え、段落と箇条書きを1論点ずつに整理してください。CTAや重要条件が長文に埋もれないようにしてください。追加確認: 説明を短くする場合も、誰が何を判断するための情報かを残し、抽象語だけのカードを増やさないでください。

参考資料

よくある失敗

説明を削りすぎて、判断材料まで消す。
見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
FigmaやPC表示だけで判断し、実際のスマホ幅、キーボード表示、読み込み待ちを見ない。
密度を下げるために必要な説明まで削り、判断材料を不足させる。