ホームページ作成の手順を5ステップで初心者にもわかりやすく解説

ホームページ作成の手順を5ステップで初心者にもわかりやすく解説

公開日:2024/6/27
 最終更新日:2024/6/27

「初めてホームページを作るけど失敗しないか不安」
「正しいホームページ作成手順が知りたい」

ホームページ作成を失敗しないためには、正しい手順に沿って進めていくのが重要です。
しかし、初めてホームページを作る方にとっては、何が正しいのか、どのように進めていけばいいのかわからないでしょう。

そこで今回は、初心者の方でもわかりやすいよう、ホームページ作成の手順を5ステップに分けてご紹介します。
本記事を参考にして、成果の出るホームページを作っていきましょう。

なお、ホームページ作成をご検討なら、Wepageをご検討ください。


01ステップ1:ホームページの企画

ステップ1:ホームページの企画

ホームページ作成を進める上で、何より重要なのは企画です。
企画がしっかりしていなければ、ホームページが曖昧なものになり、想定している成果や目的達成から程遠いデザイン・コンテンツに仕上がってしまいます。

ステップ1では、ホームページの企画をどのように決めていけばいいのかを詳しく解説します。

1-1.ホームページの目的の明確化

まずはホームページの目的を明確にする作業です。

  • なぜホームページ制作に至ったのか
  • ホームページを作成してどのようなことを達成したいのか

上記の部分を洗い出してみましょう。
ホームページの目的が明確になれば、デザイン・コンテンツが作成しやすくなります
複数人で作業を行う場合でも、目的が決まっているとズレが生じにくくなる点もメリットです。

ホームページの目的としては、以下のような例があります。

  • 新商品・新サービス提供にあたり認知度を向上させたい
  • 会社が存在することの証明や信頼感を与えるホームページを作りたい
  • 優秀な人材を採用したい

上記を参考にして、まずはホームページの目的を明確にしてみてください。

1-2.具体的な目標値やゴールを決定

目的が決まったら、具体的な目標値やゴールを決めましょう。
目標値やゴールを決めないと、ホームページ作成後の運用で指標を持てないので、本来の成果が出にくくなります。

例えば、ECサイト作成で購入割合を20%増やして売上アップを狙う、といったゴールを決めたとしましょう。
そうすると、現在の販売数および売上から逆算すれば具体的な目標値が出てくるはずです。

目標値はゴールに向けて細かく分けて設定したほうが、仮説・検証を繰り返しやすく、運用のモチベーション維持にもつながります。

1-3.ターゲットの決定

ホームページ作成の目的や目標を達成する上で、ターゲットの設定は欠かせない項目です。
ホームページに訪れる方が滞在および利用しやすいデザイン・コンテンツを設計すれば、自然と成果は出やすくなります。

ただし、ターゲットは抽象的ではなく、1人の人物像が浮かび上がるほど具体的でなければいけません。
ある1人の人物像まで具体的に設定することを「ペルソナ設定」と呼びます。

ペルソナ設定を行えば、ホームページに必要なデザイン・コンテンツが見えやすくなるはずです。
以下にペルソナ設定を行った・行っていないターゲットを記載するので見比べてみましょう。

名前 渋谷 太郎 -
年齢 36歳 30代
性別 男性 男性
職業 IT企業の部長 -
家族構成 3人家族 -
年収 600万円 600万円
趣味・嗜好 ・ネットサーフィン
・とにかく新しいものが好きで新作のガジェットが出るととことん調べて必要とあらば購入する
・新しいもの好き
1日の過ごし方 週に4〜5時間の残業あり、車勤務なので通勤中にニュースなどを聞いている -
ホームページに訪れるきっかけ 最新ガジェットを知りたいものの、いちいちメディアを探し回るのが面倒に感じてきたため、まとめメディアを知りたくて調べた 最新ガジェットのまとめメディアを知りたくて検索

上記のように、ペルソナを細部まで決めておくと、どのようなユーザーがホームページに訪れるのかが思い浮かびやすくなります。
その結果、ある特定のユーザー層に刺さるデザイン・コンテンツの提供ができ、成約や目標達成がしやすくなるでしょう。


02ステップ2:設計

ステップ2:設計

続いては、企画に沿ってホームページの設計を行う工程です。
このステップでホームページの必要な情報を集めておくと、後々の作業がスムーズになります。

では、どのような作業が必要になるのかを詳しくみていきましょう。

2-1.ホームページの構成を決める

どのようなホームページにするのか、全体の構成を決める作業をしていきましょう。
例えば、ホームページには以下のような種類があります。

  • コーポレートサイト
  • ECサイト
  • サービスサイト
  • プロモーションサイト
  • ブランドサイト
  • 採用サイト
  • オウンドメディア
  • LP(ランディングページ)

ホームページの種類を決めたら、続いて必要なコンテンツを決める作業です。
例えば、コーポレートサイトなら以下のようなコンテンツが必要になるでしょう。

  • 会社案概要
  • 業務内容
  • 製品・サービス情報
  • 代表挨拶
  • 社員の声
  • 採用情報
  • 問い合わせ

上記のように洗い出していくと、ホームページの全体像が見えてくるはずです。

ホームページの全体像を記してある情報をサイトマップと呼びます。
サイトマップがあるとホームページの概要がわかりやすくなり、必要なページやこの後のワイヤーフレーム制作の効率化にもつながります。

2-2.ホームページの構成を決める

ホームページの構成が決まったら、続いてページの構成を決めていく作業です。

各ページのデザインやレイアウトを具体的に書き出し、完成イメージ(ワイヤーフレーム)を作っておきましょう。
ページの構成がワイヤーフレームに書き起こされていると、複数の制作者がいてもイメージのズレが生じにくくなります。

しかしその後の作業中に必要な項目を追加していくと、想像していたデザイン・レイアウトとは異なってしまう場合がある点は注意しましょう。

2-3.必要なコンテンツを準備する

ホームページ・各ページの構成が決まったら、必要なコンテンツの準備です。

コンテンツに必要な情報を収集するために、何を行わなければならないかを決めておきます。
ここでいう必要なコンテンツは、ページの構成を決める段階で洗い出されているはずですので、このフェーズで考える必要はありません。

例えば、「社員の声」というページを作るとしたら、部署ごとの代表社員にインタビューをして、聞いた内容をまとめておく作業です。
社員の写真を撮影する必要もあるので、プロのカメラマンに依頼するのかも決めておくべきでしょう。

不足している情報がないかも含めてコンテンツの準備をしていけば、この後の作成段階で作業が止まることが少なくなります。


03ステップ3:作成

ステップ3:作成

構成および準備が整ったら、いよいよホームページを作成していくフェーズです。

HTML・CSSを使う、あるいはホームページ作成サービスを使うかなど、どのような作成方法を用いるのかを決めましょう。

その後は先に作成しているサイトマップ・ワイヤーフレームに沿って順次制作していきます。

3-1.デザインの作成

デザインの作成は、これまで作成したサイトマップ・ワイヤーフレームを元に、どのようにビジュアル面でターゲットに訴求するべきかを設計していく工程です。

そのためには、デザインをする際に細かなルールを定めておくと、作業が効率的に進められ品質も高いものが仕上がります。
例えば、以下のような項目をチェックしておきましょう。

  • ホームページ全体およびページ単体で統一感のあるデザインになっているか
  • 各コンテンツの配置は見やすいか
  • フォント・画像のサイズは適切か

ここでデザインの原案が完成するので、可能であればご自身だけでなく第三者に見てもらい、見やすさや配色などに問題がないか確認してください。

また、デザインのインスピレーションや細かなルールで悩んでいる方は、ギャラリーサイトからヒントを得てみるのもいいでしょう。

3-2.デザインを元にページを作成(コーディング)

デザインが決まったら、いよいよページ作成です。
ページ作成は、以下の3つから適切な方法を選択します。

  • HTML・CSSでコーディング
  • CMS(コンテンツマネジメントシステム)を使う
  • ホームページ作成ツールを使う

HTML・CSSは専門知識が必要になるものの、自由度が高く制作費用を最も抑えられる方法です。

CMSはある程度のHTML・CSS知識は必要ですが、カスタマイズがしやすく多くの方から支持を得ています。

ホームページ作成ツールは、専門知識が不要で最も簡単にホームページが作れます。
カスタマイズ性やオリジナリティには劣ってしまいますが、ツールによっては十分独自性のあるホームページに仕上げることが可能です。

上記をもとにして自社で適切な作成方法を選択し、サイトマップ・ワイヤーフレームに合わせてホームページを仕上げていきましょう。


04ステップ4:公開

ステップ4:公開

ホームページが完成したら、いよいよ公開のステップです。

ホームページは作成しただけでは、インターネットに表示されませんので、必ず公開作業を行ってください。
公開作業については、サーバードメインを用意し、問題なく表示されるかテストを実施します。

では、それぞれの工程について詳しく見ていきましょう。

4-1.サーバーを準備する

作成したホームページは、必ずサーバーを通してインターネットに表示されます。
ホームページの情報をサーバーへ格納し、ユーザー側から送られてくる指示によってプログラムが動き、ホームページが表示されるのが一連の流れです。

資本力があり管理が徹底できるなら、自社サーバーを用意しても問題ありませんが、基本的にはレンタルサーバーを利用します。

レンタルサーバーのおすすめについては、以下の記事で触れているのでチェックしてみてください。

イメージでいうと、サーバーはホームページが存在している土地です。
土地がなければ家であるホームページを建てることができません。
そのため、ホームページ作成を行う際は、サーバーおよび関連する設定は忘れずに行っておきましょう。

4-2.ドメインを設定する

サーバーが用意できたら、続いてドメインの設定です。
サーバーを土地、ホームページを家と表現した場合、ドメインは住所に該当します。

ホームページを公開する際は、サーバーとドメインをセットで設定しなくてはいけません。
ドメインは「○○.com」「○○.jp」といった文字列で、○○の部分は自由に入力できます。
ドメインの取得や移管については以下の記事で紹介しているので、あわせて読んでみてください。

ドメイン設定については、販売を行っている業者から購入し、その後サーバーと紐付けを行えば完了です。

4-3.テストを行う

サーバー・ドメインの設定が完了したら、動作検証やデバッグと呼ばれるテスト作業をします。
表示されているホームページが崩れていないか、システムを実装しているなら正常に動作するのかを確認してください。

丁寧に作業をしているつもりでも、実際に動かしてみると修正点が出てきてしまう可能性があります。
公開日を決めているのであれば、テストを行う期間を前もって設けておき、完璧な状態でホームページが公開できるよう調整しましょう。

テストでも問題なければ、公開~運用へとステップを進めましょう。


05ステップ5:運用

ステップ5:運用

ホームページの作成はもちろん重要ですが、どちらかというと公開後の運用のほうが成果に大きく関わってくるステップです。
そのため、ホームページの企画時にはどのように運用をしていくのか(自社で行うor外注)、どのくらいの頻度で更新するかも視野に入れましょう。

簡単な更新業務が多いなら、自社で行えるシステムでホームページ作成したほうが外注するよりもトータルコストを抑えられます。

また検索上位表示を狙う必要のあるホームページであった場合は、SEO施策を行わなくてはなりません。
自社でSEOに関する知識がない場合には、記事執筆のみ外注することも検討しておきましょう。

ホームページの運用については、以下の記事で解説しているので、気になる方はあわせて読んでみてください。


06ホームページ作成ならWepage

ホームページ作成に関する専門知識がないので、簡単に作れるサービスを利用したいと考えている方は、弊社が提供している「Wepage」がおすすめです。

Wepage

Wepageは見たままで編集操作ができる仕様なので、素早く簡単にホームページ作成ができます。
デザインおよび画像などの素材も豊富にご用意しておりますので、オリジナリティを出したい場合にも最適です。
また、スマートフォンからの操作も可能で、移動中やパソコンが使えないシーンでも気軽にホームページ制作・運用ができます。

Wepageでは無料プランもご用意しております。
この機会にぜひWepageを体験し、利用のしやすさや機能の充実さを実感してみてください。


07まとめ

今回はホームページ作成の手順を5ステップにわけて解説しました。

ホームページを作成する際は、いきなり作り始めるのではなく、必ず企画を行い、紙面やファイルで完成品を作ってから取り掛かるのが効率的です。

また、作成にあたって準備を徹底しておくのも、必要になってから揃えるよりもタイムパフォーマンスは高くなるでしょう。

ぜひ作成の手順を把握し、イメージ通りの素敵なホームページを完成させてみてください。


関連記事



― Let's Share! ―