🎴

Day12｜モバイルUIは「情報を削る」が正解だった。下タブ導入+文字削減＋αで一気に整理/日本・予測市場サイト(個人開発)

に公開
個人開発
ノーコード
Vibe Coding
polymarket
idea

今日はバイブコーディング12日目。

前回に引き続き、モバイルで表示したときのUI改善に取り組んだ。

Day11でも、モバイル向けに調整はしてきた。そして、昨日まではおお！と自分で思っていたが、
やっぱりまだ 使いにくさが目立つ。

とくに気になったのが次の点👇

  • ランキングやマイアカウントが、メインからじゃないと押せない。
  • 要素が分散していて、どこに何のボタンがあるかわからない。
  • 必要以上に情報説明がある。

「これ、ネイティブアプリっぽくしたいな」と思い、
よくあるスマホアプリの UI を思い返した。

例えばホーム下部にある ナビゲーションバー（下タブ） みたいなやつ。

下側固定ナビゲーションの導入

そこで、今回入れた改善の主役はこれ👇

📱 下部タブUI（Footer Navigation）

画面の下に常に表示されるナビゲーションを追加した。

  • マイページ
  • アカウント
  • 履歴
  • ホーム
  • フォロー

こういった主要な画面に、1タップで移動できるようにした。

サイドバーは PC のまま残しつつ、
モバイルでは 下タブUIを優先することで統一感を出した。
ついでに、ボタンも小さくしたり、フル画面のようにしたり。

この構造、よくあるスマホアプリっぽくて、
体感としてもかなり自然になった。

文字を削ると、一気に見やすくなる

それと気づいたのがコレ。Day11を見てほしい。
結構文字が多い.. 総ポイント、参加者、グラフの名前

モバイルでは文字が多いと、一瞬で情報が埋もれる
というか、過剰説明に見える。

Web画面だと読み飛ばせても、
スマホでは文字が画面いっぱいに出てくるだけで
判断疲れが一気に来る。

なので、今回 UI をいじりながら

  • 不要な説明文を削除
  • ラベルを短く整理
  • アイコン中心の表示にシフト

という形にしたら、
画面がすっと軽くなった。ネイティブアプリっぽい！！　昨日までが嘘みたいに

結果として…

  • オッズグラフが見やすくなった
  • 下のボタンから、必要なアクションに移れるようになった
  • 不要情報が消えたことで操作迷いが減った

という手応えがある。

似てくる理由がなんとなく分かってきた

最近よく Polymarket や Kalshi の画面を見直すんだけど、
やればやるほど似た設計になるのが不思議じゃなくなる。

これはたぶんこういう理由だ。

  • 表示できる情報は限られる
  • 操作は最速で終わるべき
  • 迷わせない UI が優先される

などの条件が揃うと、
必然的に似てくるデザインになるんだな、と。
（もちろん、細かい体験設計は違うけど）

今日やったことまとめ

今日は以下の改善をした：

  • モバイル用の 下部ナビゲーション（下タブUI） を導入
  • 画面上の 文字量を大胆に削減
  • サイドバーは PC / タブレット向けに残しつつレスポンシブ対応
  • 予測期間選択機能追加

メチャクチャ派手な機能追加じゃないけど、
体験が一気に安定した感が出てきた。

まだ気になること

UI は良くなったけど、
根本的にはまだ気になる点がある。

  • スクロールの視線移動をもっと最適化したい
  • 片手で操作できるようなUXになるのか?
  • 予測完了までの体験はスムーズか??

こうした点は、
「UIを微調整して感じを詰める」フェーズに入ってる気がする。

明日の方針

明日は引き続き モバイル UI の改善と調整をやっていく予定。

UI にこだわりすぎて、
予測機能が後回しになってる気もするけど…

こうやって UI が安定すると、使う気持ちも変わる はず。

また、進捗を載せます。
バイバイ 👋

Discussion