ホームページの作り方は?初心者でもわかるホームページ作成の基本と方法

ひとくちにホームページの作り方といっても、ホームページを作る手段はたくさんあります。

今回は、初心者でも自分でホームページを作るために必要な基礎知識やホームページ作成ツールやメモ帳などを使った作り方、HTML/CSSの勉強法やホームページ作成でやってはいけないことについてご紹介していきます。

目的や用途、予算などに合わせて、ぜひ使い分けてみてください。

ホームページとは

パソコンとタブレット

ホームページとは、ウェブサイトの表紙のような役割を果たすページのことを指します。ただし、日本では「ウェブサイト」と同じ意味で使われることが多く、本来の意味とは違った使われ方をしているようです。

また、日本で表紙のような役割を果たすページを表す言葉としては、「トップページ」というものがあります。実は、これは和製英語なんだそうです。

ホームページ作成の基本!ドメイン・サーバーとは

ホームページを作るためには、住所(URL)の役割を果たすドメインと、ファイルを格納するスペースの役割を果たすサーバーの2つが必要になります。

ドメインとは、「◯◯.com」、「◯◯.jp」などといった形で表される、ホームページの住所のようなもの、そしてサーバーとは、作ったホームページを置いておく場所のことです。

ドメインとサーバーは、「住所(ドメイン)と土地(サーバー)のような関係」とよく言い表されます。ドメインとサーバーの両方があって、初めてホームページが完成し、世界中からアクセスできるようになるのです。

ドメインとは?種類や取得の方法・ドメイン取得サービスまとめ
サーバーとは?初心者でもわかりやすいサーバーの概要・種類など
レンタルサーバーとは?選び方やおすすめレンタルサーバー比較など

ホームページの作り方

ホームページの作り方には、いくつかの方法があります。ここでは、その方法をまとめてご紹介していきます。

HTML/CSSを使って作る

【難易度】★★★★☆
【特徴】基本的なホームページの作り方/ドメインの取得・サーバーのレンタルが必要/HTML・CSSの知識が必要

ホームページは基本的に、HTMLとCSSという言語で作られています。HTMLでページの内容や構造を指定し、CSSでページのデザインを調整します。この言語を覚えることで、自分の思い通りのホームページを作ることができます。

HTML/CSSファイルは、Windowsに搭載されている「メモ帳」でも作ることができます。様々なテンプレートもあるので、それをコピーして使うと簡単です。

またこの方法では、独自ドメインを取得し、レンタルサーバーを借りる必要があります。サーバーをレンタルし、ドメインは独自のものを取得します。この作り方だと、ドメインの取得とサーバーのレンタル費用で、年間2,000〜5,000円程度かかります。

独自ドメインは、自分の好きな文字列で作れるドメインなので、会社やサービス、店舗などの名称に「.com」、「.jp」、「.me」などの文字列(トップレベルドメイン)を組み合わせた形で決めます。

ドメインは、ホームページを表示するのに必要な住所のようなものなので、希望のドメインがあったとしても、他の人が既にそのドメインを取得してしまっていれば、同じものを取得することはできません。希望のドメインがあれば、早めに取得しておきましょう。

ドメインとサーバーの用意ができたら、ホームページのコンテンツにあたるHTMLファイルと、デザインを指定するCSSファイルを用意し、サーバーにアップロードすれば完成です。

ドメインやサーバー、HTMLに関しては以下の記事も参考にしてみてください。

ドメインとは?種類や取得の方法・ドメイン取得サービスまとめ

サーバーとは?初心者でもわかりやすいサーバーの概要・種類など
レンタルサーバーとは?選び方やおすすめレンタルサーバー比較など
HTMLの書き方は?初心者でもわかるHTMLの基本!改行や画像挿入などよく使うタグも

ホームページ作成サービスを使った作り方

【難易度】★☆☆☆☆
【特徴】簡単/初心者向け/ドメインの取得・サーバーのレンタルは基本的に不要/HTML・CSSの知識は不要

ホームページ作成ツールは、自分でドメイン取得したり、サーバーを借りたりする手間なく、簡単にホームページを作成できるサービスです。ドメインはサービス運営会社から付与され、サーバーもその会社のものを使うことができます。

ダウンロードして使うホームページ作成ソフトもありますが、最近ではオンラインで使えるサービスが増えています。無料で使えるサービスが多いので、気軽に試してみると良いかもしれません。

これらのサービスには、たいてい有料プランも用意されていて、独自ドメインを取得したり、たくさんのホームページを公開したりしたい時などは、有料プランに切り替えることができます。

「なるべく費用を抑えてホームページを作りたい」「とりあえずホームページが欲しい」という方には、特におすすめの方法です。

ホームページ作成サービスの種類については、以下の記事を参考にしてみてください。

ホームページ作成サービス18選!初心者も簡単・無料で更新もできる

WordPressなどのCMSを使った作り方

【難易度】★★★☆☆
【特徴】比較的簡単/中級者向け/ドメインの取得・サーバーのレンタルが必要/HTML・CSSの知識は少し必要

CMS(Contents Management System:コンテンツマネジメントシステム/コンテンツ管理システム)とは、HTMLやCSSなどの知識がなくても、テキストの入力や画像の挿入をするだけで、ホームページを更新することができる管理システムです。

代表的なCMSとしては、WordPress(ワードプレス)が挙げられます。専門知識を必要とする部分はシステムが管理してくれるので、知識のない個人や、Web担当者がいない会社などでも簡単にホームページの管理、更新ができます。

CMSの種類については、以下の記事を参考にしてみてください。
CMSとは?誰でも簡単にホームページが作れるCMSサイト16選を比較!

初心者向け!HTML/CSSのおすすめ勉強法

上記の通り、ホームページ作成ツールを使えば簡単にホームページを作ることができます。しかし、一方でデザインにある程度の制限があるのも事実です。「自分が思い描く通りのかっこいいホームページを作りたい!」となると、HTMLやCSSを学ぶしかありません。

そこで初心者の方におすすめの勉強法をご紹介して行きます。

本で勉強する

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるhtml&cssのきほん

実際に、スマホやタブレットにも対応したサイトを作っていく中でHTMLとCSSの基礎が学べます。

手順ごとにパソコン画面の写真が載っているので、自分のやり方があっているか逐一確かめながら勉強を進められ挫折しにくい作りとなっています。

作りながら学ぶ HTML/CSSデザインの教科書

こちらもサイトを作りながらHTMLとCSSを学べます。ただ作り方を紹介するだけでなく、「なんのために、その作業をするのか」を解説してくれます。

出版されたのが2013年と少し古いものの、現在でも通ずる点が多い良書です。

いちばんよくわかるHTML5&CSS3デザインきちんと入門

解説がとても丁寧で、HTMLやCSSが何かというところから解説してくれます。また、レスポンシブWebデザインが普及した現在に求められるHTML/CSSの書き方やテクニックも紹介されています。

ネットサービスで勉強する

Progate

HTML/CSSを含めた何種類もの言語が網羅されています。実際に課題を解いていきながら学ぶことができるので実践的な能力が身につきます。

細かい項目ごとに学べるので、一度課題を全てやった後は実際に自分でホームページを作りながら、分からないところがあったら逐一その項目を復習するという使い方がおすすめです。

Schoo

プログラミングに関する様々な動画を見ることができます。授業形式で学べるので、一度全ての動画を通して見ることで体系的な知識をつけることができます。

ドットインストール

3分の短い動画を見ながら学ぶことができます。

プレミアム会員になると、動画の文字起こしも見ることができるので後々復習しやすいです。

ホームページ作成でやってはいけないこと

やみくもに作れば良いというわけではありません。そこで、ホームページ作成においてやってはいけないことをご紹介して行きます。

ホームページの目的が不明確

まずは「なんのためにホームページを作るのか」をハッキリとさせましょう。

当たり前のことのように思われるかもしれませんが、これが明確でないと具体的なホームページに盛り込むコンテンツは決まってきません。

例えば、ホームページを通して直接サービスを契約してもらうのを目指す場合には、サービスの詳細な説明をサイト内に盛り込み、しっかりとユーザーに吟味してもらう必要があります。

一方で、ホームページでまずは資料請求をしてもらうことを目的とするなら、サービスの大まかな特徴のみを載せて「まずは資料をダウンロード」というボタンへクリックを誘導することが重要となってきます。

このようにホームページを作る目的は、ページ構成や必要なコンテンツを考える上で欠かせないので事前に明確にしましょう。

表記が統一されていない

同じ層のコンテンツでは表記を統一しましょう。

例えば、トップメニューが

  • 「企業情報」
  • 「事業紹介」
  • 「ニュース」
  • 「Recruit」
  • 「お問い合わせ」

となっていると「Recruit」が浮いてしまいます。

このように、同列に扱われるコンテンツの表記は統一し、ホームページを訪れた人が困惑しないようにしましょう。

スマホに対応させない

現在では、パソコンからよりもスマホからインターネットへ接続する人が多くなっています。

パソコン向けのサイトはスマホで表示すると文字が小さく見づらかったり、リンクや画像が押しにくかったりとユーザーにストレスを与えてしまうので、スマホでもホームページが最適な形で表示されるようにすることが重要です。

ホームページを作ってみよう!

いかがでしたか?ホームページの作り方は、HTML/CSSで作る方法から、ホームページ作成ツールやCMSを使う方法まで、様々な方法があるので、ぜひ自分に合ったものを選んでみてください。

【あわせて読みたい!】
ドメインとは?種類や取得の方法・ドメイン取得サービスまとめ
サーバーとは?初心者でもわかりやすいサーバーの概要・種類など
レンタルサーバーとは?選び方やおすすめレンタルサーバー比較など
HTMLの書き方は?初心者でもわかるHTMLの基本!改行や画像挿入などよく使うタグも
ホームページ作成サービス18選!初心者も簡単・無料で更新もできる
CMSとは?誰でも簡単にホームページが作れるCMSサイト16選を比較!

ペライチでホームページをつくってみる!