初心者でも1からわかる!
ホームページの作り方の基礎から、作成後の注意点まで解説

  • このエントリーをはてなブックマークに追加
初心者でも1からわかる!ホームページの作り方の基礎から、作成後の注意点まで解説

ホームページを作成するにあたって、方法は様々ありますが、どの方法で作成するにせよ、基本的な知識が必要となります。
スムーズに進められなかったり、コストがかさんでしまうケースがあるようです。
今回はそんなホームページの作成方法の基礎的な部分から作成後の注意点までご紹介致します。

あわせて確認したい

「ネットショップ・ECサイトを作りたい」
と考えている方向けの資料ダウンロード

  • MakeShop(メイクショップ)は使いやすいから売れやすい。
  • 初めてでも誰でもカンタンに。だから継続率98%。
  • 販売手数料がかからないので圧倒的に安い。
  • EC業界の市場規模・トレンドについての解説付き。
  • 継続率98%:2020年1月~2020年9月までの期間において毎月契約更新したショップ様の割合(長期契約のショップ様も含みます)
  • No.1:流通額=受注金額。ネットショップ・ECサイト構築サービス運営企業各社の発表数値より、ASPサービス単体の数値を算出し比較(自社調べ 2022年3月時点)

目次

ホームページ作りに必要な基礎知識

ホームページを作るには、制作会社への外注、WordPressなどのCMS(Contens Management System)の利用、HTMLやCSSを書くなど、さまざまな方法があります。
しかし、いずれの方法をとるにしても基礎的な知識がないと、スムーズに進めることができず、つまずいてしまうことも多いでしょう。
外注する場合であっても、すべての作業を依頼するとコストがかさんでしまうため、みずから対応できる部分は内製化すべきです。
以下では、ホームページ作りに必要な基礎知識について解説します。

ホームページの仕組み

まず、ホームページを作成するにはデザインが必要です。
デザインはHTMLやCSSなどの言語を使用して作成できますが、ホームページ作成用のツールがリリースされているため、コードに関する知識がなくても作成できます。
また、作成したホームページを公開するには、ドメインとサーバーが必要です。ドメインはインターネット上の住所、サーバーはホームページに関する情報を置いておく箱のようなイメージです。
ドメインとサーバーを紐づけることで、世界中のユーザーがインターネットを介してサーバーにアクセスし、ホームページを閲覧できるようになります。

レンタルサーバーを契約する

サーバーとは、ユーザーのリクエストに対して特定の情報を提供するためのシステムです。大企業では自社でサーバーを所有して管理することが多いですが、中小企業や個人事業者の場合、無料のサーバースペースを利用するか、有料のレンタルサーバーを利用するのが一般的です。

簡易的なホームページであれば無料のサーバースペース上に作成できますが、容量が少なく内容が薄くなりがちなため、レンタルサーバーの利用をおすすめします。

ドメインを取得する

ドメインとは、インターネット上の住所です。
ドメインとサーバーを紐づけることによりユーザーがドメインを入力して、サーバー上のホームページにアクセスできるようになります。

ドメインには独自ドメインとサブドメインがあります。
独自ドメインは好きな文字列の直後に.comや.netなどがくるもので、サブドメインとは好きな文字列の直後に.jimdofree.comや.wixsite.comなどがくるものです。
無料のホームページ作成ツールを利用したときは、サブドメインを割り振られるケースが多く、上の例の前者はjimdo、後者はwixというホームページ作成ツールを利用したときに取得できるドメインです。

独自ドメインは取得費用や更新費用がかかりますが、本格的なホームページを作成するのであれば独自ドメインをおすすめします。

ホームページ(中身)を作成する

サーバーとドメインの準備ができたらホームページを作成します。企業や店舗の公式サイト、自社商品を販売するECサイト、広告用のランディングページなど、用途によって必要な機能や適切なデザインは異なります。
競合他社のホームページを参考に、どんな機能があれば便利か、どんなデザインが見やすいのがなど、ユーザーの視点から考えることが大切です。

ホームページを作るにはいろいろな方法がある

ホームページを作るにはいろいろな方法がある

ホームページを作るには、有料ソフトや無料のホームページ作成ツールの利用、制作会社への外注など、さまざまな方法があります。
それぞれの方法で費用、工数、時間が異なるため、メリットやデメリットを理解したうえで選択することが大切です。
またホームページを使って売上を上げたいのか、規模はどれくらいを想定しているかなどを明確にしておくことで検討しやすくなります。
以下では、ホームページを作成する方法について解説します。

市販の有料ソフトを購入して作る

家電量販店やECサイトでは、ホームページ作成用の有料ソフトが販売されています。
代表例はホームページビルダーやDreamweaverなどです。
有料ソフトを利用すればクオリティの高いホームページを作成できますが、費用がかかるほか、多くのソフトではHTMLやCSS、JavaScriptなどの知識が求められる点がデメリットです。
ホームページビルダーをはじめとする、一部のソフトではコードに関する知識がなくてもホームページを作成できるようになっていますが、初心者にはあまりおすすめできません。

無料のツールを利用して作る

インターネット上で利用できる無料ツールやフリーソフトを利用する方法もあります。
費用を抑えられる点が最大のメリットですが、機能が少なく、サポートの面で不安があるツールがほとんどです。
また、サブドメインで運営するようなツールの場合、サービスが終了してしまった場合、ほかのドメインに移せなくなってしまうため、注意しましょう。

専門業者へ依頼する

専門業者に依頼する方法は、もっとも確実に、クオリティの高いホームページを作成できる方法です。
実績のある業者を選べば、デザインや機能の面では満足のいくホームページを作成できるでしょう。
一方、相応のコストがかかってしまう点はデメリットです。
とくに、独自のデザインやさまざまな機能を追加しようとすると、ホームページを作成するだけで100万円以上の費用になってしまう可能性もあります。

WordPressなどのCMSを利用する

WordPressなどのCMSを利用すれば、テキストや画像、バナーなどを配置していくだけでホームページを作成できます。
テンプレートをもとにレイアウトを変更するだけでオリジナルのホームページを作成できるため、多くのユーザーから利用されています。
コードに関する知識がなくても、基本的な操作はできるように作られているうえ、書籍やインターネット上の情報も充実しており、初心者でも利用しやすいでしょう。

自分でHTML・CSSなどプログラミング言語を使い作成する

ホームページは、HTMLやCSS、JavaScriptなどの言語で構築されているため、プログラミング言語を理解してコードを書ければ、すべて自分で作成できます。
知識さえあればカスタマイズも自由自在なため、自由度は格段に上がります。
一方、ホームページをイチから作成するには高度な専門知識が必要です。
趣味や勉強を目的として作るのであれば問題ありませんが、作成にかかる時間や労力を考えるとおすすめできません。

ホームページの作り方実際の手順を解説

ホームページの作り方実際の手順を解説

ホームページを作るうえでは、実務的な作業だけではなく、事前の企画や準備も重要です。
土台となる計画がしっかりしていないと、作成後に不便や不都合が生じるリスクもあります。
また、制作会社に作成を依頼する場合は、追加の要件が発生するたびに費用がかかってしまうため、はじめに構造や機能を決めておきましょう。
以下では、ホームページの作り方について、実際の手順に沿って解説します。

ホームページ作成の目的を明確にする

はじめにホームページを作る目的を明確にしておくことが大切です。
たとえば、企業や店舗の概要を示すだけでいいのか、認知度や売上を向上させたいのか、ホームページ上で商品やサービスを販売したいのかなど、ホームページを作成する目的は多種多様です。
概要を示すだけであればシンプルな構成で、必要な機能も最低限で済みますが、商品やサービスを販売するのであれば、コンバージョン(成約)につながりやすい設計にする必要があります。
ホームページを作る目的については、プロジェクトに携わるメンバー全員が共通認識を持っておくようにしましょう。

ホームページに掲載する内容を決定する

ホームページを作る目的が決まったら掲載する内容を決めます。
たとえば、コーポレートサイトであれば、会社概要や代表者紹介、事業内容などの項目が必要です。
一方、SEOによる集客や認知度の向上まで狙うのであれば、商品やサービスに関連するコンテンツを発信して、興味を持っているユーザーの目にとまりやすくするなどの工夫が求められます。

ホームページの構造設計を行う

ホームページを作る目的と掲載する内容が決まったら、いよいよ構造設計へ入ります。ホームページは階層構造になっており、トップページから各種メニュー、下層のメニュー、個々のコンテンツの順にアクセスできるよう内部リンクを配置します。

トップページにはどんなメニューがあって、それぞれのメニュー内にどんなコンテンツがあるかを把握するうえで役立つのが、サイトマップと呼ばれる設計図です。
サイトマップには、設計するうえで構造関係をあらわすものと、Googleがサイト構造の理解しやすいように送信するものの2種類があるため、混同しないよう注意しましょう。

作った構造のワイヤーフレームを作成する

構造設計およびサイトマップの作成が完了したらワイヤーフレームを作成します。ワイヤーフレームとは、ホームページの全体的なレイアウトをあらわすものです。メインビジュアル、グローバルナビ、メガメニューなどのコンテンツを配置していきます。

ワイヤーフレームはホームページの骨組みとなるため、完成後の視認性や操作性を左右します。
また、ワイヤーフレームはPC版とモバイル版でそれぞれ必要になります。
前者はPCでホームページを表示する際のデザイン、後者はスマートフォンで表示する際のデザインです。
アダプティブデザインと呼ばれるまったく別のデザインでそれぞれホームページを作成する方法もありますが、デバイスの画面サイズによって表示を最適化するレスポンシブデザインが近年のトレンドです。

各ページに必要な画像やテキストを用意する

次に、ワイヤーフレームにもとづいて必要な画像やテキストを準備します。
制作会社に外注する場合も、画像やテキストは発注する側が準備するケースが一般的です。
もちろん画像やテキストの外注もできますが、撮影や編集を含めるとコストがかさむうえ、外部の業者が自社の企業理念やホームページのコンセプトを完璧に反映することは難しく、得策ではないでしょう。
また、画像を準備する際は著作権に注意する必要があります。必ず商用フリーの画像を使用しなければいけません。

ホームページの外観デザインを制作する

画像やテキストの決定後は、デザインの制作にとりかかります。デザインを制作する際は、ホームページのコンセプトにもとづき、全体的なデザインを統一することがポイントです。
統一感を出すためには、色数を増やしすぎず、メインカラーを決定したうえで相性のよい配色パターンやフォントなどを検討するとよいでしょう。複数のパターンを制作して、その中からもっともよいものを選ぶ方法もあります。

デザインをもとにコーディングをする

デザインが固まったらコーディング作業に入ります。コーディングとは、HTMLやCSS、JavaScriptなどのプログラミング言語を使用して、プログラムを組むことです。
ホームページ上の表示や挙動、リンクなどはすべてプログラムにもとづいて動作します。
コーディングではプログラミングに関する知識が必要となるため、エンジニアが担当しますが、コーディング不要のホームページ作成ツールを利用する場合は、直感的な操作のみでデザインを反映できます。

ホームページを公開する

コーディングが終わり、動作が確認できたらホームページを公開します。作成したHTMLファイルや画像ファイルをサーバーにアップロードすることで、世界中のユーザーがホームページを閲覧できるようになります。
しかし、Googleのクローラーにインデックスされるまで検索結果画面には表示されません。クローラーとは世界中のWebサイトを巡回するシステムです。
クローラーがアクセスした結果、問題ないと判断されたページのみがインデックスされ、Googleや Yahoo!の検索結果画面に表示されます。

EC業界の市場規模・トレンド解説付き

ホームページを作成した後に注意すること

ホームページを作成した後に注意すること

ホームページを作成する目的はケースによってさまざまですが、多くの場合、ホームページを作成して終了ではありません。
作成後の運用ができていなければ、本来の目的を達成できなくなってしまう可能性もあります。
以下では、ホームページ作成後の注意点について解説します。

継続的に集客戦略を考える

ホームページの作成後は、どうすれば集客を実現できるかを考える必要があります。ホームページにおける集客を実現するためのアプローチは、主にSEOと広告の2つです。
SEOとは、Search Engine Optimizationの頭文字をとったものです。「検索エンジン最適化」と訳され、検索結果の順位を決定するGoogleのアルゴリズムに最適化することで、上位表示を実現します。
コストをかけずに取り組める点がSEOのメリットですが、価値あるコンテンツを発信していても、アルゴリズムに評価され上位表示できるようになるまでには少なからず時間がかかります。

広告は、リスティング広告やSNS広告を出稿して、クリックするとホームページに遷移するよう設定する方法です。
広告費がかかるデメリットはあるものの、確実に集客を実現できます。

ホームページの情報は常に最新のものに更新

ホームページ上の情報を常に更新することも非常に重要です。
とくに、それほど積極的にホームページを活用していない場合、掲載している情報のチェックを怠ってしまう可能性が高いです。
しかし、ホームページの情報を更新しておらず、誤った情報を掲載しているとユーザーの信頼を失いかねません。
また、営業時間やメニューに変更が生じた際はもちろんですが、それ以外の場合でもイベントやキャンペーンの実施など、さまざまな情報を発信することでユーザーの興味をひきやすくなります。

お問い合わせへの対応

ホームページを作成すると、オンラインでの問い合わせがくる可能性もあります。
お問い合わせフォームやメールフォームなど、ホームページ経由の問い合わせをどこで確認できるのかは必ずチェックしておきましょう。
あらかじめ担当者を決めておくことも大切です。
また、問い合わせ完了後、数日以内に返信する旨の自動送信メールが飛ぶように設定しておくと、問い合わせたユーザーに親切な印象を与えられます。

ドメイン・サーバーなどの更新

ドメインやサーバーは基本的に年間契約で更新が必要です。更新を忘れてしまうとホームページが閲覧できなくなってしまうため、注意しましょう。
ドメインやサーバーに関するサービスの多くは、クレジット決済による自動更新を導入しているため、クレジットカード情報を登録しておくことも有効です。

Googleアナリティクス・Googleサーチコンソールへの登録

Googleは、ホームページに関する分析ツールをリリースしており、もっとも有名なツールがGoogleアナリティクスとGoogleサーチコンソールです。いずれもGoogleアカウントを持っているユーザーであれば、無料で利用可能です。
Googleアナリティクスは、ホームページ内におけるユーザー動向やアクセスの分析、Googleサーチコンソールは、検索結果画面における順位や表示回数、クリック率を確認できます。いずれもドメインを登録しておかないとデータを閲覧できないため、ホームページの公開後は忘れずに登録しておきましょう。

まとめ

まとめ

ホームページを作成する際は、サーバーやドメインの準備、作成目的と掲載内容の決定、構造やデザインの設計、コーディングの順序に沿って進める必要があります。
作成の流れでは、実務的な作業に注目しがちですが、まずは戦略を策定することが大切です。
たとえばホームページを使って売上を上げたいのかどうか、事業規模はどれくらいを想定しているか、公開後の集客方法や運用体制にどれくらいコストをかけるのかなどを事前に整理しておくことが戦略策定につながります。

どのような戦略をたてるかによって、適切なデザインや構造は異なります。
そのため、外注、内製を問わず、プロジェクトに参加するメンバーの間で、ホームページを作成する目的や戦略についての共通認識を持っておくべきです。

MakeShopは
ネットショップ・ECサイトに
必要なすべてが揃っています

60秒でかんたん
無料体験してみる

MakeShopについての
お問い合わせ・ご相談は
お気軽にお電話ください。

新規お申し込み・開店について

03-5728-6236

制作会社様・パートナー制度について

03-5728-6316

【受付時間】10:00~12:00/13:00~18:00(土日祝日を除く)