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