普段何気なく見ているホームページやWebサイト。
「どうやって作られているの？」と疑問に思ったことはありませんか？
今回は、ホームページとWebサイトの違い、そしてWebサイトが完成するまでの基本手順をわかりやすく解説します。
Contents
ホームページとWebサイトの違い
「ホームページ＝Webサイト」と思っている人は多いのですが、実は意味が異なります。
それぞれのページには固有のURLが割り振られています。例えば、当サイトのプロフィールページやこの解説記事も1つのWebページです。
Webサイトとは、そのWebページが集まった集合体のことを指します。
一方、ホームページはWebサイトの「入口」になるページのこと。
例えば、https://laptravel.com にアクセスすると最初に表示されるページが、このサイトのホームページです。
一般的には「Webサイト」のことを「ホームページ」と呼ぶケースが多く、日常会話では同義で使われることが多いです。
Webサイトが出来るまでの流れ
ここからは、Webサイトが完成するまでの基本ステップを紹介します。
STEP1：ヒアリング・要件定義
まずは「どんなサイトにしたいのか」をクライアントにヒアリングします。
例えば老舗の梅干し専門店がリニューアルをするとしたら…
- 20年前から更新されていないサイトを刷新したい
- 新商品を紹介できるブログ機能が欲しい
- 社会活動や海外グループの情報も発信したい
このように必要な情報・不要な情報を整理し、追加で必要な機能を確認していきます。
これを「要件定義」と呼びます。
STEP2：ワイヤーフレーム（設計図）作成
ワイヤーフレームは、どこに何を配置するかを視覚化した設計図です。
「メニューは上」「記事一覧は画像＋タイトル」「SNSシェアボタンは下」など、サイト全体のレイアウトを確認します。
STEP3：デザイン制作
設計図をもとにデザインを作ります。Adobe PhotoshopやIllustratorを使うのが一般的ですが、最近はAdobe XDでワイヤーフレームからデザインまで一気に行うことも増えています。
PC・スマホのレスポンシブデザインを考慮するのも重要です。
STEP4：コーディング
デザインが決まったら、HTMLやCSSを使って実際のWebページに落とし込みます。必要に応じてJavaScriptで動きをつけます。
STEP5：システム導入
WordPressを実装したり、お問い合わせフォームをPHPで作成したりと、機能面を追加します。
STEP6：サーバーアップロード（公開）
ローカルでの作業を終えたら、いよいよサーバーにアップロード。
動作確認やブラウザチェックを行い、問題なければ公開となります！
まとめ
今回は、ホームページとWebサイトの違い、そしてWebサイトが完成するまでの基本ステップを紹介しました。
「自分でもサイトを作ってみたい！」と思った方は、まずは小さなサイトから挑戦してみると理解が深まりますよ。
