サイトをアプリ化するには｜Macで道具を選ぶ前に決める4つのこと

毎日開くサイトをアプリ化するには何が要るのか。検索して出てくる手順はどれも短く、メニューを2回押して終わりに見えます。ところが実際に作ってみると、ログイン画面が出てくる、通知が届かない、アイコンがぼやける、といった形で引っかかり、結局タブに戻る人が少なくありません。詰まる場所はほぼ決まっていて、原因は道具の良し悪しではなく、道具を選ぶ前に決めていない4つのことにあります。

手順を調べる前に、必要なものを4つに分ける

サイトをアプリにする作業は、技術的には「Webページを別の入れ物に入れ直す」だけです。ページの中身はブラウザのエンジンが描いたままで、サイト側から特別なものが配られるわけでも、何かがコンパイルされるわけでもありません。それでも結果が人によって大きく違うのは、入れ物の作り方が何通りもあり、それぞれが別のものを必要とするからです。

必要なものを整理すると、次の4つになります。

• 動かす環境（macOSのバージョンと、手元に入っているブラウザ）
• 対象のサイトの作り（アプリとして開かれることを想定して作られているか）
• ログインの置き場所（ブラウザと共有するか、分けるか）
• 見た目の材料（アイコンにする画像と、Dockに出す名前）

この4つのうち、後から変えにくいのは3つ目です。ログインの置き場所は入れ物を作った時点で決まり、あとで移すには作り直すことになります。1つ目と4つ目は途中で気付いても取り返しがつきます。順番としては、環境を確かめ、サイトの作りを見て、ログインの方針を決め、最後に見た目を整える流れにすると手戻りが減ります。

必要なもの1: macOSのバージョンと、入っているブラウザ

いちばん最初に確かめるのは手元の環境です。Appleメニューの「このMacについて」で見えるバージョンによって、選べる道が変わります。

macOS Sonoma 14以降であれば、Safariに「Dockに追加」が入っています。開いているページをそのままアプリとして保存する機能で、追加の導入も費用も要りません。Sonomaより前のバージョンだと、この項目自体がメニューに出てこないため、別の道を探すことになります。

ブラウザ側では、Chromeが入っているかどうかが分かれ目になります。Chromeにはページをアプリとして入れる機能があり、拡張機能をそのまま効かせたい場合はこちらが向きます。ただし、Chromeで作ったアプリは、作ったときのプロファイルにぶら下がります。プロファイルを消したり作り直したりすると、そのアプリも一緒に使えなくなります。

もう1つ見ておくとよいのが、Macの機種です。Apple Siliconの機種とIntelの機種では、外部の道具が対応しているかどうかが分かれることがあります。導入の前に、配布ページに書かれた対応OSと対応チップを読んでおくと、入れてから気付く事態を避けられます。

必要なもの2: そのサイトが「アプリとして開かれる」ことを想定しているか

同じ手順でアプリにしても、サイトによって仕上がりが違います。理由は、サイト側が持っている設定ファイルにあります。

Webの標準には、ページがアプリとして扱われたときの名前・アイコン・起動時の表示範囲を記述する仕組みがあります。この記述を持つサイトは、アプリ化したときに名前とアイコンが自動でそろい、ウィンドウの見た目も整います。持たないサイトは、名前がページのタイトルそのままになったり、アイコンが小さなファビコンを引き伸ばしたものになったりします。この仕組みの概要はGoogleが公開しているweb.devの学習資料にまとまっています。

見分け方は簡単です。Chromeでそのサイトを開いたとき、アドレスバーの右端にインストールを促すアイコンが出れば、サイト側が想定している側です。出ない場合でもアプリにはできますが、アイコンと名前は自分で用意する前提になります。

社内の管理画面や、古い作りのサービスは、この記述を持たないことが多いです。1つ作ってみてアイコンが荒く見えたら、サイトの側に用意が無いということなので、正方形の画像を自前で当てられる道を選ぶことになります。

必要なもの3: ログインをどこに置くか

4つのうち、いちばん判断が効くのがここです。作ったアプリを開いた瞬間にログイン画面が出て戸惑う人は多いのですが、これは不具合ではありません。Appleは資料で次のように書いています。

Webアプリは、Safariとは別に機能します。閲覧履歴、Cookie、Webサイトデータ、設定情報はSafariと共有されません。 出典: support.apple.com

つまり、ログインの置き場所には2つの考え方があります。

1つは共有型です。ブラウザに入っているログイン状態をそのまま引き継ぐ形で、作った直後から使えます。Chromeでアプリとして入れる道がこれにあたります。手間が少ない代わりに、同じサービスの2つ目のアカウントを同時に開くことはできません。プロファイルに従うためです。

もう1つは分離型です。アプリごとに保管場所を持ち、初回はログインからやり直します。SafariのWebアプリと、専用の道具で作ったものがこちらです。ひと手間かかりますが、仕事用と個人用のアカウントを2つの窓で同時に開けます。ブラウザのプロファイルを切り替えて行き来していた人には、この差が大きく効きます。

決め方の目安は、そのサイトを2つのアカウントで使うことがあるかどうかです。あるなら分離型、無いなら共有型で足ります。二段階認証を使うサービスでは、分離型を選ぶと初回に認証をもう一度通す必要が出るので、認証アプリを手元に置いてから作ると流れが止まりません。

必要なもの4: アイコンの画像と、Dockに出す名前

見た目は最後でよい要素ですが、用意するものははっきりしています。

• 正方形の画像（1024ピクセル四方あれば、Dockでもプレビューでも荒れません）
• Dockのカーソルを載せたときに出る名前（短いほうが探しやすい）

アイコンを自分で差し替えられるかどうかは道によって違います。SafariのWebアプリは、アプリを開いてメニューバーのアプリ名から設定を開けば、表示名の変更、アイコンの差し替え、URLの変更ができます。Chromeでアプリとして入れたものは、サイト側が持っている画像が使われるため、手元で差し替える経路は用意されていません。

名前で意外と効くのが、Dockに並んだときの見分けやすさです。同じ色調のアイコンが3つ並ぶと、結局カーソルを載せて名前を読むことになり、タブを目で追っていたときと変わらなくなります。似た色のサービスを複数アプリ化するなら、アイコンの色を意図的にずらしておくと、押し間違いが減ります。

3つの道で、そろうものが違う

必要なものが決まったら、道を選びます。それぞれが何を求め、何を返すかを並べると次のようになります。

	SafariのDockに追加	Chromeのアプリとして入れる	専用の道具
求められる環境	macOS Sonoma 14以降	現行のChrome	導入と、場合により費用
サイト側の設定が無くても作れるか	作れる	作れる	作れる
ログインの置き場所	アプリごとに分離	ブラウザのプロファイルと共有	アプリごとに分離
同じサービスの2アカウント	使える	使えない	使える
アイコンの差し替え	できる	サイト側の画像を使う	たいていできる
拡張機能	Safari機能拡張をアプリ単位で切り替え	Chromeの拡張が効く	道具による
保存先	ホームフォルダの中のアプリケーション	Chromeが管理する	通常のアプリ

表のとおり、Chromeの道だけがログインを共有します。ここが唯一、他の2つで代えの効かない性質です。逆に、2つ目のアカウントが欲しい場合、Chromeの道は候補から外れます。

アプリ化しても解決しないこと

期待とずれやすい点も先に挙げておきます。

1つ目は、速度です。中身は同じWebページなので、読み込みが速くなるわけではありません。速くなったように感じるのは、目当ての窓を探す時間が消えるからで、通信や描画そのものは変わりません。

2つ目は、オフラインでの利用です。サイト側がオフライン対応を作り込んでいないかぎり、電波が無ければ何も出ません。入れ物を変えてもこの性質は変わりません。

3つ目は、認証の込み入った社内システムです。ログインの途中で別のドメインに飛ぶ仕組みだと、埋め込みのブラウザ表示では最後まで進めないことがあります。この種のシステムをまとめてアプリ化する前に、1つだけ作って、セッションが切れて再ログインするところまで通しておくと、後から作り直す量が減ります。

4つ目は、メモリの使用量です。ブラウザのエンジンを自前で抱える作りの道具では、アプリを増やすほど消費が積み上がります。macOSに入っているエンジンを使う作りなら、増え方はタブに近くなります。10個以上をアプリにする計画なら、この差は無視できません。

どのサイトから手をつけるか

必要なものがそろっても、最初にどれをアプリにするかで結果の見え方が変わります。判断の材料は2つで足ります。1日に何回開くかと、開いたあと何分そこに留まるかです。

回数が多く、留まる時間も長いサイトは、アプリにする価値がはっきり出ます。メール、チャット、カレンダー、社内の管理画面あたりが該当します。一方で、回数は多くても数秒で閉じるサイト、たとえば検索や乗り換え案内は、アプリにしても得るものが少ないです。窓を探す時間より、窓を開いて閉じる手数のほうが大きくなります。

週に1回しか開かないサイトは、ブックマークで足ります。ここを見誤ると、Dockのアイコンが15個を超えたあたりから、目で探す速さが落ちはじめます。アイコンで見分けられる数には限りがあり、その数を超えると、タブを目で追っていたときと同じ状態がDockで再現されます。

現実的な進め方は、いちばん開くサイトを1つだけアプリにして、1週間そのまま使うことです。1週間経ってから、足りなかった点を書き出す。通知が来なかったのか、2つ目のアカウントが必要だったのか、アイコンが見分けにくかったのか。この3つのどれが出るかで、次に選ぶ道が決まります。5個をいっぺんに作ると、どの不満がどの道に由来するのかが混ざって分からなくなります。

対応表と料金表から読み取れること

道具を検討する段になったら、機能の一覧より先に見ておくと判断が早い情報が2つあります。

1つは、対応しているサービスの一覧です。この種の道具には300以上のプリセットからすぐ作れるものがあり、対応サービス一覧のような並びを眺めると、その道具が想定している使い方の偏りが見えます。チャットとメールしか並んでいなければ、社内の管理画面を包む用途は想定の外かもしれません。設定として何をいじれるのかはできることで確認でき、実際の手順の細かさは使い方ガイドを読むと見当が付きます。

もう1つは、費用と対応OSの形です。買い切りなのか継続課金なのか、対応するmacOSがどこまで遡れるのかを料金のページで先に押さえておくと、あとで乗り換える手間が減ります。判断に迷いやすい点はよくある質問にまとまっていることが多いので、導入前に目を通しておく価値があります。

そして、この3つの道は排他ではありません。2アカウントが要るものはSafariで、拡張機能が要るものはChromeで、アイコンとリンクの制御まで欲しいものだけ専用の道具で作る。長く残っている構成は、たいていこの混在型です。必要なものを4つに分けて考えるのは、道具を1つに絞るためではなく、サイトごとに違う道を当てられるようにするためです。