ホームページとWeb サイトの違いとは？初心者でもわかる制作の流れガイド｜lapTravel

普段何気なく見ているホームページやWebサイト。

「そもそもホームページとWebサイトって何が違うの？」
「どんな流れで制作されているの？」

と疑問に思ったことはありませんか？
今回は、初心者が混乱しやすいホームページとWebサイトの違いと、Webサイトが完成するまでの基本手順をわかりやすく解説します。

Contents

ホームページとWebサイトの違い

「ホームページ＝Webサイト」と思っている人は多いのですが、実は意味が異なります。

それぞれのページには固有のURLが割り振られています。例えば、当サイトのプロフィールページやこの記事は「Webページ」です。
1つ1つのページ単位が「Webページ」だと考えると分かりやすいでしょう。

Webサイトとは、そのWebページが集まった集合体のことを指します。

一方、ホームページはWebサイトの「入口」になるページのこと。
例えば、https://laptravel.com にアクセスすると最初に表示されるページが、このサイトのホームページです。

それぞれの違い
・Webページ：1つ1つのページ（記事や固定ページ）
・Webサイト：Webページが集まったもの
・ホームページ：Webサイトの入口となるページ（トップページ）

一般的には「Webサイト」のことを「ホームページ」と呼ぶケースが多く、日常会話では同義で使われることが多いです。

ここからは、Webサイトが完成するまでの基本ステップを紹介します。

まずは「どんなサイトにしたいのか」をクライアントにヒアリングします。
例えば老舗の梅干し専門店がリニューアルをするとしたら…

このように必要な情報・不要な情報を整理し、追加で必要な機能を確認していきます。
これを「要件定義」と呼びます。

ワイヤーフレームは、どこに何を配置するかを視覚化した設計図です。
「メニューは上」「記事一覧は画像＋タイトル」「SNSシェアボタンは下」など、サイト全体のレイアウトを確認します。

ワイヤーフレームをもとにデザインを作ります。
Adobe PhotoshopやIllustratorを使うのが一般的ですが、最近はFigma（フィグマ）でワイヤーフレームからデザインまで一気に行うことも増えています。
PC・スマホのレスポンシブデザインを考慮するのも重要です。

デザインが決まったら、Webで表示できるようにHTMLやCSSでコーディングを行います。必要に応じてJavaScriptで動きをつけます。

HTMLやCSSで骨組みと見た目を作っても、ブログを簡単に作成したり、お問い合わせフォームの送信機能が使えません。
そこでWordPressを実装し、ブログやお問い合わせフォームを導入してシステム化します。

自分のパソコンでの作業を終えただけだと、世界に公開はできません。
そこで、ドメインとサーバーを契約し、サーバーにアップロードを行います。
動作確認やブラウザチェックを行い、問題なければ公開です！

ホームページとWebサイトは、混同されがちですが意味は異なります。
記事ページや固定ページなどのWebページが集まったものがWebサイトで、その入口となるページがホームページです。

また、Webサイト制作は
要件定義 → 設計 → デザイン → コーディング → システム導入 → 公開
という流れで進みます。

この全体像を知っておくだけでも、
・デザイナーとしてデザインをコーダーやエンジニアに渡すとき
・自分でゼロからサイト制作を請け負うとき
・制作の一部を外注するとき
の理解度が大きく変わります。

次は、HTMLやCSS、WordPressなど「各工程で何をするのか」を一つずつ理解していくと、Web制作がぐっと身近になります。

Webデザインを独学でやってみようと考えている方はこちらを読んでみてください！