初心者でも簡単な「ホームページ」の作り方解説

ホームページを作りたいけれど、難しそう、何から始めていいのかわからない、そもそも自分でホームページなんて作れるの?という方、必見!自分のお店のサイトを作りたい、趣味のサイトを立ち上げたいなど、目的はそれぞれだと思います。ここではそんな初心者の方向けに、ホームページの作り方の基礎知識から、いろいろな作成方法を解説していきます。

ホームページの作り方

ホームページ作成の基礎知識

まずはじめに、 HTMLやCSSといった、ホームページ作成にあたっての必要な知識を簡単に説明させていただきます。基本的な知識をしっかり理解しておくことで、スムーズにホームページ作りを行えるようになるでしょう。

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

目的のホームページを閲覧する場合は、Google Chrome や Internet Explorer などのブラウザを使って、ホームページの情報を提供するWebサーバーへアクセスします。Webサーバーから、HTMLファイル・CSSファイル・画像ファイルなどのデータが送信されます。こうして、パソコンやスマートフォンなどで、ホームページを表示できるのです。

Webサイトが表示されるしくみ

HTMLとは

HTMLとはHyperText Markup Languageの略で、簡単に説明すると、ホームページを表示させるためのプログラムであり、HTMLファイルとはそのプログラムが書かれたファイルといえばわかりやすいでしょうか。1ページごとに、1つの HTMLファイルが作成されます。プログラムといってもシンプルで簡単な書式さえ覚えれば、簡単に記述することができます。

CSSとは

一方のCSSとは、Cascading Style Sheetsの略。HTMLと組み合わせて使われるもので、スタイルシート」という名前の通り、フォントの種類や大きさ、背景といった「見栄え」に関する情報に関する規格です。CSSファイルとはCSSが記載されたファイルです。CSSファイルは1つのWebサイトに、基本的には1つ以上用意します。

HTMLファイルには、ホームページの見栄えに関する情報を記載することもできます。しかし、全てのHTMLファイルに同じ情報を記載するのは面倒です。フォントの種類や背景などの見栄えは、ホームページで統一することが望ましいので、CSSファイルからこれらの情報を取り出すようにすれば、全てのHTMLファイルに記載せずに、見栄えを簡単に統一することができ、ホームページの作成がシンプルになります。

従来のホームページ作成方法

ここでは、制作会社などにホームページの作成を依頼した場合を例に、工程を簡単に説明させていただきます。

Webデザイン

1.デザイン

ホームページの作成では、まずデザインを決めます。デザインが決まっていないと次の工程に進むことができません。ホームページを作成する全工程の最初の作業となります。

2.コーディング、システム実装

デザインが決まったら、前述のHTMLやCSSを使ってWebサイトの構築を行います。この作業を「コーディング」「システム実装」といいます。ここでホームページに必要なデータを取り揃えます。

3.サーバーにアップロード

HTMLファイルやCSSファイルなどのデータを用意しただけでは、もちろんインターネットからホームページを参照できません。インターネットでホームページが見られるようにするためには、用意したデータを全てWebサーバーにアップロードする必要があります。

ホームページ作成に必要なもの

まず、HTMLやCSSを記述するためにテキストエディタが必要です。次に、画像を作成するために画像エディタを用意します。

また、ホームページをインターネットで参照できるようにするためには、Webサーバーを用意する必要があります。さらに、インターネットでホームページを公開するために、ホームページの場所を示すURLを作るのに必要なドメインを用意します。

ホームページ作成に必要な知識・スキル

これまで説明してきたように、ホームページの作成にはHTML・CSSといった知識・スキルが必要です。こういった知識について、わかりやすく解説した書籍がいろいろ市販されていますので、購入してみるのもよいでしょう。
以下、おすすめの書籍を3つ紹介します。

初心者の方が1からホームページを作成するのは大変です。かといって制作会社に依頼すると、かなり高額なお金がかかってしまいます。
次章では、できるだけお金をかけずに、自分で簡単にホームページを作成できる方法を紹介します。

最低限の費用で自分で作る!いろいろな作成方法

テンプレート利用 ホームページ作成ソフト利用 CMS(Content Management System) Webサイトビルダー
特徴 あらかじめデザインが設定済のHTML・CSSファイルを利用する方法です。 ホームページビルダーなど簡単にホームページ作成できるソフトウェアを利用する方法です。 Webサーバーなどにインストールして利用するホームページ作成用のシステムです。ブラウザで操作します。 簡単にいうと、CMSがインストール済のサービスです。ブラウザで操作します。
自由度 やや低い やや低い 高い やや高い
難易度 やや高い 低い やや低い 低い
費用 無料で利用できるテンプレートがある一方、デザイン性が高く価格の高いものもあります。 一般的には数千円程度で購入できるものが多いようです。数万円するソフトもあります。 多くのCMSは無料で利用できます。 無料で利用できるプランから月額数千円のプランまで用意されています。
メリット HTML・CSSの面倒な記述作業はほとんど必要ありません。 HTML・CSSの知識がなくても簡単にホームページが作成できます。 HTML・CSSの知識がなくてもホームページが作成できる他、メールフォームのような機能も簡単に利用できます。ホームページへのアップロードは必要ありません。 HTML・CSSの知識がなくてもホームページが作成できる他、メールフォームのような機能も簡単に利用できます。ホームページへのアップロードは必要ありません。
デメリット デザインを修正する場合はHTML・CSSの知識が必要です。HTML・CSSが理解できる中級者以上向きです。 デザインにこだわる場合などは、HTML・CSSの知識が必要です。また、ソフトウェアにもよりますが、あらかじめ決められたデザインを使うことになるので、簡単である分、自由度は低いです。 WebサーバーにCMSをインストールする作業が必要です。※レンタルサーバーによっては簡単にインストールできるよう設定されている場合もあります。 独自ドメインを使ったり機能を追加したりする場合に、月額料金が発生することがあります。

お店のホームページを作成するのであれば、独自ドメインを取得してオリジナルのホームページを作成するとよいでしょう。しかし、デザインなどにこだわりたい場合、市販のホームページ作成ソフトを使うと、ある程度HTML・CSSの知識が必要となるため、難しいでしょう。

初心者の方には、HTMLやCSSの知識がなくても利用できる、CMSの利用がおすすめです。

CMSとは

CMS

CMS(Content Management System)は、ウェブサーバーなどにインストールして使うホームページ作成や、ホームページ用のコンテンツ管理用のシステムです。CMSを使うことで、Wordで文書を作るような簡単な操作感で、ホームページ作成ができます。

おすすめのCMSツール

ここでは、おすすめのCMSツールをいくつか紹介させていただきます。

名前 特徴
WordPress もともとはブログ作成用のソフトでしたが、機能性が高くホームページ作成用にも、世界的に広く利用されている人気のCMSです。プラグインを使って、さまざまな機能をホームページに追加できます。無料で利用できます。
Movable Type ブログ作成用のソフトですが、ホームページ作成用にも広く使われています。商用利用の場合、ライセンス料が必要です(GPLライセンスのオープンソースであるMTOS)が、有料ライセンスを購入すると製造元のサポートが受けられます。
WordPressに比べると人気が低く、プラグインが少ない一方、有料ライセンスではサポートを繰り返し受けられたり、マニュアルが充実していたりといったメリットがあります。
baserCMS Webサイト作成用の国産CMSです。日本語でマニュアルが用意されているため、日本人にはわかりやすく、自由度が高いのが特徴です。しかし、こだわる場合は専用の知識が必要であり、他のCMSと比較すると、初心者にはハードルが高いかもしれません。
EC-CUBE ホームページ作成の中でも、ネットショップを作るのに特化したCMSです。ショッピングカートのような機能の他、帳票出力・売上集計など、ネットショップ運営に必要な機能も組み込まれています。

CMSを使った作成方法

<STEP1>
まずは、WebサーバーにCMSをインストールします。インストールにあたって、MySQLなどのデータベースの設定が必要になる場合もあります。なお、MySQLの設定も含めてワンクリックで設定できるよう、準備しているレンタルサーバーも多くありますので、そういったサービスを利用されるのもよいでしょう。

<STEP2>
テンプレートを選ぶなど、ホームページのデザインを決めます。基本的な作業は、服の着せ替えをするような手軽さで、簡単に実行できます。

<STEP3>
CMSの操作画面にブラウザからアクセスして、コンテンツを作成します。多くのCMSでは、Wordと同じような操作感でコンテンツ作成ができます。
また、HTMLやCSSを使って自分でホームページ作成をする場合と違い、サーバーへのアップロードは不要です。

無料ホームページサービス(Webサイトビルダー)は?

TVCMで話題になっているJimdohttp://jp.jimdo.com/)など、無料で利用できるホームページサービス(Webサイトビルダー)もあります。以下にいくつかあげておきます。

これらの多くはCMSと同様に簡単な操作で、比較的見栄えのよいホームページを作成できます。また、テンプレートを利用したり付加機能を使ったりして、デザインや機能を工夫することもできます。

より個性的でデザイン性の高いホームページを作成する場合は、CSSなどの専門知識が必要になることもあります。ですが、テンプレートでデザインを決めて、簡単なコンテンツを作成する程度であれば、初心者の方でも比較的簡単に作成ができるでしょう。

無料ホームページサービスのデメリット

ただしサービスによっては、無料のプランを使うと、以下のようなデメリットもあるので注意しましょう。

  • 独自ドメインが使えない
  • ホームページに広告が表示される
  • 提供される容量が少ない
  • 利用できるテンプレートが少ない
  • 商用利用が許可されない

これらの問題がないプランを使う場合は、月額いくらかの料金を支払う必要があります。結果的に、月額料金がレンタルサーバーより高くなる場合も多いので、注意が必要です。
興味がある場合は、これらの内容も事前に確認するようにしましょう。

また、世界的に広く利用され、テンプレートやプラグインがいろいろな人によって開発・提供されているCMSの方が、無料ホームページサービスよりも、デザイン性や機能性が高くなります。

まとめ

ご覧いただいたようにホームページ作成の方法はさまざまです。
無料のサービスを利用する場合は、いくつかデメリットもありますので気をつけましょう。特にお店や会社のホームページを作成する場合には、注意が必要です。また、独自ドメインを使うなどすると月額料金がかかり、結局レンタルサーバーより高価格になることが多いので、よく検討してから利用するようにしましょう。

初心者の方が今後拡張されるのであれば、レンタルサーバーを利用しWordPressなどの無料のCMSを使った方が、低価格でかつ拡張性も高いのでおすすめです。

高速でセキュアな環境で運用できるWordpressユーザー向けに特化したWordPress専用サーバー

人気記事ランキングトップ10

カテゴリ一覧

新着記事Pick Up!