ホームページの作り方にはどんな方法がある?HTMLの役割と選定ポイント

ホームページ制作

ホームページを作るには、専門知識がないと難しいと思っていませんか?
ホームページの作り方には、いくつかの方法があります。ホームページは選択する方法により、初心者の必要最低限の知識で作ることができます。この記事では、いくつかのホームページの作成方法と、どの方法を選択しても必要になるホームページの基礎用語をまとめました。
さらに今回は、それぞれの方法のメリット・デメリットを理解した上で、ホームページはどう作るべきかを考えます。

基礎用語

ホームページを制作するなら、知っておきたい基礎用語です。

HTML (Hyper Text Markup Language)

13図1.png

ホームページに文章・画像・動画を表示させるためのマークアップ言語です。
<開始タグ></終了タグ>で、内容を囲んで記述します。内容に対応したタグで囲うことで、その意味や役割を正確にブラウザやコンピュータに伝え、表示させることができます。いつ見ても同じように表示される静的なコンテンツをつくります。

CSS (Cascading Style Sheets)

13図2.png

ホームページのレイアウトやデザインを定義するスタイルシート言語です。HTMLで定義した文書構造に、CSSでデザインを追加することで、ホームページの見栄えをよりよくすることができます。

JavaScript

13図3.png

HTMLやCSSにできない動きや機能をホームページに追加するプログラミング言語です。ホームページが表示されるブラウザ側で、言語が処理されて実行されます。

PHP (Hypertext Preprocessor)

動的なコンテンツをつくれるプログラミング言語です。動的コンテンツはアクセスしたタイミングや状況で表示が変わります。表示されるホームページのサーバー側で、言語が処理されて実行されます。

サーバー

ホームページを保管する場所です。ネットワーク上でデータを提供する側がサーバー、データーを利用する側がクライアントです。サーバーは、クライアントからの要求に応じて保管してある情報から、必要なサービスを提供します。

ドメイン

ドメインは数字だけのIPアドレスを、人間に分かりやすい形に置き換えた、インターネット上の住所です。
ホームページURL「https://〇〇.com」では「〇〇.com」の部分がドメインに該当します。ドメインには独自ドメインとサブドメインがあります。独自ドメインは自分で好きな文字でつくる世界に一つしかないドメインです。サブドメインは、ドメインを分割する時に使われる文字列です。「https://×××.〇〇.com」では「×××」の部分がサブドメインに該当します

DNS (Domain Name System)

数字を組み合わせたコンピュターの住所「IPアドレス」を人に理解しやすい「https://〇〇.com」のような文字列に変換するしくみです。

ホームページが表示される仕組み

13図4.png

HTML、CSS、JavaScriptなどのファイルで構成されたホームページのデータは、サーバーに格納されます。サーバーにはたくさんのホームページが置かれるため、区別するためにインターネット上の住所になるドメインをつけます。ユーザーは、ドメインを使いホームページにアクセスすることで、たくさんあるホームページの中から、希望するサイトを閲覧します。 

ホームページの作り方

それでは、ホームページの作り方にはどのようなものがあるのかみていきましょう。

HTMLで0から作る

HTMLとCSSなどのコードを手打ちして、ホームページを作る方法です。この制作方法では、HTMLとCSSの知識は必須になります。手打ちしたホームページファイルは、画像データなどと共にフォルダに格納し、サーバーにアップロードして公開します。

【メリット】
知識があればWindowsやMacに搭載されているメモ帳でもつくれ、制作コストが抑えられます。自分で自由に編集や更新ができ、制作過程でHTMLやCSSなどの言語知識がみにつきます。

【デメリット】
サーバーやドメインを別に用意する必要があります。HTMLやCSSは新しい表現方法も生まれる上に、ノンコードも今のトレンドのため、スキルが陳列化しやすくなります。

CMS (Contents Management System)

13図5.png

CMSは専門知識がなくても、ホームページのコンテンツ構築・管理・更新が簡単にできるコンテンツマネジメントシステムです。テンプレートをカスタマイズしたり、プラグインで必要な機能などを追加して、ホームページをサーバー上で制作します。

CMSには、大きく分けてオープンソース型と独自開発型があります。
オープンソースは、Wordpressに代表される、ソースコード公開の誰でも利用・改変・再配布できるソフトです。独自開発型は、ベンダー企業が独自に開発したCMSで、さらに、オンプレミス型とクラウド型に分けられます。オンプレミス型では、サーバーやネットワークを自社が管理し、クラウド型では、ベンダー企業が管理します。

【メリット】
種類が多く、用途と費用にみあったものが選べます。専門知識がなくても、簡単にデザインや編集、更新ができます。

【デメリット】
テンプレートから制作するものが多く、見た目が他社と似通いやすくなります。本格的なカスタマイズやトラブルには、専門知識が求められます。

ホームページ制作ソフト

ソフトを、パソコンにインストールしてホームページを作成します。
【メリット】
初心者~プロ向けまであるので、スキルにあったソフトが選べます。初心者向けのものは、専門知識がなくても、ホームページが制作できます。買い切り版では、購入後に費用が発生しません。

【デメリット】
サーバーやドメインを別に自分で用意する必要があります。ソフトやOSのアップデートにともない制作環境を見直さなくてはいけなくなります。

ホームページはどう作るべき?

ホームページの制作方法は複数あり、どの制作方法にも、メリットとデメリットがあることがわかりました。
どれか一つを選ぶとなると悩んでしまいますが、ホームページは一体どのように作ればよいのでしょうか?

ホームページを作成するには、まず初めに何のために制作するかという目的を明確にすることが大切です。目的を決めずに制作してしまうと、ユーザーに適切な情報を提供できず成果につながりません。目的設定では、ホームページのユーザーにどんな行動をおこしてもらいたいかを具体的にイメージしてみましょう。そして、目的にそって求められるものは何かを考えてみます。

旧来、ホームページは企業情報や代表プロフィール、商品カタログなどを掲載する役割が求められていましたが、昨今は「オンライン上で購買が完結する」「Webサイトで個人情報を獲得する」といった発展的な使い方をされるようになってきています。実際、企業が運営するホームページで、個人情報を扱わないサイトはないといってもいいように思います。

ホームページ作成ツールを使えば、専門知識がなくても簡単に問い合わせフォームや決算システムの導入ができます。しかし、そこにあるのは「お客様の大切な個人情報がWebサイトに格納される」という現実です。個人情報が、制作ツールの脆弱性により流出すれば、企業への信頼は大きく失われてしまいます。

このことからも、ホームページ制作でより強く求められるのは「ホームページを通して、お客様の大切な個人情報を扱うという意識」ではないでしょうか。

企業のホームページ担当者は、「安さや制作のしやすさ」ばかりに目を向けるのではなく、「お客様の大切な個人情報を守れるか」「サイトを中長期的に運用できるか」という観点から、制作方法を選定することが大切です。