ホームページの作り方を初心者向けに徹底解説!
Webサイト作成の手順ガイド

ホームページの作り方を知りたい初心者の方に向けて、ホームページ作成の専門家がはじめから丁寧に解説します。
このコラムを読むことで、ホームページの作り方の種類やそれぞれのメリット・デメリット、作り方の手順、HPの構成やデザインの考え方、公開後の運営方法まで網羅的に理解することができます。
「これからホームページを作りたい」と思っている方はぜひご覧ください!
\Webサイトに関する書籍を出版しています/
目次
初心者が知るべきホームページの作り方の基礎知識

ホームページの作り方には下記のように非常に様々なものがあり、どれを選ぶかによって、必要になる知識や費用などが大きく変わります。(とっつきづらく感じるかもしれませんが、これからわかりやすく解説していきますのでご安心ください!)
ホームページ作成サービスで自作する | 専門技術で自作する | プロの業者に依頼する |
---|---|---|
|
|
|

スキルは無いけど時間をかけずに自作したい / 予算が限られている
スキルを身につけることが目的
数十~数百万円の費用をかけて、本格的にビジネスに活用したい
ホームページ作成サービスで自作する

メリット | デメリット |
---|---|
|
|
世の中には、専門知識がまったく無くとも簡単にHPを自作できるサービスが多数あります。費用も月額1~3,000円程度と安価です。
また、そうしたサービスはメールや電話でのサポートを受け付けていることも多く、わからないことがあったら直接質問できるため、途中で挫折する可能性が低い点もメリットです。
例えば下記のようなケースには適した方法だと言えるでしょう。
- 小規模で予算が限られる企業の公式サイトを作りたい
- お店のサイトを作りたい
- 士業やコンサルタントの事務所のサイトを作りたい
- 塾・教室・幼稚園のサイトを作りたい
一方、専門技術でオリジナルのサイトを作る場合と比べるとやや自由度が下がり、月間数十~数百万円の費用をかけて本格的にWebサイトを活用したマーケティングを行いたい場合は不向きな場合があります。

\とりあえずHPの公式サイト/

とりあえずHPは数あるサービスの中でも特に「簡単さ」にこだわっているため、「他のサービスで挫折した」という方でも安心して使うことができます。
とりあえずHPを使ったホームページの作成手順は 初心者向けサービスを使ったホームページの作り方の章で詳しく解説するため、興味がある方はご覧ください。
専門技術で自作する

メリット | デメリット |
---|---|
|
|
HTML、CSS、JavaScriptなどを使ってWebサイトのデータを作成し、それをサーバーにアップロードしたり、取得したドメインと紐付けたりすることでインターネット上に公開する方法です。
初心者の方がこの方法で自作するにはまずは勉強してスキルを身につける必要があるため、数ヶ月程度は準備期間が必要になるでしょう。
この方法は、自分自身が技術を身につけることが目的の場合には向いています。例えば「未経験だけど、デザイナーやコーダーとして就職したい」というケースなどが挙げられます。
このタイプのホームページ作成については 専門技術(HTML・CSS、WordPress)を使ったホームページの作り方の章で解説しています。
プロの業者に依頼する

メリット | デメリット |
---|---|
|
|
先述した2つの方法はホームページを自分で作る方法でしたが、制作会社やフリーランスなどホームページ作成を専門としている業者に依頼する選択肢もあります。
プロが作成するので、クオリティは高くなりやすいです。ビジネスの集客手段として本格的にWebサイトを活用していきたい場合には向いている方法でしょう。
ただし、制作費用として数十~数百万円かかるのが相場であり、なおかつ(自社に専門スキルを持った社員がいないと)公開後の編集の際も業者に依頼しなければいけなくなるケースも多いため、自分で作成・編集できる方法と比べると費用が格段に高くなる点がデメリットです。
プロに依頼する際の流れ・注意点・費用などは下記の記事で詳しく解説しているため、併せてご覧ください。
初心者でも簡単!
HP作成サービスを使ったホームページの作り方
この章では簡単HP作成サービス「とりあえずHP」を使ってホームページを作成する手順を具体的に解説します。
この方法であれば、知識がまったく無い方でも最短で30分程度あれば下記のようなホームページを作成できます。
「とりあえずHP」に無料登録
まずはとりあえずHPの無料体験に申し込みます。30日間完全に無料でとりあえずHPを使うことができ、その後も自分で本登録に進まない限りは料金はまったく発生しません。
無料体験は下記のフォームからお申し込みください。3分程度で完了できる内容となっています。

フォームを送信するとメールが届きますので、下記の箇所をクリックして無料体験を完了させます。

すると、すぐにとりあえずHPのログインページやIDなどが記載されたメールが届きますので、アクセスします。

ログインページにIDとパスワードを入れて「ログイン」を押してください

基本情報の設定
とりあえずHPにログインできたら、まずはホームページの基本情報を設定しましょう。左のメニューの「基本情報の設定」を押し、ホームページ名や説明文などを入力します。入力が完了したら「上記の内容で設定」を押してください。

デザインの選択
次にデザインを選びましょう。とりあえずHPにはプロが作成した200以上のテンプレートが揃っているので、これらを選ぶだけで簡単にデザインを適用させられます。
左のメニューの「デザインの選択」を押すと下の画面が表示され、無料体験の申し込み時の入力内容に基づいてあなたにおすすめのテンプレートが表示されます。

また、「業種から選ぶ」「色から選ぶ」「印象から選ぶ」「機能や形から選ぶ」などを利用することで自分で合うテンプレートを絞り込むことができます。

トップページの編集
次にメニューから「トップページの編集」に進みましょう。ここでトップページに掲載する内容を設定できます。

無料体験フォームに送信した内容を元に、あなたのホームページに適した例文が最初から入力されているため、文章を考えるのが苦手な方も安心です。
ページの作成・編集
次にトップページ以外のページの作成と編集を行いましょう。
まずメニューの「ページの作成と管理」を押し、ページの名前やメニューでの並び順などを設定します。完了したら「上記の内容で設定」を押してください。これでページの作成は完了です。

次に作成したページの内容を編集します。メニューから「各ページの編集」に進み、対象のページを選び内容や公開/非公開の設定などを行います。

以上で基本的な手順は完了です!画面右上の「ホームページを確認」を押すと、作成したホームページが表示されます。
上記で解説した項目以外にも、プロフィールやコンタクトフォーム、地図などを掲載する機能もあるので、必要に応じて管理画面から設定してください。
専門技術(HTML・CSS、WordPress)を使った
ホームページの作り方
この章ではHTML・CSS、WordPressを用いたホームページの作り方について解説します。
HTML・CSS
HTMLやCSSはホームページを作る上で基礎となる技術です。
HTML | CSS |
---|---|
ホームページが持つ内容の構造を定義するための技術 | ホームページのデザインを定義するための技術 |

これらを駆使することで様々な姿のホームページを構築できます。
実は上述したホームページ作成サービスで作ったページもHTMLやCSSで構築されています。つまり、いずれにせよホームページというものはHTMLやCSSによって構成されますが、それを自分で書く(コーディングする)か、サービスによって自動的に生成するかに違いがあるということです。
HTML・CSSによるホームページの作成手順は下記の通りです。
目的 | 作業内容 |
---|---|
データ作成 | テキストエディタを用意する |
HTMLの基本となるタグを記述する | |
作りたいページ内容に応じてタグを記述する | |
HTMLファイルとして保存する | |
表示確認 | 作成したファイルをブラウザで表示してみる |
公開 | サーバーにアップロードする |
この手順は下の記事で詳しく解説しているため、併せてご覧ください。

WordPress
WordPressはコンテンツ管理機能つきのホームページ作成ソフト(CMS)です。これを使うことで、HTML・CSSのみで構築するよりも格段にページの投稿や更新がしやすくなります。
ホームページ作成の手段として非常にメジャーで、2023年2月時点では世界中のホームページのうち43.1%がWordPressによって構築されています(※)。
※ 出典: Usage Statistics and Market Share of WordPress, February 2023
使い方に柔軟性があり、PHPやReactといった専門的な技術を使って開発を行うケースもあれば、上述した簡単ホームページ作成ソフトのように一切コーディングを伴わずに扱うことも可能です。
同じような機能を持つソフトはMovable Typeなど他にもありますが、それらと比べてWordPressには下記のようなメリットがあります。
- 世界で一番使われているため、情報が多い
- プラグインやテーマ(デザインテンプレート)が豊富
- WordPress自体は無料
また、ほとんどのレンタルサーバーにはWordPressを簡単にインストールできる機能が備わっています。
そのため、レンタルサーバーを契約すればすぐにWordPress製のサイトを公開することが可能です。

逆に言えば、サーバーの用意やそれに付帯する基本的な設定などは行う必要があるため、完全に不慣れな方の場合はとっつきづらさを感じる可能性があります。
WordPressを使ったホームページの作成手順は下記の記事で詳しく解説しているため、併せてご覧ください。
ホームページを無料で作る方法
ホームページを作る際には、基本的に費用が発生します。
ホームページ作成サービス | 専門技術で自作 | プロに依頼 |
---|---|---|
月額1~3,000円程度 | サーバー代が月額1,000円程度 | 数十~数百万円程度 |
特に、プロに依頼する場合は外注費が不可欠なので無料で済ませることはできません。
しかし、自作する場合は、下記の方法により無料でホームページを作成・公開・維持することも可能です。
- ホームページ作成ソフトの無料プランを使う
- 無料のドメイン・サーバーを使う
ホームページ作成ソフトは前述の通り初心者でも簡単にHPを作成できるサービスで、下記のように無料プランが用意されているものもあります。
Wix | Jimdo |
---|---|
イスラエルが開発拠点のソフトで、世界190か国で使われている | ドイツが開発拠点のソフトで、Wixと同様に世界的に使われている |
また、無料のレンタルサーバーとしては下記が有名です。
XFREE | XREA Free |
---|---|
レンタルサーバーとして国内No.1シェア(※)を誇るエックスサーバーの無料版 | GMOグループが提供する無料サーバー |
※ 2023年2月時点、hostadvice.com 調べ。
これらは、ホームページを無料で準備したい方にはおすすめの選択肢と言えるでしょう。
ただし、HP作成ソフトの無料プランや無料のレンタルサーバーには下記のような厳しい制約がついていることが多い点には注意が必要です。
- ホームページに広告が掲載されてしまう場合がある
- 作成できるページ数が限られている場合がある
- アップロードできる容量に制限がある
- セキュリティ対策が十分にできない場合がある
- ホームページの表示速度が遅くなる可能性がある
そのため、個人の趣味のサイトを作るような場合には無料作成も選択肢に入りますが、お店や事務所、会社などの事業用のホームページは有料で作成する方がおすすめです。

スマホ対応のホームページの作り方
ホームページをスマホ対応させる方法は基本的に下記の2種類です。
- レスポンシブデザイン
- アダプティブデザイン

レスポンシブデザインはページの表示の仕方を、PC・スマホ・タブレットなどのデバイスのウィンドウの幅に応じて変化させる手法です。
昨今でホームページのスマホ対応を考える場合はレスポンシブを採用することが一般的です。

一方、アダプティブデザインはPC用とスマホ用のそれぞれのページデータを作成して、閲覧環境に応じて出し分けをする方法です。

ホームページのスマホ対応については下記の記事で解説しているので、詳しく知りたい方はこちらをご覧ください。
作り方を決めるだけじゃない!
ホームページ作成の4つの手順
ホームページを作る上では、「作り方」だけでなく下記のポイントも検討する必要があります。
- 企画
- 構成
- デザイン
- 実装

企画
開設の目的やターゲット像など、ホームページ作成の前提となる部分を検討する段階です。
ここが疎かになると、せっかく作ったホームページが意味をなさなくなってしまうため注意が必要です。
例えば商売・事業の集客が目的であればSEO※に適した手段・構造でホームページを作成すべきですし、Webページ上で商品を直接販売したいのであればショッピングカート機能を実装する必要があります。

この点については下記の記事で解説しているので、併せてご覧ください。
構成
ホームページの内容を具体的に検討する段階です。これは、下記の2つの視点から考えることができます。
- ホームページ全体の構成(サイトマップ)
- ページ単位の構成
全体の構成は、下記の図のように「Webサイト内にどのようなページを持たせるか」を検討するものです。

ページ単位の構成は、各ページ上に具体的にどのような要素(文章や画像などのコンテンツや、ナビゲーションなど)を掲載するかを検討するものです。
ホームページの構成ついては下記の記事で解説しているので、詳しく知りたい方はこちらをご覧ください。
デザイン
ホームページのデザインの作り方は、大きく分けて下記の2パターンがあります。
- テンプレートを使う
- オリジナルのデザインデータを作成する
テンプレート
ホームページ作成サービスやWordPressを使う場合は、あらかじめ構築されたデザインがテンプレートとして用意されているため、これらから任意のものを選択するだけで完結します。
例えば とりあえずHPには、以下のようなプロがデザインした200以上のテンプレートを備わっています。

「デザインのことがわからない」「デザイナーに発注する予算が無い」などの場合にはこのようなテンプレートを活用することがメインの選択肢になるでしょう。
オリジナルのデザイン
オリジナルのデザインで進めたい場合は、 Adobe XDや Figmaなどのツールを使ってデータを作成します。
下記の記事では、デザインのポイントやツールの紹介、便利な参考サイトなどについて解説しているので、詳しく知りたい方はこちらをご覧ください。
実装
ホームページをインターネット上で公開できるようにWebページとして実装する段階です。
この点は本コラムの 専門技術(HTML・CSS、WordPress)を使ったホームページの作り方の章で解説した通りです。
また、ホームページ作成ソフトを使う場合は、管理画面から操作するだけで自動的に実装が完了するので、この工程は省略されます。
ホームページ公開後の運用のポイント
ホームページは作って終わりではなく、公開後の適切な運用が不可欠です。特に下記は基本的な項目になるので、内容を押さえておくことがおすすめです。
掲載内容の更新 | ホームページ上の情報が常に正しい内容に保たれるように更新したり、会社やサービスの魅力をアピールする上で必要なコンテンツを新規で追加したりします。 |
---|---|
お問い合わせ対応 | コンタクトフォームを設置する場合は定常的に連絡が入る可能性があるため、内容に応じて対応しましょう。受信にすぐに気づくように、通知の設定をしておくことがおすすめです。 |
SEO | SEOは検索エンジンでホームページが上位表示されるようにするための取り組みです。SEOの基本は ホームページのSEO対策とは?自分で行うヒケツを初心者向けに解説をご覧ください。 |
アクセス解析 | ホームページへのアクセス状況は、 Google アナリティクスなどの専用ツールや とりあえずHPなどのアクセス解析機能を持ったホームページ作成サービスなどを利用することで計測できます。どのページがどのようにどれくらい見られているかなどを把握し、課題を発見→改善のサイクルを回しましょう。 |
ドメイン・サーバーの更新 | ホームページが公開された状態を保つには、ドメイン・サーバーの契約が切れないようにする必要があります。「とりあえずHP」などのホームページ作成サービスを使う場合はその契約だけ維持すれば自動的にドメインやサーバーも更新されるので大丈夫ですが、レンタルサーバーなどを利用する場合は各社のヘルプページなどを参照しながら適切に更新しましょう。 |
下記の記事では、上記を含むホームページ運用の基本をより掘り下げて解説しているので、併せてご覧ください。
ホームページの作り方についてのよくある質問
ホームページのおすすめの作り方は?
-
前提としてホームページには主に3つの作り方があり、ご自身のニーズに適した作成方法が「よい作り方」ということになります。
「3つの作り方の具体的な内容」と「それぞれがどのような人に向いているのか」は以下をご覧ください。
スキルは無いけど時間をかけずに自作したい / 予算が限られている
スキルを身につけることが目的
数十~数百万円の費用をかけて、本格的にビジネスに活用したい