Macでサイトをアプリ化する方法! ホーム画面にアプリショートカットを追加しよう

スポンサーリンク
Mac

本記事では、MacでWebサイトをアプリ化して、ホーム画面に追加する方法を解説します。

具体的には、以下2ブラウザのケースで説明します。

  • ChromeアプリのアイコンChromeを使う手順
  • SafariのアイコンSafariを使う手順(macOS Sonoma以降のみ)

macOS向けにアプリが用意されていないサービスも、まるでアプリケーション上で動くように、独立したウインドウで表示できます。

関連記事 Windowsでサイトをアプリ化する方法

 

スポンサーリンク
スポンサーリンク

Chromeでサイトをアプリのようにインストールする方法

この方法では、パソコンのブラウザChromeアプリのアイコンChromeが必要となります。

ダウンロード Google Chrome

手順は2パターンあり、サービスによって異なります。

方法 該当サービス例
①:アプリとしてインストールする YouTubeアプリのアイコンYouTube
TikTokのアイコンTikTok
TwitterのアイコンTwitter
YouTube MusicのアイコンYouTube Music
GoogleマップのアイコンGoogleマップ
②:アプリとして開くショートカットを作成する GmailのアイコンGmail
InstagramのアイコンInstagram
facebookのアイコンfacebook
AmazonのアイコンAmazon
楽天市場のアイコン楽天市場
まず方法①を試し、該当しなければ方法②をどうぞ。

方法①:アプリとしてインストールする

YouTubeアプリのアイコンYouTubeを例に説明します。

まずChromeアプリのアイコンChromeでYouTubeサイトを開きます。

macOSでサイトをアプリとしてインストールする手順1

YouTubeサイトをアプリ化する例。

アドレスバー近くにあるChromeのアプリインストールアイコンインストールアイコンをクリックします。

macOSでサイトをアプリとしてインストールする手順2

赤枠のインストールアイコン

またはメニューより、保存して共有 → YouTubeをインストール でもOK。

macOSでサイトをアプリとしてインストールする手順3

「保存して共有」→「YouTubeをインストール」

YouTubeアプリのアイコンYouTubeをインストールします。

macOSでサイトをアプリとしてインストールする手順4

インストール

作業はこれだけ。

ChromeアプリのアイコンChromeとは独立した、YouTubeアプリのアイコンYouTube専用のウインドウで起動されます。

macOSでサイトをアプリとしてインストールする手順5

YouTube専用のウインドウで表示

DockにもYouTubeアプリのアイコンYouTubeアイコンが表示されます。

macOSでサイトをアプリとしてインストールする手順6

DockにYouTubeアイコンが表示される

YouTubeアプリのアイコンYouTubeを例に説明しましたが、他サービスも手順は同じです。

例えばTikTokのアイコンTikTok、TwitterのアイコンTwitterなどもアプリ化できます(ちなみにTwitterは公式アプリもあります)。

もし目的のサービスで 「●●(アプリ名)」をインストール メニューが表示されない場合、次に紹介する手順をどうぞ。
macOSでサイトをアプリとしてインストールする手順7

TikTokをアプリ化した例。

方法②:アプリとして開くショートカットを作成する

ABEMAのアイコンABEMAを例に説明します。

まずChromeアプリのアイコンChromeでABEMAサイトを開きます。

macOSでサイトをアプリとして開くショートカットを作成する手順1

ABEMAサイト

メニューより 保存して共有 → ショートカットを作成 します。

macOSでサイトをアプリとして開くショートカットを作成する手順2

メニューより「保存して共有」

macOSでサイトをアプリとして開くショートカットを作成する手順3

ショートカットを作成

ここで ウィンドウとして開く にチェックを入れるのを忘れずに。

macOSでサイトをアプリとして開くショートカットを作成する手順4

「ウィンドウとして開く」を選択して「作成」

作業はこれだけ。

ChromeアプリのアイコンChromeとは独立した、ABEMAのアイコンABEMA専用のウインドウで起動されます。

macOSでサイトをアプリとして開くショートカットを作成する手順5

ABEMA専用のウインドウで表示

DockにもABEMAのアイコンABEMAアイコンが表示されます。

macOSでサイトをアプリとして開くショートカットを作成する手順6

DockにABEMAアイコンが表示される

ABEMAのアイコンABEMAを例に説明しましたが、他サービスも手順は同じです。

例えばInstagramのアイコンInstagram、GmailのアイコンGmailなどもアプリ化できます。

macOSでサイトをアプリとして開くショートカットを作成する手順7

インスタをアプリ化した例。

参考:アプリ化したサイトをアンインストールする方法

削除したい場合、メニューより 「●●(アプリ名)」をアンインストール と進み、削除 を実行すればOKです。

Chromeのデータも消去する のチェックは任意です。関連するクッキーなども消えるため、今後もそのサイトへアクセスするなら、無理して削除することもないでしょう。
macOSでアプリ化したサイトをアンインストールする手順1

アプリ化したYouTubeをアンインストールする例。

macOSでアプリ化したサイトをアンインストールする手順2

「Chromeのデータも消去する」は任意。

 

Safariでサイトをアプリのようにインストールする方法

macOS Sonoma(2023年リリース)以降が条件です。

YouTubeアプリのアイコンYouTubeを例に説明します。

まずSafariのアイコンSafariでYouTubeサイトを開きます。

Safariでサイトをアプリのようにインストールする手順1

YouTubeサイトをアプリ化する例。

Safariのメニューバー「ファイル」の Dockに追加 を選択します。

Dockに追加 がない場合、macOSバージョンがSonomaにアップデートされてるか確認しましょう。
Safariでサイトをアプリのようにインストールする手順2

ファイル→Dockに追加

アプリ化するサイトの名称、URLを確認の上、追加 で決定します。

Safariでサイトをアプリのようにインストールする手順3

サイトの名称、URLを確認。

作業はこれだけ。

SafariのアイコンSafariとは独立した、YouTubeアプリのアイコンYouTube専用のウインドウで起動されます。

DockにもYouTubeアプリのアイコンYouTubeアイコンが表示されます。

YouTubeを例に説明しましたが、他サービスも手順は同じです。
Safariでサイトをアプリのようにインストールする手順4

YouTube専用のウインドウで表示

Safariでサイトをアプリのようにインストールする手順5

Dockにも専用アイコンが出る

アプリ化したサイトは、ホームフォルダの「アプリケーション」フォルダに保存されます。

ここから削除すれば、アプリ化したサイトはアンインストールされます。

Safariでサイトをアプリのようにインストールする手順6

「アプリケーション」フォルダに保存されたYouTube

Safariでサイトをアプリのようにインストールする手順7

アプリ化したYouTubeサイトを削除する例

 

補足:サイトのアプリ化に関するアレコレ

本パートでは、アプリ化したサイトに関わる、細かい情報を補足します。

基本的にChromeアプリのアイコンChromeを前提としますが、SafariのアイコンSafariに当てはまるものも多いです。
説明の流れ
  • 補足①
    アプリ化したサイトの特徴
  • 補足②
    Dockに追加したアイコンを変更する方法
  • 補足③
    サイトをアプリ化できない主な原因と解決策
  • 補足④
    EdgeやBraveでサイトをアプリ化する方法

アプリ化したサイトの特徴

アプリ化したサイトの主な特徴です。

  • 没入感のある専用ウィンドウで表示できる
  • デスクトップやDockに専用アイコンを配置・起動できる
YouTubeを例に説明します。

没入感のある専用ウィンドウで表示できる

タブやアドレスバーといった要素はなくなり、純粋にそのサイト専用画面となります。

没入感のある専用ウィンドウで表示できる説明1

タブやアドレスバーなど、Chromeで通常表示される領域が表示されない。

またショートカットキーでアプリ切替( + tab)時も、専用アイコンで表示できます。

「タブを開きすぎて、どこにあるか分からなくなった!」ことも防げます。
没入感のある専用ウィンドウで表示できる説明2

アプリ化したYouTubeが専用アイコンで表示される例。

デスクトップやDockに専用アイコンを配置・起動できる

そのサイトをアプリとして起動中、Dock上も専用アイコンが表示されます。

デスクトップやDockに専用アイコンを配置・起動できる説明1

そのままDockに常駐させれば、すぐに起動もできて便利です。

Dock上のアイコンを右クリックメニューより、 オプションDockに追加 をチェックすれば常に表示できます。
デスクトップやDockに専用アイコンを配置・起動できる説明2

アプリ化したYouTubeのアイコンをDockに追加する例。

Dockに追加したアイコンを変更する方法

YouTubeを例に説明します。他サイトでも手順は同じです。

アプリ化したサイトのアイコン画像は、通常アプリと同じように、好きなデザインに変更可能です。

Dockに追加したYouTubeアイコンを変更する手順1

アプリ化したYouTubeのアイコンをカスタマイズした例。

まずアイコンを用意しましょう。

「youtube icon」と検索すれば、フリー画像をダウンロードできるサイトがヒットします。

例えばIcon-Iconsなどオススメです。

ダウンロードする画像ファイルは、拡張子.icnsを選択しましょう(.icnsはmacOSで使用されているアイコン形式です)。
Dockに追加したYouTubeアイコンを変更する手順2

Icon-IconsサイトでYouTube向けアイコンを検索した例。

Dockに追加したYouTubeアイコンを変更する手順3

ダウンロードしたアイコン。

次にDock上のYouTubeアプリのアイコンYouTubeを右クリックメニューより、オプションFinderに表示 と選びます。

Dockに追加したYouTubeアイコンを変更する手順4

以下の場所が表示されるので、右クリックメニューより 情報を見る を開きます。

/Users/ユーザー名/Applications/Chrome Apps.localized/YouTube.app

Dockに追加したYouTubeアイコンを変更する手順5

表示されるYouTubeアイコン上に、用意した新しい画像をドラッグ&ドロップします。

Dockに追加したYouTubeアイコンを変更する手順6

現在のYouTubeアイコンが表示される。

Dockに追加したYouTubeアイコンを変更する手順7

用意したアイコン画像ファイルをドラッグ&ドロップする。

これでアイコンが変更され、Dock上に表示される画像にも反映されます。

うまく反映されない場合、一度YouTubeを終了、Dock上からもアイコンを削除してから、再度開いてみて下さい。
Dockに追加したYouTubeアイコンを変更する手順8

新しいアイコンへ変更される。

Dockに追加したYouTubeアイコンを変更する手順9

Dock上のYouTubeアイコンにも反映される。

サイトをアプリ化できない主な原因と解決策

メインパートで紹介したとおり、ChromeアプリのアイコンChromeでメニューを開くと、以下いずれかが表示されます。

  1. 「●●(サービス名)」をインストール
  2. ショートカットを作成

PWAに標準対応したサイトが1、それ以外のサイトが2で表示されます。

【PWAとは?】 – Progressive Web Appsの略。従来のWebサービスをブラウザ上のサイトとは別に独立したウインドウで表示する仕組みで、まるでアプリのように表示できる。Chromeの場合、目的のWebページがPWAに対応していなくても、擬似的にアプリ化する機能が搭載されている。

もしメニューにどちらも表示されない場合、次の3点を確認して下さい。

原因 解決策
①:Firefoxなど別ブラウザで開いている Chromeブラウザでアクセスする
②:Chromeブラウザのバージョンが古い 最新バージョンへアップデートする(手順はコチラ
③:シークレットモードで開いている 通常モードでアクセスする

なお原因②に関して、もし何らかの理由でChromeアプリのアイコンChromeを最新バージョンへアップデートできない場合、Chromeの試験機能よりPWAを有効にして下さい。

次のURLをペーストし、「Desktop PWAs」を Enabled へ変えます。

chrome://flags/#enable-desktop-pwas

Chromeの試験機能よりPWAを有効にする手順

最新バージョンのChromeアプリのアイコンChromeではデフォルトで搭載される機能であるため、試験機能からも「Desktop PWAs」項目は削除されています。

EdgeやBraveでサイトをアプリ化する方法

別ブラウザで実現したい場合、Chromiumベースのブラウザなら可能性があり、例えばBraveブラウザのアイコンBraveEdgeのアイコンEdgeが該当します。

【Chromiumとは?】 – クロミウム。Googleが開発する、オープンソースのウェブブラウザのプロジェクト名のこと。Chromeもこのソースコードをベースに作られている。

どちらもChromeアプリのアイコンChromeと同様の手順で、サイトをアプリ化できます。

BraveブラウザのアイコンBrave

Braveでサイトをアプリ化する説明

BraveでYouTubeをアプリ化する例。

Chromium版EdgeのアイコンEdge

Edgeでサイトをアプリ化する説明

EdgeでYouTubeをアプリ化する例。

Chromiumベースのブラウザは他にもあるので、ChromeアプリのアイコンChromeを使いたくない事情があればお試し下さい。

参考 Wikipedia – Chromiumベースのブラウザ一覧

 

〆:好きなサイトをデスクトップアプリとして使おう!

以上、Macでサイトをアプリ化する方法! ホーム画面にアプリショートカットを追加しよう の説明でした。

YouTubeアプリのアイコンYouTubeのような動画サイトの場合、アプリ化でより没入感のある視聴体験ができます。

そのほか、TikTokのアイコンTikTokInstagramのアイコンInstagramGmailのアイコンGmailのように公式アプリが提供されないサービスも、強制的にアプリ化できるので集中して操作できて便利です。

ぜひ、お試しあれ。

Mac
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

タイトルとURLをコピーしました