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

スポンサーリンク
Mac

本記事では、MacでWebサイトをアプリ化する方法を解説します。

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

 

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

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をインストールします。

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

作業はこれだけ。

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

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

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

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

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

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

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

TikTokをアプリ化した例。

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

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

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

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

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

メニューより その他のツール を開き、

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

ショートカットを作成 します。

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

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

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

作業はこれだけ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

説明の流れ
  • 補足①
    アプリ化したサイトの特徴
  • 補足②
    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点を確認して下さい。

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

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

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

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

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

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

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

今回紹介した方法は、すべてChromeアプリのアイコンChromeブラウザを前提にしています。

別ブラウザで実現したい場合、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のアイコンTikTokやInstagramのアイコンInstagram、GmailのアイコンGmailのように公式アプリが提供されないサービスも、強制的にアプリ化できるので集中して操作できて便利です。

ぜひ、お試しあれ。

参考 Chromeヘルプ – プログレッシブ ウェブアプリを利用する

参考 Chromeウェブストアヘルプ – Chromeアプリを追加して開く

参考 Chromeヘルプ – Google Chromeを更新する

参考 プログレッシブウェブアプリの説明(開発者向け)

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

関連記事

スポンサーリンク
スポンサーリンク
あっとはっく

コメント

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