Web制作の現場では「静的ページ」「動的ページ」という言葉がしばしば登場します。聞きなれない方には動的=動画のようなイメージが浮かぶかもしれませんが、ここでは意味が異なります。今回は静的・動的ページという言葉の意味とその違い、Webサイトの目的に合わせてどちらを選ぶのが良いかを紹介します。
Webページが閲覧できる仕組み
静的・動的ページについて解説する前に、まずはWebサイトがどのように表示されているかについて簡単に解説します。私たちがWebサイトを閲覧できるのは、WebブラウザがHTML・CSS・JavaScriptなどのファイルと画像データをWEBサーバから読み込み、指定された通りの内容をユーザーに表示しているからです。この、私たちの直接目に見える側はフロントエンド、目には見えない側はバックエンドと呼ばれています。
例えば、フロントエンドで入力された情報をデータベースへ保存・処理したり、そこからデータを呼び出したりなどの処理が、バックエンドで行われています。このようにWebサイトはフロントエンドとバックエンドが互いに関係しながら成り立っているのです。
静的ページとは
Webブラウザがフロントエンド側で読み込むHTMLファイルには、大きく分けて2種類の作成方法があります。その1つが「静的」な作り方で、前もって書かれたHTMLファイルで構築され、いつ誰が見ても同じ内容が表示されます。よって、HTMLファイルを書き換えない限り内容は変わりません。内容がほぼ固定されているサービス紹介ページやLP(ランディングページ)、会社概要・IR情報など企業Webサイトの基本情報は静的ページで作成されています。
静的ページのメリット・デメリット
・メリット
静的ページは、予め用意されているHTMLファイルをWebサーバがブラウザへ送信しているので、一般的に表示スピードは速くなります。
・デメリット
ページを更新するには、人が都度HTMLファイルを書き換えなければなりませんので、コーディングと呼ばれる専門知識が必要です。作業を外部委託する際は更新のたびに費用が発生し、やりとりの手間や時間もかかります。
動的ページとは
HTMLファイルのもう1つの作成方法が「動的」なもので、文章や画像がアクセスする毎に変わり、ユーザーに適したHTMLファイルが都度サーバ側で作られるWEBページのことを「動的ページ」と呼びます。フロントエンド側、つまりHTMLファイルで表示している文章や画像は見る人やタイミングによって異なり、バックエンド側で呼び出された内容を表示。レイアウト部分は、PHPやJavaScriptといったプログラム言語で表示されます。
内容を頻繁に更新したいコラムや新着情報をはじめ、ユーザーに書き込んでもらうクチコミページ、買った商品によって異なる内容が表示されるショッピングカート、検索エンジン、会員専用サイトなどは動的な方法で作成されています。
動的ページのメリット・デメリット
・メリット
例えば、新着情報の更新やECサイトの商品追加作業にはCMS(Contents Management System)と呼ばれるシステムを導入することで、コーディングの知識がなくても、ブログ感覚でサイトの構築やページの更新作業を行うことができます。初期のシステム構築には費用がかかりますが、都度の更新費用は抑えられるほか、自分たちのタイミングでファイルを更新できるため、スピーディな情報発信が可能になります。
・デメリット
ユーザーがアクセスする度にHTMLファイルを作るため、Webサーバに負担がかかりやすく、表示スピードが遅くなることがあります。
ページの性質に合わせて選択を
静的・動的ページの一番の違いは、「HTMLファイルが作られるタイミング」。静的ページはアクセス前に予めファイルが作成されていますが、動的ページはアクセス後にファイルが決定します。更新頻度や管理費用、あるいはユーザーごとにページを作る必要があるか、一人ひとりに向けてカスタマイズされた内容を提供する必要があるかで選択するのが良いでしょう。