こんにちは！デザイナーの新谷です。
2021年9月に正式リリースされた「iOS 15」safariのUIデザインについて簡単にまとめました。
iOS15はベータ版から改良が進み、さまざまな機能が実装されました。中でも大幅に刷新されたのが「Safari」です。メジャーアップデートということで、UIが変更されアドレスバーの位置が変わり「タブバー」と「タブグループ」を採用し再設計されました。
※iOS15.1で2021年12月10日時点の考察となります。
ベータ版は当初このアドレスバーが下部に来ることで、Webページのデザインに影響（下部固定されたアドレスバーがWebのコンテンツ（メニューやボタンなど）の上にレイヤーで被さる仕様となっていた）を与える可能性があることから、TwitterなどSNSでも話題となりました。今現状のSafaiはどうなっているのかみていきたいと思います。
※ベータ版時点での下部アドレスバーと、タブ切り替えはコンテンツに被っています
大幅に変更された「Safari」UIデザイン
iOS 15のSafariでは、UI（ユーザーインターフェース）の側面と機能面の両方で大幅に進化。今回はそのUIデザインにフォーカスします。
上部固定だったアドレスバーが下部へ移動
モバイルなどプロダクト自体の進化はどんどん進んでいます。ディスプレイの解像度も高くなり大型の画面が主流になる中で、片手で操作することが困難なケースが増えてきました。
常時上部に固定されていたSafariのURLを入力する「アドレスバー」が画面下部に移動したことは、快適なブラウズ体験のための大きな変更点の一つだと捉えています。これにより画面のいちばん上まで指を伸ばさずにサイトアドレスや、検索ワードの入力を手元で操作することが容易になりました。
ベータ版当初、Webサイトのコンテンツに重なっていたアドレスバーはレイヤーのようには被らない仕様に変更されました。実質上部のアドレスバーがそのまま下部に固定される形となった。
アドレスバーを下部固定のスワイプが便利
アドレスバーが下部固定されている場合は、スワイプすることで切り替えが可能となり、他で開いているページに素早く切り替えることができます。直感的にタブの切り替え、アクセスが容易になりとても快適になりました。
画面上部のアドレスバーでの操作に慣れたユーザーにとっては、元に戻したいと感じることもあるかもしれませんが、下部固定をブラウザ上のアドレスバーの設定から簡単に元に戻すこともできます。端末の設定アプリに戻ることなくブラウザ上から変更できるのはとても便利です。
「設定」アプリの「Safari」の項目からタブの詳細設定ができます。「タブバー」または「シングルタブ」どちらかを選択するだけです。
UIに紐づく機能面のアップデート
UIデザインに絡む、機能面のアップデート内容を簡単に紹介します。
アドレスバーのスライドでタブの切り替えが可能
上段で少し触れましたが、Safariでwebサイトを閲覧中、アドレスバーを左右にスワイプ（スライド）することで別のタブに素早くアクセスできます。いろんなWebサイトを見たり、タブをたくさん開いて使用する場合、直感的に簡単に切り替えることができます。これまでのようにタブ一覧を表示して、タブをタップしてという手間がかからなくなりました。
また、アドレスバーを上に向かってスワイプすることで、タブの一覧を瞬時に表示してくれます。
タブをグループごとに分けることができる
iOS 15のアップデートで大幅な変更点として「タブグループ」があります。タブを「仕事」、「趣味」など目的ごとにグループ化して整理しておくことで、閲覧したいページへのアクセスが迷うことなく容易になります。
タブの一覧画面を表示し画面下中央のタブをタップして【新規タブグループ】を作成するか、タブ一覧のプレビューを長押しまたはアドレスバーを長押しすることでも新規タブ作成に遷移できます。
新規タブグループに名前をつけて、サイトを目的ごとに振り分けるだけでOKです。
スタートページの背景イメージなどカスタマイズできる
Safariを起動した際や新規タブでの「スタートページ」のカスタマイズ性も高まりました。背景イメージを好みの画像に設定したり、「よく閲覧するサイト」や「プライバシーレポート」、「リーディングリスト」などの表示切り替えも簡単に行えます。スタートページの【編集】から設定できます。
まとめ
iOS 15へのアップデートで大幅に進化したSafariのインターフェース部分中心にみていきました。新しくUI設計されたSafariでは、モバイルファーストな観点と、好みにパーソナライズできる快適になったブラウジング体験ができると感じました。その他機能面では、日本語翻訳機能やビデオの再生速度の変更、機能拡張のインストールなど様々な機能が追加されています。
UIUXデザインは、デザインリサーチを通じて、日々進化するテクノロジーやプロダクト、世の中のニーズを捉えユーザーの利用シーンや目的、価値観を特定し、最適なUIと体験をデザインしていくことが大切だとあらためて感じました。
以上、新谷でした！
また次回の記事でお会いできれば嬉しいです。
こちらの記事もおすすめです
様々なサービスやプラットフォームを通じて、UIUXデザイン関連の考察を連載しています。ぜひこちらもご覧ください。
Contact
各種デザインやイラスト制作承ります！お気軽にお問い合わせください。