現役Webデザイナーが、初心者のホームページ自作を応援!

最終更新日:

初心者のホームページ自作 ロードマップ【7ステップで完成】

ホームページ自作のロードマップ
ホームページ作成の初心者
初心者 ハナ

初心者がホームページを自作する大まかな流れは?
ホームページを作るには、何をすれば良いの?

今回は、初心者のホームページ自作手順に関する、上記のような疑問にお答えします。

本記事の内容

  • ホームページ自作の大まかな流れ
  • 各ステップごとの作業

本記事の執筆者

ホームページ自作を応援するWebデザイナー
リュウ

こんにちは、ホームページ自作ラボ管理人のリュウです。
私は、現役のWebデザイナーとして、ホームページ制作会社の代表をしています。

本記事は、以下のような人にオススメです

  • 初心者がホームページを自作する流れを知りたい
  • ホームページ自作について体系的に学びたい

本記事を読むことで、初心者がホームページを自作する大まかな流れを知ることができます。

結論を先に言うと

初めてホームページ作成をする人は、まず大まかに全体の流れを知ることが大切です。
まずは、なんとなく良いので全体のイメージができるだけでも気が楽になると思います。

では、初心者のホームページ自作手順について徹底解説していきます!

初心者がホームページを自作する大まかな手順

ホームページ自作の大まかな流れは以下の通りです。
(ここでは、一番おすすめの自作方法である「ホームページ作成サービスを利用する」を選択した前提で解説します)

  1. ホームページを作る方法を決める。
  2. ホームページ作成サービスを申し込む。
  3. サイト名を決めてドメインを取得する。
  4. 作るページの構成を決める。
  5. トップページを作る。
  6. 下層ページを作る。
  7. ホームページ全体を確認して公開する。

このあと、各ステップについて解説して行きます。

このページでは、ホームページを自作する全体的な流れを解説します。
記事の途中に「関連記事のリンク」貼っているので、関連記事もご覧いただければ理解が深まると思います。

【step1】ホームページを作る方法を決める

ホームページ作成自体を始める前に、まずホームページを作る方法を決める必要があります。

ホームページを自分で作る方法は、主に以下の4つです。

結論を先に言うと、初心者には「ホームページ作成サービスを利用」が一番オススメの方法です。
逆に、初心者には「HTMLとCSSで1から作成」と「ホームページ作成ソフトを利用」の選択肢はないものだと思ってください。

また、ブログに力を入れたい場合は、ホームページ作成サービスよりは少し難易度が上がりますが、WordPressを利用する方法がオススメです。

では、それぞれの作成方法について解説して行きます。
詳しくは『ホームページの作り方とそれぞれのメリット&デメリット』をお読みください。

HTMLとCSSで1から作成

HTMLとCSSで1からホームページ作成

HTMLやCSSなどのコードを1から書いて、ホームページを作る方法です。

メリット スキル次第ではあるが、デザインや仕様などすべてにおいて、自由にホームページを作れる。
デメリット 初心者がゼロから作成するには、まず専門的な学習から始めることになるので、膨大な時間が掛かる。

自由度が高いので、プロのWebデザイナーの多くが選択する方法です。

プロのWebデザイナーを目指しているなら良いかもしれませんが、初心者にとっては現実的な方法ではないのでオススメできません。

ホームページ作成ソフトを利用

ホームページ作成ソフトを利用してホームページ自作

「ホームページ・ビルダー」などのホームページ作成ソフトでホームページを作る方法です。

メリット ソフトを購入すれば、ソフトの利用についてのランニングコストは掛からない。
ただし、ソフトのバージョンアップをする場合は、別途費用発生。
デメリット 使いこなすにはある程度の知識や経験が必要。
月額¥1,000前後のレンタルサーバー代が掛かる。

クラウド型のホームページ作成サービスが普及する前は、メジャーな方法でした。
しかし、初心者が扱うには少し難しいです。
ソフト自体の使い方を習得しないといけない上、サーバーへのアップロードや、サーバーの管理も自分でする必要があるからです。

ホームページ作成ソフトで作ることによって得られるメリットが少ないので、オススメできません。

WordPressを利用

WordPressを利用してホームページ作成

世界でも日本でも人気No.1のCMS(コンテンツ管理システム)であるWordPressを利用する方法です。

メリット 既存のWordPressテーマを使用すれば、初心者でも比較的簡単にホームページ作成ができる。
WordPress自体は無料で使えて、無料プラグイン(拡張機能)が豊富にあり、カスタマイズできる。
デメリット WordPressそのもののサポートはなく、自分でしないといけないことが多いので、ホームページ作成サービスよりは難易度が上がる。

ホームページ作成サービスより難易度は上がりますが、メリットも多いです。
とは言え、初心者が一般的なホームページを作りたい場合は、ホームページ作成サービスを利用した方が良いです。

しかし、ブログサイトやWebメディアを作りたい場合は、WordPressが適しています。

ホームページ作成サービスを利用

ホームページ作成サービスを利用してホームページ自作

Wixジンドゥーなどのホームページ作成サービスを利用して作る方法です。

メリット 月額¥1,000程度からの格安で、誰でも簡単にホームページを作れる。
サーバー込みのクラウド型サービスなので、レンタルサーバーを借りる必要がない。
デメリット 作れるホームページは、そのホームページ作成サービスの仕様に準じるので、自由度が高いとは言えない。

ホームページを作るのが始めての初心者でも、簡単にホームページを作成・運営できます。
初心者がホームページを作るなら、ダントツで一番オススメの方法です。

ちなみに、一般的な事業紹介などのホームページではなく、ネットショップを運営したい場合は、ネットショップ作成サービスを利用した方が良いです。

【step2】ホームページ作成サービスを申し込む

どのホームページ作成サービスを利用して作るのかを決めて、サービスを申し込みます。

ホームページ作成サービスは数多くありますが、メジャーで人気のあるサービスから選ぶことをオススメします。
なぜなら、マイナーなホームページ作成サービスだと、突然サービスが終了してしまうリスクがあるからです。

そして、マイナーなサービスは、利用料金が高い割に機能が魅力的でないことが多いです。

当サイトで紹介しているホームページ作成サービスは次の5つです(総合評価に基づくオススメ順)。
どれも、信頼できる運営会社のサービスで、人気があるものばかりです。

  1. ジンドゥー(Jimdo)
  2. Wix(ウィックス)
  3. ペライチ
  4. グーペ(Goope)
  5. とりあえずHP

各サービスの特徴やメリットなどについては、上記のリンク先ページで詳しく解説しています。

サービスごとに特色があるので、オススメ1位のサービスがあなたに最適なサービスとは限りません。
各サービスの解説を読んだ上で、あなたに最適なサービスを選択してください。

とは言え、迷ってしまう人も多いと思うので、かなり簡単に各サービスの特徴を紹介します。

ジンドゥー(Jimdo) 人気No.1で日本国内でのサービス運営歴も長いサービス。
ホームページ作成・運営に必要な機能が一通りそろっている。
AIがホームページ作成してくれる「AIビルダー」もある。
Wix(ウィックス) テンプレートや、自由に追加できる機能が豊富に用意されている。
ADI(人工デザイン知能)がホームページ作成をしてくれる「Wix ADI」もある。
ペライチ ページ数が少ないホームページ作成が得意。
1ページのみの縦長ホームページや、LP(ランディングページ)作成にも最適。
グーペ(Goope) 店舗のホームページ向けの機能が豊富。
飲食店や物販店はもちろん、習い事教室やフリーランスのホームページにも最適。
とりあえずHP クオリティの高いテンプレートが豊富で、とにかく簡単にホームページを作れる。
ホームページ作成サービスで挫折した経験のある人でも大丈夫。

利用するホームページ作成サービスが決まったら申し込んでください。

もし比較して迷った場合は、ジンドゥーを選んでおけば大丈夫です。

【step3】サイト名を決めてドメインを取得する

サイト名を決めて、独自ドメインを取得します。

ホームページを公開するにはドメインが必要

ホームページをインターネット上に公開するにはドメインが必要です。
ドメインとは「インターネットの世界での住所を分かりやすくしたもの」で、当サイトであれば「hp-labo.com」がドメインです。

ホームページ作成サービスによっては、無料で付与される初期ドメインがあります。
しかし、初期ドメインは「〇〇〇.jimdo.com」のような形でホームページ作成サービス名が含まれえるので、独自ドメインではありません。

初期ドメインでもホームページを公開できますが、ビジネス利用には向いていません。
そこで、お名前.comなどのドメイン取得サービスにて独自ドメインを取得して使うことをオススメします。

ドメインを取得するためにサイト名を決める

ドメインを取得するためには、まずサイト名を決める必要があります。
なぜかと言うと、サイト名がドメイン名に直結する場合が多いからです。

とは言え、会社や店舗などのホームページであれば、社名や屋号がそのままサイト名であることが多いので考えるまでもないでしょう。

ただし、社名や屋号とは別でサイト名をつける場合もあります。
例えば以下のようなケースです。

  • 1つの商品やサービスの専門サイト、またはキャンペーンサイトを作成する。
  • 社名のままだと堅苦しいので、親しみを持ってもらえて分かりやすいサイト名をつける。

詳しくは『【ドメイン名の決め方】サイト名を決めてドメインを取得しよう』のページで解説していますが、サイト名を考えるときは、以下について考慮することがオススメです。

  • ホームページの内容がイメージできる名前
  • 他のホームページとかぶらない名前
  • 覚えやすく親しみを持ってもらえる名前
  • サイト名で検索したときに検索結果に表示される他のサイトの印象

【step4】作るページの構成を決める

ホームページ作成サービスを申し込んで、独自ドメインを取得したら、いよいよ作成開始です。
しかし、いきなり作成作業に取り掛かってはいけません。

必ず作成作業の前にページ構成を決める

ホームページ作成を実際に始めるときの第一歩は「作成するページを決める」ことです。
いきなり作成作業を始めるのではなく、まずはページ構成を決めましょう。

行きあたりばったりで作成を進めていると、以下のようなデメリットがあります。

  • 完成までに二度手間三度手間となり、無駄に労力を掛けることになってしまう。
  • 情報がゴチャゴチャしていて、解りにくいホームページになってしまう。

逆に、ページ構成を決めずに作成開始するメリットは何もありません。

ページ構成を決める手順

ページ構成を決める手順は以下の通りです。

  1. 同業他社のホームページを調査する
  2. 必要なページをリストアップする
  3. リストアップしたページの取捨選択をする
  4. 取捨選択して残ったページをカテゴリー別に分類する
  5. 分類したページの階層を考えてサイトマップを作成する

1. 同業他社のホームページを調査する

何もないところで考えていても思いつかなかったり、時間が掛かってしまいます。
そこで、同業他社のホームページを参考にすることがオススメです。

自分一人で考えていても思いつかなかったようなページを、同業他社のホームページで発見できる可能性があります。

2. 作成候補のページをリストアップする

作成候補のページを、思いつくだけリストアップします。
あとで取捨選択するので、今の段階では「要る」「要らない」は深く考えなくて大丈夫です。

3. リストアップしたページの取捨選択をする

リストアップしたページの中で、「よく考えたら要らないな」というページを消してください。
また、リストアップしたページの中で、1つのページにまとめた方が良いページがあれば、まとめてしまいましょう。

4. 取捨選択して残ったページをカテゴリー別に分類する

取捨選択した結果、残ったページをカテゴリー別に分類します。
例えば、「募集要項」「ある社員の一日」「先輩社員インタビュー」「応募フォーム」は同じ「採用情報」というカテゴリーにまとめられます。

なお、カテゴリー別に分類するほどページ数がない場合は、この作業は不要です。

5. 分類したページの階層を考えてサイトマップを作成する

カテゴリー別に分類できたページは、階層を考えてサイトマップにしましょう。

階層はトップページを起点としたページの上下関係のようなもので、サイトマップはトップページを頂点としたツリー構造で表されます。

サイトマップが完成すれば、ページ構成を決める作業は終わりです。

【step5】トップページを作る

ホームページはトップページと下層ページ(トップページ以外の中のページ)に分けることができ、通常はトップページから作り始めます。

トップページの3つの役割

ホームページの中で重要な部分であるトップページには、以下の役割があります。

  • 「目的のホームページかどうか」を直感的に判断させる
  • ユーザーが必要とする情報へスムーズにたどり着けるようにする
  • お知らせなどの情報を目立つようにして周知させる

「目的のホームページかどうか」を直感的に判断させる

ユーザーが最初に訪れることが一番多いページであるトップページは、「このホームページをこのまま閲覧し続けるかどうか」判断される、勝負の場でもあります。
直感的に「探していたのはこのホームページだ!」と思ってもらえるように、ファーストビューを意識して、キャッチフレーズや画像を上手く使うと良いでしょう。

ユーザーが必要とする情報へスムーズにたどり着けるようにする

ユーザーが本当に見たい情報は、下層ページ(トップページ以外のページ)にあることが多いです。
ユーザーが求めているページへスムーズに誘導できるように、トップページの構成を考えましょう。

お知らせなどの情報を目立つようにして周知させる

ユーザーが知りたい、時事性のある情報を周知させることもトップページの役割です。
例えば「お知らせ」「イベント情報」「キャンペーン情報」「最新の商品情報」などです。

分かりやすいトップページを心がけることが大切

ホームページを訪れたユーザーにとって大事なことは、自分が知りたい情報を得ることができるかどうかであり、カッコいいかどうかではありません。
上記で説明した「トップページの3つの役割」を果たせるトップページであることを重視しましょう。

とは言え、一定以上のデザインクオリティは大事です。
めちゃめちゃカッコいいホームページである必要はないですが、「ダサくはない」レベルはキープしましょう。

ホームページ作成サービスを利用する場合は、プロがデザインしたテンプレートを使えるので、その点は心配不要です。

【step6】下層ページを作る

トップページが作れたら、次は下層ページ(トップページ以外のページ)を作って行きます。

下層ページを作る際に、行き当たりばったりで作っていると効率が悪いですし、まとまりのないページになってしまいます。
そのため、以下の手順で骨組みから作って行くことをオススメします。

ホームページに載せる原稿を作成する

ホームページに載せる原稿を作成しましょう。
Wordなどに書き出しても良いですし、ホームページ作成サービス上で直接、書き出しても大丈夫です。
あなたがしやすい方法を選んでください。

以下の流れで順序立てて進めて行くと、原稿作成がスムーズにできます。

  1. 各ページに載せる内容を大まかに書き出す
  2. 大見出し・中見出しを決める
  3. 文章を書く
  4. 文章を読み返して修正する

1. 各ページに載せる内容を大まかに書き出す

ページごとに、載せる内容を大まかに書き出してください。
この段階では「サービス内容」「料金案内」などキーワードの羅列で大丈夫です。

2. 大見出し・中見出しを決める

各ページに載せる「大見出し」、そして必要に応じて「中見出し」「小見出し」を決めてください。
「大見出し」で区切られる原稿量が多い場合は、「中見出し」「小見出し」を使って小分けすると読みやすくなります。

見出しを先に決めることでホームページ全体の骨格が見えるので、このあとの文章を書く作業がスムーズに進みます。

3. 文章を書く

それぞれの見出しの下に入れる文章を書きます。

この段階では完璧なな100点満点の文章を目指さず、50点を取るつもりで書いてください。
全体を書き終えてから見ないと気づかないことも多いので、まずは一通り書き終えることが優先です。

4. 文章を読み返して修正する

全体の文章を読み返して、修正をしてください。
この段階でも、100点満点を目指す必要はなく、80点位で大丈夫です。

ホームページはチラシなどの紙媒体と違い、完成後も何度でも修正できるので、ひとまず完成させて公開してから随時修正して行きましょう。

ホームページに載せる画像を用意する

文章ばかりのホームページでは、読んでもらいにくくなるので、適度に画像も載せます。
ホームページに載せる画像は、文章と同じくらい重要な要素です。

ホームページでの画像の役割

ホームページでの画像の役割は、主に以下の3つです。

  • ユーザーにイメージを正確に伝える
  • 文章での説明を補い、伝わるようにする
  • 文章をたくさん読んでもらえるようにする
ユーザーにイメージを正確に伝える

例えば、商品などの外観を説明したいときに、文章のみで正確に伝えるには限界がありますが、商品写真を見てもらえれば正確に伝えることができます。

画像があれば、文章で長々と説明しなくても一瞬で伝えることができるので、画像を上手く使えるとユーザーに親切なホームページになります。

文章での説明を補い、伝わるようにする

上記の役割に近いですが、文章での説明のみでは伝わりにくいことを補い、分かりやすく伝える役割もあります。
例えば「サービスの流れ」「相関図」などは、文章の説明だけでは頭で整理しにくいですが、図で示すことで明確にできます。

文章をたくさん読んでもらえるようにする

ホームページ上の文章は、本や雑誌などの印刷物よりも、長く読んでもらえない傾向があります。
そこで、途中で画像を配置させておくことで、ユーザーの集中力を切らさないようにする効果が期待できます。

用意した原稿と画像を載せていく

原稿と画像が用意できたら、ホームページ作成サービスの管理画面から各ページに載せて行きます。

この段階では、とにかく一通りホームページ全体のページを一旦完成させることに集中してください。
このあとのステップで、全体を見直して修正すれば良いので、完全な状態を目指さなくて大丈夫です。

【step7】ホームページ全体を確認して公開する

一旦、すべてのページができあがったら、ホームページ全体の見直しをします。

以下のポイントに気をつけて確認し、必要に応じて修正してください。

  • 読みにくい文章や、意図が伝わりにくい文章になっていないか?
  • 載せている内容の過不足がないか?
  • 電話番号や住所、金額などの誤りはないか?
  • 画像を載せた方が分かりやすくなったり、見やすくなる箇所はないか?
  • お問い合わせフォームを設置している場合、正しく送信・受信ができるか?

すべての確認と修正が終わりましたら、ホームページを公開してください。

ホームページはいつでもすぐに変更できるので、運営して行く中で随時、修正して行きましょう。

初心者のホームページ自作手順 まとめ

今回は、初心者のホームページ自作手順について徹底解説しました。

初めてホームページ作成をする人は、まず大まかに全体の流れを知ることが大切です。
まずは、なんとなく良いので全体のイメージができるだけでも気が楽になると思います。

このページを読んで全体を知った後は、ぜひ関連記事も読んでみてください。

このページのトップに戻る