【初心者向け】Webサイト（ホームページ）制作の流れを簡単に解説！

今回は、Webサイト（ホームページ）制作の流れを簡単に解説したいと思います。
Webサイト制作の流れを理解するとWebデザイナーへの近道になる！

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

まず、Webサイトとホームページの違いですが、正しくは以下の定義になります。

• Webサイト：トップページやそれ以外の下層ページ等をまとめて呼ぶ言い方
• ホームページ：Webサイトのトップページのことを指す

です。

Webデザイナーはトップページや下層ページを全部制作するので、正確には「Webサイト制作」になります。
「ホームページ制作」だとトップページだけを制作するということになります。

ただ、一般的にWebサイトのことをホームページと呼ぶことが多いため、「Webサイト=ホームページ」のイメージが強いです。

ですが、Webデザイナー同士で話すときや、IT系の人たちの間では、ホームページというワードは使いません。
ホームページというと、初心者のイメージがしてしまうので、慣れてきたら正しい言い方の「Webサイト」と言うようにしましょう。

Webサイト制作の流れ

Webサイト制作の流れについて簡単に解説します。

1. サイト設計
2. デザイン
3. コーディング
4. システム開発
5. 検証・修正
6. 公開
7. 運用

になります。
順番に解説します。

サイト設計

まずはサイト設計で、何のためのサイトか、どんなサイトにしたいか等、決める必要があります。
ここが1番重要になります。

クライアントの目的と要望をしっかり聞いて、サイト設計に時間をかけましょう。
ここが上手くいけば、スムーズに制作が行え、途中でちゃぶ台をひっくり返される修正依頼もきません。

デザイン

デザインと聞くと、アートや芸術のような直感的に「かっこいい！かわいい！」などのイメージがあるかもしれませんが、Webサイトのデザインは違います。

アートや芸術を見せるWebサイトであれば直感的なもので良いと思いますが、ほとんどが情報を見せたいサイトや、商品を売りたいサイトだと思います。

なので、ただかっこいいサイトであっても、情報が読みにくかったり、購入ボタンが分かり辛かったりしては、良いデザインとは言えません。

制作するWebサイトが何の目的のサイトなのかしっかり把握した上で、デザインをする必要があります。

コーディング

コーディングは一般的にはあまり知られていないのでイメージしにくいかもしれませんが、Webサイト制作には必ず必要になります。

デザインだけでWebサイトが出来ていると思ってる人も多いかと思いますが、デザインデータは1枚の絵なので、そのままWebサイトにすることができません。
そのままだと写真と同じ1枚のjpgのイメージです。

ロゴ画像、メニュー画像、メイン画像など、ブロックごとに細かくスライス（分解）し、1つ1つパズルのように設置していく必要があります。

この作業をコーディングと言います。

コーディングも表示速度が遅くならないように無断のない記述や、SEO（検索エンジン最適化）を意識する必要があります。

システム開発

お知らせやブログ、ショッピングカート機能などは、動的と言って、システム開発が必要になります。
コーディングだけでは静的なファイルしか作れません。

お知らせやブログにはWordPress、ショッピングカート機能はBASEやカラーミーショップなどのサービスがあります。
これらのサービスを組み込んだり、または1から開発します。

システム開発は十分な知識が必要になるため、この部分だけを外注したりすることもよくあります。

検証・修正

サイトが出来上がったら検証を行います。
誤字脱字がないか、想定通りの挙動をしているかなど、クロスブラウザチェックをします。

クロスブラウザチェックとは、色々な端末とブラウザでチェックを行うことです。
Webサイトは「Windows・Mac・iPhone・Android・Chrome・Safari」など、色々な環境で見られるので、主要な環境で問題ないか確認します。

大抵、何かしらの環境で想定外の挙動をしたりします。

公開

検証と修正がおわったら、いよいよ公開です。
公開されているサーバーにWebサイトのデータをアップロードすれば、どこからでもアクセスできるようになります。

公開後は、Google検索にヒットされるようにクローラーリクエストや、SNSもつかっていればそれらを公開状態にします。

公開後の確認も忘れず行いましょう。

運用

Webサイトは公開したら終わりではありません。
公開後の運用がとても大事になります。

公開後はアクセス数をみたり、クリックしてほしいボタンのクリック数をみたりして、Webサイトの解析を行います。

想定より少ない場合は、なぜ少ないのか仮説を立て、ボタンの位置を変えてみるなど、改善していく必要があります。

このことをPDCAサイクルと言います。
PDCAサイクルとは、「Plan(計画)・Do（実行）・Check（評価）・Action（改善）」を繰り返し行い、継続的に改善していく手法のことです。

サイト設計で決めた目的達成のために運用していきます。

最後に

以上、Webサイト制作の流れについて解説しました。

今回は、

• Webサイトのホームページの違い
• Webサイト制作の流れ（サイト設計から運用まで）

をお伝えしました。
実際は、それぞれの項目をもっと細かくタスクをわけますが、大きくはこの流れになります。

初めは「かっこいいサイトを作りたい！」「アニメーションがすごいサイトを作りたい！」と思いがちですが、何のためのサイトなのかが重要になりますので、クライアントの気持ちを読み取りつつ、目的を達成できるサイト作りをしていきましょう！