千葉県柏市のウェブマーケティングとホームページ制作の会社

ホームページの作成手順は5ステップ!あなたに適した作成方法も紹介

ホームページの作成手順は5ステップ!あなたに適した作成方法も紹介

Shaer
Tweet
LinkedIn
Print
公開日:2022-09-24
最終更新日:2022-09-26

「ホームページの作成手順が知りたい」「何からはじめたらいいのかわからない」とお悩みではありませんか?ホームページの作成手順は大きく分けて5つのステップがあります。

  1. 目的やターゲットを明確にする
  2. Webサイトを設計する
  3. デザインを制作する
  4. コーディングをする
  5. ホームページを公開する

どれもホームページを作成する上で欠かせないものなので、確実に進めていきましょう。

この記事では、ホームページの作成手順やホームページを作成する方法について解説します。初歩的な部分から説明しているため、初めてホームページを作る方もご安心ください。

世界中のWebサイトが閲覧できる仕組みについて

あらゆるサイトが簡単に閲覧できる仕組みは以下のとおりです。

  1. Web ブラウザにURLを入力してアクセスをリクエストする
  2. DNSサーバーへURLが送られ、ドメインがIPアドレスへと変換される
  3. DNSサーバーから送られてきたIPアドレスを用いてWebサーバーへアクセスし、データを要求する
  4. HTMLファイルが送信され、該当ページがWebブラウザに表示される

私たちがインターネットを利用しているとき、気になる場所をクリックすると該当のページが表示されますが、実は複数の作業が行われていたのです。

ホームページに必要なものは?

ホームページを作成し、運営する上で必要なものは、主にサーバーとドメインの2つです。
それぞれ以下のようなものと認識しておきましょう。

  • ドメイン ⇨ インターネット上の住所のようなもの
  • サーバー ⇨ データを保管しておく土地のようなもの
  • ホームページ(Webサイト)⇨ インターネット上の家のようなもの

サーバーは有料でレンタルサーバーを契約するのが一般的ですが、ホームページ作成サービスならサーバーも無料で使えることがあります。

ドメインとは、いわゆるホームページアドレスのことをいいいます。会社やお店などビジネス用のホームページを作成する場合は、年間数千円程度の費用がかかりますが、「◯◯.com」の◯◯の部分に好みの文字列をいれられる独自ドメインを取得しておくことがオススメです。
Wixやペライチなどのホームページ作成サービスでは、無料プランでは独自ドメインが使えないことがほとんどですが、有料プランを契約すれば独自ドメインを使用することができます。

その他、HTMLファイルやFTPソフト、WordPressなど、作成方法によっても必要なものは異なってきます。

ホームページを作成する方法は4つ

ホームページを作成する方法は4つあります。どのような人に向いているかも一緒に紹介しているので、この記事を参考に自分に当てはまるものを選んでみましょう。

HTMLやCSSを使ってゼロから作る

HTMLやCSSを使い、ゼロから自分でホームページを作り上げる方法です。HTMLとはWebページを作成するための言語で、CSSとはWEBページのレイアウトや文字サイズ、色など見た目を指定するための言語です。

費用を抑えつつ自由にホームページを作れるのが大きなメリットです。自分ですべてをおこなう分「言語化しにくいけど、ああいう雰囲気のデザインにしたい」といったような願望も叶えやすいでしょう。

ただし、HTMLやCSSを理解するまでは、そもそもホームページの作成に着手することができません。明確な目的が無いと、それらの知識をみにつける過程で挫折してしまう可能性があります。

この方法が向いている人

  • すでにHTML / CSSを理解している人
  • Webデザインに関する知識がある人
  • これからHTML / CSSを学んでいきたいと考えている人

WordPressなどのCMSを利用する

WordPressとは、世界中で利用されている無料で使えるホームページ制作ツール(CMS)です。
「テーマ」と呼ばれる多くのテンプレートが用意されているので、簡単なホームページであれば、HTMLやCSSなどの専門知識がなくても気に入ったテーマを見つけて自分好みのホームページを短時間で作成することができます。

商品案内ページや会社概要ページといった固定的なページを作るだけでなく、投稿機能を使ってブログを公開することもできるので、ホームページからどんどん情報発信したいという人にはオススメです。

さらに、プラグインと呼ばれる拡張機能を利用して、ビジネス用ホームページには必要なお問い合わせフォームを設置したり、予約システムなどの便利な機能をホームページに追加することもできます。

WordPressはたくさんの人が利用している分、多くの情報が公開されているので、使い方やカスタマイズ方法などさまざまな情報が手に入りやすいのも初心者には嬉しい点ではないでしょうか。

ただし、WordPress自体は無料で利用できますが、ホームページを公開するためのwebサーバーやドメインなどが必要になりますのでそれらの費用がかかりますし、有料テーマを使う場合はテーマの購入費用などが発生します。

とは言ってもWordPressを自由自在に扱ってホームページを作成するにはそれなりの知識も必要です。

この方法が向いている人

  • すぐにホームページを作りたい人
  • 専門知識はないが、デザインにこだわりたい人
  • ホームページでブログもやりたい方

ホームページ作成サービスを使う

WixやJimdo、ペライチなどのホームページ作成サービスを使えば、専門知識がなくても直感的にホームページを作成することができます。また、わざわざ自分でウェブサーバーを用意したり、ドメインを取得しなくてもホームページを作成することができるので、なるべく早く作りたい人に向いているでしょう。

ホームページ作成サービスには、無料プランと有料プランがありますが、会社やお店などビジネス用のホームページを作るのであれば、独自ドメインが使える有料プランの利用がオススメです。また、無料プランのままでは、将来的にSEO面でのデメリットなどが出てくることもありますから、ビジネス用のホームページを作るのであれば有料プラン一択です。もちろん、作成段階では無料プランで始めて、完成したら有料プランに切り替えれば大丈夫です。

参考:無料のホームページ作成サービスで作る際の注意点

この方法が向いている人

  • 簡単なもの、もしくは小規模なホームページが欲しい人
  • 時間をかけずに、楽にホームページを作りたい人

ホームページ制作会社に依頼する

「費用はかかってもいいから、クオリティの高いホームページにしたい」という方は、ホームページ制作会社に依頼するのがオススメです。Webデザインなどの勉強に時間を費やすことなく、クオリティの高いホームページを作ることができます。

制作費用はホームページの規模やページ数、機能などによって変わってきますが、中小企業やお店のホームページであれば、一般的には十数万円~数十万円が目安です。もちろん、作り方や求める機能によっては100万円を超えてくる場合もあります。

制作会社にホームページ作成を依頼する際には、単純に値段が高い・安いだけでなく、どのような目的で、どのようなホームページを作りたいのか?を明確した上で、依頼先を選定していくと良いでしょう。

この方法が向いている人

  • ホームページ作成の予算が確保できる人
  • プロクロリティーのホームページが欲しい人

ホームページの作成手順

ホームページの作成手順は、大きく分けて5ステップです。どれも欠かせないものなので、一歩ずつ確実に進めていきましょう。基本的に自分でゼロからホームページを作る方法を想定して説明していますが、その他の方法で作るときにも役に立つ知識です。

目的やターゲットを明確にする

ホームページを作るうえで大切なのが、目的やターゲットを明確にすることです。そうすることでホームページの方向性や必要な機能、デザインが決まりやすくなります。

ホームページの目的が「お問い合わせを増やしたい」「商品の売上を伸ばしたい」「名刺・パンフ代わりにどのような会社かわかればOK」という3つの目的の場合、それぞれで掲載すべき情報は変わります。例えば、「お問い合わせを増やしたい」のであれば、取り扱い商品やサービスの見せ方も、「どのような会社か分かればOK」というホームページとはまったく変わってきます。

また、「お問い合わせを増やしたい」「商品の売上を伸ばしたい」という場合は、目標となる数値も設定しておくと良いです。そうすることで、ホームページ公開後の状態の把握や、改善のための施策などもやりやすくなります。

目標やターゲットが決まったら、ホームページに掲載する内容を書き出します。商品案内や会社概要、連絡先、お問い合わせフォーム、サービスに関するブログなど、目的を達成するために必要な要素は何か?を考えるのがポイントです。

ホームページの設計をする

次にホームページの設計をしていきます。設計段階では、まずホームページ全体の構造を決めてから各ページの構成を決めていきます。

ホームページは「トップページ⇨会社概要⇨代表のあいさつ」のように階層構造になっています。そのため全体の構造を消えるm祭には、書き出した「ホームページに掲載する内容」をカテゴリごとに分けて「サイトマップ」と呼ばれるものを作りましょう。

サイトマップではトップページを第1階層として、第2階層や第3階層のコンテンツは関連性があるものを並べます。

その後は、各ページごとに何を掲載するのかを決め、「ワイヤーフレーム」と呼ばれるレイアウトの設計図を作っていきます。

デザインを作成する

ホームページの設計が終わったら、いよいよホームページのデザインを作成します。

デザイン上のコンセプトやワイヤーフレームをもとに、画像やテキストの配置、余白などを決定していきましょう。統一感のあるホームページに仕上げるために、使用する色、フォントの種類、画像やイラストのテイストなどのルールを定めておくことが重要です。

なお、ホームページに使用する画像を準備する際には、その画像の著作権などに気をつけるようにしましょう。稀に「うちはこのメーカーの代理店として商品をあつかっているから」と言って、無断でメーカーホームページ等から画像を転載する方もいますが、トラブルの元となる可能性もありますから、そういった場合もきちんと使用に関する許諾をとっておくことが大切です。

また、著作権フリーの写真素材サイトを利用するのもオススメです。もちろん、この場合も利用規約は確認して、規約に則って利用することが大切です。

コーディングする

デザインするだけでは、ホームページとして機能しません。デザインができあがったら、インターネット上で表示できるように、HTMLやCSS、JavaScriptなどの言語を使ってコードを記述していく必要があります。この作業を「コーディング」といいます。
※WordPressやホームページ作成サービスの場合は基本的には不要です。

動作を検証してホームページを公開する

コーディングが終わればホームページの完成ですが、公開する前に動作などを確認していきます。具体的には

  • PCやスマホなど、どのデバイスからでもレイアウトが崩れることなく表示されているか
  • リンク切れはないか
  • お問い合わせフォームは清浄に作動しているか

などです。デバイスによって表示が崩れていたりすると、ユーザー離脱の一因にもなりますので、問題点があれば必ず修正しましょう。

万全な状態になったら、HTMLやCSS、画像ファイルなどをサーバーにアップロードしてホームページを公開します。

自分に合った方法でホームページを作成してみよう

ホームページを作成する際は、手順を守ることが大切です。1つでも抜けてしまうと、ホームページ作成が思うように進まなかったり、ホームページが正常に機能しなかったり、成果につながりにくくなったりしてしまいます。

今回紹介した手順は、基本的には自分でゼロから作る場合を想定していますが、実はコーディング以外はどの作り方で作るにしても大切な手順になります。

もちろん、制作会社に依頼するならば、自分でデザインを作る必要もないですし、コーディングしたりすることもありません。また、動作検証も基本的には自分でやる必要はないでしょう。しかし、一番最初の「目的やターゲットを明確にする」に関しては、絶対に丸投げしちゃダメな部分です。

仮に、目的やターゲットを明確にできていない状態だったとしてもそれほど心配する必要はありません。例えば弊社の場合になりますが、ご相談をいただき初回オリエンテーションの際にヒアリングして目的などを具体化した上でホームページの構成案などを提案させていただきます。お気軽にご相談ください。

PLUS SPIRALの「ワンポイントウェブ集客」メルマガ

中小企業や小さな会社のウェブ集客に役立つ情報やヒントをお届けいたします。
登録は無料。不要な場合はいつでも解除できます。

竹口 享介
竹口 享介
株式会社PLUS SPIRAL 代表| 2006年未経験で飛び込んだWEB業界。訳あっていきなりフリーランスでホームページ制作業として開業。2012年頃から本格的にWEBマーケティング学び、現在は中小企業や個人事業主向けにホームページ制作や集客をサポートするためのサービスを提供しています。テクニックだけに頼らない分析に基づき本質を押さえたアドバイスを得意としています。

RELATED POSTS 関連記事はこちら

Scroll to Top