ずんだもん「WebサイトをAzureにホスト！ずんだ餅屋さん流クラウドサービス選びなのだ！」

ずんだもん「めたん、WebサイトをAzureで公開したいんだけど、どうやら『Static Web Apps』と『App Service』がよさそうなのだ。」

ずんだもん「でも、これって何がどう違うのだ？似たようなAppって名前で、選ぶのにアップアップなのだ！」

四国めたん「ふふっ、Azureのサービス選びは最初は迷うわよね。でも大丈夫、ずんだもん！それぞれの特徴や使い分け方を、わかりやすく表にまとめてみたわよ！」

比較表

比較ポイント	SWA（Static Web Apps）	App Service（APSVC）
配信方法	CDNで世界中に高速配信。静的ファイルが得意	サーバーから配信。動的ページも得意
バックエンド	サーバーレスAPI（Functions）	常時稼働サーバーでAPIやWebアプリを実行
CI/CD自動化	GitHubやAzure DevOpsと自動連携。PRごとにプレビュー	独自にCI/CDを構築。自動化も可能
コスト	安い。無料プランあり	プラン次第で幅広い。小規模なら安価
スケーリング	静的配信＋APIは自動スケール	プランごとのスケール（手動・自動）
認証	Entra IDやGitHub認証が簡単に統合できる	独自に認証・認可を設計
SSR対応	非対応（静的SPA/JAMstack向け）	SSR（サーバーサイドレンダリング）も対応
カスタマイズ性	CDNやAPI連携は簡単。細かいサーバー設定は苦手	OSやネットワークなど細かい制御が可能
向いている用途	軽量SPA、JAMstack、グローバル配信、サーバーレスAPI	従来型Webアプリ、SSR、複雑な業務アプリ

ずんだもん「SWAはCDNで静的ファイルを高速配信できるのが強みなのだ！サーバーレスAPIとも相性が良いのだね」

四国めたん「そうよ。しかもCI/CDも自動化されてて、コストも抑えやすいわ。ただし、SSRには向いてないから注意が必要よ」

ずんだもん「App Serviceはどうなのだ？」

四国めたん「App Serviceは動的ページやSSRも得意だし、細かいカスタマイズや複雑な業務アプリにも向いてるわ。プランによってコストやスケールも調整できるのがメリットね」

ずんだもん「なるほど、それぞれ得意なシナリオが違うのだ！」

SWAが向いているケース

• 完全サーバーレス/JAMstack
  静的なフロントエンド（React, Vue, Angularなど）＋サーバーレスAPI（Azure Functions等）の構成に最適です。
  → コストが安く、CDNで高速配信、CI/CDやプレビュー環境も自動で作れます。

• グローバル配信
  世界中のユーザーに速くページを届けたい場合。

• 頻繁なデプロイやプレビューが必要
  Pull Requestごとに自動でプレビュー環境が作られるので、開発効率が高いです。

• 小～中規模のSPAや社内ポータル
  サーバー管理不要で、運用がとてもシンプル。

四国めたん「SWAが向いているのは、まず完全サーバーレスやJAMstack構成のときね。たとえば、ReactやVue、Angularみたいなフロントエンドと、Azure FunctionsみたいなサーバーレスAPIを組み合わせる場合に最適だわ。コストも安いし、CDNで高速配信できるし、CI/CDやプレビュー環境も自動で作れるのよ」

ずんだもん「世界中のユーザーに速くページを届けたいときもSWAがいいのだ？」

四国めたん「その通りよ。グローバル配信したいときは、CDNで世界中どこでも速くページを表示できるSWAが強いわ」

ずんだもん「開発中に何度もデプロイしたり、プレビュー環境が欲しいときも便利なのだ？」

四国めたん「そうよ。Pull Requestごとに自動でプレビュー環境ができるから、開発効率がとても高いわ。小規模から中規模のSPAや社内ポータルにもぴったり。サーバー管理も不要で運用がすごくシンプルなの」

ずんだもん「じゃあApp Serviceはどんなときに向いてるのだ？」

App Serviceが向いているケース

• SSR（サーバーサイドレンダリング）が必要
  Next.jsやNuxt.jsなど、サーバーでHTMLを動的生成したい場合。

• 複雑なバックエンド処理や常時稼働が必要
  データベース連携、バッチ処理、WebSocket、VNET統合など、サーバーとして細かい制御が必要な場合。

• 既存の業務アプリや多様な言語サポート
  .NET/Java/PHPなど、さまざまなフレームワークや言語を使いたい場合。

• 独自のネットワークや高いセキュリティ要件
  VNET統合やApp Service Environment（ASE）など、ネットワーク分離や高度なセキュリティが必要な場合。

四国めたん「App ServiceはSSR、つまりサーバーサイドレンダリングが必要なときにおすすめよ。Next.jsやNuxt.jsでサーバー側でHTMLを動的に生成したい場合ね」

四国めたん「それから、データベース連携やバッチ処理、WebSocket、VNET統合みたいな複雑なバックエンド処理や、サーバーとしての細かい制御が必要なときもApp Serviceが向いているわ」

ずんだもん「いろんな言語やフレームワークを使いたいときも？」

四国めたん「そうよ。.NETやJava、PHPなど多様な言語サポートが必要なときや、既存の業務アプリを動かしたいときにもApp Serviceが便利ね。あと、VNET統合やApp Service Environment（ASE）でネットワーク分離や高いセキュリティ要件にも対応できるわ」

ずんだもん「なるほどなのだ！使い分けがよくわかったのだ！」

JAMStackとは？

ずんだもん「めたん、さっき『JAMstack』って聞いたけど、ジャムパンの新しい仲間なのだ？」

四国めたん「ずんだもん、JAMstackはおやつじゃなくて、モダンなWebサイトやアプリを作るためのアーキテクチャのことよ。
JAMstackの“JAM”は、JavaScript・API・Markupの頭文字から来ているの。」

四国めたん「つまり、JavaScriptで動きをつけて、APIでデータや機能を呼び出して、Markup（静的HTML）をCDNから高速配信する構成なのよ。」

ずんだもん「へぇ～！じゃあ、サーバーがいらないのだ？」

四国めたん「そう、JAMstackはサーバーでページを毎回作るんじゃなくて、あらかじめビルドした静的なHTMLファイルを用意しておくの。
そのファイルをCDNで世界中にばらまいておいて、ユーザーがアクセスしたら一瞬でページが表示されるわ。動的な部分はAPI経由でJavaScriptが取ってくるのよ」

ずんだもん「それって速そうなのだ！他にもいいことあるの？」

四国めたん「もちろんよ。
・静的ファイル中心だからセキュリティが高い
・CDNでスケールしやすいからアクセスが増えても安心
・フロントとバックエンドが分離されてるから開発や運用もシンプル
っていう特徴があるわ」

サービス名	できること・特徴	向いているサイト例
Azure Static Web Apps	Microsoftのクラウド。自動でCDN配信、サーバーレスAPIも使える。Git連携で簡単デプロイ。	会社のホームページ、社内ポータル、SPA
Netlify	無料プランあり。Gitと連携して自動ビルド・公開。フォームや認証も簡単に追加できる。	ブログ、マーケティングサイト、資料サイト
Vercel	Next.jsと相性抜群。プレビュー環境も自動作成。大規模なサイトにも強い。	プロダクトサイト、ECサイト、SPA
Cloudflare Pages	世界中のサーバーで超高速配信。GitHubと連携してすぐ公開できる。無料で使える。	ランディングページ、ドキュメント、グローバル向けサイト

ポイント解説

• どのサービスも「Gitでコードをアップ→自動でビルド＆公開」が基本。

• サイトの種類は、会社や製品の紹介ページ、ブログ、SPA（シングルページアプリ）、ドキュメントなどがぴったりです。

• 世界中の人に速くページを届けたいときや、簡単にWebサイトを更新したいときに便利です。

ずんだもん「なるほどなのだ！ずんだ餅はサーバーで作るけど、JAMstackはサーバーを使わずに世界中に届けられるのだ！」

四国めたん「そういうことよ。ずんだもんもJAMstackでモダンWebデビューしちゃいなさい！」

SSRとは？

ずんだもん「めたん、さっきの表で『SSR』って書いてあったけど、SSRって何なのだ？スーパーずんだライスの略なのだ？」

四国めたん「ずんだもん、それはあなたの夢のメニューでしょ…SSRは『サーバーサイドレンダリング』の略よ。Webページをサーバー側で作ってから、ユーザーに届ける仕組みなの。だから、最初から中身が詰まったページが届くわけよ」

シナリオ例	説明	代表的なサービス・フレームワーク
ニュースサイト、ブログ、ECサイト	コンテンツ量が多く、最新情報やユーザーごとに内容が変わるページ。SEOも重要。	Next.js、Nuxt.js、Remix、Gatsby（SSR対応）
ユーザーダッシュボード、パーソナライズページ	ユーザーごとに表示内容が変わるダッシュボードや会員向けページ。	Next.js、Nuxt.js、Remix
リアルタイム更新が必要な金融・医療・在庫管理アプリ	株価や在庫、患者データなど、常に最新情報を表示しなければならない業務アプリ。	Next.js、Nuxt.js
SEO対策が必須なマーケティング・プロダクトサイト	検索エンジンに即座にインデックスされたい場合。	Next.js、Nuxt.js
ネットワークが遅い・不安定なユーザー向けWebアプリ	サーバー側でHTMLを生成して転送することで、クライアント負荷や通信量を減らし、表示速度を改善できる。	Next.js、Nuxt.js
セキュリティ重視の業務Webアプリ	サーバー側でレンダリングすることで、クライアントに機密ロジックやデータを渡さず安全性を高められる。	Next.js、Nuxt.js

ずんだもん「なるほどなのだ！じゃあSSRだと、最初から美味しいずんだ餅が届くみたいな感じなのだ？」

四国めたん「そうそう、例えるなら、注文したらすぐに出来立てのお餅が出てくるイメージね。逆にSPAとかだと、材料だけ届いて自分でお餅を作る感じかしら。SSRは表示が速くてSEOにも強いのがメリットよ」

ずんだもん「やっぱり、ずんだ餅は出来立てが一番なのだ～！」

プライス

ずんだもん「めたん、AzureのSWAとApp Serviceって、実際どれくらいお金がかかるのだ？お財布が心配なのだ…！」

四国めたん「安心して、ずんだもん。ざっくりだけど、こんな感じよ！」

（※価格は2025年5月時点の参考値、最新情報はAzure公式サイトでご確認ください）

Azure Static Web Apps（SWA）

プラン	月額料金（税込）	主な特徴
Free	無料	個人・小規模向け。100GB帯域、SLAなし。
Standard	約1,445円	商用向け。100GB帯域、SLAあり、リソース拡張可。

• 標準プランは1ドル=約160円換算で1,445円/月程度。
• 無料プランでも多機能だが、API呼び出しやストレージなどに制限あり。

Azure App Service（APSVC）

App Serviceはプラン（SKU）によって価格が大きく異なります。代表的なプランの一例（2025年5月時点、日本円換算）：

プラン	vCPU	RAM	月額料金（目安）	用途例
Free	1	1GB	無料	学習・テスト用途
Basic B1	1	1.75GB	約1,500円	小規模アプリ・社内利用
Standard S1	1	1.75GB	約7,000円	一般的な業務アプリ
Premium P1v3	2	8GB	約22,000円以上	高負荷・商用アプリ

• 実際の価格はAzure公式料金ページや為替レートで変動します。
• App Serviceはリソース単位での課金。複数アプリを同一プランで稼働可能。

備考

• SWAはAzure Functions（サーバーレスAPI）と組み合わせる場合も多く、Functionsは無料枠あり。超過時は従量課金。
• App Serviceはプラン変更で簡単にスケールアップ/ダウン可能。
• ユーザーが少人数の場合、App Service単体でも十分運用可能。SWAと組み合わせるのは、グローバル配信やコスト最適化、CI/CD自動化などが必要な場合に有効。

ずんだもん「思ったより安いプランもあるのだ！」

四国めたん「そうね。月額約1,500円くらいから始められるわよ。
App Serviceだけでも社内利用なら十分だし、グローバル配信や自動化が必要なときはSWAと組み合わせるのがオススメね」

ずんだもん「なるほど！これならずんだ餅を我慢しなくてもAzureが使えるのだ！ありがとうなのだ！」

まとめ

ずんだもん「めたん、結局SWAでいいのか、App Serviceを使ったほうがいいのか、どっちがいいのかしらなのだ？」

四国めたん「ずんだもん、SWAの組み込みAPIは手軽で便利だけど、エンタープライズ向け要件とか、複雑なバックエンドや既存システムとの連携、ネットワーク分離や運用の柔軟さが見込まれるときは、App Serviceや独立したFunctionsを組み合わせるのがオススメよ」

ずんだもん「じゃあ、ずんだ餅を作って通販するだけならSWAだけで十分だけど、将来ずんだ餅工場を動かして店頭販売もするかもなら、App Serviceってことなのだ？」

四国めたん「その例え、意外と分かりやすいわね。要件がシンプルでスピーディさ重視ならSWA単体でOK、でも将来を見据えて先に工場の敷地を確保しときたいなら、App Serviceも活用しましょうってことよ♪」

ずんだもん「よーし、ずんだ餅もAzureも、要件に合わせて使い分けるのだ！」

四国めたん「そうそう、ずんだもん。でも一つ忘れちゃダメよ。どんなに良いサービスでも、最初から完璧を目指さなくていいの。まずは小さく始めて、必要に応じてスケールアップしていけばいいのよ。それがクラウドの良いところなんだから」

ずんだもん「なるほどなのだ！最初はずんだ餅一個から始めて、人気が出たら工場を建てればいいってことなのだ！」

四国めたん「その意気よ、ずんだもん！困ったときは、私に相談してね。ずんだ餅食べながら一緒に考えてあげるわ！」

利用キャラクター

• ずんだもん：VOICEVOX:ずんだもん

本記事で使用しているキャラクター画像の著作権は、それぞれの権利者に帰属します。
非商用目的での利用に基づき掲載しています。