最近見て良かったUI（baigieのランディングページのナビゲーション）

最近流れ着いたbaigieのランディングページのスマホ用ハンバーガーメニューがいい感じだった。 スクショは勝手に貼っているので怒られたら消す。

ハンバーガーメニューのUI自体は比較的よくあるものだが、結構独特な場所に配置されている。 位置が右下にあるので右手で持ったときに親指で押しやすい。 アニメーションもヌルヌルしていて操作体験が良い。

ただこのレイアウト、ユーザーが右手で操作しているか左手で操作しているかによって体験が違うので、右と左どちらにボタンを配置するかは悩ましいものがある。 Googleで1分ほど調査したところ、一番上に出てくるサイトがいい感じの調査結果を載せていた。 年代によって差はあるが右手と左手で割合はほとんど半々という状況のようだ。

ただし踏み込んで「日本人のスマホ操作の仕方」を見ると左手で持つ人の多くが、左手で持って右手人差し指で操作している。 右手親指で操作をしている人が若年層では過半数を超える状況なので、右手親指で操作しやすい左下にナビゲーションを配置するのは一定の妥当性がありそうだ。

実装

いい感じのUIだったのでブログに実装してみた。コード自体は長くなるのでgistに置いておく。

少しアニメーションを作り込む必要を感じたので、これを機会にreact-transition-groupを試してみた。 多少学習コストはかかるが比較的簡単にアニメーション周りのCSSを管理できるようになる。

ハンバーガーメニューは自分で作るのがしんどかったので、このサイトから拝借した。 モーダルはposition: fixedを指定して、keyframeを使って拡大縮小処理を入れている。 中身のコンテンツも一緒に拡大縮小してアニメーションされるとちらついて醜いので、最初は非表示にしておいて拡大処理が終わった後に別のアニメーションで透過度をいじるようにしている。

この手のアニメーション周りを凝り始めると実装コストが跳ね上がってしまう。ゲームなどのUIデザイナーや開発者は凄い。