ホームページの作り方完全ガイド【初心者向け】

企業の顔となるホームページを開設したいが、作り方がわからないという方も多いのではないでしょうか？

現在、知識が一切なくても簡単にホームページを作成できるソフトも増えてきました。

しかし、これからホームページを作成するにあたり、

『具体的なホームページの作り方が知りたい』
『ホームページ作成の流れが知りたい』
『ホームページ作成するうえでの注意点が知りたい』

上記のようなお悩みが生じるかと思います。

今回は、これからホームページ作成を検討している企業担当者様へ向けて「ホームページの作り方」「方法別の作成方法の流れ」「ホームページ作成するうえで絶対にやってはいけないこと」を紹介します。

ホームページの作り方

はじめにホームページの作り方について紹介します。

ホーページの作り方は、大きく分けて６種類あります。

1. （自作）HTML/CSSで作成
2. （自作）無料ホームページ作成ソフトで作成
3. （自作）有料ホームページ作成ソフトで作成
4. （自作）WordPress等のCMSで作成
5. （自作）スマホのみで作成
6. （外注）制作会社や個人に制作依頼をする

さまざまな方法があるので、ご自身に合った作り方を探してみましょう。

【作り方①】HTML/CSSで作成（自作）

１つ目の作り方は、HTML/CSSで自作する方法です。

ホームページは、HTML/CSSで構築されているため、これらのコードを自分で記載して作成する方法となります。

HTML/CSSの違いは下記のとおりです。

HTML/CSSの知識があれば、思いどおりのホームページが作成できるといった特徴があります。

HTML/CSSのメリット

自由なデザインでホームページ作成できる点が HTML/CSSのメリットといえます。

たとえば、ホームページ上の「ボタンとボタンの間を少し広めにとりたい」などの細かい調整が可能です。

ホームページ作成ソフトの場合、テンプレート内のレイアウトが決められているため、細かい調整ができません。

HTML/CSSでホームページ作成することで、こだわりのあるデザイン設計が可能です。

HTML/CSSのデメリット

HTML/CSSでホームページを作成するには、HTML/CSSについて学ばなくてはいけません。

スクールで学ぶ方法や独学で学ぶ方法もありますが、時間や費用がかかる点がデメリットといえるでしょう。

また、HTML/CSSのみで作成したホームページは「動きがないデザイン」となるので、ひと昔前のホームページといった印象になります。

現在、ホームページ作成においては「動き」を入れたホームページが主流となっているので「JavaScript」などの別言語のプログラミング取得をしなくてはいけないのもデメリットといえるでしょう。

こんな方におすすめ

下記のような方にHTML/CSSのホームページ作成がおすすめできます。

• HTML・CSS等の知識がある
• 自由なデザインでホームページ作成がしたい
• 費用を掛けずにホームページを作成したい

【作り方②】無料ホームページ作成ソフトで作成（自作）

２つ目の作り方は、無料ホームページ作成ソフトを利用する方法です。

無料ホームページ作成ソフトであれば、テンプレートを選択し「テキスト」「画像コンテンツ」を用意するだけで簡単にホームページが作成できます。

基本的には「Jimdo」「Wix」といったホームページ作成ソフトの無料プランを利用した作成方法となります。

無料ホームページ作成ソフトのメリット

費用が一切かからないのが、無料ホームページ作成ソフトのメリットといえるでしょう。

サブドメインで作成する場合は、サーバーやドメインの準備も必要ないので、気軽にチャレンジできる方法です。

本格的にホームページ作成するというよりは、テスト運用やホームページ作成前の練習に向いている作り方といえます。

無料ホームページ作成ソフトのデメリット

無料で作ったホームページは、自社の資産にならないのが最大のデメリットといえます。

無料ホームページの場合、サブドメインでホームページを作成するためです。

サブドメインは、サービス元から提供されているドメインなので、サービス元が終了すれば、自社ホームページも閉鎖してしまいます。

また、無料プランだとホームページ上にサービス元の広告が表示されるのもデメリットといえます。

こんな方におすすめ

下記のような方に無料ホームページ作成ソフトがおすすめできます。

• 費用を一切かけずにホームページを作成したい
• ホームページのテスト運用を実施したい
• ホームページの作成の流れを理解したい

【作り方③】有料ホームページ作成ソフトで作成（自作）

３つ目の作り方は、有料ホームページ作成ソフトを利用する方法です。

無料ホームページ同様、テンプレート選択するだけで簡単にホームページ作成が可能なので、知識がない方に向いている作り方となります。

有料ホームページソフトは、下記2つに分類できます。

有料ソフトであれば「独自ドメイン」や「デザイン性の高いテンプレート」の利用も可能なので、コーポレートサイト作成も可能です。

有料ホームページ作成ソフトのメリット

無料作成ソフトよりも、クオリティの高いホームページ作成が可能なのが有料ホームページ作成ソフトのメリットといえます。

有料ホームページ作成ソフトの場合、無料作成ソフトよりもこだわってホームページ作成ができます。

たとえば、ショッピングカート機能やメールフォーム設置などは、無料プランでは対応していないことも多いですが、こういった機能を追加することも可能です。

また、有料の場合、各ベンダーのサポートを受けることも可能なので、ホームページ作成に行き詰ったときに、アドバイスがもらえるのもメリットといえます。

有料ホームページ作成ソフトのデメリット

有料ホームページ作成ソフトは「HTML/CSS」「CMS」等の作り方に比べると、細かい修正が難しいといったデメリットがあります。

有料ホームページ作成ソフトの場合、デザイン性の高いテンプレートは用意されていますが「HTML/CSS」で修正できないソフトもあるため、細かいレイアウトの調整はできません。

そのため、細部のデザインまで自社でこだわってホームページ作成したいという方には、デメリットといえるでしょう。

こんな方におすすめ

下記のような方に有料ホームページ作成ソフトがおすすめできます。

• コーポレートサイト作成を検討している
• 知識はないがデザイン性の高いホームページを作成したい
• 「カート機能」「メールフォーム」などの機能を搭載したホームページ作成がしたい

【作り方④】WordPress等のCMSで作成（自作）

４つ目の作り方は、WordPress等のCMSを利用する方法です。

CMSとは、ホームページ内で使用する画像やレイアウト情報を保存してWebページを作成する仕組みなので、知識がなくてもホームページ作成が可能です。

CMSを分類すると、下記2つに分類できます。

オープンソース型は基本的に無料で利用することが可能なので、個人や企業でも採用できます。
パーケージ型は組織で利用することを目的としているので、企業向けのCMSとなっています。

CMSのメリット

カスタマイズ性の高さがCMS最大のメリットです。

オープンソース型CMSの場合、機能を拡張するための「プラグイン」やデザインを変更できる「テーマ」が大量に用意されているので、自分好みのホームページを簡単に作成することが可能です。

また「プラグイン」「テーマ」に関しては、無料で利用できるものが多く、費用がかからないメリットもあります。

CMSのデメリット

サポートが一切ないという点がCMSのデメリットです。

ライセンスを購入して利用するパッケージ型CMSの場合は、ベンダーからサポートが受けられますが、オープンソース型にはサポートがありません。

そのため、ホームページ運用時のトラブルも全て自身で解決する必要があるのがデメリットです。

こんな方におすすめ

下記のような方にCMSでのホームページ作成がおすすめできます。

• 知識はないがこだわったホームページ作成がしたい
• 規模が大きいホームページを作成したい
• 組織内でホームページ運用の業務を分業したい

【作り方⑤】スマホのみで作成（自作）

５つ目の作り方は、スマホのみでホームページ作成する方法です。

専用のアプリをスマートフォンにインストールをして、テンプレートを選択するだけで簡単にホームページが作成できます。

「Jimdo」「グーペ」「Crayon」などが代表的なスマホでのホームページ作成ソフトです。

『ホームページを更新している時間がない』という方にピッタリの作り方となります。

スマホ作成のメリット

最新情報をいつでもスマホから更新できるのがスマホ作成の最大のメリットです。

ホームページ作成後は、頻繁にコンテンツ更新する必要がありますが『通常業務が忙しくなかなか更新ができない』という方が多いのが現状です。

しかし、スマホ作成ソフトであれば、いつでも手軽にホームページ内のコンテンツ更新が可能となるので、常にユーザーに対して最新情報が届けられるメリットがあります。

スマホ作成のデメリット

ホームページでの差別化が難しいのが、スマホ作成のデメリットです。

スマホからホームページを作成すると、デザイン面や機能面での差別化が難しいので、どこかで見たようなホームページになってしまう可能性もあります。

そのため、ホームページで競合と差別化したい方にとっては、大きなデメリットといえるでしょう。

こんな方におすすめ

下記のような方にスマホでのホームページ作成がおすすめできます。

• PCを持っていないがホームページを作成したい
• 簡単にホームページを更新したい
• ホームページ作成の知識がない

【作り方⑥】制作会社や個人に制作依頼する（外注）

6つ目の作り方は、制作会社や個人に制作依頼する方法です。

ホームページの目的を制作会社に伝えることで、クオリティの高いホームページ制作が可能です。

制作会社と一口にいってもさまざまですが、下記のように分類できます。

制作会社の費用に関しては、ホームページ制作に関わる人員が多くなるほど高額となります。

しかし、ホームページ制作の企画から制作まで多くの人が関わるということは、ホームページのクオリティにも比例すると覚えておきましょう。

制作会社や個人に依頼するメリット

クオリティの高いホームページ制作が可能な点が制作会社に依頼するメリットといえます。

多くの実績やノウハウがある制作会社に依頼ができれば、個人で作成するよりもクオリティが高いホームページが制作できるでしょう。

制作会社や個人に依頼するデメリット

ホームページを依頼すると、個人で作成するよりも費用がかかる点がデメリットといえます。

制作会社に依頼した場合、１ページのランディングページ（LP）でも１０万円程度の費用が必要となります。

制作会社ではなく、個人・フリーランスなどに依頼することで更に費用を抑えることができますが、どんな個人に依頼するかでホームページのクオリティが異なるのもデメリットといえるでしょう。

こんな方におすすめ

• 企画設計してクオリティの高いホームページを作成したい
• 他社との差別化が図れるようなホームページを作成したい
• 知識はないが、自社の予算に余裕がある

作り方別にホームページ作成の流れを紹介

上記で紹介した、ホームページの作り方の具体的な流れについて紹介します。

各作り方の流れも把握したうえで、自身に合った方法をみつけましょう。

• HTML/CSS 【作成の流れ】
• 無料ホームページ作成ソフト【作成の流れ】
• 有料ホームページ作成ソフト【作成の流れ】
• CMS【作成の流れ】
• スマホのみで作成【作成の流れ】
• 制作会社や個人へ依頼【作成の流れ】

※上記リンクを選択すると、それぞれの作成の流れに移動できます

HTML/CSS

HTML/CSSの作り方流れは下記のとおりです。

• 【STEP①】HTML作成ツールの準備
• 【STEP②】HTMLタグの記述
• 【STEP③】CSSの記述
• 【STEP④】サーバーへアップロード

【STEP①】HTML作成ツールの準備

はじめに、HTML作成ツールを準備します。

HTMLは、Windowsに搭載しているメモ帳を使ってタグを記述することも可能ですが、HTML作成ツールの利用をおすすめします。

HTML作成ツールであれば、タグが見やすくなり、入力補助等もしてくれるためです。

代表的なテキストエディタは下記のとおりです。

また、作成したHTMLがブラウザで表示されるかを確認するために「Google Chrome」などのブラウザ環境を整えておく必要もあります。

【STEP②】HTMLタグの記述

ツールの準備ができたら「TOPページ」「サブページ」の順番でHTMLタグを記述していきます。

ホームページの土台となる「見出しの設定」「テキスト入力」「画像の挿入」などを作成していきましょう。

【STEP③】CSSの記述

ホームページの土台が完成したら、CSSで見た目を整えていきます。

「テキストの色」「大きさ」「グループ化」などをCSSで調整し、見やすいホームページにします。

【STEP④】Webサーバーへアップロード

ホームページが作成できたら、Webサーバーを準備し作成したHTMLファイルをアップロードしますが、このときにFTPというアプリケーションを利用します。

FTPとは、パソコンとサーバーをつなぐための特殊な通信環境を構築するアプリケーションです。

ホームページ作成ソフトであれば、ＦＴＰは標準搭載されていますが、HTMLで構成する場合は個人で用意する必要があります。

ＦＴＰを利用して、サーバーへアップロードすれば完了です。

無料ホームページ作成ソフト

無料ホームページ作成ソフトでの作り方は下記のとおりです。

• 【STEP①】作成ソフトの選択
• 【STEP②】テンプレートを選択
• 【STEP③】コンテンツ作成
• 【STEP④】公開

【STEP①】作成ソフトの選定

まず、無料ホームページ作成ソフトの選定をします。

さまざまな種類があるので、目的に合ったホームページ作成ソフトを選定するのが良いでしょう。

代表的な無料ホームページ作成ソフトは下記のとおりです。

「Wix」「Jimdo」等の有名ホームページ作成ソフトでも「ECサイト」の作成も可能ですが、無料プランだと、商品登録数に制限があるため、無料で多機能なホームページを作成するのは向いていません。

【STEP②】テンプレートを選択

続いてテンプレートを選択します。

無料ホームページ作成ソフトには、無料テンプレートが用意されていますがデザイン性は高くないので慎重に選定しましょう。

【STEP③】コンテンツ作成

次にコンテンツ作成です。

事前にホームページで使用する画像素材を用意しておけば、この工程がスムーズとなります。

【STEP④】公開

無料ホームページ作成ソフト上でホームページ公開設定ができます。

個人でサーバーやドメインの用意する必要もないので、知識がなくても簡単にホームページが公開できます。

有料ホームページ作成ソフト

有料ホームページ作成ソフトでの作り方は下記のとおりです。

• 【STEP①】作成ソフトの選択
• 【STEP②】テンプレートを選択
• 【STEP③】コンテンツ作成
• 【STEP④】公開

【STEP①】作成ソフトの選択

まず、作成ソフトの選定をします。

無料ホームページ作成ソフト同様、目的に合わせてホームページ作成ソフトを選定することをおすすめします。

代表的な有料ホームページ作成ソフトは下記のとおりです。

【STEP②】テンプレートを選択

続いてテンプレートの選択です。

有料ホームページ作成ソフトの場合、デザイン性が高いテンプレートが豊富なので自身のイメージに合ったものを選定しましょう。

【STEP③】コンテンツ作成

コンテンツ作成では、無料ホームページ作成ソフトと異なり「EC機能」「問い合わせフォーム」などの機能を追加することが可能となっています。

【STEP④】公開

有料ホームページ作成ソフトであれば、独自ドメインでの公開が可能です。

こちらもホームページ作成ソフト上で簡単に公開設定ができるようになっているので、知識がなくても問題ありません。

CMS

CMSでの作り方は下記のとおりです。

• 【STEP①】ドメインの取得
• 【STEP②】サーバーの用意
• 【STEP③】CMSのインストール
• 【STEP④】CMSの設定

【STEP①】ドメインの取得

CMSでホームページ作成する場合は、ドメインを個人で用意する必要があります。

お名前.comなどのドメイン取得サービスにて「〇〇.com」のようなドメイン（独自ドメイン）を用意します。

【STEP②】サーバーの用意

次に、サーバーの用意をします。

通常のホームページでは、サーバーを貸し出すサービス「レンタルサーバー」を使うのが一般的です。

レンタルサーバーには用途に応じて容量や料金が異なるので、ご自身や自社にあったレンタルサーバーを契約しましょう。

ドメインとサーバーの用意をしたあと、両者の紐づけを行うことで、はじめてホームページがインターネット上に公開されます。

この段階ではホームページは真っ白の状態です。

【STEP③】CMSのインストール

ドメインの設置が完了したらCMSをインストールします。

CMSをインストールすることで、ホームページのデザイン選定やコンテンツの更新ができるようになります。

【STEP④】CMSの設定

最後にインストールしたCMSの設定を実施します。

この段階でホームページはほとんど完成していますが、検索順位を上げるための細かい設定などをしてからホームページを公開します。

スマホのみで作成

スマホのみでホームページ作成する流れは下記のとおりです。

• 【STEP①】作成アプリ選択
• 【STEP②】テンプレート選択
• 【STEP③】コンテンツ作成
• 【STEP④】公開

【STEP①】作成アプリ選択

まず、スマホ用ホームページ作成アプリを選定します。

代表的なアプリは下記のとおりです。

作成アプリによって、機能が異なるので「スマホでどこまでの作業が必要か」でアプリを選定すると良いでしょう。

【STEP②】テンプレート選択

アプリをインストール後、アプリ内でホームページのテンプレートを選定します。

イメージに合ったテンプレートを選択するようにしましょう。

【STEP③】コンテンツ作成

ホームページのコンテンツを作成します。

画像素材が必要な場合は、事前に用意しておきましょう。

【STEP④】公開

コンテンツ作成後、アプリ内でホームページを公開して完了です。

制作会社や個人へ依頼

制作会社や個人へ依頼する流れは下記の通りです。

• 【STEP①】制作会社の選定
• 【STEP②】予算獲得のための提案書作成
• 【STEP③】制作会社に提出する提案依頼書の作成
• 【STEP④】制作会社と打ち合わせ

【STEP①】制作会社の選定

「予算」や「ホームページの目的」から制作会社を選定します。

制作会社数社に問い合わせして、相見積もりを取り制作会社の比較をしましょう。

【STEP②】予算獲得のための提案書作成

続いてホームページ制作の予算を獲得するために社内用の提案書を作成する必要があります。

制作会社に依頼する場合は、多額な費用がかかるので「なぜホームページが必要なのか」を社内で提案し予算を獲得します。

ここをクリアしないと、次のステップに進めないので注意が必要です。

【STEP③】制作会社に提出する提案依頼書の作成

次に、制作会社に提出する提案依頼書作成をします。

提案依頼書とは、依頼側が制作会社に対して『こういったホームページを作りたいので、良い提案をして下さい』といった内容が記載されている依頼書です。

「会社情報」「商品・サービス内容」「ホームページの目的」が記載された提案書を制作会社に投げることで、制作会社から良い提案がもらえるだけでなく、制作会社の比較がしやすいといった特徴もあります。

制作会社が提案した内容をみて、制作会社の決定をしていきます。

【STEP④】制作会社と打ち合わせ

制作会社が決定したら、打ち合わせをします。

ホームページの「ターゲット」「デザイン」「公開時期」などをすり合わせていき、両社とも問題がなければ契約となります。

【STEP⑤】発注

契約が済むと発注となります。

制作会社に依頼すると、納期が数か月かかることもあるので、余裕を持ったスケジュール管理が重要です。

ホームページを作るうえでやってはいけないこと

最後にホームページを作るうえでやっていけないことを紹介します。

「ホームページを自作する」「制作会社に依頼する」場合も、下記内容について注意したうえでホームページ作成しましょう。

目的を決めないままホームページを作成する

やってはいけないこと１つ目は、目的を決めずにホームページを作成することです。

目的が定まっていないと、ユーザーに対してうまく情報が伝わらず、成果が見込めないホームページとなってしまいます。

ホームページの目的の例としては、 問合せ獲得 自社のブランディング 商品のアップ 人材の獲得 などがあります。

目的を決めておくことで「ホームページの方向性が決まりやすくなる」「作成後の分析がしやすくなる」といったメリットもあるため、必ず事前に目的を明確にするようにしましょう。

無料レンタルサーバーを利用する

やってはいけないこと２つ目は、無料レンタルサーバーを利用することです。

今回紹介した「作り方」であれば「CMS」「HTML/CSS」でサーバーを個人で用意する場合は注意してください。

無料のレンタルサーバーには、下記のようなデメリットがあります。

• サーバーの安定性が低いケースがある
• 容量が少ない 広告が表示される
• 独自ドメインが不可となるケースがある
• サービスが続く保証がない

無料のレンタルサーバーを利用すると、通常のホームページ運用も難しくなるようなデメリットがあるため、必ず有料のレンタルサーバーを用意してホームページ作成するようにしましょう。

適当に制作会社を選定する

やってはいけないこと３つ目は、適当に制作会社を選定することです。

制作会社のホームページ制作は高額なので、費用面だけで選定したくなりますが、やってはいけません。

「制作会社の会社情報」「制作実績」「担当者との相性」「契約内容」などの観点から選定することが重要です。

たとえば、ホームページ制作会社には「コーポレートサイト制作が得意」「ＥＣサイト制作が得意」といったような特徴があります。

こういった制作会社の特徴に合わせた依頼をすることで、失敗するリスクが軽減します。

まとめ

ホームページの作り方について紹介しました。

今回のポイントは下記の通りです。

ホームページの作り方は下記６種類となっています。

1. （自作）HTML/CSSで作成
2. （自作）無料ホームページ作成ソフトで作成
3. （自作）有料ホームページ作成ソフトで作成
4. （自作）WordPress等のCMSで作成
5. （自作）スマホのみで作成
6. （外注）制作会社や個人に制作依頼をする

ホームページ作成するうえでやってはいけないことは、

• 目的を決めないままホームページを作成する
• 無料レンタルサーバーを利用する
• 適当に制作会社を選定する

自社に合った作り方を検討して、ホームページ作成をしてみましょう。

また、当サイト「ビズサイ」では、サブスクリプション型のホームページ制作サービスを提供しています。

ビズサイでは、ホームページの目的に合わせて３種類のプランを用意しており、お申込みから公開まで最短５営業日でホームページ制作ができます（くわしくはこちら）。