さてさて、iPhoneXが発売され、しばらくたち、ネガキャンもどんどん減ってきた今日この頃。
ディスプレイ上部の通称M字ハゲがなんだかんだと言われていますが、我々webデザイナーにとってはそんなに関係ありません。サイトタイトルが常時表示されていて、まっすぐ切れているのでOK。

が、ディスプレイ下のカーブ、R、これがいけません。これまで実装してきたあれこれが・・・。

最上部に戻るボタンの位置、大丈夫ですか？

けっこう主流なものだったりして、スクロールに追従する「最上部にスクロールするボタン」これが、位置の問題が出てきます。

たとえばですが、position:fixed;、right:10px;、bottom:10px;なんて設定していると一部画面外になってしまったりします。

ボタンを小さくするか、もっと内側に寄せるかしなきゃです。

画面最下部に追従ナビゲーションついてませんか？

これは、先ほどの見た目の問題よりもはるかにきつい話。

追従ナビゲーションをheight:50px;程度で設定していると、上にスワイプするホームボタン（バー？）にモロ被り、なななんと、そっちが優先されるため、タップすると下からニョキッと、ブラウザのメニューが出てきます。もう一回任意のリンクボタン押せば、たしかにリンク先に飛べますが、この、「一回ニョキ」って結構不快です。

heightをもっと高くすれば良いのかもしれませんが、他機種のメイン表示領域をどんどん狭めていくことになり、これまた不快。

どうやら最下部から70pxくらいまでは安全じゃない様子。日本で覇権を取り続けているiPhoneがこのままホームボタンなしに移行していくと、どうやらwebで最下部追従ナビゲーションとか、お問い合わせボタンの追従などはやめなければならなくなりそうです。

まだまだiPhoneXの普及率はかなり低いのでなんとかなっていますが、もう、追従ナビとかクライアントに依頼されても諦めてもらう方が良さそうかもしれません。

スマートフォンサイズで横に追従つけたりするのもいまいちだし、これまでにも何件か最下部に追従するものをつけてきましたが、結局ヘッダーをうまく使うとか、横スワイプのメニューとかにおとなしくしておいた方が良いかもしれませんね。

 

今回のまとめ

Apple、まだまだこんなもんじゃないだろ。