ma-flow

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 が説明の前に現れていないか

Focal point competition

• 同じ強さの焦点が複数ぶつかっていないか
• 主要 CTA と派手な装飾が競合していないか
• 目が止まる場所が曖昧になっていないか

CTA placement

• 主要 CTA が認知経路の自然な終点にあるか
• CTA がスクロールの下に埋もれていないか
• 破壊的アクションが最初に見える場所に出ていないか

Process

1. 最初に目が行く要素を特定する
2. 自然な読み経路をトレースする
3. ユーザーが理解すべき論理順序を並べる
4. 視覚順序と論理順序のズレを洗い出す
5. 余白・ウェイト・位置・サイズで修正案を出す

Constraints

• 主要 CTA は文脈の後に現れなければならない
• 同一階層で等しい視覚ウェイトの競合焦点を作ってはならない
• 条件付き情報は、密度を上げるより段階的開示を優先する
• 余白は階層か分離を伝える目的が必要

Negative List

• 文脈の前のアクション: 何を確認するか分からないうちに CTA が出る
• 競合する焦点: 強い見出し、派手な数値、CTA が同時に最初の注目を奪う
• 密な等価物: 入口のない同格カード群
• スクロールに埋もれた主要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 は判例集。