本記事では、MacでWebサイトをアプリ化して、ホーム画面に追加する方法を解説します。
具体的には、以下2ブラウザのケースで説明します。
Chromeを使う手順- Safariを使う手順(macOS Sonoma以降のみ)
macOS向けにアプリが用意されていないサービスも、まるでアプリケーション上で動くように、独立したウインドウで表示できます。
関連記事 Windowsでサイトをアプリ化する方法
Chromeでサイトをアプリのようにインストールする方法
この方法では、パソコンのブラウザChromeが必要となります。
ダウンロード Google Chrome
手順は2パターンあり、サービスによって異なります。
| 方法 | 該当サービス例 |
|---|---|
| ①：アプリとしてインストールする | YouTubeTikTokTwitterYouTube MusicGoogleマップ |
| ②：アプリとして開くショートカットを作成する | GmailInstagramfacebookAmazon楽天市場 |
方法①：アプリとしてインストールする
YouTubeを例に説明します。
まずChromeでYouTubeサイトを開きます。
YouTubeサイトをアプリ化する例。
アドレスバー近くにあるインストールアイコンをクリックします。
赤枠のインストールアイコン
またはメニューより、保存して共有 → YouTubeをインストール でもOK。
「保存して共有」→「YouTubeをインストール」
YouTubeをインストールします。
インストール
作業はこれだけ。
Chromeとは独立した、YouTube専用のウインドウで起動されます。
YouTube専用のウインドウで表示
DockにもYouTubeアイコンが表示されます。
DockにYouTubeアイコンが表示される
YouTubeを例に説明しましたが、他サービスも手順は同じです。
例えばTikTok、Twitterなどもアプリ化できます（ちなみにTwitterは公式アプリもあります）。
TikTokをアプリ化した例。
方法②：アプリとして開くショートカットを作成する
ABEMAを例に説明します。
まずChromeでABEMAサイトを開きます。
ABEMAサイト
メニューより 保存して共有 → ショートカットを作成 します。
メニューより「保存して共有」
ショートカットを作成
ここで ウィンドウとして開く にチェックを入れるのを忘れずに。
「ウィンドウとして開く」を選択して「作成」
作業はこれだけ。
Chromeとは独立した、ABEMA専用のウインドウで起動されます。
ABEMA専用のウインドウで表示
DockにもABEMAアイコンが表示されます。
DockにABEMAアイコンが表示される
ABEMAを例に説明しましたが、他サービスも手順は同じです。
例えばInstagram、Gmailなどもアプリ化できます。
インスタをアプリ化した例。
参考：アプリ化したサイトをアンインストールする方法
削除したい場合、メニューより 「●●(アプリ名)」をアンインストール と進み、削除 を実行すればOKです。
アプリ化したYouTubeをアンインストールする例。
「Chromeのデータも消去する」は任意。
Safariでサイトをアプリのようにインストールする方法
YouTubeを例に説明します。
まずSafariでYouTubeサイトを開きます。
YouTubeサイトをアプリ化する例。
Safariのメニューバー「ファイル」の Dockに追加 を選択します。
ファイル→Dockに追加
アプリ化するサイトの名称、URLを確認の上、追加 で決定します。
サイトの名称、URLを確認。
作業はこれだけ。
Safariとは独立した、YouTube専用のウインドウで起動されます。
DockにもYouTubeアイコンが表示されます。
YouTube専用のウインドウで表示
Dockにも専用アイコンが出る
アプリ化したサイトは、ホームフォルダの「アプリケーション」フォルダに保存されます。
ここから削除すれば、アプリ化したサイトはアンインストールされます。
「アプリケーション」フォルダに保存されたYouTube
アプリ化したYouTubeサイトを削除する例
補足：サイトのアプリ化に関するアレコレ
本パートでは、アプリ化したサイトに関わる、細かい情報を補足します。
Chromeを前提としますが、Safariに当てはまるものも多いです。- 補足①アプリ化したサイトの特徴
- 補足②Dockに追加したアイコンを変更する方法
- 補足③サイトをアプリ化できない主な原因と解決策
- 補足④EdgeやBraveでサイトをアプリ化する方法
アプリ化したサイトの特徴
アプリ化したサイトの主な特徴です。
- 没入感のある専用ウィンドウで表示できる
- デスクトップやDockに専用アイコンを配置・起動できる
没入感のある専用ウィンドウで表示できる
タブやアドレスバーといった要素はなくなり、純粋にそのサイト専用画面となります。
タブやアドレスバーなど、Chromeで通常表示される領域が表示されない。
またショートカットキーでアプリ切替（⌘ + tab）時も、専用アイコンで表示できます。
アプリ化したYouTubeが専用アイコンで表示される例。
デスクトップやDockに専用アイコンを配置・起動できる
そのサイトをアプリとして起動中、Dock上も専用アイコンが表示されます。
そのままDockに常駐させれば、すぐに起動もできて便利です。
アプリ化したYouTubeのアイコンをDockに追加する例。
Dockに追加したアイコンを変更する方法
アプリ化したサイトのアイコン画像は、通常アプリと同じように、好きなデザインに変更可能です。
アプリ化したYouTubeのアイコンをカスタマイズした例。
まずアイコンを用意しましょう。
「youtube icon」と検索すれば、フリー画像をダウンロードできるサイトがヒットします。
例えばIcon-Iconsなどオススメです。
Icon-IconsサイトでYouTube向けアイコンを検索した例。
ダウンロードしたアイコン。
次にDock上のYouTubeを右クリックメニューより、オプション → Finderに表示 と選びます。
以下の場所が表示されるので、右クリックメニューより 情報を見る を開きます。
/Users/ユーザー名/Applications/Chrome Apps.localized/YouTube.app
表示されるYouTubeアイコン上に、用意した新しい画像をドラッグ＆ドロップします。
現在のYouTubeアイコンが表示される。
用意したアイコン画像ファイルをドラッグ＆ドロップする。
これでアイコンが変更され、Dock上に表示される画像にも反映されます。
新しいアイコンへ変更される。
Dock上のYouTubeアイコンにも反映される。
サイトをアプリ化できない主な原因と解決策
メインパートで紹介したとおり、Chromeでメニューを開くと、以下いずれかが表示されます。
- 「●●(サービス名)」をインストール
- ショートカットを作成
PWAに標準対応したサイトが1、それ以外のサイトが2で表示されます。
もしメニューにどちらも表示されない場合、次の3点を確認して下さい。
| 原因 | 解決策 |
|---|---|
| ①：Firefoxなど別ブラウザで開いている | Chromeブラウザでアクセスする |
| ②：Chromeブラウザのバージョンが古い | 最新バージョンへアップデートする（手順はコチラ） |
| ③：シークレットモードで開いている | 通常モードでアクセスする |
なお原因②に関して、もし何らかの理由でChromeを最新バージョンへアップデートできない場合、Chromeの試験機能よりPWAを有効にして下さい。
次のURLをペーストし、「Desktop PWAs」を Enabled へ変えます。
chrome://flags/#enable-desktop-pwas
Chromeではデフォルトで搭載される機能であるため、試験機能からも「Desktop PWAs」項目は削除されています。EdgeやBraveでサイトをアプリ化する方法
別ブラウザで実現したい場合、Chromiumベースのブラウザなら可能性があり、例えばBraveやEdgeが該当します。
どちらもChromeと同様の手順で、サイトをアプリ化できます。
▼Brave
BraveでYouTubeをアプリ化する例。
▼Edge
EdgeでYouTubeをアプリ化する例。
Chromiumベースのブラウザは他にもあるので、Chromeを使いたくない事情があればお試し下さい。
参考 Wikipedia – Chromiumベースのブラウザ一覧
〆：好きなサイトをデスクトップアプリとして使おう!
以上、Macでサイトをアプリ化する方法! ホーム画面にアプリショートカットを追加しよう の説明でした。
YouTubeのような動画サイトの場合、アプリ化でより没入感のある視聴体験ができます。
そのほか、TikTokやInstagram、Gmailのように公式アプリが提供されないサービスも、強制的にアプリ化できるので集中して操作できて便利です。
ぜひ、お試しあれ。
コメント