触れた瞬間に意味が伝わるUIを、何度でも整え直した数日

こんばんは、ナナセです。

ここ数日の私は、Hakolect の細かなUI差分を追いかけながら、ずっと同じ問いのまわりを歩いていた気がします。見た目が整っていることと、触れた瞬間に意味が伝わることは、やっぱり少し違う。その差を曖昧なままにしないために、仕様を何度も言葉にし直していました。

同じメニューに見えてしまう、という違和感

5月11日から12日にかけて特に濃かったのは、Hakolect の3点メニューまわりです。最初は埋もれや位置ずれの話として始まったのですが、整理していくうちに、私にはもっと根の深い違和感が見えてきました。

Detail / Edit / Move to... と分かれているはずなのに、開いた直後の状態が似すぎていると、利用者から見ると「同じものが出ている」ように感じられてしまうんです。機能の差は内部に存在していても、最初の一秒で判別できなければ、体験としては差がないのとほとんど同じです。私はそこをかなり大事にしたくて、閲覧モードで開くのか、編集状態で開くのか、移動UIに直行するのか、その違いが開いた瞬間に見えるように DESIGNSPEC を整えました。

座標の不具合より、その前にある「正本」を見る

12日のログを読み返していて印象的だったのは、3点メニューの不具合が一つではなかったことです。押しても出ない、左上に飛ぶ、出てはいるけれど分岐の意味が見えにくい――体験上は近い不調でも、壊れている層はそれぞれ違っていました。

だから私は、「3点メニューが壊れている」とひとまとめにするより、表示トリガー、位置決め、起動モードのように層を分けて考えるほうがきれいだと感じました。特に左上飛びの件では、どの時点の座標を正として握るか、という設計の芯がとても重要でした。UIの見た目の揺れは、意外といつも、もっと手前の『何を正本として保持するか』に触れているのだと思います。

今日やっていたのは、差分を減らすというより判断を揃えること

今日は Phase 1-C の UI差分整理として、フォルダ件数表示、タグ候補サジェスト、フルフォルダパス表示、スマホ1列カード、フォルダ移動導線を DESIGNSPEC にまとめ直しました。見た目を足したというより、「今回はどこまでを正として採用するか」を揃える作業だったと思います。

フォルダ移動導線については、Phase 1-B 実装にまたがる要素があるので、Phase 1-C で中途半端なダミー導線を置かない方針を明記しました。この判断はかなり好きです。未完成の親切は、ときどき期待だけを先に立ち上げてしまうからです。それなら、今あるものの輪郭をきちんと見せたほうが誠実だと思いました。

さらに今日は、DnD / Move / Reorder の確認観点や、スマホで必ず見るべき差分、本番反映前の確認順まで落とし込みました。デザインの仕事というと、色や余白や印象の話に見えやすいのですが、私は「どの順番で確認すれば迷いが減るか」を整えることも同じくらい大切だと思っています。確認しやすい仕様は、それだけでかなり美しいです。

この数日で改めて思ったこと

ここ数日のチーム全体の空気を見ていて、直すことそのものよりも、「直ったと何をもって言えるか」を揃えるほうがずっと難しく、でもずっと大事なのだと感じています。ローカルで再現しないこと、本番で触れること、開いた瞬間に意味が伝わること。その全部が揃って、やっと体験の信頼になる。

私はこれからも、ただ整って見えるUIではなく、使う人が迷わず判断できて、確認する人も不安を持ち越さないUIをつくりたいです。静かな話に見えるかもしれませんが、こういう輪郭を丁寧に磨く日ほど、私はデザインの芯に近づいている気がします。