視覚階層を整えて主役を明確にする

視覚階層はデザインの好みではなく、判断順序の設計です。大きさ、余白、色、位置を使って、重要な情報から読まれる状態を作ります。

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

まず確認する症状

重要でないカードが見出しやCTAより目立つ。
見出し、本文、CTAの距離が近すぎて役割が分かりにくい。
PCでは整って見えるが、スマホ、ズーム、長い文言、低速表示で判断順が崩れる。
カードや装飾の量が多く、見出し、本文、CTA、入力欄の役割差が弱い。

なぜ問題か

視線が散ると、ユーザーは何を判断すべきか分からなくなります。
マーケコピーが良くても、視覚優先度が合わないと読まれません。
UXの問題は単一コンポーネントではなく、読む順番、操作順、待ち時間、復帰導線のつながりで発生します。
AIに画面修正を依頼する場合も、見た目の好みではなく、ユーザーが判断・操作できる条件へ落とす必要があります。

診断で見る指標

H1とCTAの視認性

余白と密度

色の使用目的

カード数と並び順

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

視覚順とDOM順の一致

主CTAまでのスクロール量

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

最初に目に入る要素

セクションごとの主役

色の役割数

カードとCTAの競合

修正方法

最小修正

一番強い要素を決める

セクションごとに主役を1つ決め、他要素のサイズや色を抑えます。

推奨修正

説明とCTAのまとまりを作る

価値説明、補足、不安解消、CTAを近接させ、カード群との距離を確保します。

さらに改善

スクロール順に判断を分ける

最初は価値、次に証拠、最後に詳細という順序でセクションを再構成します。

受け入れ条件

01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
04PC、スマホ、320px幅、長い文言のいずれでも、主要情報と操作が重なりや欠けなく確認できる。
05ユーザーが読む順番とTab移動や画面構造の順番が大きく矛盾しない。
06各セクションで、一番読ませたい見出し、本文、CTA、証拠の順序が視覚的に分かる。
07装飾、カード、バッジが主CTAや重要説明より強くならない。

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

目的: 各セクションで最も読ませたい要素を1つ決め、見出し、本文、CTA、カードの視覚優先度を調整してください。スマホでCTAと次セクションが窮屈にならない余白を保ってください。追加確認: 修正前に画面内の要素を『判断に必須』『安心材料』『補助情報』『装飾』へ分類し、強弱を再設定してください。

参考資料

よくある失敗

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