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

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

初心者がホームページを自作するのに一番簡単な方法は「ホームページ作成サービス」を利用する方法です。
専門知識ゼロでも簡単に、そして月額千円位からの格安でホームページ作成ができます。

そこで本記事では、「ホームページ作成サービス」を利用した場合の流れについて解説します。

ホームページ自作の大まかな流れは、以下の通りです。

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

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

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

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

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

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

• HTMLとCSSで1から作成
• ホームページ作成ソフトを利用
• WordPressを利用
• ホームページ作成サービスを利用

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

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

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

HTMLとCSSで1から作成

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

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

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

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

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

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

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

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

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

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」などの「ドメイン取得サービス」にて取得してください。

なお、ホームページ作成サービスを利用する場合は、申込時や申込後の管理画面にて取得できることが多いです。

低価格で取得できる！ドメイン取得サービス【おすすめTOP5】

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

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

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

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

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

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

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

ドメイン名の決め方は!? サイト名の決め方～ドメイン取得までを解説

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

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

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

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

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

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

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

ページ構成を決める手順

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

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

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

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

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

逆に、同業他社のホームページにはないけど、あった方が良いページを思いつく切っ掛けになるかもしれません。

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

作成候補のページを、思いつくだけリストアップします。
リストアップは、パソコンやスマホでも良いですし、紙に書き出しても良いです。

あとで取捨選択するので、この段階では「要る」「要らない」は深く考えなくて大丈夫です。

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

リストアップしたページの中で「よく考えたら要らない」というページを消してください。
今すぐは要らない、もしくは作れないけど先々は作りたいページも一旦、消しておきましょう。

また、リストアップしたページの中で、1つのページにまとめた方が良いページがあれば、まとめてしまいましょう。

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

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

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

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

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

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

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

ホームページのページ構成の決め方【よくあるページも紹介】

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

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

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

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

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

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

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

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

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

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

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

特に、ホームページを訪れるのが2回目以降のユーザーは、新しい情報を見にきているケースも少なくないです。

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

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

とは言え、一定以上のデザインクオリティは大切です。
飛び抜けてカッコいいホームページである必要はないですが、ダサくはなく信頼性を確保できるレベルはキープしましょう。

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

トップページの役割とは!? トップページのコンテンツ例も紹介

【step6】下層ページを作る

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

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

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

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

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

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

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

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

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

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

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

3. 文章を書く

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

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

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

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

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

ホームページの原稿の作り方【4ステップで原稿作成完了】

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

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

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

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

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

ユーザーにイメージを正確に伝える

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

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

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

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

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

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

ホームページ作成で使う画像の役割と種類

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

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

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

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

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

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

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

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

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

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

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

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

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