静的サイトと動的サイトとは？

Webサイトを閲覧するには、パソコンやスマートフォンなどの端末にインストールされたWebブラウザを用いてインターネットに接続し、サーバー上に保存されている目的のHTMLファイルにアクセスします。HTMLファイルには、Webページの内容がソースコードとして記述されていますが、Webブラウザはソースコードを解釈する機能を持っているため、作成者の意図通りにページが表示されます。

Webサイトは、静的なWebサイト（静的サイト）と動的なWebサイト（動的サイト）の2種類に大別されます。

静的ホームページは誰がいつアクセスしても内容が変わらない

静的ホームページは、あらかじめ作成したHTMLファイルをサーバーに配置して公開する方式です。ユーザーはサーバーに保管されているHTMLファイルを参照するため、ファイルが更新されない限り、ホームページの内容は常に同じになります。そのため、更新頻度の低い企業サイトなどでは静的ホームページが採用されるケースが多いです。

静的ホームページでは、コンテンツの変更にはHTMLファイルの編集が必須となります。この際に用いられるプログラミング言語が、「HTML」「CSS」「JavaScript」です。

HTML: マークアップ言語でWebページの構造を作る

HTML（HyperText Markup Language）は、ハイパーテキストを記述するためのマークアップ言語です。ハイパーテキストの特徴である関連文書へのハイパーリンクや、文書構造をWebブラウザが正しく認識できるよう、目印となる「タグ」をテキストに付けていくための言語です。

言い換えれば、HTMLはプログラミング言語として、Webページのテキスト構造やレイアウト、他のテキストやWebページへのリンクをタグで指定するために使用されます。見出しの設定や文字へのリンク設置、文字の太字化などのアレンジも、HTMLコードを書くことで実現できます。

タグは、指定したいテキストを囲むように記述します。例えば、以下のように記述します。

<title>タイトル</title>
<h1>見出し1</h1>
<p>テキスト</p>
<a href=”リンク先のURL”>リンク先のページ名</a>

HTMLで記述したファイルは、専用の拡張子「.html」で保存する必要があります。テキストファイル「.text」で保存すると、ホームページとして正常に動作しません。ホームページを作成する際には、必ず拡張子が「.html」になっていることを確認しましょう。

CSS: スタイルシートでWebページのデザインを制御する

Cascading Style Sheets（CSS）は、HTMLで構築されたウェブページの外観を制御するスタイルシート言語です。スタイルシートとも呼ばれ、テキストの外観、レイアウト、画像の配置など、ウェブページの視覚的な要素をカスタマイズできます。CSSを使用することで、ウェブページのデザインを柔軟かつ効率的に変更することができます。

例えば、HTMLファイルにCSSソースコードを追加することで、テキストのフォントサイズ、カラー、ボーダー、行間、余白などを変更できます。以下は、CSSを使用してh1タグのスタイルを変更する例です。

<h1 style=”font-size: 28px; color: #28536B; border-bottom: 2px solid #C2948A; line-height: 1.2; padding-bottom: .5em; margin-bottom: .10em;”>ホームページ制作で必須のJavaScriptとは?できること・使い方を解説!</h1>

CSSは、HTMLに直接記述するインラインスタイル、HTMLファイル内に記述する内部スタイルシート、外部ファイルに記述してHTMLファイルから読み込む外部スタイルシートという3つの方法で実装できます。

JavaScript: インタープリタ型言語でインタラクティブな機能を追加

JavaScriptは、1995年に登場したウェブブラウザ「Netscape Navigator 2.0」に組み込まれた「LiveScript」を起源とするインタプリタ型のプログラミング言語です。現在では多岐にわたる用途に使用される汎用的な言語として知られていますが、当初はホームページに動的な要素を追加することを目的として開発されました。主要なウェブブラウザに実行エンジンが実装されているため、ソースコードを書くだけでホームページに様々な表現を追加できます。

JavaScriptを用いることで、画像のスライドや文字のポップアップなどの動的な効果を実現できます。HTMLとCSSのみで構成されたホームページに活気と魅力を加え、ユーザーの関心を引き付けやすくなります。動きのあるホームページを作成したい場合は、JavaScriptの習得が不可欠です。JavaScriptで実現できる代表的なホームページ表現を以下に示します。

・ドロップダウンメニュー
・アニメーション
・スライダー/カルーセル
・アコーディオンメニュー

CSSと同様、JavaScriptもHTMLに直接記述する方法と、別途JSファイル(.js)を作成してHTMLファイルに読み込む方法があります。

ライブラリを使うとコーディング工数を削減できる

Web開発において、JavaScriptやCSSのライブラリは開発効率を飛躍的に向上させる強力なツールです。ライブラリは、汎用性の高いコードをまとめたもので、開発者は繰り返し作業を減らし、より複雑な機能の実装に集中することができます。JavaScriptでは、jQueryはホームページ制作に最適なライブラリとして広く知られています。jQueryは、豊富な機能と簡潔な構文により、開発者の負担を軽減し、複雑な操作を容易に行うことができます。画像引用: 一方で、CSSライブラリでは、Bootstrapがその知名度を誇ります。Twitterによって開発されたBootstrapは、CSSとJavaScriptのコードを組み合わせ、レスポンシブデザインやグリッドシステムなどの機能を提供することで、現代的なWebサイトの構築を支援します。Bootstrapは、オープンソースライブラリとして、無償で利用可能です。

静的ホームページ制作にはプログラムは必須ではない

静的ホームページに必要な要素は、プログラムではなくファイルです。ホームページを保存するサーバーには、サーバーOSとWebサーバーが必須ですが、これらは一般的に自社で開発するものではありません。つまり、プログラミング言語は必要ですが、静的ホームページにおいてプログラム開発は不要です。

Webサーバーとは、複数のWebブラウザ（クライアント）からのアクセス要求に対して、どのHTMLファイルを応答として返すかを適切に管理するプログラムです。アクセス要求に対する応答やトラフィックを管理します。

静的ホームページを制作する手順

ホームページ制作は、企画から公開まで、複数の工程を経て完成します。静的ホームページ制作においても、以下のステップを踏むことが一般的です。

ワイヤーフレームを作成する

Webサイトのレイアウトを、簡素な線や枠を使って表現した設計図のことです。Webデザインなどの後続の工程、ホームページ全体の完成度に大きな影響を与えます。ワイヤーフレームがあれば、制作中のWebサイトに情報や要素が不足していないか、ユーザーにとって使いやすい動線になっているかなどを、デザイン着手前に確認できます。

企画や要件定義で明確になったWebサイトの方向性を基に、各ページの骨格となるワイヤーフレームを作成します。重要なのは、スマートフォン版用に別途ワイヤーフレームを作成することが理想的であるということです。スマートフォン版はPC版と比べて画面の横幅が狭いため、レイアウトを変更する必要があるからです。

Webデザイン・素材を用意する

ホームページの設計図であるワイヤーフレームを基に、具体的なデザインへと落とし込む工程がWebデザインの次のステップです。この段階では、写真素材、ロゴ、キャッチコピーなど、デザインに必要な素材の収集や作成が行われます。最終的に、完成イメージを明確にするため、デザインカンプと呼ばれるPSDファイルが作成されます。

デザインカンプとは、完成後のWebデザインを事前に確認できるように、グラフィックで作成された「完成見本」のことです。依頼者と制作側の間で、Webデザインに対する認識のずれを防ぎ、共通認識を築くために不可欠なものです。

テキストエディタでコーディングする

デザインカンプを基に、HTML、CSS、JavaScriptを用いてホームページを構築する工程では、HTMLコードを記述するためのテキストエディタと呼ばれるツールが必須となります。テキストエディタとは、メモ帳のように文字を入力するためのソフトウェアです。

最終的に生成される成果物が「ファイル」であるため、最低限テキストエディタさえあればコーディングは可能です。MacOSであれば標準搭載の「テキストエディット」などが使用できますが、より効率的なコーディングを望むのであれば、Microsoftが開発したコードエディタ「Visual Studio Code」がおすすめです。

サーバ・ドメインを用意する

ウェブサイトを公開するには、HTMLファイルが格納される「サーバー」と、ウェブサイトの住所となる「ドメイン」が必要です。サーバーは自社の設備に設置することもできますが、現代ではレンタルサーバーを利用することが一般的です。 レンタルサーバーの中には、ドメイン取得サービスを併設しているケースが多く見られます。そのため、複数のレンタルサーバーを比較検討することがおすすめです。 ドメインはウェブサイトの住所に相当し、「〇〇.com」や「〇〇.jp」といった形で表記されます。 サーバー上の様々なウェブサイトの中から、特定のウェブサイトを見つけるために必要な文字列です。 ドメインを取得するには、ドメイン登録会社で契約する方法と、レンタルサーバー契約と同時に取得する方法があります。ドメインの種類によって価格が異なりますが、ほとんどのドメインは年間数百円から数千円程度で利用できます。 サーバーとドメインの詳細については、下記の記事をご確認ください。

プログラミングなしで静的ホームページを制作する方法

静的ホームページ制作には、様々な工程が必要となります。特に、プログラミング経験がない初心者の方にとっては、コーディング作業は大きな壁となるでしょう。
しかし、ご安心ください。プログラミングスキルがなくても、静的ホームページを作成できる方法はいくつか存在します。

・ホームページ作成サービスの利用
・HTMLエディタの利用

ホームページ作成サービスは、専門知識がなくても手軽にホームページを制作できるサービスです。初心者の方にとって、最も容易な選択肢と言えるでしょう。
一方、HTMLエディタは、HTMLコードを直接記述してホームページを作成するツールです。高度なカスタマイズを望む方や、より深くウェブ制作を学びたい方におすすめです。

ホームページ作成サービスは、無料から有料まで、さまざまなプランが用意されています。無料サービスは機能が制限されている場合がありますが、無料で試せるため、まずはお試し利用してみることをおすすめします。有料サービスは、より充実した機能を利用できますが、費用が発生します。ご自身のニーズや予算に合わせて、最適なサービスを選択しましょう。

HTMLエディタを利用する場合、HTMLコードの記述が必要となるため、ある程度のプログラミング知識が必要です。初心者の方は、ホームページ作成サービスを利用し、ウェブ制作の基礎を学ぶことから始めることをおすすめします。