【2024年2月29日更新】より理解が深まるように、関連記事を追加しました。

この記事のレベル

初心者	（4.0）
重要度	（3.0）
難しさ	（2.0）

こんにちは、編集長のカワウソです！

当メディアでは、会社のホームページを作るために役立つ記事を多く取り揃えております。

おかげさまで、2021年10月の立ち上げから2年以上が経過（2024年2月時点）し、記事本数も150を超えるようになりました。

しかし記事本数が増えたということもあり、なかには「どれから読めばよいのか分からない……」と、悩んでしまう方もいらっしゃるかもしれません。

そこで今回は、ホームページ制作の工程ごとに「主要な記事」を、この1記事にまとめました！

この記事の役割は、当メディア全体の「インフォメーション（案内所）」。

上から順に専門記事（関連記事）を読んでいけば、確実にホームページ制作の知識が増えますので、時間を見てインプットしていただければ嬉しいです。

※すでにホームページ制作に取り掛かっている方は、以下の目次を参考に、気になる工程からチェックしましょう。

それではどうぞ！

予備知識

まず、ホームページ制作の予備知識として、以下の3つをご案内します。

ホームページを持つ必要性を知ろう

なかには、「ホームページを作るかどうか、まだ決めていない……」という方もいらっしゃるのではないでしょうか。

もしかすると、ホームページを持つ必要性が、いまいちイメージできていないのかもしれません。

ホームページがない会社は、以下のようなデメリットがありますよ。

以下の記事では、ホームページを持つメリットも解説しているので、ぜひ参考にしてください。

ホームページの作り方を知ろう

次に、ホームページ制作を決心された方は、作り方を知っておきましょう。

結論ホームページは、自作および外注に関わらず、「WordPress（ワードプレス）」という無料のシステムで作るのがおすすめです。

詳しくは、以下の記事で解説しています。

以下の記事では、WordPressのメリットを詳しく解説していますよ。

テーマやプラグインについては、以下の記事を参考にしてください。

ホームページ制作の費用相場を知ろう

ホームページの作り方を知っても、「いくらぐらいかかるのか」が分からなければ、次に進めないですよね。

WordPressでホームページを自作する場合は、月額1,000円程度から可能です。

詳しくは、以下の記事で解説しています。

Web制作会社に外注する場合の費用相場は、作るホームページの規模（ページ数など）によって異なります。

目安の金額は、以下のとおりです。

詳しくは、以下の記事で解説しています。

企画・設計

ホームページの作り方や費用感のイメージが持てたら、企画・設計に入っていきましょう。

ここでは、以下の3つをご案内します。

ホームページの目的と種類を決めよう

ホームページと一口に言っても、いくつか種類があります。

目的によって、作るホームページの種類も異なるので、事前に決めておきましょう。

ホームページの種類	目的
コーポレートサイト	会社のことを知ってもらう
ブランドサイト	ブランドのことを知ってもら ブランドの価値や信頼性を伝える
サービスサイト	サービスのことを知ってもらう サービスを申し込んでもらう
ECサイト	商品を購入してもらう
リクルートサイト （採用サイト）	人材を獲得する
オウンドメディア	ユーザーとの接触機会を増やす 自社の商品やサービスをユーザーに理解してもらう
LP （ランディングページ）	Web広告経由のコンバージョン数を最大化させる

詳しくは、以下の記事で解説しています。

なお創業期の場合は、まず「自社のことを知ってもらう」ための「コーポレートサイト」を作るのが一般的です。
詳しくは、以下の記事で解説しています。

参考になるホームページを探そう

ホームぺージを作るにも、完成後のイメージが何もない状態だと、なかなか前に進まないですよね。

まず、参考になるホームページを探しましょう。

参考のホームページ探しは、自作する方はもちろん、Web制作会社に外注する方にもおすすめ。
理想のイメージを言葉だけで伝えるよりも、参考のホームページを提示したほうが、自社（発注者）とWeb制作会社（受注者）の間で共通認識を持ちやすいです。

企業のホームページが一覧で表示される「ギャラリーサイト」なら、効率的に探せるでしょう。

詳しくは、以下の記事で解説しています。

そのほか、以下の記事も参考にしてください。

▼リクルートサイトを作る方向け▼

▼業界・業種別▼

ホームページの構成を練ろう

制作作業に入る前に、ある程度ホームページの構成を練っておきましょう。

ホームページの構成とは、ページの内容、数、関係性などのことです。

ホームページは、階層構造で作るのが基本。
「サイトマップ」と呼ばれるホームページの構成図を用いれば、頭の中のイメージを視覚化できますよ。

詳しくは、以下の記事で解説しています。

なお、Web制作会社に外注する場合は、ホームページの規模（ページ数など）によって見積もり金額や納期は異なります。

だいたいの内容でもよいので、あらかじめ自社でホームページの構成を練っておけば、より実際に近い内容の見積もりを提出してもらえるでしょう。

ページ数ごとの費用や納期の相場は、以下の記事で解説しています。

【外注する方向け】Web制作会社の選定

こちらはWeb制作会社に外注する方向けの内容です。

前項を参考に、最低限の企画・設計ができたら、Web制作会社の選定に入りましょう。

Web制作会社を選ぶときのポイントや注意点は、以下のとおりです。

詳しくは、以下の記事で解説しています。

念のため、以下の関連記事も再度ご案内しておきます。

Web制作会社選びなら「ホームページ制作相談」がおすすめ

「自社だけでWeb制作会社を選ぶのは不安……」という方は、弊社『エックスサーバー』の「ホームページ制作相談」がおすすめです。

ホームページ制作相談

専門のコンサルタントが「目的」「予算」「納期」などを事前にヒアリングしたうえで、お客様に合うWeb制作会社を厳選して紹介します。

プロに相談すれば、初めての方でも自社に最適なWeb制作会社が簡単に見つかります。

弊社『エックスサーバー』のご契約者様向けのサービスではあるものの、ご契約前にも相談していただくことが可能ですので、ぜひお気軽にご利用ください。

環境構築

ここでは、ホームページの環境構築に役立つ記事をご案内します。

ホームページを自作する方も、外注する方も必要なので要チェックです。

サーバーを契約しよう

ホームページには、データを保管するための「サーバー」が必要。
ホームページを「家」に見立てた場合、サーバーは「土地」にあたります。

サーバーは自社で構築できるものの、膨大な費用がかかるため、「レンタルサーバー」を利用するのが一般的です。

詳しくは、以下の記事で解説しています。

おすすめはエックスサーバー

おすすめは、弊社が提供するレンタルサーバーの『エックスサーバー』です。

『エックスサーバー』は、国内シェアNo.1（ 2024年10月時点、W3Techs 調べ。）のレンタルサーバーであり、21万社の導入実績があります。

以下の記事で、WordPressを使用する場合における『エックスサーバー』の魅力をご紹介しておりますので、ぜひチェックしてみてください。

ドメインを取得しよう

ホームページにアクセスするには、「ドメイン」が必要です。
ホームページを「家」に見立てた場合、ドメインは「住所」にあたります。

このメディアの場合、URL（https://www.xserver.ne.jp/bizhp/）のうち、「xserver.ne.jp」がドメインにあたります。

ドメインには、「独自ドメイン」と「共有ドメイン」の2種類があり、それぞれにメリットとデメリットがあります。

会社のホームぺージであれば、信頼度が高い独自ドメインを選びましょう。

さらに独自ドメインは、以下の3つから選ぶのがおすすめですよ。

これらのドメインは上場企業などにも利用されており、一般的に認知度が高いです。

なお、独自ドメインはレンタルサーバーで取得するのがおすすめ。
申し込みが1社で済むのと、更新や決済などの管理がまとめてできるメリットがあります。

ドメインについては、以下の記事で詳しく解説しています。

WordPressをインストールしよう

WordPressは、サーバーにインストールして使います。

WordPressは、世界シェアNo.1のCMSのため、ほとんどのレンタルサーバーが「WordPress簡単インストール機能」を用意していますよ。

▲出典：W3 Techs「Usage statistics of content management systems」

※上記は、2024年2月時点のデータです。

同機能を使えば、レンタルサーバーのサーバーパネル（管理画面）から、簡単にWordPressをインストールできます。

エックスサーバーの「WordPressクイックスタート」なら10分で完了

弊社『エックスサーバー』の「WordPressクイックスタート」なら、レンタルサーバーに申し込むだけで、WordPressのインストールが自動的に完了します。

つまり、環境構築にかかる時間を大幅に短縮できるのです。

本来、WordPressでホームページを作るには、以下7つの手順が必要になります。

「WordPressクイックスタート」なら、「①～⑤」の手順がまとめて「たった10分」で完了しますよ。※「⑥WordPressの初期設定」の一部も完了。

⑤でインストール可能なテーマについては、のちほど紹介しますね。

「WordPressクイックスタート」の利用方法は、以下の記事で詳しく解説しています。

テーマをインストールしよう

次に、WordPressにテーマをインストールしましょう。

以下の記事で、おすすめのテーマを紹介しています。

なお『エックスサーバー』には、「WordPressテーマインストール機能」があります。

以下の人気テーマを、公式サイトからわざわざダウンロードすることなく、直接WordPressにインストールすることが可能です。

これらは、前項でご紹介した「WordPressクイックスタート」や「WordPress簡単インストール」のご利用時に、希望のテーマを選択するだけで簡単にWordPressにインストールできます。

セキュリティ対策をしよう

ホームページには、最低限のセキュリティ対策が必要です。

セキュリティ対策が施されていないホームページは、以下のようなリスクが高くなります。

とくに、WordPressは世界シェアNo.1のCMSのため、悪意ある第三者から狙われやすいと言われています。

利用者が多いCMSを狙ったほうが、攻撃成功率が上がるためです。

ホームページ開設時は、最低限以下のセキュリティ対策を施しましょう。

詳しくは、以下の記事で解説しています。

なお、WordPressの初期設定については、以下の記事で解説しています。

制作

ホームページに必要な環境が用意できたら、いよいよ制作に入っていきましょう。

ホームページを作っていこう

当メディアでは、WordPressのテーマ『Lightning（ライトニング）』で、ホームページを作る手順を全12回に分けて解説しています。

『Lightning』は、有効インストール数90,000以上の信頼と実績がある、ビジネス向けホームページテーマです。

「Lightning G3 クイックスタート」を使えば、下記のデモサイトを編集する形で簡単にホームページが作れます。

▲出典：Lightning

実際の制作手順は、以下の記事を参考にしてください。

なお、WordPressの管理画面の基本操作やブロックエディタの使い方は、以下の記事でも解説しているので、あわせてチェックしてみてください。

デザイン時に役立つ記事

当メディアでは、ホームページのデザインに役立つ記事を多くご用意しています。

ぜひデザインの参考にしてください。

UI/UX

UI（ユーザーインターフェース）とは、ホームページ内で閲覧する、もしくは操作する要素のことです。

そしてUX（ユーザーエクスペリエンス）とは、ホームページを利用したときのユーザー体験（得られる感情）のこと。

UI/UXは、ホームページの成果をあげるために重要な役割を持っており、デザインについて考えるうえで理解しておくと役立ちますよ。

詳しくは、以下の記事で解説しています。これから紹介する各項目にもかかわるため、ぜひ参考にしてください。

ロゴ

ホームページにロゴを載せれば、自社のイメージをユーザーに印象付けられます。

もし、まだロゴを作っていない場合は、以下のポイントを参考にしてください。

詳しくは、以下の記事で解説しています。

レイアウト

レイアウトとは、ヘッダー、ナビゲーション、コンテンツ、フッターなどのパーツを組み合わせたときにできる配置パターンのこと。

レイアウトは、いわば「デザインの骨格」。
もし、デザインの途中でレイアウトを変更する必要が出たら、作業を大幅に巻き戻さなければなりません。

そのため、なるべく早い段階でレイアウトを決定しましょう。

以下、レイアウトの代表例です。

詳しくは、以下の記事で解説しています。

ヘッダー

ヘッダーは、ホームページのパーツのなかでも重要。
主に、以下3つの理由があります。

詳しくは、以下の記事で解説しています。
デザイン事例もパソコンとスマホ別に紹介しているので、ぜひ参考にしてください。

グローバルナビゲーション

グローバルナビゲーションとは、ホームページの「全ページ内に共通して設置されたリンク」のこと。役割は「ユーザーを目的のページに案内すること」です。

グローバルナビゲーションを作成するポイントは、以下のとおり。

詳しくは、以下の記事で解説しています。
デザイン事例もパソコンとスマホ別に紹介しているので、ぜひ参考にしてください。

また、グローバルナビゲーションによく用いられる「メガメニュー」については、以下の記事で詳しく解説しています。

スマホサイトのグローバルナビゲーションによく使われる「ハンバーガーメニュー」については、以下の記事を参考にしてください。

以下の記事では、グローバルナビゲーションをはじめ、様々なシーンで活用できる「アコーディオンメニュー」について解説しています。

パンくずリスト

パンくずリストは、ホームページを訪れたユーザーが、「現在どこのページにアクセスしているか」を知るための「道しるべ」です。

パンくずリストを設置するメリットは、主に以下の2つがあります。

詳しくは、以下の記事で解説しています。
パンくずリストの種類や設置方法も紹介しているので、参考にしてください。

サイドバー（サイドカラム）

ホームページに「マルチカラムレイアウト」を採用するなら、サイドバーにどんな機能を持たせるか悩んでしまいますよね。※サイドバーは、サイドカラムやサイドメニューとも呼ばれます。

以下の記事では、機能別にサイドバーのデザイン事例を紹介しています。

「パソコンのサイドバーをスマホではどう表示させるのか」、についても解説しているので、ぜひチェックしてみてください。

フッター

フッターは、ページを下部までスクロールしないと見えないパーツ。
しかし、フッターを軽視してはいけません。

フッターには、以下の役割がありますよ。

詳しくは、以下の記事で解説しています。
デザイン事例もパソコンとスマホ別に紹介しているので、ぜひ参考にしてください。

配色

配色によって、ホームページから受けるイメージは大きく異なります。

ホームページの配色に悩んだら、以下3つのコツを参考にするとよいでしょう。

詳しくは、以下の記事で解説しています。
おすすめの配色ツールも紹介しているので、ぜひ参考にしてください。

画像

視覚的な情報を伝えることができる画像は、デザインのなかでも重要な要素の一つです。

ただ初心者の方であれば、「どうやって画像を作ればよいのか分からない……」という方も多いのではないでしょうか。

以下の記事では、ホームページに掲載する画像について、基礎知識や作り方などを解説しています。

また以下の記事では、おすすめの画像編集ソフトを紹介していますよ。

そのほか画像制作のときは、無料で使える「フリー素材サイト」が役に立ちます。

ただし、フリーと言っても自由に使ってよいわけではありません。
フリー素材サイトの利用規約を確認してから、使用しましょう。

詳しくは、以下の記事で解説しています。

ボタン

ホームページのボタンの役割は、ユーザーを特定の行動に誘導すること。

ボタンの設置で大切なポイントは、以下の3つです。

詳しくは、以下の記事で解説しています。
ボタンのクリックを促す「マイクロコピー」にも触れているので、ぜひチェックしてみてください。

カルーセル（スライダー）

複数のコンテンツを横にスライドさせて、メインの表示を切り替えられる仕組みを「カルーセル（スライダー）」と言います。

ホームページにカルーセルを導入するメリットは以下の3つです。

詳しくは、以下の記事で解説しています。
カルーセルの活用事例を紹介しているので、ぜひ参考にしてください。

アイコン

ここで言うアイコンとは、「ブラウザのブックマーク」や「スマホの検索結果」などに表示される、「ホームページのシンボル（象徴）」のこと。

必須ではないものの、アイコンを設置したほうが何かとメリットは多いです。

詳しくは、以下の記事で解説しています。

公開

ホームページ制作が完了したら、いよいよ公開しましょう。

公開手順は、ホームページの作り方によって異なります。

WordPressの方は、以下を参考にしてください。

CMSを使わず、HTMLやCSSなどで作られる方は、以下を参考にしてください。

運営管理

ホームページは、公開して終わりではありません。
適切に運営してこそ、目的を達成できます。

ホームページの運営に必要な業務は、以下のとおりです。

詳しくは、以下の記事で解説しています。

以下の記事では、ホームページを更新しないと起こりうるリスクについて解説しているので、併せてチェックしてみてください。

「アクセス解析って何？」という方は、以下の記事をおすすめします。

そのほかホームページの運営費用について気になる方は、以下の記事を参考にしてください。

集客

「せっかくホームページを作ったのだから集客したい」と考える方は、多いのではないでしょうか。

ホームページの集客方法は、じつに多種多様です。

詳しくは、以下の記事で解説しています。

いくつかは、別途専門記事もご用意しています。
併せて参考にしてみてください。

まとめ

この記事では、当メディアの主要記事を「ホームページ制作の工程」ごとにまとめてご案内しました。

ご自身の悩みを解決できる記事は見つかりましたか？

もし見つからなかった場合は、私カワウソのTwitter（ @kawauso_xsv ）にご連絡いただけると幸いです。今後の記事制作の参考にさせていただきます。

それでは素敵なホームページの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※ 2024年10月時点、W3Techs調べ。

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！