---
title: "MPAとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "AIで作った複数ページのWebサイトを手軽に共有・レビューしたい方向け。MPAがSPAと何が違うか、HTMLファイルをそのまま配布できる条件と制限、安全に共有するためのチェックポイントを説明する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-mpa-html-share"
markdown: "https://giga-site.com/articles/what-is-mpa-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# MPAとは？HTML共有・AI生成サイトでの意味をやさしく解説

Webサイトの共有方法を選ぶとき、「HTMLファイルをそのまま渡すだけで動く」のか「ビルドが必要なのか」は重要な判断軸だ。MPA（Multi-Page Application）はその前者に近い設計であり、AIが生成した静的HTMLサイトとの相性がとくに良い。この違いを理解しておくと、共有・レビューの手間を大幅に減らせる。

> Source HTML: https://giga-site.com/articles/what-is-mpa-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

MPA（Multi-Page Application）とは、ページごとに独立したHTMLファイルが存在し、リンクをクリックするたびにサーバーから新しいHTMLが返される従来型のWebサイト構成だ。WordPressやAstro（静的出力モード）、11tyで生成されるサイトがこれにあたる。

AIで複数ページのドキュメントサイトやランディングページを生成した場合、出力が`.html`ファイルの集合である場合はMPAに分類される。この場合はJSバンドルへの依存が少なく、ファイルをそのまま共有・配信しやすい。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

MPAの場合、各ページが独立したHTMLなので、トップページ（index.html）だけでなく他のページのHTMLファイルも含めた上でフォルダ構造を保ってzipにすることが重要だ。`about.html`が`about/index.html`として生成されているケースも多く、フォルダ構造を崩すと内部リンクが全て404になる。

ギガサイト便にMPAのフォルダをアップロードすると、フォルダ構造がそのまま維持されたHTTPS URLが発行される。`/about`や`/contact`といったパスも機能するため、複数ページを持つサイトのレビューに最適だ。サーバー設定を一切変えずに完結する点がSPAとの大きな違いだ。

## よくある誤解

「MPAはJavaScriptが使えない」という誤解がある。MPAでもページ内に`<script>`タグでJSを組み込めるし、Alpineやhtmlxなどの軽量ライブラリを使えばインタラクティブな機能も実現できる。ページ遷移の際にJSの状態がリセットされるという制約はあるが、機能の制限ではない。

「MPAは古い技術だから今は使われていない」という思い込みも的外れだ。Shopifyのテーマ、Hugoのドキュメントサイト、多くの企業サイトはMPAベースだ。AI生成ツールでも静的ページ出力を選べばMPAになり、サーバー不要で配信できる利点がある。

## 安全に使うための注意点

MPAの各ページには`<meta>`タグや`<script>`内にAnalyticsのトラッキングIDが埋め込まれていることがある。共有先のアクセスがアナリティクスに記録され、内部レビューなのに外部ツールにデータが飛ぶことを意識しておく。不要であればGA/GTMのコードを共有版から除いてからアップロードする。

MPAでは各ページが独立しているため、どのページURLからでも直接アクセスされる。認証が必要なページが`/admin.html`のように推測可能なパスにある場合、URL共有の相手に見せたくないページにも直接アクセスされるリスクがある。共有フォルダに含めるファイルを意図的に絞り込む習慣をつけよう。

## よくある質問

### AstroでMPAとして出力した場合、SPAと比べて共有URLの発行は速くなりますか？

一般的にMPAの方がJSバンドルが小さくアップロードが速いです。Astroのデフォルト出力はJS最小限のHTMLファイル群なので、ギガサイト便へのアップロード時間が短くなり共有URLの発行も早くなります。

### MPAのページ間リンクがローカルでは動くのに、アップロード後に404になる場合の対処法は？

リンクが`./about.html`のような相対パスで書かれているか確認してください。`/about`のようなルート絶対パスで書いていると、配信先のサブディレクトリと合わない場合があります。Astroなら`base`設定を合わせると解決します。

### MPAサイトにフォームがある場合、共有プレビューでフォーム送信まで動作確認できますか？

フォームのaction先がサーバーエンドポイントの場合は、そのサーバーが動いていないと送信できません。静的共有でのレビューはUI表示の確認に留め、フォーム動作確認は開発環境を別途用意する必要があります。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "MPAとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "AIで作った複数ページのWebサイトを手軽に共有・レビューしたい方向け。MPAがSPAと何が違うか、HTMLファイルをそのまま配布できる条件と制限、安全に共有するためのチェックポイントを説明する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-mpa-html-share",
  "url": "https://giga-site.com/articles/what-is-mpa-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "AstroでMPAとして出力した場合、SPAと比べて共有URLの発行は速くなりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一般的にMPAの方がJSバンドルが小さくアップロードが速いです。Astroのデフォルト出力はJS最小限のHTMLファイル群なので、ギガサイト便へのアップロード時間が短くなり共有URLの発行も早くなります。"
      }
    },
    {
      "@type": "Question",
      "name": "MPAのページ間リンクがローカルでは動くのに、アップロード後に404になる場合の対処法は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "リンクが`./about.html`のような相対パスで書かれているか確認してください。`/about`のようなルート絶対パスで書いていると、配信先のサブディレクトリと合わない場合があります。Astroなら`base`設定を合わせると解決します。"
      }
    },
    {
      "@type": "Question",
      "name": "MPAサイトにフォームがある場合、共有プレビューでフォーム送信まで動作確認できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フォームのaction先がサーバーエンドポイントの場合は、そのサーバーが動いていないと送信できません。静的共有でのレビューはUI表示の確認に留め、フォーム動作確認は開発環境を別途用意する必要があります。"
      }
    }
  ]
}
```