静的サイトと動的サイトとは？違いや選び方を解説

突然ですが、クイズです。Apple と Youtube のホームページの違いは何でしょうか？

正解は Apple のサイトは静的サイトであることに対し、Youtube のサイトは動的サイトであることです。ほとんどのホームページは静的サイトか動的サイトのどちらかに分けることができます。しかし具体的に、何が違うのでしょうか。
 
 この記事では、静的サイトと動的サイトの違いやそれぞれのメリットとデメリットを紹介します。また、近年増えている、ハイブリット型サイトについてもわかりやすく紹介します。ホームページを作成する際や Web デザインのインスピレーションを集める際にお役立てください。

Web 制作の現場では、「静的サイト・動的サイト」という表現がたびたび登場します。これは Web サイトが表示される方法のことを指します。
 
 初めて聞く人にとっては、「動的サイト＝アニメーションや動画など、動きがあるサイト」というようなイメージが思い浮かぶもしれませんが、ここでは違う意味を持ちます。
 
 動的サイトとは「アクセスした端末や時間などによって内容が変わるホームページ」のことです。その反対に、静的サイトとは「誰がいつ、どこで見ても同じ情報、同じコンテンツが表示されるホームページ」という意味があります。
 
 例えば、冒頭でのクイズで登場した、Apple のホームページでは、同一のページに対して、誰がどの端末からアクセスしても同じ情報が表示されます。一方で、Youtube のホームページでは、同じページにアクセスしても、あなたの視聴履歴や、好みに合わせて、異なるおすすめ動画がその場で自動的に生成されて表示されます。これが静的サイトと動的サイトの違いです。

 
 以下では、それぞれのサイトについて仕組みや特徴、メリットやデメリットについて詳しく説明します。

静的サイトは、HTML、CSS、JavaScript を使用して構築された Web ページです。静的サイトのページはそれぞれ1つの HTML ファイルとして保管されており、その形を完全に保ったままサーバーから直接配信されます。このコンテンツは本質的にページのデザインの一部となり、元の HTML ファイルがコードから書き換えられない限り変化することはありません。

静的サイトの大きな特徴のひとつは、すべてのユーザーが完全に同じコンテンツを受け取り、閲覧できるという点です。このため、静的サイトは「ページ数が少なく、頻繁に更新や変更を行う必要のないサイト」に適しています。主に、ランディングページやシングルページまたは、企業ホームページなど、情報案内を目的とするサイトが挙げられます。

静的サイトの変更は手作業で行うことができますが、作業ができるのは HTML ファイルひとつずつ、つまり 1 ページ単位のみです。たとえばトップページの HTML ファイルを編集すると、その変更点はトップページにしか反映されません。この仕組みは、フッターなどサイト全体で共通する要素であっても同様です。ただし、Wix のようなホームページ制作ツールを使用していれば、サイトエディタを使用して静的ページを変更する度に自動で変更が反映されます。

もともとはすべての Web ページは静的サイトでした。技術が高度化するに従ってユーザーとサイトが双方向にやり取りできる動的サイトの人気が高まってきましたが、逆に静的サイトの方が優れている点もあります。以下でその理由を見ていきましょう。

静的ページは読み込みにかかる時間を最優先して作ることができ、優れたユーザーエクスペリエンスの提供につながります。このタイプのサイトのコンテンツはあらかじめ用意されており、サーバーから直接配信されるためデータをキャッシュしやすく、読み込みの遅延や UX に関わる問題（画像の破損など）が起こりにくいのです。

一般的に、静的サイトはサーバーにかかる負荷が少ない傾向があり、データベースやクライアントサーバーインフラとのやりとりが発生しないため、当然処理が早くなります。Google がページの表示速度を Web サイトのパフォーマンスを評価する際の重要な項目としていることを鑑みると（SEO と検索結果での上位表示にさらに顕著な影響を与えると考えられることからも）、この性質を過小評価すべきではないでしょう。

Web サイト構築にかかる時間が気になる場合にも、静的サイトなら迅速に完成できます。静的サイトはそれほど複雑ではなく、大規模なコンテンツデータベースと連携させる必要もないため、作成から公開までスピーディーに作業を進められます。これは WYSIWYG プラットフォーム上にサイトを構築する場合にも当てはまります。

静的サイトの公開までにかかる時間を左右するのが、各ページにどのくらいクリエイティブなデザインを適用するかということです。動的ページで同じものを制作した場合にどちらが速いかは状況によりますが、一般的に静的ページの構成はよりシンプルになる傾向があるため迅速にデプロイできます。

理論上、静的サイトは潜在的にハッキングされにくいとされています。なぜなら攻撃を受けるポイントが少ないからです。

静的サイトはデータベースと連携したり外部の拡張機能やプラグインを使用したりすることがありません。これらはいずれも攻撃を受けるエントリーポイントとなる可能性があります。動的サイトが「安全性が低い」わけではないにしても、一般的に静的サイトの方が、サイバー犯罪に遭う可能性は低いといえます。

これに関しては、どのようにサイトを構築するかが大きく影響します。たとえば、Wix のような Web 制作ツールを使用して作成した Web ページやサイトは、静的・動的を問わず、複数のセキュリティ施策によって保護されています。DDoS プロテクションや SSL 証明書、TLS 1.2による複数層のサイトセキュリティアーキテクチャーなどで対策が実施されており、サイトを安全に守ります。

ここまで静的サイトのメリットについて説明してきましたが、次は弱点の一部を紹介します。

静的サイトの大きな弱点のひとつが、大量のコンテンツを含む、データ量の多いサイトは動かしにくいという点です。静的サイトで数百件規模のページを構築することは可能ですが、動きが重くなり、処理に時間がかかるようになります。ただし、個人サイトを作るのであれば、こうした点はさほど重要ではないでしょう。

静的サイトのページはそれぞれを別物として構築しなければなりません。複数のページがあるサイトの場合、各ページを個別に作成する必要があります。

静的サイトは短時間で作成できますが、運用・更新には時間がかかる場合があります。静的サイトはページごとに編集しなければならないので、多くのコンテンツを含む Web サイトや、変更頻度が高いコンテンツを編集する場合に、非常に手間のかかる作業になります。

動的サイトとは、ウェブ構築にバックエンドとテクノロジーを利用して構築したサイトのことで、ユーザーの行動やユーザー生成コンテンツ（UGC）に従い、各ページに動的またはその時々によって異なるコンテンツを配信・表示することができます。

動的サイト上のデータやコンテンツはすべて、ウェブページに接続しているデータベースやバックエンドのコンテンツ管理システム（CMS）で生成されます。こうした情報がどのようにサイトのデザインに配置または連携されているかによって、そのコンテンツをページに表示させるタイミングと方法が決まります。

要するに、動的コンテンツだとサイトの表示のカスタマイズやパーソナライズ、特定のユーザーに表示するコンテンツの決定などが可能になるのです。ひとつの動的ページを変更すると自動的に数千ページが更新されるため、多数のページを一括変更したい場合にも便利です。

たとえば、動的サイトならユーザーの位置情報に基づいて表示する情報を選ぶことができますし、（Cookie を使用して）ユーザーの現在または過去のサイト上でのアクションに基づくコンテンツを配信することも可能です。この場合、訪問者は同じページを訪問しても毎回異なるコンテンツを閲覧することになります。動的サイトの作成が重要であることを示す好例が多言語サイトです。

動的サイトを採用していることでよく知られる例は他にもあります。

1. Instagram：SNS はユーザー生成コンテンツに応じたページを表示するため、Instagram は動的サイトとして構築されています。

2. CNN：報道機関は速報を知らせたり年齢に応じた内容を表示したりする責任があるため、動的サイトでコンテンツを更新しています。

3. Disney+（ディズニープラス）：言わずと知れた大手の動画ストリーミングサイト。エンタテインメントを扱うサイトならではの動的な性質から、ユーザーの居住地、サブスクリプションの登録状況や好みに応じたコンテンツが表示されるようになっています。

一般的に、動的サイトはデータが重くユーザードリブンなコンテンツに採用されます。仮に、主に不動産リスティングサイトとして運用する Web サイトを作成するとします。この場合、販売中の物件数百件を掲載するリストを表示するためには数百ページを生成する必要があります。そして、サイトの機能性を高め、ユーザーの意図に応じた情報を提供するには、ページ上のコンテンツにリアルタイムの物件情報を反映させなければなりません。サイト上にこのような変更点を表示させるなら、最も効率的な方法は動的サイトを利用することです。

動的サイトにすることでメリットがある Web サイトの種類としては、イベント特設サイト、EC サイト、ネット掲示板、会員制サイト、ポートフォリオサイト、ブログなどです。

多くの Web 制作者が動的ページを選ぶ傾向にあり、それには納得できる理由があります。動的サイトのメリットは次の通りです。

オンラインで事業を始めたりブランドを立ち上げたりする際は、コンテンツを継続的に更新していかなければいけません。トレンドをすぐに取り入れ、事業と業界の状況に応じてアップデートし変更を加える必要があります。そんなときに最も効率的に運用できるのが動的サイトです。

動的サイトなら、あるページに加えた変更が自動的に他のページに複製されるため、デザインを変える必要がありません。こうした性質によりサイトを効率的に運用できるようになるため、大量のページを抱えるサイトにとっては特に重要なポイントとなります。

動的サイトのアップデートという面で大きな長所のひとつは、運用しやすく時間がかからないことです。複数のユーザーがデータベースへのアクセス権を持つことで、サイトの構造やデザインに触れる権限を与えることなくサイト上のコンテンツを管理できます。

数千のページを迅速かつ簡単に管理できる動的ページは、スケーラビリティの面でも優れています。当初は大規模な Web サイトを作ろうと思っていなかったとしても、動的サイトは必要になれば拡張することができます。

動的サイトはユーザーのニーズに合わせたコンテンツを表示します。つまり、ユーザーの所在地に基づいてページ上に情報を表示したり、ユーザーの興味や意図、ページ上で過去に行ったアクションを反映したコンテンツに変更したりできるということです。

どのような状況であれ、訪問者に表示する内容をカスタマイズして双方的なコンテンツを提供すれば、より良いユーザーエクスペリエンスにつながります。また、サイトをパーソナライズすることでリピーターの獲得や、さらなるアクションの誘発も期待できるため、コンバージョンにつながる可能性も高いといえます。

静的ページでも双方向の Web サイトを作成することはできますが、機能性という点では動的ページの方が圧倒的に有利です。動的ページの機能はいわば無限です。構築に必要なロジックと言語、そしてコンテンツ配信に必要な指示の複雑さというハードルさえクリアすれば、ありとあらゆる機能をサイトに追加することができます。

Netflix は、機能に関してもユーザーエクスペリエンスに関しても、非常に巨大かつ複雑でありながら洗練された動的サイトの一例といえるでしょう。ユーザーの所在地とログイン情報に基づき膨大なコンテンツを提供し、過去の視聴履歴からおすすめの作品を提案できる機能を備えています。

データベースを作成して適切なページに連携させるというステップが加わるため、動的サイトを設定して公開するまでの道のりは多少複雑です。完成するまでの時間もコストもかかります。
 

ただし Wix のようなホームページ制作ツールを使用すれば、必要な時に動的ページを構築できます。従来は動的サイトを構築するのに多額の予算が必要でしたが、作成する場所と手段を選べば今ではその心配も無用です。
 

コンテンツマネージャーの使い方については、こちらのオンラインコースをご覧ください。

動的サイトの処理には静的サイトよりも多くの指示が必要です。これらの指示はデータベースやコンテンツコレクションにも連携されており、絶え間なく情報を取り出して表示しているため、処理と実行に時間がかかります。多くの Web 制作ツールがこの問題点を認識し、パフォーマンス向上に取り組んでいますが、どうしてもサイトの動作に影響する場合もあります。

Wix のようなツールを使用して動的サイトを構築すれば、パフォーマンスの心配はほとんどなくなります。サイトのパフォーマンス最適化に必要な要素（例：画像を自動的に最適化、コンテンツデリバリネットワーク、DDoS 攻撃対策）がすでにページに組み込まれているため、動的サイトであっても静的サイトのように速く、ユーザーフレンドリーに仕上げることができます。

昨今の Web サイトはますます複雑化しており、今後もその一途をたどることでしょう。機能を増やしたいというニーズに応えながらも、サイトのパフォーマンスを向上し、表示速度を上げていく必要があります。
 
 その結果、ハイブリッド型の Web 開発が増加しています。Web サイトの構築方法については多くの意見が出ていますが、必ずしも静的か動的のいずれかを選ばなければいけないわけではありません。しかし、サイトを作るにあたって静的ページにすべきなのか、動的ページを使用すべきなのか、あるいはひとつの Web サイトで両方とも混在させるべきなのかといったそれぞれのケースの見極め方については知っておくと良いでしょう。

ここからは、ハイブリッド型サイトの作成に必要なことを確認していきます。

まずは静的サイトを作成した場合でも、後でサイトの規模を大きくしたり、機能を増やしたいと思っているなら、動的サイトを利用するメリットを再検討することになるでしょう。そんなとき、ハイブリッド型は、ユーザーのニーズに応じて動的かつ自動的に応答できるサイトを実現することができます。

先ほどの不動産関係サイトに再登場してもらいましょう。あなたはアパート経営者であり、2 つの都市に数件のアパートを所有しているとします。最初の空き物件はそれほど多くないため、情報の掲載メインで基本的な CTA（行動喚起）を配置しただけの静的サイトを制作しました。

静的サイトには以下の内容を含める予定です。

どのページにも、特別な機能やリアルタイムの情報またはコンテンツの変更は必要ありません。このシナリオでは静的サイトが最適でしょう。

ところが、だんだん事業が拡大し、所有する物件数も増えてきました。2 つの都市に数件だった不動産が、今や 6 ～ 7 か所に 100 軒近いアパートを持つまでに成長しました。
 
 そこで、動的ページがあり、アパートの数に関してさまざまな表示が可能で、ユーザーごとに異なる情報を表示できるような Web サイトが必要になりました。

今回の例では、ユーザーが物件を探しているというまさにその時点での空室状況に従って、注目のアパート情報をアップデートする必要があります。また、Web サイト内でユーザーが設定した検索フィルターに一致する結果も表示させなければなりません。たとえば、ユーザーがサイト上で「東京のサービスアパートメント、3か月間」と検索した場合、リクエストに完全一致する検索結果を表示させるとします。

こういう時に動的ページが活躍するのです。動的サイトなら、最新の空室情報に合わせて新規ページを追加し、検索パラメーターが追加された時にコンテンツをアップデートすることができます。

検索設定を少し変更すれば、数百ページを動的に作成し、そのすべてをユーザーの入力内容に応じて自動生成することも可能です。こうして、ユーザーが特に求めていたコンテンツを提示できればアクションを起こしてもらいやすくなります。

Wix のような Web 制作ツールなら、コンテンツが多いサイトもコンテンツマネージャー上のシンプルな操作のみで作成・編集し、静的ページを動的ページに変換することができます。完成したサイトの運用も、データを更新したい場合も、コンテンツマネージャー上のデータのみを操作すればよいのでデザインへの影響を気にする必要はありません。コンテンツとユーザーのニーズの両方に一致するハイブリッド型サイトを手軽に作成できます。

編集者：Miyuki Shimose
 SEO＆コンテンツマーケター