ChromeでWebサイトをアプリ化する手順｜ショートカット作成とタスクバー固定

日々の業務や開発作業の中で、気づけばChromeのタブが数十個も開きっぱなしになっていないでしょうか。

Googleカレンダー、Gmail、Notion、ChatGPT、GitHubなど、毎日必ず使うWebサービスがタブバーを占有していると、必要なページを探すだけでも時間がかかり、集中力を削がれる原因になります。

このような悩みは、Chromeの「ページをアプリとしてインストール」機能を活用してWebサイトをデスクトップアプリ化することで一気に解消できます。独立した専用ウィンドウで起動できるようになり、タスクバーや Alt + Tab キーでの切り替えも快適になります。

この記事では、WebサイトをChromeでアプリ化する具体的な手順をはじめ、ショートカット作成との違い、独立ウィンドウとタブの切り替え方、chrome://apps を使った自分専用ランチャーの構築法まで分かりやすく解説します。

この記事で行うこと
前提条件・対象読者
1. Webサイトをアプリ化するメリット
2. サイトをアプリ化する2つの基本手順
3. アプリ化したサイトを快適に使いこなす活用設定
4. 不要になったアプリを削除（アンインストール）する手順
1. 方法1：アプリウィンドウのメニューから削除する
2. 方法2：chrome://apps/ 画面から削除する
5. 【エンジニア向け】自作Webサイトをインストール可能にするTips
6. よくある質問（FAQ）
7. まとめ
次に読むおすすめ記事
参考情報

この記事で行うこと

WebサイトをChromeで「アプリとしてインストール」する手順を解説します
「アプリとしてインストール」と「ショートカットを作成」の違いと使い分けを整理します
アプリ化したサイトをタスクバーやスタートメニューにピン留めする方法を解説します
独立ウィンドウ表示と通常のタブ表示を切り替える手順を説明します
chrome://apps やブックマークバーを活用して自分専用のWebランチャーを作るテクニックを紹介します
不要になったアプリのアンインストール手順と、エンジニア向けのPWA設定（manifest.json）をまとめます

前提条件・対象読者

対象ブラウザ：Google Chrome（Windows / Mac / Linux対応）
対象読者：Chromeのタブが増えすぎて困っている方、よく使うWebサイトを専用アプリのように独立して使いたい方
検証環境：Windows 11 / Google Chrome 最新版

1. Webサイトをアプリ化するメリット

Webサイトを通常のタブではなく「アプリ」として扱うことで、作業環境に以下の大きなメリットが生まれます。

タブの散乱を防ぎメモリ消費と視覚ノイズを削減できる

毎日開くメインサービスをタブバーから追い出すことで、作業中のタブ一覧がすっきり見やすくなります。

独立したウィンドウで集中して作業できる

アドレスバーやブックマークバーが非表示になり、まるで専用のネイティブアプリのような画面で作業に没頭できます。

OSのタスクバーにピン留めしてワンクリック起動できる

ブラウザを開いてからブックマークを探す手間がなく、タスクバーやスタートメニューから目的のツールを一発で起動できます。

Alt + Tab でアプリ単位の素早い切り替えができる

ブラウザ内の多数のタブを探し回る必要がなく、キーボードショートカット（Alt + Tab / Macは Command + Tab）で独立したアプリとして直接切り替えられます。

2. サイトをアプリ化する2つの基本手順

サイトをアプリとしてChromeに登録する方法には、アドレスバーから行う方法と、メニューから行う方法の2つがあります。

方法1：アドレスバーのインストールボタンを使う（最速）

対象のサイトがPWA（Progressive Web App）に対応している場合、アドレスバーの右端に「インストール」アイコン（モニターに下矢印が重なったマーク）が表示されます。

Chromeでアプリ化したいWebサイト（Gmail、Googleカレンダー、Notionなど）を開きます
アドレスバー右端にある「インストール」アイコンをクリックします
確認ダイアログが表示されたら「インストール」をクリックします

これだけでインストールが完了し、即座に独立したアプリウィンドウが立ち上がります。

方法2：三点メニューから「ページをアプリとしてインストール」する

アドレスバーにアイコンが表示されないWebサイトでも、メニューから手動でアプリ化できます。

アプリ化したいWebサイトを開きます
画面右上の「︙」（その他アイコン）をクリックします
「キャスト、保存、共有」にマウスを合わせます
「ページをアプリとしてインストール」をクリックします
アプリ名を確認し、「インストール」をクリックします

メニュー名はお使いのChromeのバージョンによって「保存して共有」や「その他のツール」内に配置されている場合があります。

「アプリとしてインストール」と「ショートカットを作成」の違い

メニュー内には「ショートカットを作成」という似た項目もあります。用途に合わせて以下のように使い分けます。

比較項目	ページをアプリとしてインストール	ショートカットを作成
起動時の表示形態	独立した専用ウィンドウ（アドレスバー非表示）	通常のChromeタブまたはウィンドウ
タスクバーへの個別表示	独立したアイコンとして表示される	Chromeのアイコンに統合される（設定による）
推奨される用途	毎日必ず使う業務ツール（Gmail、Notion等）	たまに参照するWebページやマニュアル

日常的に使うWebサービスであれば、迷わず「ページをアプリとしてインストール」を選ぶのがおすすめです。

3. アプリ化したサイトを快適に使いこなす活用設定

タスクバーやスタートメニューにピン留めする

アプリを起動すると、OSのタスクバーにそのサイト専用のアイコンが表示されます。アイコンを右クリックして「タスクバーにピン留めする」を選択しておけば、Chromeを立ち上げていない状態からでも直接1クリックで起動できます。

独立ウィンドウをやめて「通常のタブ」で開くように切り替える

アプリ化後、「やっぱり通常のChromeタブの中で開きたい」と思った場合も簡単に設定を変更できます。

アドレスバーに chrome://apps/ と入力してEnterキーを押します
切り替えたいアプリのアイコンを右クリックします
「ウィンドウとして開く」のチェックを外します

チェックを外すと、次回以降クリックした際に通常のChromeブラウザ内の新しいタブとして開くようになります。

ブックマークバーに「アプリ」ボタンを常駐させる

毎回アドレスバーに chrome://apps/ と打ち込むのは面倒です。ブックマークバーの左端に「アプリ」ボタンを配置しておくと便利です。

Ctrl + Shift + B（Macは Command + Shift + B）を押してブックマークバーを表示します
ブックマークバーの何もない場所で右クリックします
「アプリのショートカットを表示」をクリックしてチェックを入れます

これでブックマークバーの左端にアプリランチャーボタンが表示され、1クリックで登録済みアプリの一覧画面を開けるようになります。

プロフィール機能で仕事用と私用を完全分離する

Chromeのマルチプロフィール機能を使えば、仕事用と個人用で別々のアプリランチャー環境を維持できます。仕事用プロフィールには社内ツールやNotionを、個人用プロフィールにはYouTubeや個人用SNSを登録することで、仕事中に余計な誘惑が目に入らない環境を作れます。

4. 不要になったアプリを削除（アンインストール）する手順

使わなくなったアプリは以下のいずれかの方法で簡単に削除できます。

方法1：アプリウィンドウのメニューから削除する

該当のアプリを起動します
タイトルバー右上の「︙」メニューをクリックします
「[アプリ名] をアンインストール…」を選択します
必要に応じて「Chromeからもデータを削除する」にチェックを入れ、「削除」をクリックします

方法2：chrome://apps/ 画面から削除する

Chromeで chrome://apps/ を開きます
削除したいアプリのアイコンを右クリックします
「Chromeから削除」をクリックします

5. 【エンジニア向け】自作Webサイトをインストール可能にするTips

自身で開発しているWebアプリや社内ツールをChromeに「インストール可能なアプリ」として認識させるには、Web App Manifest（manifest.json）を適切に設定します。

{
  "name": "MyDevTool - 開発支援ツール",
  "short_name": "MyDevTool",
  "description": "社内業務向けの軽量Webユーティリティ",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1a73e8",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

display に "standalone" を指定することで、ブラウザのURLバーや戻るボタンが隠れ、独立したネイティブアプリのような体験を提供できます。また、有効なService Workerの登録とHTTPS環境（ローカル開発時は localhost で可）が前提条件となります。