ポータブルなウェブサイトとは？

1. Portable Website と Web Application、それぞれ何のために使うのか

メーカーのサイトなら、製造技術や取得済みの認証、製品カタログを見せたい。コンサルタントならサービスと支援事例、デザイナーなら作品を紹介したい。訪問者も、それらを見て依頼先として検討し、問い合わせることを目的にしています。一方、取引プラットフォームには注文の実行が、共同編集ツールには非公開の文書を保存し、複数人の変更を反映する機能が求められます。同じブラウザーで開くものでも、担う役割はかなり違います。

Portable Website は、完成したサイトをファイルとして保管し、対応するホスティングサービスへ移し、制作元に頼らず保守できるウェブサイトです。Web Application は、文書編集や注文管理、アカウント操作といった処理をブラウザーで行うためのソフトウェアを指します。処理はブラウザー内だけで完結する場合もあれば、サーバーを使う場合もあります。

会社紹介やサービス案内では、基本的にどの訪問者にも同じ内容を見せます。来月その内容を更新する予定があっても、今月の閲覧ごとにデータベースからページを組み立てる必要はありません。内容が変わったときに、ページのファイルを作り直せば済むこともあります。

たとえば、海外向けの製品カタログを複数言語で用意し、問い合わせはメールで受ける会社を考えてみます。信頼してもらえるサイトは必要でも、顧客用のアカウントやリアルタイムの在庫表示までは要らないかもしれません。それでも常時稼働する CMS などを使えば、誰かがそのシステムを管理し続けます。紹介用のサイトを手に入れたいという要望に、必要以上の運用作業が付いてくるわけです。

2. 作るために選んだ仕組みを、公開後も使い続ける理由

ウェブサイトの制作サービスでは、作る機能と公開する機能がセットになっていることがよくあります。オンラインのサイト作成ツールなら、編集画面、画像の保存場所、ホスティング、外部サービスとの連携まで一か所でそろいます。従来型の CMS では、管理画面、データベース、テーマ、プラグインが動き、サーバーでページを生成します。独自に開発する場合は、専用のコードや公開手順も必要です。

こうした仕組みは便利です。ただし、制作方法を選んだつもりでも、その選択によって「納品後に動かし続けるもの」まで決まっていることがあります。毎日記事を承認して公開するチームや、注文を処理する店舗であれば、その機能と費用が必要でしょう。年に数回だけ更新する会社案内でも、同じ仕組みが必要かどうかは別途考える必要があります。

訪問者に見える内容が変わらなくても、運用側では実行環境の更新、データベースのバックアップ、プラグイン同士の動作確認、セキュリティ更新、障害時の復旧準備が続きます。サービス事業者に任せることもできますが、その分は契約や継続費用として残ります。使いたい機能が誰のためのものなのか、公開後も必要なのかを確かめれば、引き受ける作業を判断しやすくなります。

サイトの所有を具体的に考えるなら、完成したページと画像を含むファイルを受け取れるか、公開先を自分で選べるか、別の開発者に修正を頼めるかを確認すると分かりやすくなります。サイトを作る段階で納品物まで見ておけば、その後の更新や担当者の引き継ぎも見通せます。

自分でサーバーを管理したり、オープンソースを使ったりすれば、管理できる範囲は広がります。それでもデータベースや特定の実行環境、バックアップ、更新作業が必要なことはあります。逆に、非公開の独自ツールから、ごく一般的なウェブのファイルを書き出すこともできます。ライセンスやサービスの分類だけでなく、完成品が何を必要として動くのかまで見る必要があります。

3. Web Application で作り、Portable Website として受け取る

制作には、複雑なアプリケーションが役立ちます。資料から情報を読み取り、製品を整理し、文章を翻訳して、デザインを選び、画面幅に合うページを作る。その過程で AI モデルやデータベース、処理の順番を管理するキュー、ビルドツールを使うこともあります。こうした制作機能を活用しながら、完成したサイトは独立したファイルとして受け取れます。

制作担当者が編集のために使うシステムと、訪問者が会社概要を読むために必要なものは分けられます。編集や生成を終えてから HTML、CSS、JavaScript、画像などをまとめておけば、公開先はそのファイルをブラウザーへ配信すればよくなります。

制作：Web Application
資料・確認済みの内容・デザイン・翻訳
                         |
                         v
納品：Portable Website
HTML・CSS・JavaScript・画像などのファイル一式
                         |
                         v
公開：静的ファイルに対応したホスティング
                         |
                         v
訪問者のブラウザー

外部サービスを使う機能は、別途そのサービスに接続します。

ページをあらかじめ作る方式に対し、アクセスのたびにプログラムと最新データから応答を組み立てる方式もあります。両方を組み合わせることもできます。訪問者ごとに必要な処理は何か、内容を更新したときだけ行えばよい処理は何かを整理して、使い分けます。

「静的」という言葉は、ページの内容をどう配信するかを表しています。画面幅に応じたレイアウト、メニュー、画像ギャラリー、アニメーション、言語切り替えなどはブラウザーで動かせます。さらに、最新データの取得や本人確認、メッセージ送信のサービスを組み合わせれば、用途に合った機能を加えられます。たとえば決済サービスへのリンクを置けば、商品を紹介するページから支払いへ案内できます。

4. Portable Website として納品するための条件

LiteSite では、ファイル一式を保管し、対応するホスティングへ移し、LiteSite を使わずに保守できる完成済みのサイトを「ポータブルなウェブサイト」と呼んでいます。納品した基本ページの表示に、LiteSite のアカウント、有効な契約、LiteSite のアプリケーションサーバーは必要ありません。

Portable Website は、完成品をどのように受け取り、制作元から独立して使えるかを表す言葉です。Web Application は、ブラウザーで使うソフトウェアの機能を表します。この二つは重なることもあり、ブラウザー内だけで動くアプリケーションなら、ファイルとして持ち運べる場合もあります。ここで比較しているのは、会社やサービスを紹介するページを独立したファイルとして受け取るか、公開後もアプリケーションの稼働に頼るかという選択です。

LiteSite は、広く使われているウェブの技術でサイトを作ります。納品されるファイルには、次の特徴があります。

• 完成品がそろっている。生成したページと、その表示に使う画像、スタイル、スクリプトなどを一式で受け取れます。
• 制作元から独立して公開できる。完成した基本ページを、選んだホスティングから直接配信できます。
• 別のホスティングへ移せる。ファイルに対応する公開先を選び、URL やルーティングを設定して公開できます。
• 開発者が保守できる。納品された HTML、CSS、JavaScript、画像などを、一般的なツールで確認・編集できます。
• 必要なサービスを組み合わせられる。フォーム、アクセス解析、地図、決済など、事業に合ったサービスを選べます。

5. 手元にファイルがあると、運用はどう変わるか

完成したサイトのファイルが手元にあれば、制作ツールの利用を終えた後も、自分で選んだホスティングで公開を続けられます。過去の状態を保存したり、復旧に使ったり、別の担当者へ引き継いだりできるため、サイトを長く使っていくための土台が残ります。納品されたパッケージをダウンロードして保管すれば、必要なときに取り出して使えます。

公開先や保守の依頼先も選べます。事業に合ったホスティングへ移したり、別の開発者に修正を頼んだりするとき、既存のファイルから作業を始められます。ページの内容やデザインを引き継いで使えるので、積み上げてきたサイトを活かしながら運用先を変えられます。

会社や商品を紹介するページを配信するだけなら、公開環境にアプリケーション用のデータベースや管理画面を置かずに済む場合もあります。その分、更新、バックアップ、監視の対象を減らせます。運用するシステムを絞り、掲載内容の更新や商品写真の差し替えなど、訪問者に届けたい情報へ力をかけられます。

費用も分けて考えられます。LiteSite で完成品を購入した後、ホスティング、ドメイン、保守を誰に任せるかは、それぞれ選べます。静的サイトのホスティングは低価格で利用でき、無料プランで公開できる場合もあります。サイトの規模や運用方針に合わせてプランを選び、公開にかける費用を調整できます。

6. LiteSite の納品ファイルに含まれるもの

LiteSite は、既存のサイトや提供された資料をもとに内容の下書きを作り、確認・編集した内容から多言語サイトを生成します。購入前に非公開プレビューで実際のページを確認できます。購入後に受け取るのは、プレビューの透かしやアクセス制限を除いた本番用パッケージです。

index.html
about.html
content.json
…その他のページ
zh-Hans/
  index.html
  about.html
  content.json
  …その他のページ
assets/
  …CSS、JavaScript、画像、フォント
robots.txt
sitemap.xml
seo-manifest.json
manifest.json
package-info.json
healthcheck.json
README.md
AGENTS.md
DEVELOPMENT.md
litesite-dev.mjs
litesite-bind-origin.mjs

訪問者が見るサイトを構成するのは、HTML と画像、CSS、JavaScript などです。掲載する内容は生成済みの HTML に入り、content.json には購入時点の内容が参照用に保存されています。マニフェストにはファイルの一覧と、改変の有無を検証するための情報が記録されています。README には各ファイルと公開手順の説明があります。AGENTS.md は AI コーディングエージェント向けの短い導入です。DEVELOPMENT.md にはサイトのファイル、デザイン上の慣例、操作パターンがまとめられ、litesite-dev.mjs でローカルのプレビューと確認ができます。付属のツールで公開先に合わせたコピーを別のフォルダーに作成できます。

独自に修正する場合は、公開先を設定して作成したコピーの HTML、CSS、JavaScript、画像などを開発者が直接編集し、その結果を公開します。参照用の content.json で内容を確認しながら、変更は表示を担う HTML などへ反映します。元のパッケージは変更せずに保管してください。後で別の公開先用にコピーを作る際にも、元のファイルの状態を検証して準備できます。

7. 別のホスティングへ移す手順

まず、購入後の本番用 ZIP を保存し、元のファイルを変更せずに保管します。公開する HTTPS の URL を決め、パッケージの静的ファイルと URL 構成に対応するホスティングを選びます。LiteSite から自分の Cloudflare アカウントへ公開する場合は、LiteSite が公開先に合わせてファイルを準備します。手動で移す場合は、ZIP を展開し、付属の README と設定用ツールを使います。

node litesite-bind-origin.mjs https://example.com/

# 作成された litesite-deployment/ フォルダーをアップロードします。

このツールは、公開先に合わせて正規 URL（canonical）、各言語版への参照、Open Graph の URL、サイトマップ内の URL を設定します。元のフォルダーには手を加えず、公開用のコピーを別に作ります。準備には Node.js を使いますが、完成したページを配信するために Node.js のアプリケーションサーバーを動かす必要はありません。公開用のコピーには、元のパッケージの README と設定用スクリプトは含まれません。

node litesite-bind-origin.mjs https://USER.github.io/ /REPO/

公開用のファイルをアップロードしたら、実際の URL で確認します。トップページに加え、各ページの URL を直接開き、各言語、画像、ダウンロード、外部サービスとの連携を確かめます。ドメインの DNS を公開先に向け、HTTPS を設定してください。既存のサイトを置き換えて URL が変わる場合は、旧ホスティング側でリダイレクトを用意し、以前のリンクから新しいページへ案内します。

GitHub Pages などでサブディレクトリに公開する場合は、/REPO/ を含む実際の URL で各ページを確認します。検索クローラー向けの robots.txt は、ホストのルートに置いて管理します。共有ホストを使う場合は、ホスティング事業者の案内に沿ってルートの設定を確認してください。

8. 事業に必要なサービスを組み合わせる

問い合わせを受けたいならフォームサービス、所在地を伝えたいなら地図、商品を販売したいなら決済サービスを組み合わせられます。すでに使っているサービスを活かしたり、用途に合うものを選んだりして、サイトから次の行動へつなげます。利用するサービスと管理担当者を記録しておけば、更新や引き継ぎも進めやすくなります。

一つの事業で、Portable Website と Web Application を併用することもできます。会社やサービスを紹介するページは移しやすい形で持ち、会員管理、予約、注文は専用のアプリケーションに任せる構成です。リンクやメニューからそれぞれのサービスへ案内すれば、訪問者は会社を知り、サービスを選び、予約や注文へ進めます。紹介ページと業務用アプリケーションを、それぞれの目的に合わせて運用できます。

9. Portable Website と Web Application の選び方

会社案内、サービス紹介、輸出向けカタログ、キャンペーンサイト、作品のポートフォリオなど、情報を見せて事業や仕事を伝えることが中心なら、ポータブルなサイトが合います。ときどき内容を更新する、多言語で情報を伝える、完成品を手元に残す、別の開発者に引き継ぐといった要望にも応えられます。制作には便利なツールを使い、完成後の公開方法は自分で選べます。

利用者ごとの管理画面、最新の在庫情報、注文処理、サブスクリプション管理、共同編集には、それぞれの処理を担うアプリケーションが役立ちます。大人数で内容を編集するチームなら、CMS で執筆と承認を進め、確認を終えた公開ページを事前に生成する方法もあります。制作の進め方、訪問者に提供する機能、公開時に使うシステムを分けて選べば、紹介ページを移しやすく保ちながら、取引に必要な機能を組み合わせられます。

Web Application が必要な場合も、LiteSite で生成したサイトを土台に開発を進められます。開発者は既存のページ、デザイン、コンテンツを活用し、ユーザーアカウントや注文処理、業務に必要なサーバー側の処理を追加できます。

• どの情報を全員に共通して見せ、どの情報を訪問者ごとに用意するか。
• 内容をどれくらいの頻度で更新し、誰が担当するか。
• 納品時にどのファイルを受け取り、どう活用していくか。
• フォーム、予約、決済などに、どのサービスを組み合わせるか。
• 保管したファイルをどこで公開し、誰に保守を任せるか。
• 運用にかける作業と費用を、どのように配分するか。

10. 制作には LiteSite を、完成品は Portable Website として

LiteSite 自体は Web Application です。アカウント管理、AI による処理、内容の編集、翻訳、ページ生成などを使ってサイトを作ります。お客様にはまずプレビューを確認していただき、購入後に完成した Portable Website のファイル一式をお渡しします。基本ページは LiteSite のアプリケーションサーバーを使わずに、対応するホスティングで公開できます。

制作に使う仕組みと、完成したサイトの運用を分けることで、お客様がサイトを持ち続けられるようにします。受け取ったファイルを保管し、公開先を選び、必要に応じて保守の担当者を変えられます。そのために、実際に使えるファイル、外部サービスの情報、別の人でも実行できる公開手順をそろえます。

まずは、お手元の会社案内や製品資料、既存のウェブサイトを使ってプレビューを作成してください。内容とデザインを確認してから、完成したファイル一式を購入できます。会社や商品を紹介するサイトを自分の手元に持ち、事業に合わせて公開先や連携サービスを選んで使っていけます。

参考資料

ウェブサイトの仕組みについては、以下の技術資料を参照しています。LiteSite の納品物に関する説明は、現在の本番用パッケージに基づきます。ファイル一覧では、多言語の企業サイトを例に構成を紹介しています。

• MDN：静的サイトと動的サイトの仕組み
• Cloudflare Pages：静的 HTML の公開方法
• Google 検索：URL の変更を伴うサイト移転