1. トップ
  2. コラム
  3. ホームページ作成
  4. ホームページの作り方を初心者向けに徹底解説!Webサイト作成の手順ガイド

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

ホームページの作り方を知りたい初心者の方に向けて、ホームページ作成の専門家がはじめから丁寧に解説します。

このコラムを読むことで、ホームページの作り方の種類やそれぞれのメリット・デメリット、作り方の手順、HPの構成やデザインの考え方、公開後の運営方法まで網羅的に理解することができます。

「これからホームページを作りたい」と思っている方はぜひご覧ください!

牧野健人

Webサイトの制作とWebマーケティングを専門とする株式会社リラクスの代表取締役。

佐野彰彦

簡単ホームページ作成ソフト「とりあえずHP」を運営する株式会社smallwebの代表取締役。

\Webサイトに関する書籍を出版しています/

初心者が知るべきホームページの作り方の基礎知識

HP作成の方法は、大きく言うと3種類

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

ホームページ作成サービスで自作する 専門技術で自作する プロの業者に依頼する
  • とりあえずHP
  • Wix
  • Jimdo
  • ペライチ
  • STUDIO
  • グーペ
  • Google サイト
  • クレヨン
  • マークアップ言語(HTML)
  • スタイルシート言語(CSS)
  • プログラミング言語(JavaScript、PHPなど)
  • CMS(WordPressなど)
  • サーバー
  • レジストラ
  • 制作会社
  • フリーランス
これからそれぞれの方法のメリット・デメリットなどを解説していきますが、まずはざっくりと自分がどれに向いているのかを知りたい方は下記の基準で考えてみてください。

スキルは無いけど時間をかけずに自作したい / 予算が限られている

ホームページ作成サービスで自作する

スキルを身につけることが目的

専門技術で自作する

数十~数百万円の費用をかけて、本格的にビジネスに活用したい

プロの業者に依頼する

ホームページ作成サービスで自作する

初心者だけど自作したいならHP作成ソフト
メリット デメリット
  • スキルが必要無い
  • 時間をかけずに作れる
  • 費用が安い(月額1~3,000円程度)
  • サポートを受けられる
  • 保守が必要無い
  • 完全に自由にサイトを作れるわけではない
  • 本格的に(毎月数十~数百万円の費用をかけて)Webマーケティングを行う場合には不向きな場合がある

世の中には、専門知識がまったく無くとも簡単にHPを自作できるサービスが多数あります。費用も月額1~3,000円程度と安価です。

また、そうしたサービスはメールや電話でのサポートを受け付けていることも多く、わからないことがあったら直接質問できるため、途中で挫折する可能性が低い点もメリットです。

例えば下記のようなケースには適した方法だと言えるでしょう。

  • 小規模で予算が限られる企業の公式サイトを作りたい
  • お店のサイトを作りたい
  • 士業やコンサルタントの事務所のサイトを作りたい
  • 塾・教室・幼稚園のサイトを作りたい

一方、専門技術でオリジナルのサイトを作る場合と比べるとやや自由度が下がり、月間数十~数百万円の費用をかけて本格的にWebサイトを活用したマーケティングを行いたい場合は不向きな場合があります。

ホームページ作成サービスには前述したように様々なものがありますが、「初心者なので、とにかく簡単なサービスを使いたい」という方には「とりあえずHP」がおすすめです。

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

とりあえずHP

とりあえずHPは数あるサービスの中でも特に「簡単さ」にこだわっているため、「他のサービスで挫折した」という方でも安心して使うことができます

とりあえずHPを使ったホームページの作成手順は 初心者向けサービスを使ったホームページの作り方の章で詳しく解説するため、興味がある方はご覧ください。

専門技術で自作する

スキルを身につけたいならコーディング
メリット デメリット
  • 専門スキルを実践の中で身につけられる
  • 未経験からデザイナーやコーダーとして就職する際のアピール材料になる
  • 費用が安い(サーバー代が月額1,000円程度)
  • 必要なスキルを身につけるのに時間がかかる
  • スクールに通って勉強する場合には費用が数十万円かかる

HTML、CSS、JavaScriptなどを使ってWebサイトのデータを作成し、それをサーバーにアップロードしたり、取得したドメインと紐付けたりすることでインターネット上に公開する方法です。

初心者の方がこの方法で自作するにはまずは勉強してスキルを身につける必要があるため、数ヶ月程度は準備期間が必要になるでしょう。

この方法は、自分自身が技術を身につけることが目的の場合には向いています。例えば「未経験だけど、デザイナーやコーダーとして就職したい」というケースなどが挙げられます。

このタイプのホームページ作成については 専門技術(HTML・CSS、WordPress)を使ったホームページの作り方の章で解説しています。

プロの業者に依頼する

数十~数百万円かけられるならプロに依頼
メリット デメリット
  • クオリティの高いホームページを作成できる
  • 仕様を自由に決めることができる
  • 制作費用が数十~数百万円かかる
  • 公開後の保守や編集代行などにも費用がかかる

先述した2つの方法はホームページを自分で作る方法でしたが、制作会社やフリーランスなどホームページ作成を専門としている業者に依頼する選択肢もあります。

プロが作成するので、クオリティは高くなりやすいです。ビジネスの集客手段として本格的にWebサイトを活用していきたい場合には向いている方法でしょう。

ただし、制作費用として数十~数百万円かかるのが相場であり、なおかつ(自社に専門スキルを持った社員がいないと)公開後の編集の際も業者に依頼しなければいけなくなるケースも多いため、自分で作成・編集できる方法と比べると費用が格段に高くなる点がデメリットです。

プロに依頼する際の流れ・注意点・費用などは下記の記事で詳しく解説しているため、併せてご覧ください。

初心者でも簡単!
HP作成サービスを使ったホームページの作り方

この章では簡単HP作成サービス「とりあえずHP」を使ってホームページを作成する手順を具体的に解説します。

この方法であれば、知識がまったく無い方でも最短で30分程度あれば下記のようなホームページを作成できます

「とりあえずHP」に無料登録

まずはとりあえずHPの無料体験に申し込みます。30日間完全に無料でとりあえずHPを使うことができ、その後も自分で本登録に進まない限りは料金はまったく発生しません。

無料体験は下記のフォームからお申し込みください。3分程度で完了できる内容となっています。

とりあえずHPの無料体験申し込みフォーム

\とりあえずHPを30日お試し/
無料体験申し込みフォーム

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

とりあえずHPの認証メール

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

とりあえずHPの無料体験申し込み完了メール

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

とりあえずHPのログイン画面

基本情報の設定

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

とりあえずHPの「基本情報の設定」

デザインの選択

次にデザインを選びましょう。とりあえずHPにはプロが作成した200以上のテンプレートが揃っているので、これらを選ぶだけで簡単にデザインを適用させられます。

左のメニューの「デザインの選択」を押すと下の画面が表示され、無料体験の申し込み時の入力内容に基づいてあなたにおすすめのテンプレートが表示されます。

とりあえずHPの「デザインの選択」

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

とりあえずHPの「デザインの選択」のフィルター機能

トップページの編集

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

とりあえずHPの「トップページの編集

無料体験フォームに送信した内容を元に、あなたのホームページに適した例文が最初から入力されているため、文章を考えるのが苦手な方も安心です。

ページの作成・編集

次にトップページ以外のページの作成と編集を行いましょう。

まずメニューの「ページの作成と管理」を押し、ページの名前やメニューでの並び順などを設定します。完了したら「上記の内容で設定」を押してください。これでページの作成は完了です。

とりあえずHPの「ページの作成と管理」

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

とりあえずHPの「各ページの編集」

以上で基本的な手順は完了です!画面右上の「ホームページを確認」を押すと、作成したホームページが表示されます。

上記で解説した項目以外にも、プロフィールやコンタクトフォーム、地図などを掲載する機能もあるので、必要に応じて管理画面から設定してください。

専門技術(HTML・CSS、WordPress)を使った
ホームページの作り方

この章ではHTML・CSS、WordPressを用いたホームページの作り方について解説します。

HTML・CSS

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作成ソフトの無料プランや無料のレンタルサーバーには下記のような厳しい制約がついていることが多い点には注意が必要です。

  • ホームページに広告が掲載されてしまう場合がある
  • 作成できるページ数が限られている場合がある
  • アップロードできる容量に制限がある
  • セキュリティ対策が十分にできない場合がある
  • ホームページの表示速度が遅くなる可能性がある

そのため、個人の趣味のサイトを作るような場合には無料作成も選択肢に入りますが、お店や事務所、会社などの事業用のホームページは有料で作成する方がおすすめです。

有料で作るとしても、とりあえずHPのような安価なHPソフトを使えば月額3,000円程度の費用で作成・運用できるので、事業用のホームページをできるだけ低コストで作り方はチェックしてみてください。

スマホ対応のホームページの作り方

ホームページをスマホ対応させる方法は基本的に下記の2種類です。

  • レスポンシブデザイン
  • アダプティブデザイン
ただし、このコラムで紹介した「とりあえずHP」などのホームページ作成ソフトを使えば自動的にスマホ対応させられるためため、特に気にする必要はありません。

レスポンシブデザインはページの表示の仕方を、PC・スマホ・タブレットなどのデバイスのウィンドウの幅に応じて変化させる手法です。

昨今でホームページのスマホ対応を考える場合はレスポンシブを採用することが一般的です。

レスポンシブデザイン

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

アダプティブデザイン

ホームページのスマホ対応については下記の記事で解説しているので、詳しく知りたい方はこちらをご覧ください。

作り方を決めるだけじゃない!
ホームページ作成の4つの手順

ホームページを作る上では、「作り方」だけでなく下記のポイントも検討する必要があります。

  • 企画
  • 構成
  • デザイン
  • 実装
効果的なホームページを作成するために、これらもしっかりと押さえていきましょう。

企画

開設の目的やターゲット像など、ホームページ作成の前提となる部分を検討する段階です。

ここが疎かになると、せっかく作ったホームページが意味をなさなくなってしまうため注意が必要です。

例えば商売・事業の集客が目的であればSEO※に適した手段・構造でホームページを作成すべきですし、Webページ上で商品を直接販売したいのであればショッピングカート機能を実装する必要があります。

※ SEOはGoogleなどの検索エンジン上であなたのWebサイトが上位に表示されやすくするための取り組みのことで、集客手法として非常に効果的です。SEOの詳細についてはホームページのSEO対策とは?自分で行うヒケツを初心者向けに解説をご覧ください。

この点については下記の記事で解説しているので、併せてご覧ください。

構成

ホームページの内容を具体的に検討する段階です。これは、下記の2つの視点から考えることができます。

  • ホームページ全体の構成(サイトマップ)
  • ページ単位の構成

全体の構成は、下記の図のように「Webサイト内にどのようなページを持たせるか」を検討するものです。

サイト構成図例

ページ単位の構成は、各ページ上に具体的にどのような要素(文章や画像などのコンテンツや、ナビゲーションなど)を掲載するかを検討するものです。

ホームページの構成ついては下記の記事で解説しているので、詳しく知りたい方はこちらをご覧ください。

デザイン

ホームページのデザインの作り方は、大きく分けて下記の2パターンがあります。

  • テンプレートを使う
  • オリジナルのデザインデータを作成する

テンプレート

ホームページ作成サービスやWordPressを使う場合は、あらかじめ構築されたデザインがテンプレートとして用意されているため、これらから任意のものを選択するだけで完結します。

例えば とりあえずHPには、以下のようなプロがデザインした200以上のテンプレートを備わっています。

とりあえずHPのデザインテンプレート

「デザインのことがわからない」「デザイナーに発注する予算が無い」などの場合にはこのようなテンプレートを活用することがメインの選択肢になるでしょう。

オリジナルのデザイン

オリジナルのデザインで進めたい場合は、 Adobe XDFigmaなどのツールを使ってデータを作成します。

下記の記事では、デザインのポイントやツールの紹介、便利な参考サイトなどについて解説しているので、詳しく知りたい方はこちらをご覧ください。

実装

ホームページをインターネット上で公開できるようにWebページとして実装する段階です。

この点は本コラムの 専門技術(HTML・CSS、WordPress)を使ったホームページの作り方の章で解説した通りです。

また、ホームページ作成ソフトを使う場合は、管理画面から操作するだけで自動的に実装が完了するので、この工程は省略されます。

ホームページ公開後の運用のポイント

ホームページは作って終わりではなく、公開後の適切な運用が不可欠です。特に下記は基本的な項目になるので、内容を押さえておくことがおすすめです。

掲載内容の更新 ホームページ上の情報が常に正しい内容に保たれるように更新したり、会社やサービスの魅力をアピールする上で必要なコンテンツを新規で追加したりします。
お問い合わせ対応 コンタクトフォームを設置する場合は定常的に連絡が入る可能性があるため、内容に応じて対応しましょう。受信にすぐに気づくように、通知の設定をしておくことがおすすめです。
SEO SEOは検索エンジンでホームページが上位表示されるようにするための取り組みです。SEOの基本は ホームページのSEO対策とは?自分で行うヒケツを初心者向けに解説をご覧ください。
アクセス解析 ホームページへのアクセス状況は、 Google アナリティクスなどの専用ツールや とりあえずHPなどのアクセス解析機能を持ったホームページ作成サービスなどを利用することで計測できます。どのページがどのようにどれくらい見られているかなどを把握し、課題を発見→改善のサイクルを回しましょう。
ドメイン・サーバーの更新 ホームページが公開された状態を保つには、ドメイン・サーバーの契約が切れないようにする必要があります。「とりあえずHP」などのホームページ作成サービスを使う場合はその契約だけ維持すれば自動的にドメインやサーバーも更新されるので大丈夫ですが、レンタルサーバーなどを利用する場合は各社のヘルプページなどを参照しながら適切に更新しましょう。

下記の記事では、上記を含むホームページ運用の基本をより掘り下げて解説しているので、併せてご覧ください。

ホームページの作り方についてのよくある質問

ホームページのおすすめの作り方は?

前提としてホームページには主に3つの作り方があり、ご自身のニーズに適した作成方法が「よい作り方」ということになります。

「3つの作り方の具体的な内容」と「それぞれがどのような人に向いているのか」は以下をご覧ください。

スキルは無いけど時間をかけずに自作したい / 予算が限られている

ホームページ作成サービスで自作する

スキルを身につけることが目的

専門技術で自作する

数十~数百万円の費用をかけて、本格的にビジネスに活用したい

プロの業者に依頼する


牧野健人
記事の著者:牧野健人

株式会社リラクス 代表取締役。Webのマーケティング(CRO・SEO)の知見とクリエイティブ(デザイン・コーディング)のスキルの両輪を活かし、クライアントの成果向上のための取り組みに尽力。

佐野彰彦
記事の監修者:佐野彰彦

株式会社smallweb 代表取締役、株式会社それからデザイン 代表取締役。
「ビジネスとデザインの統合」をテーマに活動。音楽系企業にて新規事業開発を担当した後、デザイン業界へ転身。WEB領域に強いデザイナーとしてキャリアを積み重ねる。
著書に「経営者のためのウェブブランディングの教科書」「ウェブ担当者1年目の教科書」(共に幻冬舎)。2015年、2016年グッドデザイン賞受賞。

簡単に自分で作れるホームページ作成ソフト

無料でHPを作る