初心者向けホームぺージ作成方法！CMSツール・HTMLを徹底解説

ホームページの自主制作は敷居が高いと思われがちですが、必ずしも専門的なスキルが必要なわけではありません。一方で専門的な知識を用いて０から作成したいと思っている方も、ホームページの基本的な仕組みや最低限求められる知識を把握することで、初心者でも十分に作成可能です。

そうはいっても、初めてのホームぺージ作成にあたって以下のような問題を抱える方も多いのではないでしょうか？

初めて聞く専門用語が多くて難しそう
そもそも自分でホームページを作る方法を知らない
費用感がわからない

本記事では、これらの問題を解決すべく、作成前に知っておきたい基礎知識やホームページを自作する方法、費用感を踏まえたおすすめツールの紹介を行っています。

ホームページ作成が初心者の方でも実際の作成フェーズへ移ることができるよう、わかりやすく解説しているので是非参考にして下さい。

【前提】作成前に知っておきたい！３つの基礎知識

ホームページを作成する前に、基本的な仕組みや構造を理解することが重要です。以下ではホームページの仕組みをはじめとして、作成時に必要なドメイン・サーバー、そしてホームぺージ運用について説明します。

1. ホームページの仕組み

ホームページが表示される仕組みは「クライアント」と「サーバー」によって成り立っています。クライアントは簡単にいえばホームページの閲覧リクエストを送信するユーザーです。

サーバーとは、ホームページのHTMLファイルを配置する土地のような役割をもつコンピュータを指します。ユーザーが閲覧したいホームページのURLをWebブラウザに入力すると、そのリクエストがサーバーに送信されます。

そして、URLのリクエストを受け取ったサーバーがドメイン名からIPアドレスを探し出すことで、ユーザー側のWebブラウザにホームページが表示されます。これがホームページが表示される基本的な仕組みです。

2. ドメインとサーバーの説明

ホームページを作成する上で不可欠な要素が2つあります。それが「ドメイン」と「サーバー」です。先述しましたが、サーバーは、ホームページのHTMLファイルを配置する土地のような役割をもつコンピュータを指します。ドメインは、端的にいえばホームページの住所です。

たとえば、すべてのホームページには「https://www.○○○○○.com/」という形式のURLが存在します。「https://」はスキーム、「www」はホスト、そして「○○○○○.com」の部分がドメインと呼ばれる要素です。

一般的にホームページはHTMLとCSSでマークアップされたファイルによって構成されており、サーバーという土地ににファイルをアップロードすることでWeb上に公開されます。そして、公開されたホームページを世界中のどこからでも特定できるようにする住所のような役割を果たすのがのがドメインです。

実際の住宅に土地と住所が必須なように、ホームページもサーバーという土地とドメインという住所が揃ってはじめて、あらゆるユーザーがアクセス可能な環境が構築されます。

ドメインの料金

ドメインの費用相場は年間で数百円～数千円です。特にこれといったこだわりがない場合には安価で提供されているドメインを含めて検討してみるとよいでしょう。

	.com	.jp	.co.jp	.net
平均金額	1,408円	1,628円	4,158円	1,628円
特徴	商用サービスや企業向け	日本を意味	日本国内で登記を行っている会社向け	ネットワークに関するサービス向け

引用元：お名前ドットコム（https://www.onamae.com/service/d-price/）

ドメインについてより詳しく知りたい方は以下の記事を参考にしてください。おすすめのドメイン登録サービスや、実際にドメインを取得する際の注意点などが記載されています。

ホームページ制作に必須のドメインとは？取得方法や費用も徹底解説

サーバーの料金

最近では、多くのケースで低価格のレンタルサーバーが利用されています。レンタルサーバーの費用相場は会社によってさまざまですが、年間数千円～数万円の低価格で使えるレンタルサーバーもあります。ホームページの規模や用途に合わせて、プランを選定してください。

おすすめのレンタルサーバーを紹介しますので、是非比較してみて下さい。以下の表でおすすめのレンタルサーバーをいくつか紹介します。

	エックスサーバー	ConohaWing	ロリポップ	ミックスホスト
初期費用	3,300円	0円	1,650円	0円
月額費用	1,100円~	931円~	550円~	1078円~
サイトの表示速度	◎	◎	◯	◯
無料常時SSL化	◯	◯	◯	◯
バックアップと復元	0円	0円	有料	0円

※月額費用は契約期間12ヶ月で試算

3. ホームページの運用

ホームページについて、作成が完了すれば完成と思っている人が多いかもしれませんが、実は作成後にも必要なことがあります。それがホームページの運用です。作成したホームページを安全なサイトとして保ち続けるためには、最新の状態であり続けることが不可欠なので、ホームページを作成する前に確認しておくようにしましょう。ホームページ運用の主な内容は以下の5つです。

サーバーやドメインの維持・管理

ホームページを作成する上で不可欠な要素であるサーバーとドメインですが、ただ取得すればいいと言うわけではなく、実は定期的な更新が必要になります。更新を忘れたことによるホームページ運用の失敗事例も少なくありません。ホームページを運用していく場合には必ず確認するようにしましょう。
SSLサーバー証明書の維持・管理

SSLサーバーとは、ホームページ運営者の実在を確認するための仕組みです。通信を暗号化する役割も果たしており、インターネット上の情報取引を安心して行うためにも欠かせません。こちらもドメインなどと同様に更新が必要なので注意しましょう。
CMSのアップデート

本記事でご紹介するホームページ作成方法のひとつであるCMSを利用する場合、CMS自体のアップデートが極めて重要です。最新の機能を利用したり、適切なサポートを受けたりするためにも、CMSのバージョンアップの度に確認することをお勧めします。
データのバックアップ

データファイルやデータベースを含む全てのデータのバックアップは、運用保守に不可欠な作業です。データの消失は企業にとって大きなデメリットを生みます。システム障害などのトラブルによるデータの消失も考えられますので、必ずデータのバックアップを行い、正確にバックアップができているかの確認も欠かさないようにしましょう。
外部連携の仕様変更対応

近年では、ホームページだけでなくSNSを併用して広告・宣伝を行う企業が増えていますが、SNSのバージョンアップや仕様変更に合わせて素早く対応することも、運用保守の大事な作業のひとつです。

以上5点がホームページ運用における基礎的な作業内容です。様々な作業があり複雑ですが、外注することで簡単に運用を続けていくこともできます。費用感は1~5万円です。

また、ホームページ運用には、より良いホームページを作り上げていくために運用改善といった作業もあります。例えばアクセス解析に基づいた分析などが運用改善にあたります。

ホームページ運用に特化した情報やおすすめの外注業者については、以下の記事に掲載してありますので、本格的にホームページの運用について知りたいと言う方は是非ご覧ください。

ホームページ運用10 の作業内容を徹底解説！よくある失敗事例も紹介

自分でホームページを作成する方法

初心者からホームページを作成するには以下にある２つの方法が挙げられます。

CMSツールを利用する
HTML・CSSで作成する

この章では2つの作成方法に関する概要や違いについて詳しく説明します。

CMSとは？

CMSとは「Contents Management System」の略称で、サイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのことを指します。

ホームページを作成するにはHTMLやCSSなどの知識が必要ですが、CMSツールならこれらの知識はいっさい不要で、誰でも本格的なサイト作成が可能です。

たとえば、テキストコンテンツを追加したいケースでも、HTMLを使用せず、CMSのインターフェース上で記入するだけでOKです。CMSによっては、豊富な数のテンプレートも用意されているため、容易に新規ページを作成することができます。

HTML・CSSとは？

HTMLとは、「Hyper Text Markup Language」の略で、コンピュータが理解できるマークアップをするための言葉です。

CSSとは「Cascading Style Sheets」の頭文字をとった略称で、ホームページのスタイルを指定するための言語を指します。たとえば、フォントサイズや行間、文字色や背景色、レイアウトや余白の指定など、ホームページの細かいデザインを調整するために不可欠な言語です。

ホームページは基本的にマークアップ言語のHTMLと、スタイルシート言語のCSSによって構築されるメディアです。そのためツールを使わない場合はHTML・CSSを用いて0からコーディングする必要があります。

ひと目でわかる！作成方法比較表

	CMSツールを利用する	HTML・CSSなどのコードを自分で書く
費用の相場	無料~（別途サーバー費用等）	無料~（別途サーバー費用等）
期間の目安	1カ月~	半年~（勉強時間等含む）
難易度	★★☆	★★★
おすすめの方	中級者／なるべく早く作りたい方	経験者／時間に余裕がある方

ホームページの自作は、費用を大幅に抑えることができる一方で初心者の方にはかなり難易度が高い方法と言えます。さらに、ホームページを作成できたとしても、その後の運用でトラブルが発生したときに相談できる相手がいないのも大きなデメリットの一つです。エンジニアリングの知識がある人向けの作成方法といえるでしょう。

CMSツールを利用してホームページを作成する場合

CMSツールを使用してホームページを作成する場合のメリットとデメリットについて見ていきましょう。

CMSツールのメリット

CMSツールを導入する最大のメリットは、コンテンツの新規作成や更新が容易になる点です。

たとえば、WordPressであれば無料テンプレートが豊富に用意されているため、HTMLやCSSの知識がなくても簡単にホームページを公開できます。

テキストエディタによるコーディングとは異なり、Webブラウザ上に管理ページが構築されるため、コンテンツの追加や更新が容易というのも大きなメリットです。

CMSを使用する場合のデメリット

CMSはハイクオリティなデザインテンプレートが豊富にあるものの、オリジナルのホームページを作成するためにはHTMLとCSS、そしてPHPの知識が不可欠です。つまり、デザインの独自性に欠けるという点がCMSの大きなデメリットです。

また、CMSはコンテンツがWeb上の管理ページに格納されるため、ローカルデータが保存されません。そのため、適切なバックアップ体制を構築するために相応の知識が求められます。

種類別！おすすめCMSツール3選

一言にCMSツールといっても様々な種類があります。今回は「オープンソース型」「パッケージ型」「クラウド型」の3種類に分けておすすめのCMSツールを紹介します。

1．オープンソース型

オープンソース型は元となるコードが無償で公開されているCMSです。特にWordPressなどは利用しているユーザーも多いため、わからないことがあっても様々な情報がインターネット上に公開されているので自分自身で解決できる可能性が高いです。また、プラグインやテンプレートの種類が豊富なため、表現の幅が広がります。

一方、サポートが薄いためにセキュリティー対策などは自分で行う必要があり、ある程度の前提知識を踏まえたうえで作成に取り掛かることをおすすめします。

例）WordPress

引用元：WordPressホームページ（https://ja.wordpress.org/）

WordPressとは、世界で最も多く使用されているホームページ作成ツールです。サイトの作成やブログの作成といったCMS（コンテンツ管理システム）の一つで、豊富なテンプレートがある点と無料から使用できる点が大きな特徴と言えます。

ただし、自身でサーバーを契約したりなどする必要があること、自由度が高いからこそ逆に素人には扱いにくいことがあります。

初めてホームページを作成する方から制作業者などの専門家まで幅広い方々におすすめできる作成ツールの一つです。

2．パッケージ型（ソフト）

パッケージ型は自社サーバーにインストールして運用するCMSを指します。これはホームぺージソフトとも呼ばれており、企業での仕様を前提とした機能が充実しています。

オープンソース型とは異なり、サポートが手厚いのでセキュリティ対策に期待できます。一方で、コストがかかってしまう点がデメリットです。メーカーや製品によって、価格は大きく異なります。5,000円未満で購入できるものもあれば、30,000円以上するものもあります。

例）ホームページビルダー

引用元：ホームページビルダー（https://www.justsystems.com/jp/products/hpb/）

ホームページビルダーとは、初心者からプロのデザイナーまで幅広く使用されているホームページ作成ソフトです。直感的な操作感でレスポンシブデザインの「ホームページ・ビルダー SP」とHTMLやCSSを直接編集することもできる「ホームページ・ビルダークラシック」という使い方に合わせた2つのビルダーを選ぶことができます。

3．クラウド型

クラウド型は、インターネット上でホームページを作成・運用できるCMSです。テンプレートがあるので専門知識がない初心者の方でも簡単に始められます。また無料で始められるCMSツールがあるのでコストもそれほどかかりません。

しかし、無料で始める場合は自分の作ったサイトに作成元の広告が表示されてしまうため、本格的なサイトを作りたいと思う方は有料プランへ加入することをおすすめします。

例）Wix

Wixはイスラエル発のホームページ作成ツールの開発提供企業です。作成者のスキルに応じて、様々な利用方法が選択できる点が大きな特徴の一つと言えます。

また、目的別の細かな料金プランがあることもユニークな点で、大きく分けて「ホームページプラン」と「ビジネス＆Eコマースプラン」に分かれており、幅広いユーザーが使用するケースを想定した料金プラン体系となっています。

CMSツールは、制作会社ごとにテンプレートの幅や、費用感などが異なってきます。あらかじめ作成したいホームページのイメージを膨らませたり、相場を決定してから制作会社を選定することをおすすめします。

CMSを使ったホームページ作成を検討される方は、以下の記事でより詳細な内容を掲載していますので、参考にしてください。

【2022年】おすすめ無料ホームページ作成ツール16選！

HTML・CSSを使用してホームページを作成する場合

HTMLとCSSによるコーディングでホームページを作成する場合のメリットとデメリットを見ていきましょう。

CSSを使用する場合のメリット

HTMLとCSSによるコーディングで構築されたホームページは一般的に「静的サイト」あるいは「静的ページ」と呼ばれます。静的サイトはHTMLとCSSでマークアップされたファイルをサーバーにアップロードするだけなので非常に表示速度が速く、サーバーへの負荷も軽いという点が大きなメリットです。

また、ファイルをローカルに保管するため、バックアップが容易でセキュリティインシデントに強いというメリットがあります。

CSSを使用する場合のデメリット

静的サイトを構築するためにはHTMLとCSSの専門的な知識が必須です。ローカルに保存されたファイルからページを生成するため、複数人による管理に向かないという点も大きなデメリットといえるでしょう。

また、ユーザーごとに異なるページを表示したり、リアルタイムで情報を表示したりといった動的な表示を苦手とします。

実際の作業内容を解説

HTMLでホームページを作成するには以下の4つのステップを踏む必要があります。

1．テキストエディタを用意
　　　　↓
2．ブラウザを用意
　　　　↓
3．HTMLファイルにコーディング
　　　　↓
4．FTPソフトを使ってサーバーへアップロード

HTMLとCSSによるコーディングで静的サイトを構築する場合、一般的にはテキストエディタを利用して記述します。「Visual Studio Code」や「Atom」など、どのようなものを使用してもかまいません。まずはHTMLファイルを作成し、headタグやbodyタグを記述してコンテンツを配置していきます。次にデザインの土台となるワイヤーフレームやデザインカンプに基づきCSSを記述していきます。

そして、ホームページ全体のバランスを見ながらHTMLとCSSでデザインを微調整します。完成後はHTMLファイルとCSSファイル、そして画像ファイルをサーバーにアップロードして公開完了です。

実際にコーディングで0からホームぺージ作成をしようと考えている方は以下の記事を参考にしてください。それぞれのステップにおいて必要な作業内容について詳しく解説しています。

ホームページを自分で作成する方法3選｜難易度別にわかりやすく解説

コーディングでのホームページ作成は、プログラミングに関する専門的な知識を要するので、まったくの初心者の方にはあまりお勧めできません。現在は、ホームページの作成を代行してくれる制作会社が多数存在するので、外部委託してホームページを作成するのもひとつの手です。

ホームページ作成を外注する際の費用感としては、50〜500万円とピンからキリまであり、オリジナリティや高いデザイン性を求めれば求めるほど費用が高騰していきます。また、作成にはおおよそ3ヶ月から半年ほどかかることが一般的です。おすすめの制作会社として以下で株式会社LIGを紹介します。

株式会社LIG

LIGは電通やNTTドコモのような誰もが知る大企業とも取引する、実績豊富な制作会社です。

LIGはホームページ制作、Webマーケティングのサポート、業務システムやアプリのシステム構築のほか、Webクリエイターの育成事業まで手掛けていて、費用は100万円、制作期間は短いものだと1ヶ月からホームページの作成を行なっています。

ひと口に制作会社と言っても、マーケティングが得意な制作会社や、UI・UXに強い制作会社など、それぞれの会社によって強みがあります。また、ホームページ作成を外注する場合には、制作会社の実績やホームページ完成後のサポート体制など、制作会社選びに失敗しないための注意点もあります。

費用と時間をかけて外注するからには、作成したいホームページのイメージにあった、信頼できる制作会社を選びたいところです。以下の記事では、ホームページ制作会社を特徴ごとに紹介し、選定するときの注意点も解説していますので、ホームページ作成の外注を検討する場合は、是非参考にしてください。

おすすめホームページ制作会社33選｜失敗せずに選ぶコツも紹介！

まとめ

ホームページ作成は敷居が高いと思われがちですが、WordPressのようなCMSや、ホームページ・ビルダーのようなWebオーサリングツールを利用することで、専門的な知識を有していなくても十分に作成可能です。

ホームページの作成と運営を内製化できれば、作成費用だけでなく運用コストの削減にもつながるでしょう。ぜひ、本記事を参考にしてホームページ作成に取り組んでみてください。