【Web制作初学者必見】「静的ページ」と「動的ページ」を徹底解説！

こんにちは。Web it Worksの伊東です。

今回は、Web制作初学者向けに、静的ページと動的ページの違いについて解説します。

「静的ページ」と「動的ページ」の違いは？

データベースを使用しているかどうか

Webサイト、Webサービスによく出てくる言葉として「静的（せいてき）ページ」「動的（どうてき）ページ」があります。

これらの説明を簡単に言うと

• データベースが必要なものが「動的ページ」
• データベースが必要ないものが「静的ページ」

ここで出てきたデータベース。

データベースとは、情報を登録しておく格納庫です。

Webサイトでは、記事の投稿やユーザーのログイン情報などが格納されています。

データベースを表示、編集、削除する「サーバーサイド言語」

データベース情報を表示、編集、削除するために必要なのが、サーバーサイド言語です。

つまり、動的ページにはサーバーサイド言語が使われています。

サーバーサイド言語の種類は

• Java
• C
• C++
• C#
• PHP
• COBOL
• Visual Basic
• node.js
• Ruby
• Python
• Go
• Kotlin

など様々です。

開発の用途によって使われる言語は様々です。

Web制作でよく耳にするWordPressにはPHPが使われており、PHPによって投稿の表示、追加、編集、削除をおこないます。

動的ページの用途（WordPress）

WordPressでは固定ページや投稿ページを追加、編集、削除、表示する機能が最初から用意されています。

よってWordPressは基本的に動的ページのみと覚えておいて良いでしょう。

厳密にいうと静的ページとして扱われるページがあったり、静的ページ生成プラグインがあったりと例外も多いため、参考程度に。

見た目や動きを作り上げる「クライアントサイド言語」

静的ページ使われる言語は「クライアントサイド言語」といいます。

クライアントサイド言語は以下です。

• HTML
• CSS（厳密には「言語」ではない）
• JavaScript

HTMLは表示する骨格、CSSは装飾、JavaScriptは動きといった形で、ひとつのサイトでそれぞれの役割を果たします。

これらは基本的にデータベースとのやりとりを行わず、装飾などの「見た目」を整えていきます。

※例外的に、JavaScriptはXMLHttpRequestやAPIの制御などといった機能もあり、動的ページを作成することも可能です。

静的ページの用途（LP / ベースコーディング）

こう考えると、公開されているほとんどのWebサイト、Webサービスが動的ページであることに気づいた方が多いでしょう。

静的ページを制作するとすれば、

• LP （ランディングページ）
• ベースコーディング

が挙げられます。

LP (ランディングページ)

ランディングページは製品やサービスのプロモーションやキャンペーンのために作られるページで、静的ページであることが多数。

ページは１ページのみ、縦長であることがほとんどです。

お問い合わせフォームが実装される「動的ページ」である例外もありますが、多くのLPは静的ページであることが多いです。

ベースコーディング

ベースコーディングとはWeb制作の工程のひとつで、CMS導入前に一度静的ページでコーディングを行うことをいいます。

Web制作会社ではベースコーディングの工程を踏むことが多く、そこでデザインとの齟齬がないか確認を行い、その後CMSの導入をすることで動的ページに仕上げていきます。

サーバーサイド言語とクライアントサイド言語の役割

ここで、Web制作におけるサーバーサイド言語とクライアントサイド言語の役割について考えてみましょう。

Webサイトにはサーバーサイド言語とクライアントサイド言語のどちらも使われており、それぞれの役割があります。

• サーバーサイド言語はデータベースの情報を追加、表示、編集、削除
• クライアントサイド言語は見た目を整える

これをWordPressが使われているWebサイトに置き換えるとこのような形になります。

• WordPress （PHP） がデータベース情報を追加、表示、編集、削除
• HTML/CSS、JavaScriptで見た目を整える

まとめ

まとめると、基本的には

• 動的ページはデータベースを使用 (サーバーサイド言語)
• 静的ページはデータベースを使わない (クライアントサイド言語)

そして、それぞれの言語に役割があり、Web制作では、

• WordPress （PHP） がデータベース情報を追加、表示、編集、削除
• HTML/CSS、JavaScriptで見た目を整える

といった形になります。