今回は、主催者向けの画面を作った話と、凝ったUIを作って結局諦めた話です。
主催者向けの画面を作った
前回まで参加者側のカードUIを作っていましたが、今回は主催者として見る画面を実装しました。
自分が主催するイベントのカードをタップすると、2つのタブが表示されます。
- 相談・応募タブ: 興味を持ってくれた人の一覧
- 詳細タブ: イベントの内容（既存の画面を再利用）
最初はシンプルなリスト表示で作ったんですが、実際に見てみると判断に必要な情報がまったく足りない。
相手の自己紹介や、持っている装備の情報が見えないと、安心して承認できません。参加者側で作ったリッチカードのパターンをそのまま適用して、全面的に書き直しました。
書き直し後のカードには、アバター、名前、自己紹介（2行まで）、安全装備タグ、最新メッセージのプレビューなど、判断に必要な情報を詰め込んでいます。情報量は多いですが、渓流釣りという趣味の特性上「熊スプレーを持っているか」「遊漁券を理解しているか」が一目でわかることが重要です。
カードからの直接操作
メッセージ画面まで開かなくても、カードの長押しメニューから直接「承認する」「見送りにする」ができるようにしました。
ステータスによってメニュー項目を出し分けます。承認待ちの場合は3つ（メッセージを開く・承認する・見送りにする）、それ以外は1つ（メッセージを開くのみ）。
承認・見送りには確認ダイアログを挟みます。特に見送りは取り消しが効かないので慎重に。
凝ったUIを作って結局諦めた
メッセージ画面の上部にある進行状況の表示を、もっとわかりやすくリデザインしようとしました。
もともとは一直線の3ステップ（相談 → 応募 → 承認）でしたが、実際には「見送り」という分岐があります。それを別の場所に小さいボタンとして置いてあるだけで、全体の流れが見えない。「今どこにいて、次に何ができるのか」をUIで一目で伝えたい、と。
最初は横並びで2つのボタン（承認・見送り）を置くデザインを考えましたが、「見送りは目立たせたくない」ということで1つのボタンにまとめる案に。もう一つ大事にした原則は自分が次のルートを決められる場合にのみ分岐を表示すること。参加者側の画面で「見送られるかも」という分岐を見せるのは不安を煽るだけです。
いろいろ試行錯誤して、最終的にこんな実装にたどり着きました。
- スタックベースのレイアウトを捨てて、ZStackで各要素を絶対配置
- ラインはPathで描画。分岐はQuadCurveでなめらかに
- 承認判断ボタンは吹き出し形状（Shapeプロトコルで自作）
ビルドも通って「これで完璧！」と思いました。
どこから修正したらいいか迷うレベル
実際にビルドして実機で見てみたら…絶望でした。自分のイメージとはまるでかけ離れた、落書きのようなUIとも取れない何かがそこにはありました。
パスを使って少し複雑なことをやろうとするのは一旦取りやめ。
結局、凝ったUIはローンチ後に回すことにしました。ローンチ前は機能を優先。
シンプルに戻した
全て元のシンプルな線形3ステップに戻しました。分岐レイアウト削除、吹き出し削除、Path描画削除。
学んだこと
- ローンチ前は凝ったUIより機能優先: 動作する単純なUIの方が、動かない凝ったUIより価値がある
- 「できる」と「良い」は違う: 技術的に実装できても、UIとして良いかは別問題
- 遠回りも学び: ZStack + Path + Shape の実装経験は無駄じゃない。次に本当に必要になったときに活きる
コメント