ホームページの作り方・個人Webサイトの自作方法【総まとめ版】

これから初めて自分でホームページ・Webサイトを作成しようと考えた時に、まず何から手をつけたら良いかわからないという方も多いです。

ここでは自分でホームページを作りたい初心者の方向けに「独自ドメイン＋レンタルサーバーにホームページを作る方法」を紹介していきます。

【概要編】Webサイト・ホームページを作成する3つの方法

ホームページを作成する3つの方法には、大きく以下の3つの方法があります。

■ホームページを作成する3つの方法

WordPressなどのソフトを利用する方法(レンタルサーバー契約が必要)
HTML・CSSなどのコードを書いて作成する方法(レンタルサーバー契約が必要)
Wix・Jimdoなどのクラウド型のホームページ作成サービスを利用する方法(サーバー契約不要)

【方法1】WordPressなどのソフトを利用してサイト作成する方法

１つ目は、WordPress(ワードプレス)などのソフトウェア(CMS)を利用してホームページを作成する方法です。

項目	内容
名称	WordPress(ワードプレス) WORDPRESS ORG 日本語サイト
概要	WordPressは世界・日本共にシェアNo1のホームページ作成ソフトウェア(CMS)です。オープンソースで自由度の高さが圧倒的で小規模サイトから大規模サイトまで対応できます。反面、営利企業が運営・サポートしているわけではないので、問い合わせ先やサポートデスクなどはない点が注意点。簡単さ普通専門知識がなくても、ある程度やりながらサイト作成が可能価格ソフト代無料 (※)ただし、レンタルサーバー代などで実質月額500〜1,000円程度かかります自由度非常に自由規模の拡張性小〜大規模まで対応しやすい保守管理バージョンアップ・保守管理を定期的に行う必要あり

項目

内容

名称

WordPress(ワードプレス)
WORDPRESS ORG 日本語サイト

概要

WordPressは世界・日本共にシェアNo1のホームページ作成ソフトウェア(CMS)です。オープンソースで自由度の高さが圧倒的で小規模サイトから大規模サイトまで対応できます。
反面、営利企業が運営・サポートしているわけではないので、問い合わせ先やサポートデスクなどはない点が注意点。

簡単さ: 普通
専門知識がなくても、ある程度やりながらサイト作成が可能
価格: ソフト代無料
(※)ただし、レンタルサーバー代などで実質月額500〜1,000円程度かかります
自由度: 非常に自由
規模の拡張性: 小〜大規模まで対応しやすい
保守管理: バージョンアップ・保守管理を定期的に行う必要あり

WordPressは世界・日本共にシェアNo1のホームページ作成ソフトウェア(CMS)です。オープンソースで自由度の高さが圧倒的で小規模サイトから大規模サイトまで対応できます。
【圧倒的なWordPressシェア】世界と日本で有名なCMSシェアを徹底比較！

下記はWordPressのシェアですが、世界・日本共にダントツのNo1であることがわかります。

w3techs.comより引用

WordPressは、レンタルサーバー＋独自ドメインを契約後、サーバーにインストールしてデザインテンプレート「テーマ」を適用してサイトを作成する流れが一般的です。

■WordPress テーマ　追加画面

■【10分簡単デモ】WordPressでホームページ作る方法

WordPress自体は無料ですが、レンタルサーバー・ドメイン代や有料テーマ(テンプレート)利用時は別途費用がかかります。WordPressでかかる料金については「【WordPressの料金】ホームページ・ブログ開設にかかる費用」をご参照ください。

デメリットとしては、営利企業が運営・サポートしているわけではないので、自作する場合問い合わせ先やサポートデスクなどはなく、定期的な更新・保守管理が必要である点が挙げられます。

【方法2】HTML・CSSなどのコード書いてサイト作成する方法

2つ目はHTML・CSSといわれる言語を記述してホームページを作成する方法です。

項目	内容
名称	HTML・CSSなどのコード書いて作成する方法
概要	【特徴】HTMLやCSS、Javascriptなど、世間一般で言うプログラミング言語のようなものを自分で記述してWebサイトを作成する方法簡単さ難しい専門知識を習得してからでないとサイト作成に至らない価格ソフト代無料 (※)ただし、レンタルサーバー代などで実質月額500〜1,000円程度かかります自由度非常に自由規模の拡張性比較的少ないページ向き保守管理バージョンアップなどは基本不要

項目

内容

名称

HTML・CSSなどのコード書いて作成する方法

概要

【特徴】HTMLやCSS、Javascriptなど、世間一般で言うプログラミング言語のようなものを自分で記述してWebサイトを作成する方法

簡単さ: 難しい
専門知識を習得してからでないとサイト作成に至らない
価格: ソフト代無料
(※)ただし、レンタルサーバー代などで実質月額500〜1,000円程度かかります
自由度: 非常に自由
規模の拡張性: 比較的少ないページ向き
保守管理: バージョンアップなどは基本不要

2つ目の方法は、世間一般で言うプログラミング言語のようなものを自分で記述してWebサイトを作成する方法になります。

<html>のような『タグ』と言われるかたまりを使って文章や画像を加えたり、リンクを貼ることができます。

HTMLとCSSとは

HTMLとはHyper Text Markup Languageの略で、Webページの構造を定義する言語です。

CSSはCascading Style Sheetsの略で、スタイル（見た目）を指定する言語で、HTMLと一緒に使います。

HTMLが「目が二つ」「鼻が一つ」でといったように人の構造を定義する言語だとすると、CSSは「この人の目は二重にして、鼻の高さは2センチで」といったように人の見た目を調整する言語です。

■人に例えたイメージ

HTMLもCSSも世間一般で言うプログラミング言語のようなイメージですが、厳密にはHTMLはマークアップ言語、CSSはスタイルシート言語と言います。

たとえば、下記のようなシンプルなHTMLを作成してWebページを作成します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hello World!!</title>
  </head>
  <body>
    <p>こんにちは　僕の(私の)ホームページ!!</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Hello World!!</title>

</head>

<body>

<p>こんにちは　僕の(私の)ホームページ!!</p>

</body>

</html>

上記のHTMLファイルを契約したサーバーにFileZillaなどのFTPソフト(詳細はこちら)などを使ってアップロードします。

FTPでhelloworld.htmlをアップロード

Webブラウザで指定のURLでアクセスすると作成した内容をホームページとして閲覧することができます。

僕の(私の)ホームページ!!

このようにHTMLファイルなどを自分で作成してサーバーにアップロードすることでホームページを作ることができます。

HTMLを勉強したい方は、まずエディターをまず導入しておきましょう。本サイトでは無料で利用できるMicroft社のVisual Studio Code（VS Code）がおすすめです。

Visual Studio Codeの導入方法詳細については「【VSCode】Visual Studio Codeのインストール・設定手順」をご参照ください。

VS Codeの導入が終わったら下記の記事をもとにHTMLやCSSを勉強してみてください。

●【初心者向け】HTMLのタグ一覧と書き方
●CSSの書き方・基本ルールを解説【インライン/内部/外部】
●【CSSの基本】CSSの基本とプロパティ一覧
●FTPソフト FileZilla の使い方【Mac・Windows対応】

【方法3】クラウド型ホームページ作成サービスでサイト作成する方法

3つ目は、クラウド型のホームページ作成サービスを利用して自作する方法です。

クラウド型で最も有名なのは世界で２億ユーザーが利用する「Wix(ウィックス)」です。

項目	内容
サービス名	Wix(ウィックス) 公式サイトはこちら
料金	無料〜3,800円 / 月(プランによる)
概要	【特徴】Wixはマウスのドラッグ＆ドロップ操作でホームページを作ることができるホームページ作成サービスです。Wixの特筆すべき点は、2023年7月確認時点で世界190ヵ国・2億人を超えるユーザーに利用されている実績があり、CMSシェアにおいて世界第3位を記録しています。【用途】小〜中規模サイト向き【利用者数・シェア】多い【簡単さ】簡単【自由度】やや高い

レンタルサーバーを契約を意識しなくても、SNS開設のようにアカウント登録・Webブラウザ上でドラッグ＆ドロップでサイト作成が可能です。

他にも有名なクラウド型のホームページ作成サービスとしては、「Jimdo(ジンドゥー)」「ペライチ」、「STUDIO(スタジオ)」などがあり、営利企業が運営しているサービスになります。

■デザイナーやイラストレーターの利用者も多いホームページ作成サービスJimdo(ジンドゥー)

■一枚のランディングページ(ペラページ)に特化した「ペライチ」

■人気急上昇中の日本発サイト作成サービス「STUDIO(スタジオ)

クラウド型ホームページ作成サービスを利用する場合は、サーバー契約を意識せずにSNS感覚でWeb上からサイトを作成できます。(実際にはサーバーやドメインを利用していますが、利用者はあまり意識する必要はありません)

営利企業が運営しているサービスのため一定の範囲内で問い合わせなどのサポートがある一方、デメリットとしてはサービスの仕様上自由度はある程度制限されます中〜大規模サイトには不向きであったり、複数サイト運用したい時に費用が割高になる点が挙げられます。

なお、「WordPress」「Wix」「ペライチ」「Jimdo」「Wix」「Studio」の5つのサービスの特徴を【比較】無料から使えるおすすめホームページ作成サービス5選」でご紹介していますのでご興味ある方はご参照ください。

【3つの方法比較】3つの方法のメリット・デメリット

上記3つの方法を比較すると下記の通りです。

種別	WordPress	HTML・CSS	クラウド型サービス
はじめやすさ	◯ レンタルサーバー・独自ドメイン契約が必要	△ レンタルサーバー・独自ドメイン契約が必要かつ、エディタやFTPソフトも必要	◎ アカウント登録すればすぐに利用できる
サイト作成の簡単さ	◯ WordPressの操作方法など覚えることが多少ある	× HTMLやCSSの書き方を中心に覚えることがかなり多い	◯ 各サービスにおける操作方法を覚えることが多少ある
コスト・価格	◯ レンタルサーバー費用が月額500〜1000円程度かかる。 (※)有料テーマを利用する場合は別途費用がかかる	◯ レンタルサーバー費用が月額500〜1000円程度かかる	△ 無料から有料まであるが、有料プランだと割高になりがち
カスタマイズ性	◎ テンプレート設定範囲内なら初心者でも簡単にカスタマイズ可能細かい部分も自由に触ることができる(コードの知識が必要)。	◎ コードの知識が必要だか自由にカスタマイズできる	△ サービスの仕様によりカスタマイズできる部分はある程度限定される
大規模サイト規模対応	◎ 大規模サイト・複数サイトに向いている	△ 大規模サイトは更新が困難(手間がかかる)・	△ 基本的に利用できる容量が少ないので向いていない(割高になりがち)
複数サイト規模対応	◯ (基本的に)ドメイン利用料のみ追加でかかる	◯ (基本的に)ドメイン利用料のみ追加でかかる	△ 複数サイト分契約が必要になるので割高になりがち
セキュリティのリスク	△ 定期的な更新をはじめ、保守管理しないとセキュリティリスクが高くなる	◯ HTML・CSSだけのサイトであればセキュリティ問題は起きにくい	◯ プラットフォーム側(運営元)である程度のセキュリティ対策を実施してくれる
保守管理のリスク	△ 定期バージョンアップやバックアップ対策が基本必要	◯ 定期バージョンアップやバックアップは基本不要	◯ プラットフォーム側(運営元)でバージョンアップ実施してくれる
不具合時サポート対応	△ 基本自分で対処する必要あり	△ 基本自分で対処する必要あり	◯ 一定の範囲内でサポートに問い合わせができる

これからビジネス用途のホームページを作りたい・ブログなども色々更新していきたいといった場合であれば、まずはWordPressなどのソフトウェアを利用する方法がおすすめです。

もちろん、HTML・CSSもできるに越したことはないですし、クラウド型のホームページ作成サービスも便利ですので気になる方は色々試してみると良いかと思います。

【外注か自作か】ホームページ外注・自作におけるメリット・デメリット

なお、個人事業または会社のホームページを作る際に、制作会社に外注するか、自作するか悩んでいる人も多いです。

下記は外注と自作のメリットデメリットをまとめたものです。

比較表	外部委託	独学自作
費用	△ 約20〜50万円外注費(※1)	◎ 約1,2万書籍代
かかる時間について	◎ 5,6時間〜(打合わせ等※2)	△ 6,70時間〜(勉強時間)
見た目・デザイン	◯ 綺麗なデザインのHPができる	△ 最初は素人くさいデザインになりがち
追加更新について	△ 独力で困難	◎ 可能
注意点	業者によっては大きなハズレありサイトの文言や写真など自分で用意する必要がある	途中で諦める・挫折することが多いはじめのうちはデザインや構成が素人っぽくなりがち

(※1)外注費はページ数・デザイン・サービス内容によって大きく変動。法人向け・コンサル付きなどの場合100〜300万円かかる場合もあります。
(※2)ホームページの文言・画像などはある程度自身で準備する必要あり

なお、下記はWordPressでサイト自作した場合と、外注する場合の費用間の比較です。

WordPressでかかる費用ですが、自作する場合初年度1〜4万円(次年度以降1〜1.5万円)、外注する場合は20〜50万円程度かかります。

当サイトの考えでは、『まずは名刺代わりに作りたい、まだ副業・起業したてだったり事業内容も変わる可能性がある場合は』自作がおすすめです。

なぜなら、自分で作れば、事業内容に応じてサイトの変更も比較的容易に自分で行えるからです。

反面、ある程度内容が固まっていてデザインにこだわりがある、プロのクオリティを求めているなど場合は、制作会社に依頼する方が良い場合もあります。

ホームページを独学自作か外注か、それぞれのメリットデメリットについて詳しくは「【あなたはどっち？】ホームページを独学自作か外注かを徹底比較」で説明していますので悩んでいる方は合わせてご参考ください。

ここでは、自作を前提にお話を進めていきます。

【事前準備】ホームページのコンセプト・情報を整理する

すでに、明確な目的がある人は問題ありませんが、もし初めてホームページを作成する場合はコンセプト・情報を整理しておきましょう。

まずはなんのためにホームページを開設するのか目的を明確化しましょう。

ホームページの目的例

サービス中心サイトとして顧客に商品・サービスを購入してもらいたい
コーポレートサイトとして取引先(候補)に会社情報を正しく発信したい
コーポレートサイトとして採用を中心にしたい
ブログ・メディアサイトでアフィリエイト収益を上げたい

サイトの規模によっては複数の目的を兼ねている場合もありますが、メインの目的を決めておくことはとても大切です。

ジャンル・目的を絞った専門サイトは検索エンジンの評価も高くなる傾向があります。

より具体的には、誰向けにどんな情報を発信する予定なのかを整理しておくと良いでしょう。

整理しておきたい情報

誰向けに情報を提供するか
どんな情報を提供するか
最終的に読者にどうしてほしいか
どんなキーワードで情報提供するか

(関連)【コンセプト決め】ホームページコンセプトの作り方・考え方

どのようなコンテンツを作るべきかについては、これから作成する業種・内容によってまちまちなので一概には言えませんが下記のような項目はよくあるコンテンツです。

トップページ(HOME)、サービス(事業内容)、料金表、製品情報、会社情報（プロフィール）、初めての方へ、代表者あいさつ、リクルート(スタッフ募集)、社員の声、よくある質問、実績(作品)、お客様の声、お問い合わせ、メディア掲載歴、お知らせ、ブログ(コラム)

どんなコンテンツを候補にできるかは、あなたと同じ業種・業態のホームページを調べてみて参考にするのが近道だと思います。

下記のような構成図を作っておくと、それに沿ってサイトを作っていくことができるのでおすすめです。

(関連)ホームページの構成図サイトマップとは？作り方の基本

【作業編】サーバーとドメインを契約・取得する

ここからは、自作を前提に、レンタルサーバー＋独自ドメインを契約する手順でWebサイトを開設する方法を説明していきます。

ホームページを作るために、まずはWebサイトの入れ物となる建物「サーバー」や「ドメイン」を準備する必要があります。

まずはじめに、ホームページ・Webサイトを開設するためには「サーバー」と「URL(ドメイン)」、「ホームページ(中身)」が必要になることをおさえておきましょう。

サーバー：インターネット上の建物・部屋のようなもの
ドメイン：インターネット上の住所のようなもの
ホームページ(中身)：建物・部屋の中にあるコンテンツ・サービスのようなもの(文章や画像などで構成されるファイル類)

指定の住所(ドメイン)に行ったら建物(サーバー)があって、その中に入ったら中身がある(例. 飲食店なら飲食のサービスなど)」というようなイメージをするとわかりやすいと思います。

なお、ホームページを構築する方法にはいくつか形態がありますが、ここでは一番スタンダードな方法である「独自ドメイン＋レンタルサーバー」上にホームページを作成していく手順で説明していきます。

ホームページの作成手順

レンタルサーバー会社からサーバーを借りる
ドメインサービス会社からドメインを取得する
サーバーに中身(ホームページ)を構築する

【ステップ1】レンタルサーバー会社でサーバーを契約する

まずはWebサイトの入れ物となる建物「サーバー」を準備する必要があります。

いくつかのタイプがありますが、個人が初めてホームページを持つ場合は「レンタルサーバー会社」で「レンタルサーバー」を契約するのが一般的です。

レンタルサーバーも複数のプランがあり価格もピンからキリですが、個人向けだとおおよそ月額500〜1,000円くらいが一般的です。

レンタルサーバーを提供している会社として、当サイトで利用しているエックスサーバー、コストパフォーマンスで人気のロリポップ！やさくらのレンタルサーバなどがシェアが多く有名です。

このほか、最近シェアを拡大しているConoHaWINGやmixhostなども含めたレンタルサーバー詳しい比較は「レンタルサーバーおすすめ比較１３選・WordPress高速対応」に掲載していますので、レンタルサーバー契約の前にぜひご覧ください。

サーバーの種類について

現実世界で、「一戸建て」、「ワンルームマンション」、「寮・シェアハウス」といったタイプがあり、広さや設備によって価格がピンキリであるのと同様に、サーバーもいくつかのタイプがあり価格もピンキリです。

具体的にサーバーを借りる形態としては、下記の4つの種類が大きくあります。

共用サーバー
VPS(仮想専用サーバー)
クラウドサーバー
(マネージド)専用サーバー

※狭義には上記のうち共用サーバーのことをレンタルサーバーと言います（一般的にレンタルサーバーというとこちらの共用サーバーのことを指すことも多いです）。

この中で、個人や中小企業のホームページやブログ・メディアサイト目的で一番よく利用するのが共用サーバーです。

共用サーバーはその名前の通り、一つのサーバーをみんなで借りる形です。一番初心者でも触りやすく、個人や中小企業が一般的なブログやホームページを作る場合は、共用サーバーを利用することが一般的です。

レンタルサーバーは、自分用の部屋がある一方トイレ・風呂などの共用部分もあるシェアハウス・寮くらいのイメージが比較的あっているかもしれません。

VPSやマネージド(専用)サーバーと大きく違う点は、OSが共用であるという点です。

一般的なホームページでしたら共用サーバーで十分ですが、アプリ開発などで別のミドルウェアやソフトウェア・ツールをOSにインストールしたいといった場合は共用サーバーでは実現困難なことも多いです。

■VPS(仮想専用サーバー)：OS単位でサーバーを借りられるようになっている形式

■共用サーバーのメリットとデメリット

	メリット	デメリット
共用サーバー	月額費用が安価(月額100円〜)でコストパフォーマンスが良い初心者向けにわかりやすい管理画面やマニュアルが用意されている一般的なホームページやブログを運営するには十分な性能を備えている	VPSと比べると自由度が低くアプリ開発用としては制限あり共用リソースのため他の利用者の使用状況に自サイトが影響を受けやすい

共用サーバーは、自分用の部屋がある一方トイレ・風呂などの共用部分もあるシェアハウス・寮くらいのイメージが比較的あっているかもしれません。

個人・中小企業がホームページ目的でサーバーを利用する場合、一般的には共用サーバーで十分です。

合わせて読みたい記事

レンタルサーバーの種類や仕組みについて詳しくは「【レンタルサーバーとは】仕組みや種類・特徴を徹底解説」をあわせてご参照ください。

【ステップ2】独自ドメインを取得する

サーバーを用意すると同時に、インターネット上の住所に当たるドメインも取得する必要があります。

レンタルサーバーを契約した直後は、初期ドメインというレンタルサーバーのサブドメイン(xxxx.xsrv.jpや、xxxx.sakura.ne.jp、xxxx.lolipop.jpなど)が利用できます。

このサブドメインは実際のビジネス・ブログには不向きです。将来的にそのままビジネスで長く使う可能性がある場合は、自分専用のドメイン(独自ドメイン)も準備する必要があります。ドメイン名は後から変更できず、訪問者に直接見える内容でSEOにも影響しますのでとても重要です。

本サイトの場合は「webst8.com」が独自ドメインです。

トップレベルドメイン

なお、「.com」の部分をトップレベルドメインといいます。「.com」の他にも「.net」や「.info」など数多くの種類があります。

独自ドメインは、「xxxx(自分の欲しい名前)」×「トップレベルドメイン」の組み合わせからどれにするかを選ぶ形になります。

今はその意味が薄くなりましたが元々は「.com」は商用、「.net」はネットワーク関係を意味しています。法人の場合は「co.jp」を取得することもできます。

■代表的なトップレベルドメインと、語源

ドメイン名	主な意味	備考
.com	商業・商用用途で世界的に広く使用されています。	語源はcommercial（商業・商用）
.net	オンラインビジネスや起業によく利用されます。	元々はネットワーク関係を意味しています。
.org	非営利団体でよく使用されます。	organization(組織)
.info	情報提供のホームページでしばしば使用されます。	2001年10月1日運用開始
.biz	商用のドメインで企業に使用されることがあります。	2001年5月21日受付開始
.jp	日本国内にいる人間しか取得できないるドメイン
.co.jp	法人用ドメイン	法人登記資料などの提出が必要

どれにするべきか悩んでいる場合は、とりあえず「.com」を選んでおくと無難でしょう。

また、ドメイン名はSEO的にはホームページのコンセプトに近い名前をドメイン名に含めるのが良いとされています。たとえば、健康関係のホームページなら「health」という単語、色関係なら「color」、カフェ関係なら「cafe」などの単語をドメイン名に含めると良いです。

他には、ブロガーさんで自分の名前をブランディングしていきたい場合は自分の名前をドメイン名にする場合もありますし、コーポレートサイトであれば会社名をドメイン名にするのが一般的です。

■以下はGoogleが出す推奨のドメイン名のケーススタディですので参考にしてみてください。

Google Webマスターアカデミー　クイズ抜粋

Google ウェブマスターアカデミーより引用

なお、最近のレンタルサーバーでは、複数のドメインを一つのレンタルサーバーに設定できることが多いです。二つ目のドメインを利用したい場合でも、必ずしも新しくレンタルサーバーを契約する必要はありませんので、覚えておきましょう（なお、ドメイン代は一個ずつ費用がかかります）。

独自ドメインを取得する方法

トップレベルドメインが「.com」や「.net」の独自ドメインを取得する場合、おおよそ年額1,000〜2,000円程度の取得・更新費用がかかります。

レンタルサーバー会社がエックスサーバーであれば、そのままエックスサーバーで独自ドメインを契約することができます。

ロリポップであれば同じ会社のドメイン専用サービス「ムームードメイン」から、さくらインターネットであればそのままさくらインターネットで独自ドメインを契約することができます。

年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─

以下は、ムームードメインで独自ドメインを取得する場合の画面です。

上記のように、取得したいドメインを入力して検索→カートに追加をして取得手続きを進めていきます。すでに誰かが取得済みのドメインは取得できません。

会社によりキャンペーンなどで数百円〜千円程度の取得費用の違いはありますが、初めてホームページを自分で作る場合は、契約した会社でドメインを取得したほうが設定が簡単でおすすめです。

独自ドメインについての詳しい説明は「独自ドメインとは。取得するメリットや取得方法を解説」をご参照ください。

【ステップ3】ホームページの中身を作成する

これでレンタルサーバーの契約とドメインの登録が完了してWebサイトを構築する準備が整いました。家に例えると今はマンションを契約直後の状態で家具も何もない状態です。

ここからはサーバー(建物)の中にホームページ(中身)を作成していきます。

前述の通り、Wordpressのようなソフトウェアをつかって制作する方法とHTMLファイル等を自分で作成して構築する方法の2パターンがあります。

初心者の場合HTML・CSSかWordPressがどちらがおすすめか

これからホームページを作る場合に、HTML・CSSでホームページを作るか、WordPressでホームページを作るかどちらを選択するなら、まずはWordPressなどのソフトウェアを利用する方法がおすすめです。

HTML・CSSはホームページを作るまでに覚えるべきことが多いので、独学でホームページを自作する際に挫折してしまうリスクが高くなります。

ただし、WordPressを利用していても細かいレイアウト調整にはHTML・CSSの知識が必要になってきます。最初はWordPressなどのソフトウェアでホームページを作る感覚を覚えてから、HTML・CSSを覚えていくのがおすすめです。

これからHTMLやCSSを勉強したい方はまずは「【初心者向け】HTMLのタグ一覧と書き方」をご参照ください。

また、WordPressを利用してホームページを開設する方法は、「【総まとめ】WordPress（ワードプレス）ホームページ作り方」をご参照ください。

HTML・CSSで作る静的サイトとWordPressなどのCMSの違い

HTML・CSSでサイトを構築するサイトを静的サイトと言います。静的サイトはページ数の少ないサイトやランディングページなどに向いています。

一方、WordPressなどのCMSを利用したサイトはコンテンツ量が多いコーポレートサイトやメディアサイト、ブログなど日々、更新作業が発生するサイトに向いています。

CMSを利用したホームページは、基本的に更新作業は管理画面から行いますので、専門知識がなくてもある程度は日々の更新が可能です。

ただし、自由自在にカスタマイズしようと思うと、HTML・CSSの知識に加えてPHPなどのプログラミング言語や独自の記述方法を理解する必要がある点は注意です。

	HTML・CSSなどの静的サイト	WordPressなどのCMS
用途	少ないページ数のサイトやLPに適している	中規模以上、更新の多いのサイトに適している
作成・更新方法	HTML・CSSで作成・更新する	管理者用のページから作成・更新する
注意点	HTMLやCSSを知っていないと更新・修正することができない。	ソフトウェアのバージョンアップなどの管理が必要自在にカスタマイズしようと思うとプログラミングやソフトウェア仕様の知識が必要

HTMLやCSSを勉強したい方は下記記事をご参考いただければ幸いです。
●【初心者向け】HTMLのタグ一覧と書き方
●【CSSの基本】CSSの基本とプロパティ一覧

【補足】ホームページ作成の上で知っておきたい関連項目

最後に補足として、ホームページ作成の上で知っておきたい関連項目や知識・サイトをご紹介していきます。

写真素材・イラスト素材サイトを活用しよう

実際にホームページを作成する際に、良い画像がなくて素材不足になることがよくあります。また、ネットで検索して出てきたものは著作権で保護されているものもたくさんあるので安易に使ってはいけません。

ネットには、自由に使えて商用利用可能な画像素材サイトもたくさんあります。「【おすすめ素材サイト総まとめ】ホームページで使えるフリー・有料素材25選」にホームページ作成に使えるおすすめ画像素材サイトを一挙紹介しています。

ジャンル	素材サイト名	概要	公式サイト
無料写真素材サイト	写真AC	写真ACは、日本の巨大写真素材サイトです。利用には無料の会員登録が必要ですが、人物・風景・パターン画像など多くの画像が提供されています。詳しくはこちら	公式サイト
	PIXABAY	ビジュアル重視の美しい素材が多いので壮大・綺麗・神秘的・グローバルなコンテンツに向いています。詳しくはこちら	公式サイト
	BURST	BURST(バースト)は、ネットショップサービス大手のshopify(ショピファイ)が運営するフリー素材サイトです。詳しくはこちら	公式サイト
	foodiesfeed	フード(食べ物)に特化した、野菜や果物、料理の写真が豊富な海外のフリー写真素材サイトです。詳しくはこちら	公式サイト
	upsplash	Unsplashは海外のフリー素材サイトで、ビジュアル重視の美しい素材が多く、壮大・綺麗・神秘的・グローバルな写真がたくさんあります。詳しくはこちら	公式サイト
	ぱくたそ	ぱくたそは日本人の素材が多い有名なフリー素材サイトです。個性的なリアクションの人物素材が多い傾向があります。詳しくはこちら	公式サイト
	GirlyDrop	GirlyDropは、その名前の通りおしゃれでガーリーな写真に特化した写真素材サイトです。女性、ファッション、美容、カフェ、誕生日、イベントなどなどかわいい系の写真が多くあります。詳しくはこちら	公式サイト
	フォトック	Photock(フォトック)は、域や自然風景・植物、動物・建築物・夜景・ビジネスなどの様々なシーンの写真がある写真素材サイトです。詳しくはこちら	公式サイト
有料素材サイト	Adobe Stock	「Atobe Stock」は、Adobe社が提供する有料素材サイトです。写真がメインですが、高品質のイラスト・アイコン・シルエット類も多数揃っています。詳しくはこちら	公式サイト
	Shutter Stock	「Shutter Stock」は、画像、動画クリップ、音楽などが揃っている世界で有名な有料素材サイトです。写真がメインですが、高品質のイラスト・アイコン・シルエット類も多数揃っています。詳しくはこちら	公式サイト
	iStock	iStorkは、ゲッティ・イメージズ・セールス・ジャパンが提供する有名な巨大有料素材サイトです。画像だけでなく、映像やイラストなども様々な素材が揃っています。詳しくはこちら	公式サイト
	PIXTA	PIXTA(ピクスタ)は、日本人の人物をはじめ、高品質な写真素材が揃う有名な有料素材サイトです。写真のクオリティーも非常に高いのが特徴です。詳しくはこちら	公式サイト
イラスト素材サイト	イラストAC	「イラストAC」は日本最大の無料イラスト素材サイトです。老若男女・動物・モノなど色々なイラストが揃っています。詳しくはこちら	公式サイト
	Socost(ソコスト)	「ソコスト」はシンプルで使いやすいイラスト素材です。主張しすぎないテイストで汎用性のあるイラストです。詳しくはこちら	公式サイト
	ちょうどいいイラスト	「ちょうどいいイラスト」は人物や物、記号などちょっとあったらいいなと思えるシンプルなイラスト素材サイトです。詳しくはこちら	公式サイト
	シグレニ(shigureni)	「シグレニ」は素朴で可愛い、女の子が中心に掲載されているイラスト素材サイトです。主張しすぎないテイストの女の子のイラストでどんなサイトにも馴染みやすそうです。詳しくはこちら	公式サイト
	unDrow(アンドロウ)	「アンドロウ」は海外のシンプルなイラスト素材サイトです。IT・Webサービス系のサイトに利用できそうなイラストが多いです。詳しくはこちら	公式サイト
	いらすとや	「いらすとや」は、子供や大人・おじいちゃん・おばあちゃんなどの人物など独特のかわらしいイラストがたくさんある定番素材サイトです。詳しくはこちら	公式サイト
	シルエットAC	「シルエットAC」は無料のシルエット素材サイトです。シルエット素材をお探しの場合におすすめのサイトです。詳しくはこちら	公式サイト
	icooon mono	「icooon mono」は、アイコン素材に特化した素材サイトです。WEBデザインやDTP、ビジネスシーンで活用できるアイコンが揃っています。詳しくはこちら	公式サイト
	human pictogram 2.0	「human pictogram」は人に特化したピクトグラムという素材サイトです。WEB制作やビジネス資料などをよく利用される人物素材です。詳しくはこちら	公式サイト
背景素材サイト	Subtle Patterns	透過系・白系のパターンが多い背景素材サイトです。主張しない背景でホームページやブログの背景におすすめです。詳しくはこちら	公式サイト
	BEIZ	BEIZ images(ベイツ・イメージズ)。空、川、山などの風景から、和柄、テクスチャ系、色別まで1万種類以上の非常に様々な背景を揃えている素材サイトです。詳しくはこちら	公式サイト
	Bg patterns	色鮮やか・濃い背景が多く、和柄・花・植物・可愛い・おしゃれ系などポップな柄が多い背景素材です。詳しくはこちら	公式サイト
	フリーテクスチャ素材館	木・紙・布・金属などの材質・テクスチャ系に特化した背景です。詳しくはこちら	公式サイト
	Background Labs	海外(カナダ)の運営する背景素材サイトです。詳しくはこちら	公式サイト
	背景素材フリードットコム	様々な背景素材が揃っている。チラシ・バナー・HPの背景におすすめ詳しくはこちら	公式サイト
その他	Canva(キャンバ)	「Canva」は、Web上からのデザイン作成ツールです。初心者でも文字入れ・トリミング・合成などの簡単に画像加工ができます。詳しくはこちら	公式サイト
その他	ココナラ	「ココナラ」は出品者と購入者を繋ぐスキルシェアマーケットです。イラストレーターさんにオリジナルのイラストを描いて欲しい方におすすめです。詳しくはこちら	公式サイト