アプリとWebのUIを融合させる試行錯誤

アプリ内でWebview（アプリ内ブラウザ）を活用する話をnoteでちょいちょい書いてきました。

僕が強くオススメするまでもなくWebviewはアプリでたくさん活用されているんですが、このWebviewをアプリ内でうまく使おうとすると、このブラウザ部分のUIをどうするべきかという問題にブチ当たります。ブチ当たるはずです（断言

アプリとWebブラウザには標準的なUIに差があって、安直に作ってしまうと使い勝手の面で違和感が出てしまいがちです。今回はこのあたりのことを書こうと思います。

大手も試行錯誤しているWebviewのUI

実はこの問題については大手でも対応に差があります。統一的なUIとかあってもよさそうなものですが、意外とそうはなっていません。

まずは著名なアプリのWebviewについてUIを調べてみようと思います。

Facebookの場合

Facebookアプリは外部のWebサイトを開く際にWebviewを使っています。iOSの場合は下からニュルッと新しいウインドウが出てきて（一般的にモーダルウインドウと呼ばれます）、その中がブラウザになっています。

以前は画面全体を新しいウインドウが覆っていましたが、2020年4月の時点では裏側が少し見えてる形になっています。俗に“半モーダル”と呼ばれる表示方法なんですが、ウインドウが重なっていることが直感的にわかる利点があります。

ブラウザとしての機能はウインドウの上部に一通り揃っています。URL表示の左右にある←→のボタンがブラウザの「戻る」「進む」になっていて、×ボタンをタップするかウインドウを下にスワイプするとブラウザを終了してFacebookアプリに戻ります。

右上の「…」にその他の機能が集約されていて、ブラウザとして必要な「リロード」のほか、Facebook独自の機能がいくつか用意されています。

Facebookの場合、外部のブラウザに遷移させてしまうとFacebook独自の「シェア投稿」や「アイテムの保存」の使い勝手が悪くなってしまうため、単純に外部ブラウザに遷移させるのではなくWebviewでアプリ内ブラウザを用意していると考えられます。

Android版は作りが異なる

僕みたいにiOSとAndroidを2台持ちして使い分けてないと気づかないかもしれませんが、FacebookアプリはiOSとAndroidでUIがかなり違っていて、それはこのWebview機能に関しても同様です。

まず、ウインドウの出現の仕方からして違います。Androidの場合はモーダルウインドウではなく、画面の右から新しいウインドウがスライドインしてくる形になっています（iOSではプッシュ遷移と呼ばれます）。

そのためiOSでは×があったところが「＜」になっていて、それを押すとウインドウが右に押し出されて元の画面に戻るようになっています。これはいわゆるブラウザの「戻る」とは動きが違っていて、このWebviewのブラウザ内でページをどんどん進んでいっても「＜」を押すといきなりWebviewが閉じて元の画面に戻ってしまいます。

ではブラウザの「戻る」の操作がAndroid版ではできないのか、というとそうではありません。

Androidの標準的なUIとして重要なのがOSとしての「戻る」ボタンの存在です。上のスクリーショットでいうと画面下部の黒帯部分にある「＜」がそれです。

Androidはアプリをまたがった遷移であろうが、この「戻る」を押すことで1つ前の画面に戻ることができるというUIになっていて、このWebview内で1つ前のページに戻るという操作はこのOS側の「戻る」ボタンを使うようになっています。

iOSの人にはあまりしっくりこないUIかもしれませんが、Androidを使っている人にはこのほうが自然な操作感になります。Facebookアプリの場合はiOSとAndroidそれぞれの標準に沿うようにUIが作られている印象があります。

右上の「…」内のメニューに他の機能が集約されているのはAndroid版も同様ですが、iOSと違うのはブラウザの「進む」ボタンにあたる機能もこのメニュー内に取り込まれている点です。

Twitterの場合

Twitterの場合iOSではSafariview、AndroidではChrome Custom TabsというWebviewと標準ブラウザアプリの中間のようなブラウザ機能を使っています。

機能的にはそれぞれの標準ブラウザ（iOS→Safari｜Android→Chrome）とほぼ同じですが、どちらもアプリ内のウインドウとして表示されるので、「完了」や「×」を押すことでブラウザウインドウが閉じてアプリの元の画面に戻ることができます。

そのため使い勝手はWebviewによるアプリ内ブラウザと近く、また中身は標準ブラウザとほぼ同じなので動作も軽快。また、スマホサイトとしてきちんとテストされているサイトであれば基本的に問題なく動くというメリットがあります

ただ基本的にブラウザ部分のカスタマイズができない（Chrome Custom Tabsはちょっとできます）ので、Facebookのようにオリジナルの機能を入れないと使い勝手が悪かったり、ECサイトに自動的にログインするような仕組みをブラウザに組み込みたいという場合は使えません。

Twitterの場合はリツイートやリプライなどのアクションをTwitterアプリ内で完結させるような設計になっているので、外部サイトの閲覧に関してはSafariview等で十分だったのだと思います。

AndroidのChrome Custom Tabsは少しカスタマイズができる仕様なので、流れはiOSのSafariviewと同じですが、ナビゲーションバーのところに閲覧中のページを引用してツイートできる「TWEET」ボタンが追加されています。

Googleアプリの場合

Googleアプリの場合はiOSとAndroidで少々事情が違います。Androidの場合はTwitterと同様にカスタマイズを加えたChrome Custom TabsでWebページを開く仕様になっていますが、iOSはSafariviewではなく下のスクリーンショットのように独自に作り込んだカスタマイズWebviewのブラウザになっています。

このWebviewによるブラウザはAndroid版と比べると機能が多くて、URL表示部分をタップするとURL直打ちもGoogle検索もできますし、アプリのホーム画面に戻るボタンやシェアボタン、また下のメニューを引っ張り上げると他のWebページのレコメンドまで出てきます。

なんというか、敵の土俵であるiOS上でGoogleアプリ内から出て行かないよう、徹底的に囲い込もうという強い意志を感じるUIだなと思います。

Safariの検索エンジンはGoogleが標準なんで別にそこまでしなくてもいいのでは？ と思われるかもしれませんが、ユーザーがどのコンテンツに興味を持っているかとかしっかりデータを取りたいと思ったとき、Safari上で検索結果を表示するだけでは足りないのです。Androidは自分の土俵なので、そういったデータ取得を好きなようにできてしまいますが（もちろん適法の範囲で）、iOS上ではこういったところまで考えなくてはいけないということなのでしょう。

LINEの場合

LINEにもアプリ内ブラウザが備わっています。Webviewです。

いまのLINEはスーパーアプリ化の方向に向かっていて、どんどん増えていく機能の中にはWebで提供されているものも多くあります。それらをきちんと連携させようと思うと、LINE IDでのログイン連携等が作り込めるWebviewによるブラウザが必要になってくるはずなので、必然的にこういう流れになるんだと思います。

Webviewブラウザ自体はモーダルウインドウで、ブラウザの戻る・進むボタンと、ウインドウを閉じるための「×」ボタンがナビゲーションバーに配置されています。

作りとしてはオーソドックスですが、SafariviewやChrome Custom Tabsも含めて左上に閉じる機能があるのに対して、LINEのブラウザは右上に配置されてます。

LINEアプリ内ではモーダルを閉じる×ボタンが右上にあることが多く、ブラウザもそれに沿ってるのだと思いますが、実は機能によっては左上に×ボタンがあったりもしてちょっと迷います。

Android版だとまたUIが違って、こちらは×ボタンが左上にあります。

iOSとAndroidのUIが違うこと自体はよくある話ですが、アプリ内で基本的なUIが違ったりすると使う側は混乱します。いろんな機能がどんどん増えていく過程で、各機能ごとのUIの統一まで手が回っていないのかもしれません。

他にもiOSではシェアボタンを押すとアクションシートが下からニュルッと出てくる仕組みですが、この中にページの「Safariで開く」とページのリロード機能が含まれています。シェアアイコンを見てこの機能が内包されていることを推測するのは難しい。

この部分、Android版では右上のメニューにひととおり格納されているのでわかりやすい印象です。