---
title: "Island Architectureとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "AstroやNext.jsのApp RouterなどIsland Architectureを使ったAI生成サイトを共有・レビューしたいWeb担当者向け。Island Architectureの概念と静的配信との相性、共有時の注意点を解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-island-architecture-html-share"
markdown: "https://giga-site.com/articles/what-is-island-architecture-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Island Architectureとは？HTML共有・AI生成サイトでの意味をやさしく解説
AIが出力したWebサイトをレビュー用に共有するとき、ページの大部分は静的だが一部だけインタラクティブという構成が増えている。この設計思想を「Island Architecture」と呼び、Next.jsやAstroなどのフレームワークが採用している。共有や配信の仕組みを知ると、表示速度の改善と安全な共有を同時に実現しやすくなる。
> Source HTML: https://giga-site.com/articles/what-is-island-architecture-html-share
> Article index: https://giga-site.com/articles/index.md
## ひとことで言うと
Island Architectureとは、ページの大部分を静的なHTMLとして配信し、インタラクティブな機能が必要な「島（Island）」の部分だけJavaScriptを読み込む設計パターンだ。Astroが先導し、現在はNext.js App RouterやFreshなど多くのフレームワークで採用されている。
具体的には、ヘッダー・本文・フッターは純粋なHTMLとして配信し、検索ボックスや動的カートといったUI部品だけJSを付与する。これにより初期表示が高速になり、Hydrationのコストも最小限に抑えられる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## HTML共有で関係する場面
Astroで出力したサイトをzipで共有すると、Island部分のJSだけが`dist/_astro/`フォルダに格納されている。このフォルダを含めずにHTMLファイルだけ送ると、静的コンテンツは表示されるがインタラクティブな部品（タブ、スライダーなど）が動かない。zip前に`dist/`フォルダ全体を選択することが必須だ。
Island Architectureのページは静的HTMLとJSが分離しているため、ギガサイト便のようなサービスでフォルダごとアップロードすれば、受け取った側がURLを開くだけで静的部分の表示を即確認でき、Island部分もパスが正しければそのまま動作する。
## よくある誤解
「Island Architectureのページは完全に静的HTMLだからJSは不要」と思うのは誤りだ。静的部分は確かにJSなしで表示されるが、インタラクティブなIslandはJSが必要だ。共有時にJSを省略すると「見えるが動かない」状態になる。
「AstroはReactより難しい」という印象からAI生成コードにAstroが混じっていると戸惑う人もいるが、実際にはHTML出力の静的部分はただのHTMLとCSSであり、ブラウザで直接開ける。Island部分のみを後から追加する構造のため、JSを一部省いてもレビューできる範囲が広い。
## 安全に使うための注意点
Island部分のJSはClient Componentとしてバンドルされるため、そこに含まれるAPIキーや環境変数は全ユーザーから見える状態になる。AstroやNext.jsの`NEXT_PUBLIC_`プレフィックス付き変数をIslandコンポーネントで使う際は、その変数が秘匿情報でないかを共有前に必ず確認する。
Islandコンポーネントがサードパーティスクリプト（アナリティクス、チャットウィジェットなど）を読み込む設定になっている場合、共有先のブラウザからそのサービスにトラッキングデータが送信される。レビュー専用URLでは不要な外部スクリプトを無効化し、最低限のIslandだけを有効にした状態で共有するとよい。
## よくある質問
### AstroでビルドしたページのどのファイルをアップロードすればIslandが正常に動きますか？
`astro build`後に生成される`dist/`フォルダ全体をアップロードしてください。`dist/_astro/`以下にIsland用のJSチャンクが入っており、これが欠けるとインタラクティブな部品が動作しません。
### Island Architectureのサイトは、静的ホスティングサービスで配信できますか？
はい、Astroはデフォルトで純粋な静的ファイルを出力するため、ギガサイト便やNetlify Dropなど静的ホスティングに対応するサービスならどこでも配信可能です。サーバー不要で動きます。
### Island化するコンポーネントと静的のままにするコンポーネントは何を基準に決めればいいですか？
クリック・入力・スクロールイベントを扱う部品はIsland（`client:load`など）に指定し、表示だけのコンテンツは静的のままにするのが基本方針です。IslandはJSコストがかかるため必要最小限にとどめます。
## 関連記事
- [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": "Island Architectureとは？HTML共有・AI生成サイトでの意味をやさしく解説",
"description": "AstroやNext.jsのApp RouterなどIsland Architectureを使ったAI生成サイトを共有・レビューしたいWeb担当者向け。Island Architectureの概念と静的配信との相性、共有時の注意点を解説する。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/what-is-island-architecture-html-share",
"url": "https://giga-site.com/articles/what-is-island-architecture-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でビルドしたページのどのファイルをアップロードすればIslandが正常に動きますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "`astro build`後に生成される`dist/`フォルダ全体をアップロードしてください。`dist/_astro/`以下にIsland用のJSチャンクが入っており、これが欠けるとインタラクティブな部品が動作しません。"
}
},
{
"@type": "Question",
"name": "Island Architectureのサイトは、静的ホスティングサービスで配信できますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "はい、Astroはデフォルトで純粋な静的ファイルを出力するため、ギガサイト便やNetlify Dropなど静的ホスティングに対応するサービスならどこでも配信可能です。サーバー不要で動きます。"
}
},
{
"@type": "Question",
"name": "Island化するコンポーネントと静的のままにするコンポーネントは何を基準に決めればいいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "クリック・入力・スクロールイベントを扱う部品はIsland（`client:load`など）に指定し、表示だけのコンテンツは静的のままにするのが基本方針です。IslandはJSコストがかかるため必要最小限にとどめます。"
}
}
]
}
```