自分でホームページを制作する上で必要な基礎知識

最近のサイト制作ではCMSなどを利用するのが一般的です。

しかし、本来ホームページは手打ちで入力したHTMLファイルをサーバーにアップロードすれば公開が可能で、ツールやサービスが発達した現在では、その原理的な仕組みが見えにくくなっています。

今回は、ホームページを自分で制作するために必要な知識について改めて解説します。

今日、ホームページを作ろうとしたときに真っ先に思い浮かぶ選択肢は、WordPressやWixといったウェブサービスだと思います。

確かに、多くのブログで使われているWordPressや、世界中で人気のホームページ構築サービスWixは、ホームページ制作の花形ともいえるソフトやサービスです。

しかし、ホームページは最初から、ツールやサービスを使って作られていたわけではありません。

ブログサービスやCMSが普及したのは2000年代中盤以降のことで、それ以前のインターネットでは、HTMLファイルを手打ちで作成し、それをFTPソフトを使ってサーバーにアップロードすることでホームページを公開していました。

こういった手法は、現在から見ると手間も時間もかかる効率の悪いやり方です。

しかし、ウェブサイトの構造やどんな仕組みで動いているのかを、実地で理解できる重要な機会であり、多くのエンジニアやデザイナーが、この環境を足場に技術を磨いたからこそ、現在の洗練されたウェブの文化が花開いたとも言えます。

ウェブの知識が皆無でも、わずか数分でホームページを作れてしまう現状にあっては、その背景にある原理や根本を支えている技術が、製作者本人から見えにくくなっています。

ホームページを構成する基本的な要素について、ここで改めて考えてみましょう。

ホームページを自分で制作する上で、最も基本的な構成となる3要素であるドメイン、サーバー、HTML・CSS・画像について、それぞれの役割を確認しておきましょう。

ホームページのインターネット上の位置を示すURL、その根幹となる文字列がドメインです。

具体的には「https://www.onamae.com/」 の中の「onamae.com」の箇所のことで、以降にカテゴリやページのファイル名が続くことでURLが形成されます。

ドメインは、ホームページが設置されているサーバーの場所を示す住所のようなものです。

サーバーは元々、グローバルIPアドレスという、3桁4組で構成された数字の組み合わせによって識別されています。

しかし、IPアドレスからは何のホームページなのか皆目見当が付かず、また覚えるのが難しく使いにくいことから、IPアドレスを文字列に変換する名前解決の仕組みが導入されました。

こうしてブラウザのURL欄にドメインを入力すれば、対応したIPアドレスのサーバーに繋がり、そこにあるホームページが表示されるという、現在のインターネットの仕組みが成立しています。

ドメインはホームページの唯一性を示す重要な印であるため、商用・非商用を問わず、非常に多くのホームページがオリジナルなドメインを取得しています。

ドメインは「お名前.com」などを通じてドメイン登録を行えば、個人のホームページでも好きな文字列をURLとして利用することができます。

ホームページを構成するファイル群が配置されているのがサーバー（厳密にはウェブサーバー）です。

サーバーはインターネット上に常時公開されているコンピューターで、ユーザーからのアクセスがあると、それに応答してホームページの内容をブラウザに表示します。

ドメインが住所なら、ウェブサーバーはその住所にある店舗で、商品（ホームページ）をお客さんに提供するための建物のようなものと考えていいでしょう。

ホームページ作成サービスやブログサービス、SNSなどのサービスでは、サーバーは不可視の状態で提供されるため、その存在に気付きにくいかもしれませんが、インターネット上に存在する全てのコンテンツはサーバーに置かれており、その意味でサーバーはインターネットそのものと言っても過言ではないでしょう。

ウェブサーバーはApacheやnginxといったソフトで動作していますが、提供している機能は基本的に同一で、どのウェブサーバーでもホームページを同じように表示させます。

ただしハード面での性能の違いはあり、低スペックのサーバーでは、高負荷の処理が連続したり、多くのユーザーが殺到したりした場合には、ホームページの挙動が重くなることがあります。

現在、個人でサーバーを使う場合は、「お名前.com」などの事業者が提供しているレンタルサーバーを契約するのが一般的です。

サーバー内に配置される、ホームページを構成するファイル群のうち、もっとも主要なものがHTML、CSS、画像の3種類です。

HTMLはテキスト、CSSはテキストの装飾、画像はビジュアル要素（アイコン、ボタン、写真など）を担当していて、この3種類のファイルが揃っていれば、標準的なホームページであると言えます。

このうち特に重要なのがHTMLとCSSで、これらの技術によってホームページの質の大半が決まると言っても過言ではありません。

HTML（Hypertext Markup Language）は、ページの中に記述されるテキストの内容とその機能（見出し、小見出し、本文、リンク先など）を指定した、ホームページの骨格となるファイルです。ホームページのコンテンツ本体はこのHTMLファイルに記述されます。

CSS（Cascading Style Sheets）は、HTMLのテキストを装飾するためのファイルで、文字の色や大きさ、背景などが指定されていて、テキスト情報の羅列に過ぎないHTMLは、このCSSが適用されることによって、読みやすい体裁に整えられます。

CMSやブログサービスでは、HTML形式への変換やCSSの適用はシステム側で自動的に行われますが、ユーザーが手入力でこれらのファイルを作成することも可能です。

CMSを利用する場合でも、自分でHTMLファイルを作成して作る場合でも、この3つの要素がホームページの基本であることに変わりはありません。

以上の基本的な構成を頭に入れた上で、ホームページを構築する具体的な方法について、見ていきましょう。

ホームページの制作にはさまざまなやり方がありますが、個人が自力で制作する場合には、次の4つの方法のいずれかが選ばれます。

• ホームページ作成サービス
• CMS（コンテンツ・マネジメント・システム）
• ホームページ作成ソフト
• HTMLとCSSの作成

ここでは、ホームページの作り方4つの、それぞれの特徴について解説しましょう。

もっとも手軽にホームページを作れるのが、ホームページ作成サービスを利用する方法です。

ドメイン、サーバー、HTMLの作成といったシステム部分の設定をサービス側が担当するのが特徴で、ユーザーは既存のテンプレートから選択するだけで、ホームページのデザインを作成、後はテキストを入力したり画像をアップロードしたりするだけで、コンテンツが完成します。

最小限の労力で、本格的なホームページを作れるのが魅力ですが、どれも似たようなデザインになることが多く、オリジナリティには欠けるのが難点です。

WixやJIMDOなどのサービスが有名です。

ホームページの制作手段として、現在もっとも普及しているのが、CMS（Contents Management System）を利用した方法です。

CMSはサーバーにインストールして利用する点に特徴があり、CMSにログインすると管理画面からコンテンツの作成や管理を行えます。

この管理画面で記事のタイトルや本文、画像といった要素を入力して公開ボタンを押すと、記事が生成されて公開される仕組みです。

CMSでもっとも有名なのは、主にブログの構築に使われているWodPressで、それ以外ではネットショップのEC-CUBE、企業サイト向けのconcrete5などがよく知られています。

CMSで難しいのは最初の導入で、自力でサーバーを契約し、最新版のCMSを入手してインストールしなければなりません。

また、多くのCMSは初期状態では最低限の簡素な構成となっているため、テーマやプラグインを導入して、外見や機能のカスタマイズを行う必要があります。

インストールと初期設定さえ終われば運用は簡単で、ホームページ作成サービスと似た使用感となります。

ホームページ作成ソフトは、ホームページに必要なファイルをパソコンで作成するツールです。

ホームページビルダーなどのソフトが代表格で、ホームページを構成する全てのファイルを手元のパソコンで作り上げ、それをサーバーにアップロードすることで外部に公開します。

ホームページ作成ソフトでは、ドラック&ドロップの直感的な操作でパーツを組み合わせてページを構成できるため、HTMLやCSSの知識がない初心者でも、本格的なデザインのホームページを作れるようになっています。

CMSの登場以前に主流だった手法ですが、ページ数の少ないホームページを作る場合は、システムの構造が複雑なCMSを使うよりも、少ないファイル構成で挙動の軽いサイトを作れるため、現在でも一部のホームページでは利用されています。

ゴテゴテと機能が付いたCMSは使いたくないが、かといってHTMLを手打ちで入力するのも避けたいという場合におすすめです。

HTMLファイルやCSSを手打ちで入力してホームページを作成する方法で、ホームページ制作の手法としてはもっとも原始的ですが、他にはないメリットもあります。

まず、作成したホームページは最小構成となるため極めて軽量で、どんなサーバーでも快適に表示されます。

サーバー上でプログラムが動作したり、データベースを参照したりすることもないため、廉価で低スペックなサーバーで運用しても問題ありません。

また、全てのソースコードを自分で書くことによって、ホームページの内部で起きていることを、隅から隅まで把握できるのも長所です。

そのホームページに関しては、未知の部分がないことから、どんなトラブルに遭遇しても自分で解決ができます。

今回は、ホームページ制作を自ら行う上で知っておきたい知識を解説しましたが、ホームページ作成の技術の進歩は、ウェブの根本的な仕組みを不可視化しています。

今日では新たにウェブサイトを立ち上げるのに、サーバーの構造やHTMLのタグを知る必要はなく、テンプレートを選んでプレーンな文章を書きさえすれば、自動的に見栄えのする記事が公開されるようになっています。

しかし、その背後ではウェブの原理が何十年も変わらず動作し続けており、理解の度合いによってホームページ制作の手法の選択肢は大きく広がります。

ブログサービスやCMSによるホームページ制作に行き詰まりを感じたら、見えにくくなっている技術の基本に一度、立ち返ってみることをおすすめします。

ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、
あるいはWordPressなどを使用する方法があります。

まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

アフィリエイトに挑戦してみようと考えている方は、以下のリンクから、ぜひご利用ください！