ホームページの作り方：基礎からわかる作成方法と手順

更新日 2023年2月12日（公開日 2022年3月29日）

ビジネスをされている方や、趣味で活動されている方にとって、ホームページを作成することはオンライン上で信頼を獲得し、多くの人に存在を知ってもらうために欠かせないステップです。

しかし、ホームページを自作すると行っても、その作り方はさまざまで、必要になる知識や技術力、費用などが大きく変わります。

この記事では、初めてホームページを作る方向けに、ホームページについての基礎から、それぞれの作成方法と選ぶ時のポイントをわかりやすく解説します。

目次　

はじめに：ホームページ作成に必要なもの

ホームページの作り方：5選

ホームページ作成方法の選び方

ホームページを作るときの5つの手順

おすすめ無料ホームページ作成ツール Wix

はじめに：ホームページ作成に必要なもの

ホームページを作成するために前もって準備しておきたいものが、サーバーと独自ドメインです。なぜ、サーバーとドメインが重要なのか詳しく解説します。ホームページが世界中から閲覧できる仕組みや、ホームページ作成の基礎知識を確認しましょう。

01. サーバー

サーバーとは、ネットワーク上でデータを保管し、必要に応じてそのデータを引き出してユーザーに提供する役割を果たすコンピュータのことです。ホームページを Web 上に公開するためには、ホームページに掲載するコンテンツを保管するサーバーが必要になります。

無料レンタルサーバー : 個人事業主の方や、ビジネスをはじめたばかりでホームページにかける予算を抑えたいという方には魅力的なオプションです。無料のレンタルサーバーには以下のような制約があることがほとんどですが、まず最低限のコストでホームページを作ってみたいという場合はここから始めてみるとよいでしょう。

• 使える機能やサポートサービスが限られる

• データ容量が比較的少ない（平均 1GB ）

• 独自ドメインが使えない

• レンタルサーバー会社の広告が表示される

• 高度なセキュリティ機能は有料プランとなることが多い

有料レンタルサーバー：ホームページを本格的に運営したいという場合は、有料レンタルサーバーを検討する必要があります。無料プランでは制限されていたことがほぼすべて解禁され、安定した環境でサイトを運営することができます。

• サポート体制が整っているのではじめてでも安心

• 大容量のデータを保存可能

• 独自ドメイン使用可

• 広告の非表示が可能

• 充実したセキュリティ機能と安定稼働が期待できる

02. ドメイン

ドメインとは、 Web 上で個々のホームページを見分けるための住所のようなものです。 https://www.○△□.com といった URL を見たことがあるのではないでしょうか。この www. の後に続く文字列がドメイン/ドメイン名です。また、www. がない場合は、プロトコル（https://）のすぐ後にドメインが続きます。

ドメインには独自ドメインと共有ドメインの2種類があります。上記で、「ドメインはホームページにおける住所」と例えましたが、独自ドメインと共有ドメインの違いは「戸建の住所」か「マンションの一室の住所」のよう違いだと考えると分かりやすいでしょう。

独自ドメイン：世界にひとつしかないドメイン名のことです。企業やブランドのホームページでは通常、会社名やブランド名を含む独自ドメインを使用しています。独自ドメインは完全にカスタマイズされた名称であるため、有料で取得し、その後も半永久的に維持管理費を支払う必要があります。

共有ドメイン：レンタルサーバー会社やホームページ作成サービスなどが発行する、無料で使用可能なドメインです。たとえば、ブログ投稿サービスであれば下記のように、「OOO」のところに任意の名前を設定することができます。

​https://japanblog.jp/OOO http://OOO.japanblog.jp

なお、変更できる場所以外の部分はそのブログサービスを利用しているユーザー全員で共有することになります。サービスのユーザーになると発行され、設定の手間や維持費もかからないため簡単に使い始めることができます。ただし、ユーザー解約後は利用不可となりますので注意が必要です。

ホームページ作成のヒント：ホームページを自作する場合はサーバーとドメインをそれぞれ契約しなければなりませんが、Wix のようなホームページ作成サービスを使うと全て一括で管理することができるため、便利で安心です。

ホームページの作り方 ５選

ホームページを作成する際に選択できる方法を 5 つ紹介します。必要となる費用や技術力などを比較し、どの方法を採用するか検討しましょう。

1. ホームページ作成ツールを利用する

2. Wix を使って作成する

3. オープンソースツールを使って作成する

4. プログラミングスキルを使って自分で作成する

5. Web サイト制作業者に依頼する

01. ホームページ作成ツールを利用する

初心者に一番おすすめなホームページの作り方が、ホームページ作成ツールを利用する方法です。「なるべく費用を抑えて、自分のホームページを作成してみたい」といったニーズに答えてくれます。初めて設定しようとすると手間がかかる、サーバーやドメインの契約をする必要がなく、その上初心者にとって便利なテンプレートなどが利用して、ホームページを作ることができます。

メリット　

• サーバーの別途契約が不要

• 独自ドメインもサービス内で取得可能

• コーディングの知識がなくても簡単に作成できる

デメリット

• デザインのフルカスタマイズが難しい

• 拡張性がそこまで高くない場合が多い（独自の機能やデザインを追加しにくい）

02. Wix を使って作成する

Wix なら、機能の拡張性やデザインのカスタムに優れ、クリック＆ドロップ操作で自由自在にテンプレートをフルカスタムすることが可能です。または、白紙テンプレートを使って、あなただけのホームーページをデザインすることもできます。

メリット

• 業界最高標準の安定性・信頼性を誇る Web ホスティング を提供。大規模なサーバー障害が起こったとしても柔軟に対応することができます。

• 安心のサポート体制や充実したヘルプセンター記事

• 機能の拡張性に優れた Wix アプリストア

• 直感的な操作で、デザインがカスタマイズできる高い操作性

• Google が新たに定めたウェブに関する主な指標（CWV＝コアウェブバイタル）においての優秀なパフォーマンス。

デメリット

• 独自ドメインを接続するためにはアップグレードが必要。

Wix で作成された Web サイトについてこちらのブログ記事で特集しています。また、ユーザー事例を集めた特設サイトから Wix で作成された Web サイトを一覧でご覧いただくことができます。また、こちらのオンラインコースで、Wix エディタを使ったウェブサイト構築のノウハウや Web デザインのスキルを学び、魅力的なウェブサイトを作り上げましょう。ぜひ、Web デザインの参考にお役立てください。

おすすめ参考記事▶︎ Wix の使い方を徹底解説: ホームページ作成手順 14 ステップ

800種類以上のテンプレートが無料で使える

いますぐ無料でホームページを作成

03. オープンソースコードを使って作成する

ホームページやブログサイトの作成を行うことができるオープンソースのコードを使うことで、面倒なサイト構築を簡略化しサイト運営に集中することができます。

オープンソースのため、誰もが拡張機能や付随するツールを開発することができ、さまざまな便利ツールが使えます。ブログ記事やコンテンツを簡単に追加したり、プラグイン（拡張機能）を自由に追加してサイトをカスタマイズできるのが特徴です。

メリット

• 無料でダウンロードして使える

• 豊富なプラグイン（拡張機能）を使って自由にサイトをカスタマイズできる

• インターネット上にたくさんの情報がある

デメリット

• 個人で作る場合は専門知識が必須

• ソフトのダウンロードに加えて別途サーバー契約が必要

• オープンソースのため、セキュリティが比較的脆弱

• 運営・メンテナンスなどはすべて自分で行う必要がある

04. プログラミングスキルを使って自分で作成する

Web デザインや開発の経験があるという方は、自分でコーディングを行うというオプションもあります。高い専門知識があれば、ツールの制限を受けずに自由にウェブサイトを構築することができます。「あの人の書いたコードは美しい」「前任者が構築したシステムを改修するのがすごく難しい」などの談議がしばしば行われるほど、コードにはそれぞれの開発者の色が出るものです。自分を表現する作品としてゼロからホームページを作りたいという人には、自作が適していると言えるでしょう。

スキルを習得するための時間や手間はかかりますが、自分のスキルアップが目的の場合に向いている方法だと言えます。

メリット　

• スキルを磨くことができる

• ツールの制限を受けない

• コードをきれいに書くことができる（コードの品質は SEO にも影響）

デメリット

• 必要なスキルを身につけるまで時間と手間がかかる

• 技術力によってデザインを妥協せざるを得ない

• 開発に手間と時間がかかる

05. Web サイト制作業者に依頼する

自分で作るよりはプロに任せたいという場合は、信頼できる制作会社にサイトの作成を依頼しましょう。自分が思い描いているサイトのイメージがしっかりと伝わるよう、依頼する前に必ず「これは外せない」という点を洗い出しておくことが重要です。

Wix では公認の Web デザイナーにサイト作成を依頼できる「Wix Marketplace」というサービスも展開しています。依頼したいサービスの種類を選び、質問に答えていくだけで制作者のニーズに適した Wix パートナーから提案が届きます。また、サービス種類や地域などでパートナーを検索し、一覧から選んでオファーを出すこともできます。

メリット

• 自作するよりもクオリティの高いホームページに仕上がる

• SEO やコンテンツに関するアドバイスがもらえることも多い

• サイトを公開した後の運用まで任せられる

デメリット

• 自作する場合と比べてコストがかかる

• 意思疎通が難しい場合がある

• 思い通りのデザインになるかの保証がない

以上、ホームページの作り方 5 パターンを紹介しました。実際にそれぞれの方法でホームページを作成した時のメリット・デメリットが理解できたでしょうか。これらの方法の中で、初めてホームページを作成する方におすすめなのが、ホームページ作成ソフトを使った方法です。その中でも代表的なツールを次の章で紹介します。

ホームページ作成方法の選び方

ホームページの作り方が分かったら、あとはご自身の条件に応じてどれを使うかを選ぶだけ。以下のリストを参考にして、ご自身に最適なサービスを絞り込んでみましょう。

1. ホームページ制作にかけられる費用

2. ホームページ構築の専門知識の有無

3. 完成までに必要な時間

4. サポートの充実度

5. 運営・メンテナンスのしやすさ

01. ホームページ制作にかけられる費用

まずは、ホームページを作成する意図を思い返してそれに見合った予算を考えてみましょう。個人でビジネスを始めるのでできるだけ初期費用を節約したいのか、会社サイトを丸ごとリニューアルしたいので予算はそれなりに出しても良いのかなど、サイト作成一つとってもパターンは様々です。

一般的な価格帯は次の通りです。レンタルサーバーの契約料金はプランや容量に応じて月々数百円〜数千円で、会社によっては初期費用が発生する場合もあります。独自ドメインも年間5,000円程度で取得することができます。

• ホームページ作成サービス：無料、または有料プラン

• Wix：無料、または月額 500円 から必要な機能に合わせて選べる多様な有料プラン

• オープンソース：サーバー契約料金（月々）＋有料プラン使用料

• コーディングで自作：サーバー契約料金 + ドメイン料（月々）

• 制作会社に依頼：30,000円～30万円（数ページの場合。ページ数や依頼する制作会社により大きく異なります）

02. ホームページ構築の専門知識の有無

自分の知識レベルに合っているかどうかも、ホームページ作成の方法を選ぶときの重要な指標です。完全初心者でも簡単にホームページが作成できるサービスを求めているのか、それなりに知識があるのでカスタマイズ性を重視するのか、または自分で作るよりも依頼する方がコスト的・時間的にも得策なのか、といったところも検討しておきましょう。

• ホームページ作成サービス：完全初心者OK。サービスによっては自分でデザインを編集したり、コードが追加できるものもある

• Wix : 完全初心者にもフレンドリー。初心者でも本格的に SEO やアクセシビリティ設定を最適化するガイドが充実。

• オープンソース：初心者にも扱いやすいが、プラグインを使ったより自由なカスタマイズをするためには知識が必要

• コーディングで自作：専門知識が必須

• 制作会社に依頼：完全初心者OK。知識があれば制作会社の担当者にニーズを伝えやすいというメリットがある

03. 完成までに必要な時間

次に重要なのが、「サイトをいつまでに作成したいか」ということです。たとえば、イベントの開催を翌週に控えているので簡単なサイトをとりあえず作成しておきたいという場合や、会社サイトをリニューアルするのでじっくり時間をかけてプランニングを行いたいという場合があるかもしれません。

また、作成するホームページのコンテンツ量やページ数によっても所要期間は異なります。

• ホームページ作成サービス：最短 1 日で作成

• Wix : 最短 1 日で、外観や機能も本格的なウェブサイトが作成可能

• オープンソース：知識レベルに応じて1週間～（初心者の場合は学習期間が必要）

• コーディングで自作： 1 週間～

• 制作会社に依頼：平均 1 か月〜 3 か月。使用するコンテンツや画像などは基本的にクライアント（この場合はあなた）が準備するため、準備が整うまでの期間や制作会社との打ち合わせスケジュールによって期間は前後します。

04. サポートの充実度

ホームページ作成がはじめてで疑問点が発生する可能性がある、分からないところを質問しながら解決していきたいという場合は、サポート体制が整っているサービスを選ぶと安心です。特に、海外発のホームページ作成サービスを使用するなら、日本語でのヘルプドキュメントやカスタマーサポートの有無を確認しておきましょう。

• ホームページ作成サービス：無料でサポートが受けられるところが大半だが、中には有料プランユーザーのみにサポートを提供しているサービスも。

• Wix：充実したヘルプセンター記事の提供や、オンラインチャット、カスタマーケアでの電話折り返しサポートでの対応を提供。

• オープンソース：日本語の各種ドキュメント、オンラインでの問い合わせに対応。日本語のサポートフォーラムもあり

• コーディングで自作：サポートなし

• 制作会社に依頼：技術面は制作会社がすべて対応してくれるので安心

05. 運営・メンテナンスのしやすさ

意外に盲点なのが、「ホームページは作成・公開したらそれで終わり」ではありません。公開した後も、ブログを始めるためにページを追加したり、デザインをアップデート品が、サイトを成長させていく必要があります。また、古くなったページをリニューアルするなど長期的なメインテナンスも重要です。サイトを常に最新の状態にアップデートするように意識しましょう。

また、サーバーがダウンしてサイトが表示されなくなったり、手違いでいつの間にか前のレイアウトに戻っていたといった問題が起こった時の対応も行っていく必要があります。

• ホームページ作成サービス：サイトを公開した後の編集も簡単に行える。サーバー契約もサービスに含まれるため、セキュリティに力を入れているサービスを選べば万が一の時も安心。

• Wix：ブログの投稿やサイトの更新も Wix エディタ一つで管理可能。サーバー契約もサービスに含まれ、24時間体制でサーバーセキュリティを監視しており、急激なアクセス増加があっても安心。

• オープンソース：サイトのカスタマイズは可能だが、サーバー契約が別のため別途問い合わせが必要

• コーディングで自作：上記と同じく、いつでも編集可能だがサーバーの安定稼働に関しては自己メンテナンスが必要

• 制作会社に依頼：制作会社によってはサイト公開後の運営まで丸投げできるとこともあり。変更したい箇所があれば連絡をとり、変更を依頼します。

ホームページを作るときの5つの手順

ホームページ制作の流れは、大きく5つ手順に分けられます。初めてホームページを制作する方も、順を追ってサイトの構成を考えることで本格的なホームページを作成を目指しましょう。

1. ホームページの目的（KPI）を明確にする

2. ホームページのコンテンツ設計

3. ブランドイメージを反映したWebデザインのコンセプトを用意

4. ホームページを制作／外注

5. 公開

1. ホームページの目的（KPI）を明確にする

ホームページの作成をはじめる前に、まずはホームページで「何を達成したいか」を明確にしておきましょう。Web サイトと一口に言っても、さまざまなホームページの種類や目的があります。どの種類のホームページを選ぶにしても、肝心なのは計測可能な目標（KPI）を定めた上で、サイトを作成することです。

ホームページにはたとえば以下のような種類があります。

ランディングページ（LP）：購入や申し込みなどのアクションをとってもらうことが目的

ネットショップサイト：商品を販売することが目的

ポートフォリオサイト：自身が作った作品を掲載し、新規クライアントに対し実績やスキルをアピールすることが目的

それぞれ、目的が異なるため、作りたいサイトがどんなタイプに分類されるのか確認しましょう。

2. ホームページのコンテンツ設計

次に、ホームページのコンテンツを設計します。ページを訪問したユーザーが、目的を達成できるように、わかりやすい動線を意識しましょう。ウェブサイトに必要な構成要素やパーツをリストアップすることで、ウェブデザインの準備も抜けなく取り組むことができます。デザインを作成する前に、どんなコンテンツにするのか、内容を固めましょう。

ウェブサイトを構築しているページがどのように繋がっているのかを可視化するサイトマップを作成しましょう。サイトマップが作成できたら、それぞれのページに対して SEO 戦略を立てるために、キーワード調査を行います。この時、競合分析も同時に行うことがおすすめです。競合業者のサイトを分析することで、ブランドイメージの差別化や、ターゲット層のニーズなどを明確にすることができます。

3 . ブランドイメージを反映したWebデザインのコンセプトを用意

いよいよ、Web デザインに取り掛かります。STEP2 で定めたコンテンツ設計と競合分析に基づいて、オリジナルのブランドコンセプトを定めます。このコンセプトに基づいて、ブランドカラーの策定やロゴデザインの制作に取り掛かりましょう。

ロゴデザインはプロのデザイナーに外注することが一般的です。自分で作成したい場合は、オンラインのロゴメーカーツールが便利です。ロゴジェネレーターを利用すれば、初めてロゴをデザインする人でも、簡単なアンケートに回答するだけでAI がオリジナルロゴを作成してくれます。

4. ホームページを制作／外注する

自身や自社のニーズにあったホームページの作り方は決まっていますか？ これまでのSTEP通りに準備をしておくことで、ホームページの制作を依頼する場合も、自分で制作する場合もスムーズに行うことができます。 サイトマップやデザイン素材をホームページに実装していきましょう。この時、スマホなどの異なるデバイスや異なる環境でデザインが正確にできているかテストを行いながら制作することをおすすめします。どの環境からでも問題なくホームページが見えているか、設計した通りにシステムが動作しているかのチェックを公開前に必ず行いましょう。

5. 公開

いよいよ公開です。万全を期していても、予想外のエラーは発生します。ページの公開ができたら、公開されたページの動作確認や表示に問題がないか、最終確認を行いましょう。ホームページは、公開したら終わりではありません。定期的に Web サイトを更新したりコンテンツを追加することは、訪問者とのエンゲージメントアップに繋がるだけでなく、検索エンジンからもポジティブな評価を得ることができます。Google アナリティクスなどのトラッキングツールを利用して、サイトの成長具合とパフォーマンスを定期的に測定しながら、ホームページを運営していきましょう。

おすすめ無料ホームページツール Wix

「自分でホームページを作ってみたいけど、予算は低く抑えたい」「初めてホームページを作成するので、サポートがあると安心」そんな方には、WIx のホームページ作成ツールの利用がおすすめです。

Wix （ウィックス）

世界で 2 億人以上に選ばれているホームページ作成サービス。コーディングの知識がなくても、デザイン性と機能性に優れたホームページを作成できることが特徴です。800 種類以上から選べるホームページテンプレート、高機能 SEO ツール、万全のWebセキュリティなど、本格的なホームページ運営のための機能が充実しています。有料版と無料版があります。

ホームページ運営に必要なツールが満載

いますぐ無料でホームページを作成

まとめ

ホームページの作成には、さまざまな選択肢があることがお分かりいただけたかと思います。上記でご紹介した作成方法の選び方に照らし合わせて、ご自身や自社に合った方法を検討してみましょう。

たとえば、個人事業主の方の場合、

• 予算：できるだけかけたくない、もしくは低コストに抑えたい

• 専門知識：なし

• 期限：できるだけ早く

• サポート：必要に応じたサポートは必須

• 運営：自身でやっていきたい

といった条件があるかもしれません。この場合は Wix のようなホームページ作成サービスが適していると言えます。

メールアドレスの登録だけで、すぐに無料ホームページの作成が始めらます。まずは Wix の豊富なホームページテンプレートとパワフルなホームページ編集機能を無料でお試しください。

800種類以上のテンプレートが無料で使える

いますぐ無料でホームページを作成

編集者：Miyuki Shimose

ブログ コンテンツマネージャー