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


ホームページの作り方

この記事は 2022 年 3 月 29 日に公開、2022 年 7 月 26 日に更新しています。


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


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


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


目次


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

  1. ホームページ作成ソフトを利用する

  2. Wix を使って作成する

  3. WordPress を使って作成する

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

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

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

  1. Wix

  2. Jimdo

  3. STUDIO

  4. ペライチ

  5. Goope

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

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

  2. 専門知識の有無

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

  4. サポートの充実度

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

サイト作成に必要なもの

  1. サーバー

  2. ドメイン

ホームページを作る時の手順

  1. STEP 1:企画

  2. STEP 2:設計

  3. STEP 3:デザイン準備

  4. STEP 4:制作

  5. STEP 5:公開

まとめ



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


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


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


メリット 

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

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

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

デメリット

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

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


02. Wix を使って作成する


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


メリット

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

  • 安心のサポート体制:平日電話お問合せ対応(日本語)やヘルプセンター

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

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

  • Google が新たに定めたウェブに関する主な指標(CWV=コアウェブバイタル)においても WordPress を上回る優秀なパフォーマンス。

デメリット

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

Wix で作成された Web サイトについてこちらのブログ記事で特集しています。また、ユーザー事例を集めた特設サイトから Wix で作成された Web サイトを一覧でご覧いただくことができます。ぜひ、Web デザインの参考にお役立てください。


Wix を使ってホームページを作成


03. WordPress を使って作成する


皆さんも一度は聞いたことがあるであろう「WordPress(ワードプレス)」は、ホームページやブログサイトの作成を行うことができるオープンソースのソフトウェアです。


ブログ記事やコンテンツを簡単に追加したり、プラグイン(拡張機能)を自由に追加してサイトをカスタマイズできるのが特徴で、Web サイトのコンテンツを管理する CMS(コンテンツ管理システム)としては世界トップクラスのシェアを誇ります。


メリット

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

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

  • 利用者数が多いため、インターネット上にたくさんの情報がある

デメリット

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

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

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

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


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

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


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


メリット 

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

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

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

デメリット

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

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

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


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


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


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

メリット

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

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

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

デメリット

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

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

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


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



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


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


ホームページ作成ソフトは Wix 以外にもいくつかあります。それぞれのツールに特徴があり、自身にとって使いやすいものを選ぶことが大切です。ここでは代表的なホームページ作成ツールをいくつか紹介します。


01. Wix (ウィックス)

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


02. Jimdo (ジンドゥー)

初心者でも簡単にサイトが作成できるサービス。40 種類以上のテンプレートから選んで作成する「クリエイター」と、AI がサイトの枠組みを作成してくれる「AI ビルダー」の 2 つのサービスから選べます。全国にJimdoCafeがあり、他のJimdoユーザーと勉強会に参加できるなど、ユーザーコミュニティが充実しています。有料版と無料版があります。


03. STUDIO (スタジオ)

2018年に正式リリースされた比較的新しいホームページ作成ツール。他のサービスに比べてデザインやフォントの自由度が高い点が注目され、ユーザー数が増加しています。有料版と無料版があります。


04. ペライチ

その名の通り、ランディングページや縦長のシングルページサイト向けのテンプレートが充実しているサービス。Zoom 相談などにも対応しており、ユーザーサポートに力を入れています。有料版と無料版があります。


05. Goope (グーぺ)

GMO グループの企業が運営するホームページ作成サービス。他のサービスに比べてカスタマイズ性には多少の制限があるものの、豊富な種類のテンプレートから選んで簡単にサイトを作成できます。すべてのプランが有料ですが、15 日間の無料お試し期間が設けられています。


以上、それぞれのツールを端的に紹介しました。これだけでもツールによって特色が異なることがわかります。ホームページ作成ソフトを選ぶときに大切なポイントは、予算だけではありません。操作性の良さや、実現したい機能が実装できるかどうか、思い描いている Web デザインが再現できるか、といったさまざまな視点で判断する必要があります。次の章では、どのウェブサイト作成ソフトを使うかという点だけでなく、どうやってホームページ作成手段を選べば良いのか、選ぶ時のポイントを具体的に紹介します。



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


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


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

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


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


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


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

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

  • WordPress:サーバー契約料金(月々)+有料プラン使用料

  • コーディングで自作:サーバー契約料金 + ドメイン料(月々)

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


02. 専門知識の有無


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


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

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

  • WordPress:初心者OKだが、知識があればプラグインを使ったより自由なカスタマイズが楽しめる

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

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


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


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


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


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

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

  • WordPress:知識レベルに応じて1週間~(初心者の場合は学習期間が必要)

  • コーディングで自作: 1 週間~

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

04. サポートの充実度


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

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

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

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

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

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


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


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


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


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

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

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

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

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



サイト作成に必要なもの


01. サーバー


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


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

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

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

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

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

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


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

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

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

  • 独自ドメイン使用可

  • 広告の非表示が可能

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


サーバーとドメインのイメージ図


02. ドメイン


ドメインとは、上記の通り Web 上で個々のホームページを見分けるための住所のようなものです。

https://www.kantei.go.jp

https://www.un.org

https://www.wix.com

のように、国や組織、企業などに応じてさまざまなドメインが存在します。


ドメインには独自ドメインと共有ドメインの2種類があります。たとえるならば、独自ドメインは「戸建の家」、共有ドメインは「マンションの一室」のようなものです。


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


共有ドメイン:レンタルサーバー会社やホームページ作成サービスなどが発行する、無料で使用可能なドメインです。たとえば、ブログ投稿サービスであれば


https://japanblog.jp/username

http://username.japanblog.jp


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


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



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


ホームページ制作の流れは、大きく5つの段階に分けられます。企画、設計、デザイン準備、制作、公開です。初めてホームページを制作する方でも、順を追ってサイトの構成を考えることで、ホームページ制作の目的を叶えられる本格的なサイトを作成を目指しましょう。


Wix を使ってホームページ作成を検討している方はこの記事もご覧ください。

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


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

STEP 1 : 企画


ホームページ作成をはじめる前に、まずはそれを通じて「何を達成したいか」を明確にしておきましょう。Web サイトと一口に言っても、さまざまなホームページの種類や目的があります。例えば、ランディングページ、ネットショップサイト、ポートフォリオサイトなどのタイプがあります。作りたいサイトがどんなタイプに分類されるのか確認しましょう。どのタイプを選ぶにしても、肝心なのは目標を一つに絞り、それに沿ってサイトを作成することです。


STEP 2 : 設計


次に、ウェブサイト設計計画を立てます。ページを訪問したユーザーが、目的を達成できるようなわかりやすいナビゲーシ


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


STEP 3 : デザイン準備


いよいよ、Web デザインに取り掛かります。STEP2 で定めたウェブサイトの設計と競合分析に基づいて、デザインコンセプトを定めます。このコンセプトに基づいて、ブランドカラーの策定やロゴデザイン制作をしましょう。Wix のロゴメーカーを利用すれば、簡単なアンケートに回答するだけで、AI がオリジナルロゴを作成してくれます。もちろんデザインのカスタマイズも可能です。


STEP 4: 制作


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


STEP 5: 公開


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





まとめ


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


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

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

  • 専門知識:なし

  • 期限:できるだけ早く

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

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

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


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


編集者:Miyuki Shimose

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


ja03.png