2023.09.30

静的サイトと動的サイトの違いと目的と用途を理解しよう！

プログラミング

プログラミングやウェブ制作におけるサイトの種類とその重要性

ウェブ技術の進化とともにインターネット上のサイトの役割や存在意義は大きく変わってきました。一昔前までのウェブサイトは情報を一方的に伝えるためのものでしたが、現代のウェブサイトはユーザーとのインタラクションが前提となり、多様な機能や情報が組み込まれています。

このような背景からウェブサイトの制作や運営に関わる技術者やデザイナーは、サイトを効果的に設計・実装するための知識が求められています。その基本的な知識の一つが、ウェブサイトの「種類」です。

ウェブサイトには主に「静的サイト」と「動的サイト」の2つの大きなカテゴリがあります。それぞれの特性や用途を理解し、適切な場面での利用することが、ウェブサイトを成功させる鍵となります。

静的サイトは、予め定義されたコンテンツが表示されるタイプのサイトです。動的サイトはユーザーの動作やリクエストに応じてその場でコンテンツが変わるサイトです。それぞれのサイトが持つ特性を活かし適切に利用することで、ユーザーにとって価値のある情報やサービスを提供することができます。

この記事では、これらのサイトの違いや目的と用途について詳しく解説します。

静的サイトとは

静的サイトの定義

静的サイトはウェブサーバー上の特定のファイルがそのままブラウザに表示されるタイプのウェブサイトを指します。サイトのコンテンツが事前にHTML形式で作成されており、その内容が変わることなく一定であることを意味します。

静的サイトの特徴

事前にコンテンツが決まっている

静的サイトのコンテンツは事前にHTMLとして記述されるため、その内容は固定されています。

サーバーへのリクエスト毎に同じ内容が表示される

ユーザーがサイトにアクセスするたびに同じHTMLファイルがサーバーから返されるので、内容の変更や動的な更新はありません。

CMS（コンテンツ管理システム）なしで運用可能

コンテンツが固定されているためCMSを導入する必要がありません。静的サイトジェネレータを使用することで、テンプレートからコンテンツを生成することも可能です。

静的サイトの目的と用途

速度が求められる場合

静的サイトは事前にコンテンツが決まっているためデータベースから情報を取得する遅延がなく、応答速度が速いという特長があります。

更新頻度が低いサイト

企業サイト・ポートフォリオ・ランディングページなどのコンテンツの更新が頻繁ではない、または不定期であるサイトに適しています。

静的サイトはそのシンプルさと高速性から、特定のニーズや目的に適したウェブサイト制作の選択肢として現在も多くの場面で活用されています。

動的サイトとは

動的サイトの定義

動的サイトはユーザーのリクエストやアクションに応じて、リアルタイムでコンテンツが変動するウェブサイトを指します。データベースやサーバーサイドのプログラミング技術を利用して、ユーザーごとや状況ごとに異なる情報を表示できる特性を持っています。

動的サイトの特徴

データベースやサーバーサイドのプログラミングが関与する

動的サイトは、コンテンツの生成や管理のためにデータベースを使用し、サーバーサイドのプログラミング言語を利用して動的に情報を生成・取得します。

ユーザーのアクションに応じて内容が変動

ユーザーのログイン、検索、フォームの送信などのアクションに応じて、表示内容やページ構成が変わります。

CMSを用いてコンテンツを管理・更新する場合が多い

動的なコンテンツの管理や更新の手間を減らすため、CMS（コンテンツ管理システム）を使用するケースが一般的です。

動的サイトの目的と用途

ユーザーのインタラクションが必要なサイト

ユーザーとの対話やインタラクションを要求するウェブサイトに適しています。

Eコマース

商品の検索、カートへの追加、購入といった動的な機能を持つオンラインショップ。

SNS

ユーザーのプロフィール、フレンドリスト、投稿などの動的な情報を取り扱うソーシャルネットワーキングサイト。

フォーラム

ユーザーがトピックを作成し、コメントを投稿することができるコミュニティサイト。

ニュースサイト

最新のニュース記事や関連コンテンツをユーザーの興味や閲覧履歴に基づいて表示するサイト。

動的サイトは現代のウェブの主流とも言える存在であり、ユーザー中心のインタラクティブなコンテンツ提供を実現しています。ユーザーのニーズに即座に応える柔軟性と豊富な機能性を持つため、多くの場面での活用が見られます。

静的サイトと動的サイトの比較

静的サイトの作成方法

静的サイトの作り方

静的サイトは主にHTML, CSS, およびJavaScriptを使って作成します。サイトの内容やデザインは事前に決められ、サーバーはそのままのファイルを「静的に」返します。

静的サイト作成に使用する主なツール

テキストエディタ

Visual Studio Code, Atom, Sublime Textなど
静的サイトジェネレータ

Jekyll, Hugo, Gatsbyなど。これらはテンプレートから静的なウェブサイトを生成するツール
ホスティングサービス

GitHub Pages, Netlify, Vercelなど。静的ファイルをホストして公開するサービス

AWSのS3にホスティングする方法もあります。

https://envader.plus/article/65

動的サイトの作成方法

動的サイトの作り方

動的サイトはサーバーサイドのプログラミング言語やフレームワークを使用して作られ、ユーザーのリクエストに応じてデータベースから情報を取得したりコンテンツを「動的」に生成したりします。

動的サイト作成に使用する主なツール

サーバーサイド言語

PHP, Python, Ruby, Java, Node.jsなど
フレームワーク

Express.js (Node.jsのため), Django (Pythonのため), Ruby on Rails (Rubyのため), Spring Boot (Javaのため) など
データベース

MySQL, PostgreSQL, MongoDBなど。サイトのデータを保存・管理するためのツール
CMS (Content Management System)

WordPress, Drupal, Joomla!など。非技術者でもコンテンツの追加や更新が容易にできるツール