サイトをアプリみたいにする：Macで使い心地を近づける手順と限界

サイトをアプリみたいにする、という言い方には幅があります。タブバーとアドレスバーが消えた窓が欲しいだけの人もいれば、Dockのアイコンから一発で呼び出せて、通知が届き、終了と再起動を挟んでも同じ状態で戻ってくることまで含めている人もいます。前者は1分で終わり、後者は経路の選択で結果が変わります。この差を知らずに作ると、独立した窓ができた時点で「これじゃない」と感じることになります。

「アプリみたい」が指している4つの要素

漠然と感じている不満を分解すると、たいてい次の4つに整理できます。

• 見た目：タブバーとアドレスバーとブックマークバーが視界から消えていること
• 呼び出し方：Dockのアイコン、Command＋Tab、Spotlightのどれからでも直接開けること
• 通知：ブラウザを開いていない状態でも知らせが届き、そのサイトだけ止められること
• 境界：ログインが他のタブと混ざらず、閉じても開き直しても同じ状態に戻ること

この4つは同じ機能ではありません。見た目だけなら、どの経路で包んでも即座に手に入ります。呼び出し方も同様です。差が出るのは通知と境界で、ここは選んだ経路の設計に従います。そして「アプリみたいにならなかった」という感想の原因は、ほぼ後ろの2つに集中しています。

もうひとつ、この言い方には別の意味もあります。自分が運営しているサイトを、訪問者にとってアプリのように使わせたい場合です。この2つは技術も手順もまったく違うので、後半で分けて扱います。まずは手元のMacの話から進めます。

包む経路は3つあり、埋まる要素が違う

macOSでサイトを独立した窓にする方法は、大きく3つです。

1つ目はSafariの「Dockに追加」です。macOS Sonoma 14以降で使え、対象のページを開いた状態でメニューバーの「ファイル」から選ぶだけで、ホームフォルダの「アプリケーション」に保存されます。この経路の強みは通知と境界の両方を最初から持っていることで、システム設定の「通知」にアプリ単独の項目として並びます。

2つ目はChromeの「ページをアプリとしてインストール」です。3点メニューの「キャスト、保存、共有」の中にあります。よく似た名前の「ショートカットを作成」は、現行版では通常のタブでページを開くランチャーを作るため、ここを取り違えると独立した窓になりません。この経路は作成に使ったプロファイルの中で動くので、拡張機能がそのまま効き、最初からログイン済みで開きます。代わりにログインをブラウザと分けることはできません。

3つ目は専用のWebアプリ化ツールです。窓の挙動、アイコン、ログインの分離、リンクの振り分けといった細部を個別に設定できます。3つの経路は排他ではないので、通知が要るサイトはSafari、拡張機能が要るサイトはChrome、細かい制御が要るものだけ専用の道具、という混在で使って構いません。実際に長く使われている構成はほとんどこの形です。

アプリらしさを最も壊すのは、リンクの行き先

独立した窓を作った翌日に感じる違和感の正体は、たいていこれです。アプリの中でリンクを踏むと、そのアプリの中で新しいページが開いてしまい、戻る手段が見当たらない。アドレスバーを消したせいで、戻るボタンも一緒に消えているからです。

Mac上の普通のアプリは、外部のリンクを踏むと既定のブラウザに渡します。包んだサイトを本当にアプリらしくしたいなら、同じ振る舞いをさせる必要があります。判断の基準は単純で、そのURLが包んだサイトのドメインの内側かどうかです。内側なら同じ窓で開き、外側ならブラウザへ渡す。この振り分けを設定できるかどうかが、経路ごとの実用性の差になります。

標準の経路では、この振り分けの細かい制御は用意されていません。Safariの経路では戻る操作をキーボードやトラックパッドの操作で補い、Chromeの経路ではリンクの種類によってブラウザ側に開くことがあります。メールやチャットのように外部リンクを踏む頻度が高いサイトを包むときほど、この差が日々の摩擦として出てきます。

窓の記憶、名前、アイコンという細部

見落とされやすいわりに、使い続けるかどうかを決めているのがここです。

窓の大きさと位置は、閉じたときの状態を覚えているのが望ましい形です。毎回同じ場所に同じ大きさで開くから、目が探さずに済みます。覚えていない入れ物だと、開くたびに画面の左上に小さく出て、そのたびに手で広げることになります。

名前は既定だとページのタイトルがそのまま入ります。未読数や現在開いている項目名まで含まれていることが多く、Dockに並べたときに読めません。2語程度に短く付け直すのが実用的です。同じサービスで2つのアカウントを分けているなら、名前で見分けが付く形にしておかないと、結局アイコンを目で追うことになります。

アイコンはさらに影響が大きい部分です。ファビコンをそのまま拡大した粗い正方形は、Dockの中で視認されなくなります。認識できないアイコンは押されません。手作業で用意すると1つあたり数分かかるので、作る数が10を超えるあたりから、雛形を持っている道具の価値が出てきます。

呼び出しの速さは、作った後の設定で決まる

アプリらしさの体感を一番押し上げるのは、実は見た目ではなく呼び出しにかかる手数です。ブラウザを前面に出し、タブを目で探し、クリックする。この3手が1手になるかどうかが分かれ目になります。

作った直後にやっておくと効くことが3つあります。1つ目はDockへの固定です。起動中だけDockに出る状態のままだと、閉じた後に呼び出す手段がSpotlight頼みになります。2つ目はSpotlightで引ける名前を付けることです。頭の数文字を打って一発で出る短い名前にしておくと、キーボードから手を離さずに開けます。3つ目はCommand＋Tabの並びの確認で、包んだアプリは通常のアプリと同じ列に入るため、よく使うものほど手前に来るように普段の起動順を整えておくと迷いません。

フルスクリーンとの相性も見ておく価値があります。ブラウザのタブとして開いていたときは、他のタブと同じ画面を共有していました。独立させると、Mission Controlの中に自分の場所を持てるようになるので、資料を見ながら書く作業では左右に並べたままにできます。逆に、そこまで頻繁に見ないサイトを独立させると、切り替えの候補だけが増えて邪魔になります。何を独立させるかは、見る回数ではなく、別の作業から戻ってくる回数で決めるのが妥当です。

通知と、起動時に開く設定

ブラウザを閉じても知らせが届くことは、アプリらしさの中でも体感差が大きい部分です。

Safariの経路で作ったWebアプリは、システム設定の「通知」に単独で並びます。ブラウザ全体をまとめて許可するのではなく、そのアプリだけを許可したり止めたりできるので、メールは鳴らしてダッシュボードは黙らせる、といった調整が設定画面の上で完結します。Chromeの経路で作ったアプリは、通知の許可がブラウザ側に記録されているものを引き継ぎます。作ってから通知が来ないときは、アプリではなくブラウザの設定を見るのが早道です。

もうひとつ、常用するサイトほど効くのが自動起動です。

そのほかのさまざまな点で、Webアプリはほかのアプリと同じように機能します。ログインすると自動的に開くように、ログイン項目として追加することもできます。 出典: support.apple.com

朝Macを開いた時点で既に立ち上がっている状態は、タブを自分で開き直す運用とは体感が別物です。ただし全部を自動起動にすると起動直後が重くなるので、対象は2つか3つに絞るのが現実的です。

自分のサイトを訪問者にとってアプリみたいにする場合

運営しているサイト側の話であれば、手順はまったく別になります。ここで使うのはWebアプリのための仕組みで、ページにマニフェストという設定ファイルを置き、アイコンと表示形式と開始URLを宣言します。表示形式をブラウザの枠なしに指定しておくと、訪問者がインストールしたときにタブバーもアドレスバーも無い窓で開きます。

あわせてサービスワーカーという仕組みを入れると、通信が切れている状態でも直前の画面を出せるようになります。この2つが揃っていると、ブラウザ側がインストールを促す表示を出すようになります。仕組みの全体像はProgressive Web Appsの解説にまとまっており、実装なしで見た目だけを近づけることはできない領域です。

手元のMacで包む話と混同しやすいので、判断の基準を1つ挙げておきます。対象が自分で書き換えられるサイトなら、この方式を検討する価値があります。書き換えられない他社のサービスなら、選べるのは包む側の話だけです。

この方法で得られないもの

期待値を外さないために、届かない範囲を書いておきます。

包んだ入れ物は、中身のWebページの能力を増やしません。ローカルのファイルを直接読むことも、機器と通信することも、メニューバーに独自の画面を出すこともできません。表示が速くなることもなく、通信量が減ることもありません。オフラインで動くかどうかはサイト側の作りに従うので、サイトが対応していなければ包んでも変わりません。

つまり、アプリみたいにすることで解決するのは「見失う」「混ざる」「気付けない」の3つだけです。これらが不満の中心なら効き目は大きく、そうでなければ効果は薄いと考えるのが妥当です。

どこまで自分でやり、どこから道具に任せるか

まず既に入っている経路で1つ作るのが最短です。1分で終わり、要らなければ捨てられます。そのうえで、リンクの行き先、窓の記憶、アイコンの粗さ、ログインの混ざり、通知の粒度のどれかで詰まったときが、専用の道具を見に行くタイミングです。

道具を比べるときは、機能の箇条書きより先に雛形の並びを見ると判断が速くなります。300以上のプリセットからすぐ作れる形であれば、URLもアイコンも名前も選んだ時点で埋まり、一覧に無い社内の管理画面も同じ手順で扱える見込みが立ちます。自分が毎日開くサービスが含まれているかは対応サービス一覧で先に確認できます。窓やリンクの挙動をどこまで指定できるのかはできることに整理されており、実際の作成手順は使い方ガイドで画面付きに追えます。

費用の桁も先に把握しておくと迷いません。標準機能は0円で、専用のツールには3アプリまで無料で、それ以上を作るときに3,980円の買い切りへ移る形があります。月額課金の製品では3年間の合計が28,700円前後になるものもあります。線引きは料金にまとまっており、導入前に出やすい疑問はよくある質問に集まっています。

長く使うときに効くのは、機能の数より壊れにくさです。ブラウザは数週間おきに更新され、ブラウザ本体に紐づく方式の入れ物は、そのたびにアイコンが戻ったり起動しなくなったりすることがあります。アプリが3個ならその都度直せば済みますが、数が増えるほど更新のたびの作業になります。どこまで自動で復旧するのかは道具によって差があるので、数を増やす前に確かめておく価値があります。