【初心者向け】ホームページの作り方ガイド4パターン|作成の流れを解説

ダウンロード: CMSを活用したWEBサイト作成無料ガイド
水落 絵理香(みずおち えりか)
水落 絵理香(みずおち えりか)

最終更新日:

公開日:

初めてホームページを作るにあたり、「作り方が分からない」「初心者には難しそう」と思われている方も多いのではないでしょうか。

【初心者向け】ホームページの作り方ガイド4パターン|作成の流れを解説

【無料ガイド】知識ゼロで本格的なWebサイト作成

CMSを活用すれば専門知識がなくても本格的なWebサイトの制作と管理が実現します。無料のCMSガイドブックを使って、最適なWebサイトを作成してみませんか?

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

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

本記事では、ホームページを作成したいとお考えの方に向けて、代表的な4つの作り方や、自社に合った作り方を選ぶポイントを紹介します。

本記事を参考に、自社の目的や条件に適したホームページの作り方を見つけてください。

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

ホームページ作りに必要なもの

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

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

サーバー

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

サーバー

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

無料サーバー

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

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

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

有料サーバー

有料のサーバーの料金はさまざまで、安いサーバーでは月額100円ほどの少額から利用可能です。

有料サーバーには、次のような特徴があります。

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

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

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

ドメイン

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

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

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

独自ドメイン

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

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

無料ドメイン

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

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

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

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

ホームページの作り方は4パターン

ホームページの代表的な作り方は4つに分けられます。

ホームページの作成と聞くと、複雑な作業が必要で難しそうと思うかもしれませんが、実はパソコンひとつで簡単に作る方法もあります。個人のホームページやスタートアップ企業などで、なるべく費用をかけたくない場合には、ホームページ作成ツールの活用がおすすめです。

本章では、初心者・中級者・上級者に分けて、ホームページの作り方を解説します。外部の制作会社に依頼する方法もあわせてご紹介します。
 

1. 【初心者向け】ホームページ作成サービスを使った作成方法

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

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

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

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

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

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

Wix

Wix

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

Jimdo

Jimdo

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

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

メリット

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

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

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

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

デメリット

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

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

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

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

2. 【中級者向け】CMSをインストールして自作

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

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

代表的なCMSはWordPressで、世界中で幅広く利用されています。WordPressなどのCMSに用意されているテーマを使えば、テキストや画像を入れ替えるだけで簡単にホームページが作成できます

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

メリット

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ソフトが必要
  • 初心者には向いていない

自身でコーディングを行うには、制作のためのソフトやプログラミング、デザイン言語に関する専門知識が必要になります。そのため、ホームページを自分で作成したことのない初心者には難しい方法です。
 

4. ホームページ制作会社に依頼

デザインに凝ったオリジナルのホームページを希望していて、社内に本格的な作り方のノウハウがない場合には、ホームページ制作会社を利用しましょう。

制作会社は、HTML・CSSを使用したホームページ制作や、WordPressのオリジナルテーマを使用したホームページ制作のどちらにも対応しています。

専門的な知識や経験を持ったプロが対応するため、集客数や購買率の向上のように成果が出るホームページの作成が可能です。
 

メリット

ホームページ制作会社に依頼するメリットは次の通りです。

  • 専門的な知識は不要
  • デザインや構成の自由度が高い
  • サポートがつく場合がある

自社に専門的な知識がない場合でも、制作会社に依頼することで、イメージするデザインや構成のホームページを作成できます。制作会社によってはホームページ作成後にサポートがつくケースもあります。
 

デメリット

デメリットは、ほかの方法と比べて制作費用が高いことです。依頼する制作会社やホームページの規模(ページ数)・デザインにもよりますが、数十万円から数百万円かかる場合もあります。

例えば、10ページほどの小規模企業のホームページでは、40万円から130万円が相場です。制作会社によっても変動しますので、依頼の際は複数社を比較検討することをおすすめします。
 

ホームページの作成方法を選ぶポイント

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

  • 予算
  • 知識
  • 規模・デザイン
  • 制作期間

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

ホームページの作成方法を選ぶポイント

 

予算

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

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

予算

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

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

知識

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

  • HTML・CSSで自身でコーディング
  • CMSをインストールして自作
  • ホームページ作成サービスを使う
  • 制作会社に依頼

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

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

規模・デザイン

デザインや規模の自由度は次の順で高くなります。

  • HTML・CSSで自身でコーディング
  • 制作会社に依頼
  • CMSをインストールして自作
  • ホームページ作成サービスを使う

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

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

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

制作期間

制作スピードは次の順で早くなります。

  • ホームページ作成サービスを使う
  • CMSをインストールして自作
  • 制作会社に依頼
  • HTML・CSSで自身でコーディング

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

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

ホームページ作成の基本的な5ステップ

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

1. 企画

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

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

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

2. Webサイト設計

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

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

3. デザイン制作

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

4. 実装

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

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

5. 公開

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

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

ホームページ作成において重要な「レスポンシブデザイン」

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

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

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

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

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

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

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

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

目的や条件にあったホームページの作り方を選定しよう

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

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

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

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

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

トピック: ホームページ

関連記事

HubSpotはお客さまのプライバシー保護に全力で取り組んでおります。お客さまからご提供いただいたご情報は、お客さまにとって価値あるコンテンツ、製品、サービスの情報をお送りするために使用させていただきます。なお、当社からのEメール配信はいつでも停止できます。詳しくは、HubSpotのプライバシーポリシーをご覧ください。

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

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO