AIダッシュボードのUI改善｜センスが悪いと言われた観測レーダー、原因は配色ではなく構造だった

最初の修正で、なぜ足りなかったのか

初稿には実装上の問題もあった。レイアウトの行数と実際の要素数が合わず、操作バーが必要以上に引き伸ばされ、肝心の観測画面が最初の表示範囲から押し出されていた。この問題はレイアウト修正で解決したが、それだけでは評価の核心に届かなかった。

次に、ノードの移動、関連線の描画、ガイド再生を追加した。しかし、それらは散布図の上で動いているだけだった。ユーザーが評価していたのは「動くこと」ではなく、中心を軸に世界観が組み上がることだった。

BASEを中心に「意味が回る」設計へ

最終版では中央へ「BASE / AI副業」を固定した。その周囲を3本の楕円軌道に分け、内側を今すぐ深掘りするテーマ、中間を現在伸びているテーマ、外側を次に備えるテーマとした。

回転方向と速度を変えたのは、装飾のためではない。3つの情報層が独立して動いていることを伝え、中心との距離を優先度として読めるようにするためだった。ノードに触れている間は周回を止め、ラベルを読めるようにもした。

AI観測レーダーの完成構造を記事内で動かす

完成版の考え方を、記事内で触れられる簡易成果物として再現した。中央のBASEが目的、3本の軌道が優先度、異なる速度と方向が情報層の違いを表す。マウスを載せると周回が止まり、ラベルを確認できる。

壊さず改善するために行ったこと

今回は、修正前にレイアウト版とモーション版の2つのセーブポイントを作った。さらに「FORECAST MARKET」以降を保護領域と定義し、変更前の内容から照合用の指紋を作成した。

修正後に同じ範囲を再計算した結果、保護領域は3,585バイトのまま一致した。見た目の確認だけでなく、「下部が1文字も変わっていない」ことを機械的に確かめた。

今日から再現できる3ステップ

今回の学び

「センスが悪い」という反応は抽象的だが、放置する必要はない。どこで視線が止まり、何が中心に見えず、動きが何を説明していないかへ分解すると、具体的な設計課題へ変えられる。

AIへ修正を任せる場合も同じだった。「もっと良くして」だけでは、AIは安全な範囲で配色や余白を整えやすい。構造を変える必要がある時は、中心概念、座標モデル、動きの意味、変更禁止範囲まで伝える必要がある。

実際の体験画面はAI観測所で確認できる。観測データだけでなく、次に作る記事や実演を決めるための画面として育てていく。

あなたは情報設計とUIモーションのレビュー担当です。既存ページを改善してください。

【目的】
見た目を派手にするのではなく、ユーザーが中心・優先度・関係性を直感的に理解できる画面へ変える。

【入力】
- 評価が低い現状ページ
- 評価が高い基準ページ
- ページで最も伝えたい中心概念
- 変更してよい範囲
- 絶対に変更してはいけない範囲

【SEO定義】
0. 執筆前に狙う検索キーワードを1〜2個決め、その検索ユーザーが本当に知りたいことを一文で定義する。タイトル、見出し、冒頭、成果物の説明へ自然に配置する。

【進め方】
1. 2ページを、配色・余白・視線の入口・情報の中心・階層・動きの意味で比較する。
2. 評価が低い原因を、表面の装飾と情報構造に分けて説明する。
3. 修正前にセーブポイントを作る。
4. 変更禁止範囲の内容から照合用の指紋を記録する。
5. 中心概念を核に、情報の距離・順序・つながりを再設計する。
6. 動きは装飾ではなく、関係性や優先度を説明する場合だけ使う。
7. フィルター、選択、閲覧中の一時停止、スマートフォン表示を確認する。
8. 修正後、禁止範囲の指紋が一致することを確認する。
9. 失敗例と成功例の実物を比較画像で提示し、動的UIなら記事内で触れられる簡易成果物も埋め込む。

【出力】
- 問題の原因
- 新しい構造の意図
- 実装した変更
- 動作確認結果
- 変更禁止範囲が維持された証拠

この要素をそのままコピーして使うといい。モデルがUI制作専用でなくても、比較、構造変更、セーブポイント、保護範囲の検証まで必要な要素を加えてあるので、普通に「デザインを良くして」と質問するよりは具体的な回答を得やすいはずだ。