iOSでの下部固定UIに気をつけようの段
今回はちょっとした気づきのメモ。
下部固定、すなわち「Webブラウザの下部にposition:fixed;で固定されスクロールしてもブラウザ下辺にくっついたままになるパーツ」についてです。
ぶっちゃけ心得ている人は十分心得ていそうなので、初めて下部固定を使ったスマホデザインをするぞ！！という人は参考にするくらいでお願いします🤘
具体的に気をつけたほうがいいポイントは2つです。
1. セーフエリアからはみ出す可能性
これはiPhone X以降の端末がメインである場合に気をつけたほうがいい問題です。
セーフエリアとは、iPhone Xから登場した概念で、iPhone Xの端末に特有の角丸・ステータスバー・下部のメニューバーを除いた「ちゃんと表示されるエリア」のことです。詳しいことやサイズ感はググってみてください。
で、下部固定UIはこの中のうち「iPhone X以降で常に表示される下部のメニューバー」とぶつかる可能性があります。
実装自体は色々方法がありそうなので、実装時点で回避することも可能そうではありますが、なるべくデザイン段階で回避しておきたい課題です。
下部固定のメニューやボタンをを作成する際はbottomに余裕を持たせ、メニューバーと被らない・メニューバーがあってもバランスが良く見えて問題なく使えるようなデザインを意識しておきたいところですね。
2. タップ判定を弾かれる
こちらはどの端末でも起こり得る問題です。
iOSのSafariでは、
下へスクロールを始める（ブラウザの下部メニューが一旦引っ込む）
スクロールを止めてブラウザの下部メニューが本来あった範囲内にあるリンクやボタンを押す
という動作をした場合「押したかったはずのリンクやボタンのタップは無視され、まず引っ込んでいたブラウザの下部メニューが出現する」という仕様があります。つまり単純に下部固定にあるものは基本的にタップが二度手間になります。
以上の理由から、Webで下部固定UIを作成した場合、iOS Safariではネイティブアプリのようなスムーズなタップを実現することが難しそうです。（実装でどうにかしてる人もいるっぽいけど…）
もちろん時と場合によるとは思いますが、叶えたい体験に対し、本当に使えるUIかどうか？を検討する際の材料として、覚えておきたい点かと思います。
ということでiOS Safari で気をつけたい下部固定デザインのお話でした。
余談ですが、弊社内ではiOS Safariのメニューバーデザイン変更があった際に「下部固定で広告を追従させるのは日本のwebメディアに特に多いもので海外ではそんなポピュラーじゃないらしい」という話題が盛り上がったりしました。
そういった利用シーン含め下部固定のデザインができると良さそうですね。
ちなみにこういった下部固定UIパーツの実装方法・解決編については後日弊社のShibaが書いてくれるようなので、執筆されたらこちらにリンクします！
また私の所属するDa Vinci Studioデザイン部ではこんな感じの記事をマガジンで週2回ほど配信していく予定ですので、こちらもよければチェックしてみてください！
この記事が気に入ったらサポートをしてみませんか？