web app to desktop app|Webアプリをデスクトップアプリにする5つの方法

Webアプリをデスクトップアプリにする(web app to desktop app)方法は、大きく5つあります。自分のMacで使うだけなら、Safariの「Dockに追加」かChromeの「ページをアプリとしてインストール」で、追加の道具なしに数分で済みます。社内の人や顧客にインストーラとして配りたいなら、WebsktopのようなWeb上の生成サービス、PakeのようなコマンドラインのツールやElectronでの自作が候補になります。どれを選ぶかは「自分で使うのか、人に配るのか」でほぼ決まります。ここでは、各方法の手順と条件を2026年10月18日に公式ページで確かめた内容で並べ、選び方を順に示します。

なお、このサイトは、Webサイトを独立したMacアプリにする道具の開発元が運営しています。

最初に決めるのは「自分用か、配布用か」

検索上位には、Webサイトを貼り付けるだけでアプリを作れるという生成サービスの案内が並んでいます。

Web to desktop. Turn any website into a desktop app. Convert websites and web apps into high-performance desktop apps for Windows, macOS, and Linux. 出典: websktop.net

こうしたサービスの多くは、自分のWebサービスを、利用者に配るデスクトップアプリとして出したい作り手に向けたものです。一方で「毎日開く管理画面をタブから出したい」という利用者側の悩みなら、ブラウザの標準機能で足りる場合が大半です。同じ言葉で検索されていても、求めているものが違います。

目的 向いている方法 配布できるか
自分のMacで使う Safariの「Dockに追加」、Chromeのウェブアプリ、既存のブラウザを土台にする道具 配布は想定されていない
社内や顧客に配る Websktop、Pake インストーラを出力できる
機能を足して製品にする Electronで自作 自由に配布できる

配布用の方法で自分用のアプリを作ることもできますが、手間と費用は大きくなります。逆に、ブラウザの機能で作ったアプリは、ほかの人のMacに渡すことは想定されていません。

方法1: Safariの「Dockに追加」(macOS Sonoma 14以降)

Macで追加の道具を何も入れずに済むのが、Safariの機能です。AppleのMacでSafari Webアプリを使うによると、macOS Sonoma 14以降で、WebページをWebアプリとして保存できます。手順は次のとおりです。

  1. Safariで、アプリにしたいページを開く
  2. メニューバーの「ファイル」から「Dockに追加」を選ぶ(ツールバーの共有ボタンからも選べます)
  3. 名前を入力して「追加」を押す

作ったWebアプリは、ホームフォルダの「アプリケーション」フォルダに保存され、DockやSpotlightから開けます。同じ解説には、閲覧履歴、Cookie、Webサイトのデータ、設定はSafariと共有されないこと、通知を送るサイトならDockのアイコンに未読の件数が出ることも書かれています。アプリの名前のメニューにある「設定」から、名前、URL、アイコン、ナビゲーションの表示、Safari機能拡張の有効と無効を変えられます。

Safariで表示に問題のないサイトなら、これが最も手軽です。ただし、中身はSafari(WebKit)なので、Chromeでしか正しく動かない業務システムには向きません。

方法2: Chromeの「ページをアプリとしてインストール」

Chromeを主に使っているなら、Chromeにも同じ仕組みがあります。Googleのウェブアプリを使用するのヘルプでは、手順が次のように案内されています。

  1. Chromeで、インストールしたいサイトを開く
  2. 右上のその他アイコンから「キャスト、保存、共有」を選ぶ
  3. 「ページをアプリとしてインストール」を選び、画面の手順に沿って進める

サイトによっては、アドレスバーの右側にインストールのアイコンが出ます。作ったアプリはchrome://appsで一覧でき、外すときはアプリを開いて右上のメニューから「(アプリ名)をアンインストール」を選びます。このとき「Chrome からもデータを削除する」を選ぶと、そのサイトのデータも消えます。

Chromeのウェブアプリは、Chromeのプロファイルの中で動きます。そのため、ログインや拡張機能はChrome本体と共通です。同じサービスに仕事用と個人用の2つのアカウントで同時にログインしたい場合は、Chromeのプロファイルを分けてから、それぞれでインストールする必要があります。

方法3: Websktopのような、Web上で作る生成サービス

自分のWebサービスを配布用のアプリにしたい作り手向けには、ブラウザ上で設定してインストーラを受け取るサービスがあります。Websktopの公式ページでは、URLを貼り付けて設定し、ビルドしてダウンロードするという流れが案内されています。

  • 出力: Windowsの.exe、macOSの.dmg、Linuxの.AppImageを1つの設定から作れる
  • 料金: 月額や席数の課金はなく、無料枠を超えたビルドは対象のOSごとに10.00ドルから
  • 設定: 窓の大きさ、サイズ変更の可否、全画面、最前面表示など
  • その他: 出力したアプリでは開発者ツールが無効にされる

アカウントはビルドの直前まで不要で、設定だけなら登録なしで試せると書かれています。利用者のパソコンでブラウザの種類を問わずに動くアプリが欲しい場合に向く方法です。

方法4: Pakeのような、コマンド1つで作るツール

開発の経験がある人向けには、オープンソースのツールもあります。Pakeは、RustとTauriで作られたツールで、READMEには次の特徴が書かれています。

  • コマンド1つ(pake 対象のURL --name アプリ名の形)でアプリを作る
  • インストーラはElectronで作ったものの約20分の1で、多くは10MB未満
  • macOS、Windows、Linuxに対応し、GitHub Actionsを使ったオンラインでのビルドも用意されている
  • ライセンスはGPL-3.0で、作ったアプリは自由に使い、配布できる

自分で手元に開発環境を作る場合は、Rust 1.85以降とNode 22以降(20.9以降でも動作)が必要と案内されています。最初のビルドは環境の準備で時間がかかり、2回目以降は速くなります。GitHubやChatGPTなど、よく使われるサイトはすでにビルドされたものが配布されているので、それを落として試すこともできます。

Pakeで作ったアプリは、MacではOSに組み込まれた表示部品(WebKit)を使います。小さく軽い反面、Chromeの拡張機能は使えません。

方法5: Electronで自作する

Webアプリに、ファイルの読み書きやメニュー、自動更新などの機能を足して製品として出したいなら、Electronで作るのが定番です。公式サイトには「Electron embeds Chromium and Node.js to bring JavaScript to the desktop.」とあり、ChromiumとNode.jsをアプリの中に同梱する仕組みです。SlackやVisual Studio Codeのような広く使われているアプリもこの方式です。

同梱する分、アプリの容量は大きくなります。また、Chromiumの更新に合わせて自分でアプリを作り直し、配り直す必要があります。Electronのメジャー版はChromiumと足並みをそろえて出るため、安全のための修正を受け取るには、アプリ側も追随し続ける運用が前提です。社内の小さな管理画面を窓にしたいだけなら、ここまでの手間は見合いません。

自分用なら、もう1つの選択肢

自分用に作る場合でも、SafariやChromeの標準機能では足りない場面があります。たとえば次のようなときです。

  • Chromeでしか正しく動かない業務システムを、Chromeの拡張機能ごと窓にしたい
  • 同じサービスに、仕事用と個人用のアカウントで同時にログインしたい
  • Chromeが更新されるたびに、アプリが壊れたりアイコンが戻ったりするのを避けたい

この用途向けに、Macに入っているChromeやBrave、Edgeなどをそのまま土台にして、サイトごとに独立したMacアプリを作る道具があります。その1つでは、アプリごとにブラウザのプロファイルが自動で分かれ、Chromeウェブストアの拡張機能をアプリごとに入り切りでき、ブラウザの更新を検知してアプリを同期し直す仕組みがあることができることに書かれています。手順は使い方ガイドにあり、動作環境はmacOS 12以降です。よく使われるサービスは対応サービス一覧から選ぶだけで作れます。費用は料金のとおり、アプリ3つまでは無料、それ以上は3,980円(税込)の買い切りです。配布用のインストーラを作る道具ではない点は、方法3と方法4との違いです。

5つの方法を並べて比べる

ここまでの内容を、選ぶときに効く項目で並べます。

方法 必要なもの 費用 表示の中身 配布
Safariの「Dockに追加」 macOS Sonoma 14以降 無料 Safari(WebKit) 想定外
Chromeのウェブアプリ Chrome 無料 Chrome(同じプロファイル) 想定外
Websktop ブラウザとアカウント 無料枠の後はビルドごとに課金 出力の形式による 可
Pake Rust、Node(オンラインのビルドも可) 無料(GPL-3.0) OSの表示部品 可
Electronで自作 開発環境と開発の手間 無料(開発の工数は別) 同梱のChromium 可

費用だけで比べると、ブラウザの標準機能とPakeが無料で並びます。実際の差は、表示の中身と、作ったあとの手入れにあります。Safariとそれに近い表示部品を使うものは軽い一方でChromeの拡張機能が使えず、Chromiumを同梱するものは重い一方で表示の差が出にくくなります。

どのサイトを、デスクトップアプリにするべきか

方法を決める前に、そもそもどのサイトを独立させるかを決めておくと、作りすぎを防げます。目安は次の3つです。

  1. 1日に何度も開き、開いたままにしておくもの(メール、チャット、業務の管理画面)
  2. タブの列に埋もれると困るもの(会議の画面、作業時間の記録)
  3. ほかのタブと別のアカウントで使いたいもの(仕事用と個人用)

調べ物や一度読むだけのページは、タブのままで十分です。独立させたサイトが多すぎると、今度はDockとcommand+Tabの一覧が混み合い、探す作業がそちらで起きます。最初は1つか2つに絞り、SafariかChromeの標準機能で試してみる。それで足りない点がはっきりしてから、別の方法に移るのが失敗の少ない順番です。導入前に確かめられることの多い点はよくある質問にもまとまっています。

よくある質問

WebアプリをMacのデスクトップアプリにする、いちばん簡単な方法は何ですか?

macOS Sonoma 14以降なら、Safariでページを開き、メニューバーの「ファイル」から「Dockに追加」を選ぶ方法が最も手軽です。Chromeを使っているなら、右上のその他アイコンから「キャスト、保存、共有」、「ページをアプリとしてインストール」の順に選びます。どちらも追加の道具や費用はかかりません。

作ったデスクトップアプリを、ほかの人に配れますか?

SafariやChromeの機能で作ったアプリは、ほかのパソコンに配ることを想定していません。配りたい場合は、Windows、macOS、Linux向けのインストーラを出力できるWebsktopや、オープンソースのPake、Electronでの自作が候補になります。費用と開発の手間は方法ごとに違います。

Electronで作るアプリとPakeで作るアプリは何が違いますか?

ElectronはChromiumとNode.jsをアプリに同梱するため、容量は大きくなる一方、どのパソコンでも表示がそろいます。PakeはRustとTauriで作られ、OSに組み込まれた表示部品を使うので、READMEでは多くが10MB未満と案内されています。拡張機能を使いたいかどうかも判断の材料になります。

同じサービスに2つのアカウントで同時にログインできますか?

Chromeのウェブアプリは、インストールしたChromeのプロファイルの中で動くため、アカウントを分けたい場合はプロファイルを分けてから、それぞれでインストールします。SafariのWebアプリはSafariとCookieを共有しないため、Safari側とWebアプリ側で別のアカウントを使えます。アプリごとにプロファイルを自動で分ける道具を使う方法もあります。

記事一覧へ戻る