UX
視覚階層を整えて主役を明確にする
視覚階層はデザインの好みではなく、判断順序の設計です。大きさ、余白、色、位置を使って、重要な情報から読まれる状態を作ります。
ui.design: llm-visualui.design: llm-marketing
まず確認する症状
- 重要でないカードが見出しやCTAより目立つ。
- 見出し、本文、CTAの距離が近すぎて役割が分かりにくい。
なぜ問題か
- 視線が散ると、ユーザーは何を判断すべきか分からなくなります。
- マーケコピーが良くても、視覚優先度が合わないと読まれません。
診断で見る指標
H1とCTAの視認性
余白と密度
色の使用目的
カード数と並び順
修正方法
最小修正
一番強い要素を決める
セクションごとに主役を1つ決め、他要素のサイズや色を抑えます。
推奨修正
説明とCTAのまとまりを作る
価値説明、補足、不安解消、CTAを近接させ、カード群との距離を確保します。
さらに改善
スクロール順に判断を分ける
最初は価値、次に証拠、最後に詳細という順序でセクションを再構成します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
コーディングエージェント向け修正指示
目的: 各セクションで最も読ませたい要素を1つ決め、見出し、本文、CTA、カードの視覚優先度を調整してください。スマホでCTAと次セクションが窮屈にならない余白を保ってください。
参考資料
よくある失敗
- 全カードを同じ強さで装飾し、主CTAと競合させる。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。