ホームページの作り方【初心者でも自分で作れるよう手順を解説】

Web集客
  • ホームページを自作したいから作り方を知りたい。
  • ホームページ作成ツールやWebツールを使えば作れるみたいたけど、具体的にどうすればいいのだろう。
  • 初心者でも作れるよう分かりやすく教えて欲しいよ。

この記事では、こういった疑問にお答えします。

 

本記事の内容

  • ホームページの作り方【全体像】
  • ホームページを作る時の注意点は2つ
  • ホームページを作る手順

 

なお、本記事を書いている筆者は、ホームページを自分で制作できることはもちろん、業としてホームページ制作を請負うこともあります。

また、2018年にはホームページの作り方をレクチャーするワークショップを開催した経験もありますので、全くの素人ではありません。

こういった経験を元に、この記事では、ホームページの作り方や、注意点を解説します。

ホームぺージを自分で作りたいけど、作り方が分からないという方は、ぜひ参考にして下さい。

スポンサーリンク

ホームページの作り方【全体像】

ホームページの作り方を解説する前に、ホームページを作る全体像を解説します。

  • 手順①:必要なページをピックアップする
  • 手順②:サイトマップを考える(ページ構成)
  • 手順③:トップページのイメージを作る
  • 手順④:ドメイン名を考える
  • 手順⑤:ホームページを作るツールを選ぶ
  • 手順⑥:ページを作る

上記のとおりで、全体的な手順は6つです。

 

各手順の大まかなイメージは次のとおりです。

  • 手順①~③ → ホームページの設計図を作る作業
  • 手順④~⑥ → ホームぺージを制作する作業

最初に設計図を作っておくと、後の作業はスムーズですので、最初に、作ろうとするホームページのイメージを作っておきましょう。

 

ホームページを作る時の注意点は2つ

ホームページを作る時の注意点は2つあります。

  • 設計図を考えずに作ろうとしない
  • デザインにこだわらない

上記のとおりです。

設計図を考えずに作ろうとしない

ホームページの設計図を考えずにいきなりホームぺージ作りに着手すると、高確率で失敗します。

思い付きでページを作ったりメニュー項目を作ると、作業中に「こうした方が良いのでは?」、「このメニュー項目はいらないのでは?」などと色々考えるようになり、無駄な修正作業が発生します。

修正できればまだマシですが、途中で訳が分からなくなることもあります。

ちなみに、この記事を書いている筆者が初めてホームページを自作した時は、設計図を考えずに思い付きで作りましたが、やはり、途中で訳が分からなくなり、かえって時間がかかってしまいました。

 

思いつきで作ると遠回りになりますので、最初に設計図を作ってからホームページを作ると良いです。

デザインにこだわらない

ホームページを初めて作る初心者がイメージ通りのホームページを作ることはほぼ不可能です。

デザインを学ばない限り、素人っぽいデザインから抜け出すのは非常に難しいので、デザインにこだわるのは止めた方がよいです。

デザインにこだわりだすとキリがありません。デザインに時間を割かれ、他の事が手につかなくなりますので、どうしてもこだわりたければ、デザインだけ外注するか、業者に依頼した方がよいです。

 

ホームページを作る手順

それでは、ホームページを作る手順を解説します。

  • 手順①:必要なページをピックアップする
  • 手順②:サイトマップを考える(ページ構成)
  • 手順③:トップページの構成を考える
  • 手順④:ドメイン名を考える
  • 手順⑤:ホームページを作るツールを選ぶ
  • 手順⑥:ページを作る

上記のとおりです。

手順①:必要なページをピックアップする

最初に、ホームページに必要なページをピックアップしましょう。

 

例えば、飲食店のホームページを作る場合であれば、最低限、下記ページが必要になると思います。

  • メニュー(ランチ・ディナー・ドリンクメニュー)
  • お店の概要
  • アクセス情報
  • お問い合せフォーム

 

製造業の会社であれば、下記ページが必要になると思います。

  • 商品・製品ラインナップ(個別の商品情報)
  • 設備の案内
  • 会社概要
  • お問い合わせフォーム

 

このように、ホームページに必要なページをどんどんピックアップしましょう。

思いつかないときは競合他社のホームページを参考にすればOK

必要なページが思い浮かばない時は、競合他社のホームページを参考に必要なページをピックアップしましょう。

競合他社のホームページを3〜5つぐらい参考にすれば、必要なページが分かると思いますので、どんどん参考にしましょう。

手順②:サイトマップを考える(ページ構成)

必要なページをピックアップしたら、サイトマップを考えましょう。

 

サイトマップとはホームページの構成のことで、下図のようなものとなります。

 

ちなみに、サイトマップの具体的な作り方は「【Webサイト】ページ構成(サイトマップ)の考え方を解説【サンプルあり】」という記事で解説していますので、是非どうぞ。

手順③:トップページの構成を考える

サイトマップを作ったら、トップページの構成を考えましょう。

 

トップページはホームページの顔です。ホームページに訪問したユーザーに、どんな情報をアピールしたいか、構成を考えましょう。

 

ちなみに、ホームぺージ制作会社は「ワイヤーフレーム」と呼ばれるイメージ図を作ることが一般的です。

ツールを使えば簡単に作れますので、ワイヤーフレームが作れるツールを使って、トップページの構成をざっくりと考えましょう。

 

なお、ワイヤーフレームが作れるツールをTechAcademyマガジンさんが「初心者でも使える6つ厳選!無料でワイヤーフレームを作成できるツール」という記事で紹介されていますので、是非参考にして下さい。

 

ツールを使って作るのは面倒という方は、手書きでもOKです。

実際、筆者が自分のホームぺージを作る時は、大きめのノートやいらない紙を使って、適当に書いてます。

自分が分かれば良いので、ツールを使うのが面倒な方は手書きで構成を書きましょう。

構成を考える時の注意点

トップページの構成を考える時は、多くの情報を見せようとするのは止めましょう。

色々な商品やサービスを扱っていると、色々見てもらいたい・知ってもらいたいという欲が出てしまいがちですが、情報を詰め込み過ぎると分かりにくくなり、何のホームぺージなのかが分かり難くなります。

 

トップページにはあまり多くの情報を掲載しないようにしましょう(3つぐらいに絞り込むのがおすすめです)。

手順④:ドメイン名を決める

ホームぺージの設計図をあらかた作ったら、ホームページのドメイン名を決めましょう。

なお、ドメインの詳しい解説や取得方法は「独自ドメインの取得方法や基礎知識を解説【自分だけのサイトを作ろう】」という記事で解説してますので、是非どうぞ。

 

ドメイン名は早いもの勝ちです。

のんびり考えていると、先に取られてしまう可能性がありますので、あまり時間をかけずにさくっと考えましょう。

取れない事を考え、3つぐらい候補を考えておくと良いです。

手順⑤:ホームページを作るツールを選ぶ

ドメイン名を決めたら、ホームページを作るツールを選びましょう。

ちなみに、ホームページが作れるツールは3種類あります。

  • パソコンにインストールするソフトウェア
  • Webサービス
  • CMS(コンテンツマネジメントシステム)

上記の順に解説します。

パソコンにインストールするソフトウェア

ホームぺージを作成ソフトウェアは下記のとおりです。

  • ホームページビルダー

名前ぐらいは聞いた事があると思いますが、上記のソフトを使えばホームぺ―ジは作れます。

なお、ソフトで作成したホームページは、ご自身の手で、データをサーバーにアップロードする必要がありますので、上記ソフトと併せてレンタルサーバーを用意する必要があります。

Webサービス

ホームぺージが作れるWebサービスは次のとおりです。

いずれも直感的な操作で使えますので、初心者の方でも簡単にホームページが作れると思います。

CMS(コンテンツマネジメントシステム)

CMS(コンテンツマネジメントシステム)とは、ホームページを構成するテキストや画像、レイアウト、デザインなどを一元管理するシステムのことを言います。

代表的なCMSは次の2つです。

  • WordPress(ワードプレス)
  • Joomla!(ジュームラ)

なお、このサイトはWordPressで作られており、筆者が経営する会社のホームページは全てWordPressで作られてます。

どのツールでホームページを作るかは運用方法次第

どのツールでホームページを作るかは運用方法次第ですが、おすすめは下記2つです。

  • Webサービス:シンプルで使いやすい、テンプレートが多数用意されているので初心者でも簡単に作れる
  • CMS(WordPress):カスタマイズしやすい、SEOに有利

いずれもブログ感覚でページが作れるので、上記いずれかのツールがおすすめです。

 

なお、WordPressでホームページを作る方法を「【WordPress】企業サイトの作り方【図解入りで手順を解説】」という記事で解説していますので、是非どうぞ。

手順⑥:ページを作る

ホームページを作るツールを選んだら、手順②で作成した際プマップどおりにページを作りましょう。

ページを作ったら、手順③で作成したワイヤーフレームのイメージに近づくよう、トップページを作りましょう。

 

なお、トップページの画像選びに使えるサイトや、文字入れができるデザインツールを以下の記事で紹介していますので、是非どうぞ。

 

まとめ

以上、ホームページの作り方を解説しました。

手順に沿って進めれば、初心者でも自分で作れるようになると思いますので、ホームページを自分で作りたいという方は、是非参考にして下さい。

 

 

人気記事Web集客の基礎を徹底解説【目的やメリット・デメリット、注意点】

トップへ戻る
タイトルとURLをコピーしました