ma のサブスキル。情報の明瞭性と目的ある装飾という哲学を、視線の経路に適用する。
When to Use
- CTA が見つけにくいとき
- 何を先に読めばよいか分からないとき
- 画面が複数の焦点で競合しているとき
- 文脈の前にアクションが出ていて理解が追いつかないとき
Do Not Use
- コントラストやフォーカス可視性だけを見たいとき。
ma-legibilityを使う - ボタンが何に作用するかだけを見たいとき。
ma-mappingを使う - 情報量過多を減らしたいだけのとき。
ma-reductionを使う
Core Principle
目がインターフェースを通る経路はデザインの決断だ。 間違った順序で出会う情報は混乱を生む。 正しい順序で出会う情報は直感的に感じられる。 フローは装飾ではない。理解の構造である。
What to Audit
Entry point and first impression
- 目が最初にどこに着くか
- それは本当に最も重要なものか
- ページの目的は最初の可視要素で伝わるか
Reading order
- 文脈 → 詳細 → アクションの順になっているか
- 2 カラムでも線形化したときに意味が保たれるか
- CTA が説明の前に現れていないか
- 余白の rhythm が読順を支えているか、それとも等間隔で意味を平坦化していないか
- negative space が焦点を隔離しているか、それとも意味のない空白として残っていないか
Focal point competition
- 同じ強さの焦点が複数ぶつかっていないか
- 主要 CTA と派手な装飾が競合していないか
- 目が止まる場所が曖昧になっていないか
CTA placement
- 主要 CTA が認知経路の自然な終点にあるか
- CTA がスクロールの下に埋もれていないか
- 破壊的アクションが最初に見える場所に出ていないか
Process
- 最初に目が行く要素を特定する
- 自然な読み経路をトレースする
- ユーザーが理解すべき論理順序を並べる
- 視覚順序と論理順序のズレを洗い出す
- 余白・ウェイト・位置・サイズで修正案を出す
Constraints
- 主要 CTA は文脈の後に現れなければならない
- 同一階層で等しい視覚ウェイトの競合焦点を作ってはならない
- 条件付き情報は、密度を上げるより段階的開示を優先する
- 余白は階層、境界、焦点、またはペース制御を伝える目的が必要
- 余白の rhythm を崩すなら、その崩れ自体が読順上の意味を持たなければならない
- negative space は local density を下げ、主要情報や主要CTAを隔離する意図がなければならない
Negative List
- 文脈の前のアクション: 何を確認するか分からないうちに CTA が出る
- 競合する焦点: 強い見出し、派手な数値、CTA が同時に最初の注目を奪う
- 密な等価物: 入口のない同格カード群
- 等間隔で平坦化された読順: タイトル、本文、CTA、次セクションが同じ gap で並び、どこで意味が切り替わるか分からない
- 焦点を作らない空白: 空白があるのに、重要要素の隔離やペース制御に効いていない
- スクロールに埋もれた主要CTA: 今すぐ必要な行動が深い位置にある
- 線形化で崩れるレイアウト: 広い画面でしか意味が成立しない
Output Format
### ma-flow findings
| Element | Issue | Severity | Action |
|---|---|---|---|
| [要素] | [どの原則に違反し、なぜか] | high / mid / low | fix / defer / accept |
Summary: [発見された問題のパターンについての1-2文]
問題が見つからない場合は No violations found. と明示する。
Examples
Positive example 1
入力: 「CTA が見つけにくくて、何を先に読めばいいか分からない申込みページを見て」
期待: エントリポイント、読順、CTA 到達性の問題を優先順位付きで返す。
Positive example 2
入力: 「2カラムの管理画面なんだけど、重要情報よりサブ情報に目が行く」
期待: 競合フォーカルポイントと読み順崩壊を指摘する。
Negative example
入力: 「フォーカスリングが見えないのでアクセシビリティだけ見て」
対応: ma-flow ではなく ma-legibility を使う。
哲学が審判。Negative List は判例集。