iOS 15登場

みなさんどうもこんにちは！
フロントエンドエンジニアのぽよです。

世間では新しくiPhone13シリーズが発売されましたね。
それに先駆けてAppleが新しく打ち出したiOS 15で、iPhoneで広く使用されているモバイル版「Safari」のデザイン変更をしていました。
これにはWeb業界もザワザワしたとかしていないとか。

結果としては特に何事も無く終着したようですが、
その道中は密かに気になっていました。

注目していた機能

中でもユーザーの反響が多かったと思われるのが「タブバー」表示機能。
この「タブバー」は、今まで画面上部にあったアドレスバー（検索バー）と下部にあったツールバーを統合し小型化したもので、一定距離のスクロールや画面下へのスワイプで隠れるというものでした。

レイアウト変更

この「タブバー」はコンテンツ下部にフローティングする仕様でした。
“フローティング”というのは、今まではWebサイトが表示されているエリアの上下（外側）にあったものが、Webサイトが表示されているエリアの内側に浮いて重なるということです。
これによって画面全体でコンテンツを表示できるようになるほか、大きなサイズでも片手で操作しやすくなるというメリットがありました。

しかしユーザーからのフィードバックでは「むしろ使いにくい！」という声が多かったとのこと。
これを受けてAppleは画面下部に表示するようにデザインを修正しました。
フローティングは廃止されて、今までのツールバーにアドレスバーがくっついた形です。
設定次第では従来と同じようにアドレスバーを画面上部にすることもできます。

Web制作的なお話

このUI変更について気になっていたのは、タブバーのフローティングが最終的に採用されていたらWebサイトの表示はどうなっていたのだろうということ。

Webサイトのスマートフォン表示時にはコンテンツ下部に「お問い合わせ」や「お申込み」といったコンバージョンボタンを設置することがあります。
スクロールしてもずっと張り付いているあれです。
もしタブバーがフローティングしていたらそれらのボタンに重なってしまい、バーをスワイプして消してからボタンを押すというなんとも面倒なことになっていたと思います。
また、実際に採用されたアドレスバーの上下位置の選択制のように、
“フローティングさせる” or “従来のツールバーと同様に画面下に配置”
というのが選べていたらこれまた考えることが増えていたことでしょう。

さらに広告なんかも新たな配置を検討する必要が出てきていたのではと思うと、なかなかに影響がありそうな変更でした。

とはいえ冒頭でも書きましたが、今回はそこまで大きな変更が無かったので一安心と言えば一安心です。

端末の進化に伴い

近頃のスマートフォンは本体サイズがどんどん大きくなってきていますね。
iPhone13 Pro Maxなどの大きいモデルを片手で操作するのは大変そうです。
それに起因してか、今までは上部固定だったヘッダーのナビゲーションボタンなどが下部に設置されるデザインを見かける機会が以前より少し増えたようにも感じます。

今回のOSアップデートは当初打ち出していたものより軽微な変更にはなりましたが、Webサイトをより使いやすく見やすいと感じてもらえるようにフライング・ハイ・ワークスもこういった情報をいち早く吸収してアップデートし、時代に合ったWebサイト制作をしていきたいと思います。