静的サイトと動的サイトの違いを図解で解析！更新ツールは一部だけでも入れられる。

完成したページを渡すのが、静的サイト

会社案内を見たい人が来るたびに、その場でパンフレットを印刷する必要はありません。用意しておいたものを渡せば、同じ情報を届けられます。静的サイトは、これに近い考え方です。

文章や写真の配置を決めたページを先に作り、見に来た人へ届けます。ページの土台となるファイルをHTMLと呼び、その置き場所となるコンピューターがサーバーです。静的な配信では、サーバーは用意されたファイルを返します。

例えば、会社概要やサービス紹介など、誰が見ても同じ内容を伝えるページに使えます。変更があればファイルを作り直して差し替えるので、「静的だから更新できない」というわけではないんですよ。毎日更新する記事でも、公開前にページを用意する設計は可能です。

静的・動的の基本的な仕組みは、Web技術の解説サイトMDNの入門ガイドでも図付きで紹介されています。ここで比べているのは、更新する回数よりも、ページを作るタイミングです。

必要になったときにページを作るのが、動的サイト

動的サイトは、見に来た人の要求に応じて、サーバー側のプログラムが内容を組み立てます。用意されたページを渡すだけでなく、必要な情報を取り出してから返す方式です。

例えば、会員ページで自分の予約内容を見る場合。ログインした人を確認し、その人の予約情報を読み出して表示します。同じページのURLでも、人によって見せる内容を変えられるのが、この仕組みを使う理由の一つです。

ただし、動的サイトが毎回ゼロから全部を作るとは限りません。一度作った内容を一時保存して使い回す「キャッシュ」を組み合わせることもあります。また、会員ページのような個人の情報は、ほかの人へ渡らないように保存や配信の方法を分けます。

「静的は古い、動的は新しい」という関係でもありません。同じ案内を渡したいのか、状況に応じた情報を返したいのか。サイトで実現することに合わせて選ぶ仕組みです。

「静的」は、画面が動かないという意味ではない

ボタンを押すとメニューが開いたり、写真が横に切り替わったりする動きは、静的サイトにも付けられます。スクロールに合わせて文字を表示する演出も可能です。

この場合は、ページを受け取った後、閲覧者のブラウザーでJavaScriptなどのプログラムが動いています。ブラウザーとは、ChromeやSafariなど、ホームページを見るアプリのこと。サーバーでページを作る処理とは、動く場所が違います。

問い合わせフォームも同じように分けて考えられます。入力する画面は静的に配信し、送信された内容の確認やメール通知は別のプログラムや外部サービスへ任せる構成です。「静的サイトだから、プログラムを一切使わない」とは限りません。

見た目だけで静的・動的を見分けるのは難しいものです。アニメーションが多いから動的サイト、という判断はできません。

更新ツールは、お知らせだけでも使える

「休業日のお知らせは自分たちで追加したい。でも、会社案内やデザインは制作会社に任せたい」。このような希望なら、お知らせだけに更新ツールを用意する方法があります。

記事や画像を管理する更新ツールは、CMSと呼ばれます。管理画面でタイトルや本文を入力し、用意されたレイアウトで公開するための仕組みです。CMSを導入するときに、サイト全体を編集できるようにする必要はありません。

下は、RealAIzeで使っているニュースの入力画面です。タイトル、一覧画像、本文が別の欄になっています。こうした画面を用意すれば、担当者はページ全体のコードを触らずに、更新する情報を入力できます。

ただ、CMSを追加するには、サイト側の準備も必要です。既存の作り方を確認し、管理画面に入力した内容を公開ページへつなぐ作業があります。今のデザインをどこまで残せるかも、制作担当者と確認します。

CMSで更新して、静的に配信することもできる

ここが少しややこしいところです。CMSは「担当者がどう編集するか」の仕組み。静的・動的は「訪問者へどう届けるか」の仕組みです。この二つは、別々に決められます。

例えば、担当者がCMSでお知らせを書き、その内容から公開用のページを作って配信する方法があります。担当者は管理画面を使い、訪問者は完成したページを読む。編集しやすさと静的な配信を組み合わせる、というイメージです。

この方式では、CMSに保存しただけで公開ページが新しくなるとは限りません。ページを作り直して配信先へ反映する工程が必要です。その工程を自動化することもできますが、設定と、失敗したときの確認方法を用意しておきます。

反対に、公開された記事を読み出して、その場でページを作る方法もあります。EmDashというCMSの公式説明でも、事前に作るページは作り直すまで変わらず、その場で作るページは次のアクセスに公開内容を反映できると説明されています。実際の反映時期には、キャッシュの扱いも関わります。

一つのサイトで両方を使うことも可能です。例えば、Astroの公式ガイドには、ページごとに事前生成とアクセス時の生成を選ぶ方法があります。ニュースを編集対象にすることと、ニュースを動的に配信することは、同じ決定ではありません。

名前を見ても、速さや安全性までは決まらない

静的に配信するページは、閲覧のたびに記事を読み出して組み立てる処理を省けます。その分、公開ページを届ける仕組みを小さくしやすいのが利点です。ただ、大きすぎる画像や多数の動画があれば、静的でも表示に時間がかかります。

安全性についても、CMSの管理画面やフォームの送信先を使うなら、その部分の対策は残ります。静的な公開ページであっても、配信サービスのアカウントや更新権限は守る必要があります。「静的なら100%安全」とは言えません。

Cloudflareのように、完成したファイルの配信と、必要なプログラムの実行を組み合わせられるサービスもあります。Cloudflareの公式ガイドでは、静的ファイルとプログラムを一緒に配信する仕組みを案内しています。こうした基盤を使う場合も、どのページをどう届けるかは構築時に設定します。

まずは、誰がどこを更新するかを決める

制作を依頼するときは、最初から「全部を動的にしたい」と決めなくても大丈夫です。まず、会社案内、お知らせ、採用情報などを並べて、変更する人と頻度を考えます。

例えば、会社案内の変更は制作会社へ依頼し、お知らせは社内の担当者が随時追加する。会員ごとの予約内容が必要なら、その部分には情報を確認して返す仕組みを用意する。ページごとに役割を分けると、必要な更新画面も決めやすくなります。

「どこを自分たちで直したいか」「公開後、どのくらいで反映したいか」「見る人ごとに内容を変える必要があるか」。この三つを伝えれば、制作担当者と具体的な構成を相談できます。サイト全体を一つの方式にそろえなくてもよいんです。

CMSを一部へ導入するときの構成は、ニュースだけをCMSで更新する設計でも説明しています。静的・動的の名前を選ぶ前に、日々の更新作業から決めてみてください。