【初心者向け】ホームページの作り方3つのパターン｜作成の流れ・選択のポイント

初めてホームページを作ってみたいと思っても「どこから手をつければいいのかわからない」という方は、本記事にて自分・自社は何をすればいいかを把握してください。

ホームページの作成方法は、作成者の知識やスキルの違いや、Webサイトが個人向けなのか、企業向けなのかといった目的の違いによっても選び方が異なります。

本記事では、目的にあわせて最適なホームページを作成して集客に活用できるよう、作り方のガイドをご紹介します。

CMSを活用したWEBサイト作成ガイド & CMS選定シート

Webサイトの作成に必要な機能を比較して最適なCMSを導入しましょう

• Webサイト構築方法別導入検討シート
• WordPress、WIX、Jimdo各システム機能比較表
• CMSサイト構築チェックシート

今すぐ無料ダウンロードする 詳しく見る

今すぐダウンロードする

全てのフィールドが必須です。

ダウンロードの準備ができました

下記のボタンよりダウンロードいただけます。

今すぐダウンロードする

ホームページを作るにあたって、まずはWebサイトの基礎を簡単に理解しておきましょう。

ホームページをインターネット上に表示させるためには、サーバーとドメインが必要です。この2つを最初に理解しておくことにより、ホームページの作り方がより理解しやすくなります。
 

サーバー

サーバーとは、ホームページのデータを保管する場所のことです。ユーザーがGoogle などのWebブラウザを使って検索した際に、サーバー上のデータを提供することで、ホームページが表示される仕組みになっています。

サーバーには無料のものと有料のものがあるため、その違いをあらかじめ把握しておきましょう。
 

無料サーバー

無料サーバーは、無料で利用できるレンタルサーバーもしくはホスティングサービスと、ホームページ作成ツールがセットになったものが一般的です。

無料で使用できるのがメリットである一方、多くの場合、データの保存容量や機能が制限されています。

また、無料ホスティングサービスを利用すると、広告が自動で表示されたり、商用利用ができなかったりすることもあるため、企業サイトの運営には向いていません。
 

有料サーバー

有料のサーバーの料金はさまざまで、安いサーバーでは月額100円ほどの少額から利用可能です。
有料サーバーには、次のような特徴があります。

• ホームページの表示速度が速い
• データの保存容量が大きい
• サポートが充実している

無料サーバーと比べて、表示速度だけでなく、容量やサポート面でもメリットが多いため、企業サイトであれば有料サーバーの利用が望ましいでしょう。

ホームページに必要なサーバーについてさらに詳しく知りたい方は、以下のコラムもあわせてご覧ください。

ドメイン

ドメインとは、インターネット上の住所のようなものです。

ドメインはホームページのURLの中で使われています。例えば、「https://www.hubspot.com」のドメインは「www.hubspot.com」です。

ドメインには、ユーザーが自分でドメインを決められる「独自ドメイン」と、決められた条件に基づいて使用する「共有ドメイン」があります。ドメインはサイトの信頼性などに大きく影響するため、特徴をしっかりと把握しておきましょう。
 

独自ドメイン

ユーザーが好きな文字列を指定できるドメインを「独自ドメイン」といいます。ドメイン部分にホームページの名前や企業名を入れておけば、認知度の向上につながります。

独自ドメインは有料である場合が多く、所有権は購入者にあるため、サーバーを変更しても手続きをすれば同一のドメインを使用し続けることが可能です。
 

独自ドメインの決め方のポイント

ドメインは、主にトップレベルドメインとセカンドレベルドメインに分けられます。

トップレベルドメインは、「https://www.hubspot.com」における「com」です。他に、日本のサイトであることを示す「jp」やカンパニーを示す「co.jp」などがあります。他にもたくさんの種類がありますが、企業サイトにおすすめなのはこの3つです。

セカンドレベルドメインには、上述のように企業名やブランド名、商品名などを入れるのがおすすめです。
 

無料ドメイン

レンタルサーバーやホームページ作成サービスによっては、無料でドメインを利用できるケースがあります。

その場合に使用するのは「共有ドメイン」と呼ばれるものが多く、「https://〇〇.service.com」のように、無料ドメインを提供しているサービスのサブドメインとなります。

サブドメインとは、独自ドメインを分割する際に任意で設定するドメインのことです。上記例では、〇〇の箇所が利用できるサブドメインで、.service.comの箇所がドメイン提供サービスの独自ドメインにあたります。

サブドメインは、独自ドメインの一部を間借りしているような状態のため、オリジナル要素やドメインの所有権がありません。サービスの提供が終了するとホームページも表示されなくなる可能性が高いため、企業サイトを運営する際は、無料ドメインを用いない方が良いでしょう。

ドメインについてさらに詳しくは、以下コラムをご覧ください。

実際にホームページを作成しようとした場合、自社で内製するか、制作会社へ依頼するかのどちらかを選択できます。
 

自社で内製する場合

本来ホームページを作成するには、画像の用意・テキスト作成・デザイン作成・コーディングなど、専門的なさまざまな作業が必要です。一方で、現在は専門的な知識がなくてもホームページを作成し運用できるツールが多く登場しています。

自社で内製する場合は、担当者が作成の時間を取れるか、社内でコンテンツ更新のフローを構築できるかなどがポイントとなります。ホームページの作成は制作会社へ依頼し、更新は自社で行うといった切り分けも可能です。
 

制作会社へ依頼する場合

専門的な知識がなくてもホームページを作成できますが、どうしてもツールの提供する範囲に収まってしまう側面もあります。自社の魅力を引き出すホームページを本格的に作成したい場合は、制作会社へ依頼するといいでしょう。

また、Webサイトを本格的に集客に活用したい場合は、ニュースやブログなどのコンテンツの更新が重要です。社内で更新のための工数を確保できない場合は、これも制作会社へ依頼できます。
 

ホームページの本格的な作り方は3つに分けられます。

それぞれ、作成の難易度とできることが異なるため、ホームページを作りたい目的にあわせて選択することが重要です。
 

1. ホームページ作成サービスを使った作成方法

ホームページを初めて作る場合や専門的な知識がない場合には、ホームページ作成サービスの利用がおすすめです。

ホームページ作成サービスとは、サーバー・ドメイン・ホームページ作成ツールがセットになっていて、クラウド上でホームページが簡単に作成できるサービスのことです。

ドラッグ＆ドロップで画面を直感的に操作したり、用意されているテンプレートを編集したりするだけで、初心者でも簡単にホームページを作ることができます。

主なホームページ作成サービスは次の通りです。

• Wix
• Jimdo
• Ameba Ownd
• ペライチ
• Canva
• HubSpot

以下にて、この中でも特に初心者の方におすすめな「Wix」と「Jimbo」について簡単にご紹介します。
 

Wix

Wixは、ホームページ作成ツールの中でも特に利用率の高いツールの1つです。800以上のテンプレートから選択可能で、ドラッグ＆ドロップの直感的な操作で初心者でも簡単にホームページを作成できます。複数の有料プランが用意されていますが、無料版でも作成することが可能です。
 

Jimdo

Jimdoでは、多くのホームページ作成ツールにあるドラッグ＆ドロップによる構築の他に、質問に答えていくことで半自動的にホームページが出来上がっていく「ジンドゥーAIビルダー」を備えている点が特徴です。小規模なホームページの作成を検討している場合は、AIビルダーも大きな選択肢となるでしょう。

無料でホームページを作成したい方は、こちらの記事も参考にしてください。

メリット

ホームページ作成サービスを利用するメリットには、次のようなものがあります。

• 専門的な知識が不要
• テンプレートが豊富に用意されている
• 直感的な操作方法で、初心者でも簡単にホームページを作成できる

ホームページ作成サービスでは、コーディングなどの専門知識を必要としません。

また、デザイン性に優れたテンプレートも豊富で、操作性にも優れているので、ホームページ作成が初めての方でも取り組みやすいでしょう。
 

デメリット

一方で、ホームページ作成サービスにはデメリットもあります。

• デザインの自由度が低い
• 独自ドメインやメールアドレスが使用できない、もしくは有料になってしまう
• サービスが終了に伴い、ホームページが消える場合がある

ホームページ作成サービスには既定のテンプレートがあるため、デザイン自体のオリジナル度は低くなります。

また、基本的には先述したサブドメインを使うことも留意しておきましょう。
 

2. CMSをインストールして自作

サーバーやドメインの準備を自身で行える場合は、CMSをインストールしてホームページを作る方法もあります。

CMSとは、コンテンツ・マネジメント・システムの略で、ホームページを構成するコンテンツ（テキストや画像、デザインなど）を保存、管理するシステムのことです。このCMSをサーバーにインストールすることで、ホームページを作成できます。

CMSを用いたホームページ作成は、作成ツールを使うよりカスタマイズ性が高い反面、難易度は上がります。一方、素人でも使い方を調べながら構築することが可能です。なお、制作会社へ依頼する場合もたいていはCMSを利用することになります。

代表的なCMSはWordPressで、世界中で幅広く利用されています。

CMSを使ったホームページの制作方法の詳細は、こちらの記事をご参照ください。

WordPress

世界でも代表的なCMSであるWordPressは、豊富なテーマ・プラグインを利用できる点が特徴のCMSです。

テーマとは、各ページのレイアウトや見た目を決めたパッケージのようなもので、これがあるおかげで専門的な知識がなくてもホームページを構築できます。プラグインは出来上がったホームページに追加し、機能を拡張するものです。

WordPressはブログシステムをベースにしているため、エディタを使ってニュースやブログを簡単に更新できます。
 

メリット

CMSの活用には次のようなメリットがあります。

• コーディングの知識が不要
• 無料から有料まで幅広いテーマ（テンプレート）が用意されている
• コンテンツの更新が簡単

CMSでは、HTMLやCSSといったコーディングの知識が必要ないため、ホームページの作成から編集まで誰でも簡単に行えます。

また、ブログなどのコンテンツの更新もできるため、お知らせ機能やブログ機能をつけたい場合におすすめの方法です。
 

デメリット

一方で、デメリットは次の通りです。

• セキュリティ面でリスクがある
• 定期的なアップデートが必要
• テーマの編集など、本格的なカスタマイズにはPHPのプログラミング知識が必要

CMSの種類にもよりますが、Webサイトへの不正アクセスや情報流出など、セキュリティ面でのリスクが懸念されます。そのため、定期的にアップデートを行い、常に最新のバージョンに保つことが大切です。

また、CMSをインストールしたとしても、本格的なカスタマイズを行うには専門知識が必要になります。自社にノウハウがない場合には外注を検討してください。
 

3. HTML・CSSを使って自身でコーディング

上級者であれば、自身でコーディングを行い、ホームページを作成する方法も選択肢のひとつです。

ホームページは基本的に、HTML・CSSという言語を用いて構成されています。

HTML・CSSを使ってホームページを構築することを「コーディング」と呼びます。コーディングのスキルがあれば、ゼロからホームページを作成できます。

インターネット上でホームページを作成する手順は次の通りです。

1.  テキストエディタを用意する
2.  HTMLでファイルを作成する
3.  HTMLタグを用いてコンテンツを作成する
4.  保存したファイルをブラウザで確認する
5.  FTPソフト（サーバーにファイル転送を行うソフト）でサーバーへアップロード

HTMLにはホームページ作成に必要なファイルのテンプレートもあるため、制作時間を短縮したい場合にはテンプレートを活用すると良いでしょう。

コーディングは難解な印象があるかもしれませんが、シンプルなホームページであれば難しくありませんので、ご興味がある方は挑戦されてみてはいかがでしょうか。

HTMLでのホームページの作り方は次の記事で紹介しています。

メリット

自身でコーディングを行うメリットは次の通りです。

• デザインやサイト構成の自由度が高い
• セキュリティ面でリスクが少ない

すべて自作するため自由度が高く、調整も行いやすくなります。プラグインやテーマを使用するWordPressと違い、自身でオリジナルコードを記述し対策を行えばセキュリティ面でのリスクは低くなります。顧客の情報漏えいやWebサイト改ざんといったトラブルが少なくなるでしょう。
 

デメリット

ゼロからホームページを作成する際には、次のようなデメリットがあります。

• HTML・CSSの知識が必要
• FTPソフトが必要
• 初心者には向いていない

自身でコーディングを行うには、制作のためのソフトやプログラミング、デザイン言語に関する専門知識が必要になります。

そのため、ホームページを自分で作成したことのない初心者には難しい方法です。
 

ホームページの作成方法を選ぶポイントは、次の5つです。

• 予算
• 知識
• 規模・デザイン
• 制作期間
• 公開後の更新頻度・更新内容

ホームページ作成に求める条件を確認し、自社に適している作り方を選ぶことが大切です。ホームページの作り方とポイントをまとめた一覧をご活用ください。

予算

まずポイントとなる条件は予算です。ホームページの作成方法によって発生する費用が異なるため、自社の予算を確認しておきましょう。

作り方別のコストは次の通りです。

ホームページ作成サービスを利用すれば無料で作成できますが、制約が多いというデメリットがあります。

そのため、企業サイトの場合にはホームページ作成サービスの有料版を使用するか、WordPressをインストールする方法が一般的です。
 

知識

次に、知識の有無も大切なポイントです。初心者の場合には、Web制作に関する知識が必要ですが、難易度の高い順に並べると以下のようになります。

• HTML・CSSでコーディング
• CMSをインストール
• ホームページ作成サービスを使う

ホームページ制作に関する知識を持ちあわせていない場合には、制作会社に依頼するのが最も良い方法ですが、制作費用が高くなります。

サーバーやドメインなどの知識がないのであれば、ホームページ作成サービスを活用すると最も簡単にホームページを作成できるでしょう。
 

規模・デザイン

デザインや規模の自由度が高いのは次の順です。

• HTML・CSSでコーディング
• CMSをインストール
• ホームページ作成サービスを使う

ホームページ作成サービスは、テンプレートなどがあり作成が簡単な分、デザインの自由度は低くなります。また、無料サービスでは、容量に制限がある場合もあるため、大規模なホームページには向いていません。

ホームページのデザインや規模を自由に作りたい場合には、自身でコーディングするのが最も良い方法です。

ホームページのデザインなどをカスタマイズするには、どの作り方であってもHTML・CSSを編集できるスキルを身につけておきましょう。
 

制作期間

制作期間が短いのは次の順です。

• ホームページ作成サービスを使う
• CMSをインストール
• HTML・CSSでコーディング

スピードを重視するのであれば、テンプレートが準備されている方法を選択すると良いでしょう。

そのなかでも、ホームページ作成サービスを利用すれば、サーバーやドメインの準備が必要ないため最も早くホームページを作れます。
 

公開後の更新頻度・更新内容

ホームページを公開後、コンテンツをどの程度更新するかも重要です。以下は更新しやすさの順で、下へいくほど更新が難しくなります。

• CMSをインストール
• ホームページ作成サービスを使う
• HTML・CSSでコーディング

CMSはコンテンツの更新を効率化するためのツールのため、更新しやすさはトップだといえます。一方、ホームページ作成ツールも独自のUIで更新性を高めており、CMSと比べても遜色ありません。

HTML・CSSでコーディングすると、更新するにも毎回コーディングを必要とするため、更新しやすさは他の2つより劣ります。

また、2024年6月現在、コンテンツの作成にAIを活用する流れが加速しています。

コンテンツの作成・更新を効率化するなら、当社HubSpotが提供する「ブログアイデア生成ツール」がおすすめです。

ブログアイデア生成ツールを用いると、AIによってブログタイトルやアウトラインを生成できます。アイデア出しをAIが担えるため、担当者はコンテンツの作成やその他の重要な業務に注力できるようになります。

コンテンツの作成や公開までをツール内で完結できるため、一連のフローを効率化することも可能です。
 

作成方法の違いによって変わってきますが、ホームページを作成する際には基本的に以下の5ステップで進んでいきます。
 

1. 企画

ホームページは作成したらその後長くマーケティングツールとして活用していくため、しっかりと企画を練ることが重要です。

「問い合わせを増やしたい」「人材の採用を強化したい」など、まずはホームページを作る目的をはっきりさせます。

その後、ゴールをできるだけ具体的かつ客観的な数値で設定し、ターゲットを設定、トレンドを分析など、準備を進めていきます。
 

2. Webサイト設計

自社で作成する場合、制作会社に依頼する場合に関わらず、実際の作成に入る前にサイト設計を行います。

具体的には、UXデザイン、コンテンツ企画、サイトマップ作成、ワイヤーフレーム作成などの設計があります。
 

3. デザイン制作

設計内容に沿って、デザイン制作を行っていきます。

具体的には、ホームページ各所のデザインコンセプトを定めた後、素材の準備を行い、デザインカンプの作成を行います。
 

4. 実装

デザインが完了したら、インターネット上で表示・アクセスできるようにする実装を行います。実装には、ユーザーの目に入るビジュアル面を構築するフロントエンドと、サーバー側の構築を行うバックエンドがあります。

どちらも専門的な人材が必要ですが、ホームページ作成ツールを使用すると大きく省略できます。
 

5. 公開

テストまで行って問題なければ、ホームページを公開します。

ホームページ作成の基本的な流れについては、以下コラムにてさらに詳しく解説しています。

ホームページを初めて作成する場合には、スマホ対応において重要となる「レスポンシブデザイン」について押さえておきましょう。
 

レスポンシブデザインとは

ホームページを画面に表示するとき、横幅に合わせて表示されるコンテンツが調整されるデザインをレスポンシブデザインと呼びます。例えば、PCの画面横幅いっぱいに表示すると左カラムメニューが表示されるデザインのとき、横幅を狭くするとカラムが消えてメインコンテンツのみ表示されるようになります。

一例として、HubSpotブログのトップページのPCでの表示とスマホでの表示を比較してみます。

レスポンシブデザインは、スマホ対応をする上で重要です。インターネット閲覧がスマホ優位になって久しくなりますが、スマホで見ることを前提としたモバイルフレンドリーデザインは検索エンジンにて上位表示を得るためにも必要となります。

もちろん、実際に見てくれるユーザーのためにも、モバイル表示にて見やすいデザインとなるレスポンシブデザインは必須といえるでしょう。
 

レスポンシブデザインに対応するには

レスポンシブデザインは、ホームページ作成ツールを使用する場合とテーマからカスタマイズする場合は、現在ほとんど対応済みだと言えます。また、制作会社に依頼する場合も、レスポンシブデザインに対応していないことはないでしょう。

反対に、レスポンシブデザインに対応していないホームページを作成してしまうと競合他社から遅れを取ってしまうことになります。サイト設計を行う際に、レスポンシブデザインになるかどうかは確実に確認するようにしましょう。
 

作り方が難しいと思われがちなホームページも、ホームページ作成サービスやCMSを使えば、初心者でもパソコンやスマートフォン一台で簡単に作れます。

しかし、作り方によってそれぞれ特徴が異なるため、紹介した選定ポイントを確認し、自社の目的や条件にあわせて適切な手段を選択することが大切です。

まずは、どのような規模のホームページを、どれくらいの予算で作りたいのかを社内で確認し、条件に沿ったホームページの作成方法をご選定ください。