WEB制作の流れ

「WEB制作」と一言で言っても、具体的にどんな作業があり、どんなスキルが必要なのか知らない人も多いと思います。

そこで今回は、１つのWEBサイトが完成するまでのフローについて解説していきます。

これが理解できていると、自分が取り組むべき仕事がより具体的に見えてくるようになります。

またフローを把握した上で提案を行うと、クライアントも安心感を覚え、結果として案件受注にも繋がりやすくなるのでしっかり頭に入れておいてください。

WEB制作の仕事とは

WEB制作の仕事とは、文字通りで恐縮ですがWEBサイトを作ることです。

会社のホームページやブログ、LP（ランディングページ）と呼ばれる縦長１ページのサイトを作ったりします。

デザインを作る人も、コーディングをする人もこの意味ではWEB制作者と名乗ることができます。

WEBサイト制作のフロー

一般的には以下のフローでWEBサイトは作られます。

１．ヒアリング

WEBサイトを作る目的やコンセプトなどをクライアントから聞き取ります。

よく勘違いされるのは、クライアントはWEBサイトが欲しい訳ではないということです。クライアントが欲しているのは、売り上げ、認知、ブランディングなどです。WEBサイトはそのためのツールでしかありません。

このことを理解していないクライアントも多いので、ヒアリングを通して何が本当に必要なのかを探っていく必要があります。

ホームページ制作はやめて、「SNSマーケティングに力を入れましょう」なんてこともあり得ます。

２．ワイヤー制作

ヒアリングした内容をもとにWEBサイト全体の設計図を書いていきます。

この時点ではまだデザインは入れません。テキストや画像のだいたいの配置、ボタンをクリックしたときの遷移先など、細かいところまで詰めていきます。

これが出来たら、実際に掲載するテキストや画像などの素材を集めていきます。

３．デザイン制作

ここはWEBデザイナーの仕事です。

競合他社や似たような商品・サービスを扱っている別サイトなども参考にしながら、作成したワイヤーにデザインをつけていきます。

WEBデザイナーはコーディングまでできる必要はありませんが、多少の知識は持っていた方が良いかもしれません。コーディングだけでは実現できないデザインもあるからです。

ワイヤーにデザインが入ったものをデザインカンプと呼んだりもします。

４．コーディング

ここはコーダーの仕事です。

作成したデザインのままだとネット上には公開できないので、コンピュータが理解できる言語（ＨＴＭＬ/ＣＳＳ）を使ってWEBサイト化していきます。

ローディング画面、マウスを合わせた時の動き、画面をスクロールした時の動きなども細かくデザインカンプに記載されていれば、コーダーはとても作業がしやすくなります。デザイナーに感謝です！

コーダーはデザイナーが作ったデザインをきちんと再現する必要があります。

どれだけ細かく再現できるかでデザイナーへのリスペクトを示すこともできます。

５．動作確認

デザインがきちんと実現されているか、動作に不備はないかなど動きを確認します。どのブラウザで確認を行うのかについては、クライアントとのヒアリングの時点で決めておきましょう。また、動作確認や表示チェックはChromeの検証ツールだけではなく、必ず実機でも確認するようにしましょう。検証ツールはあくまで目安なので、ズレていることも多々あります。

６．修正

ほとんどの場合、必ず修正点が見つかるので修正内容に応じて担当者が修正を行います。修正の対応範囲もヒアリング時点で決めておかないと、案件もクライアントとの関係もどんどん拗（こじ）れていきます。

明らかに動きがおかしかったり、表示崩れが起きている場合は無償で対応するのが一般的ですが、クライアントの新しい要望が入ってきた時は注意が必要です。

７．リリース

問題がなければ正式にリリースとなり、納品完了です。

納品方法についてもzipファイルで納品するのか、指定のサーバーにアップロードするのかなど、ヒアリングの段階で決めておくようにしましょう。

まとめ

こうしてみると、１つのWEBサイトを作るのにかなりの工程が必要なことがわかります。WEB制作会社などはそれぞれの工程に専門家（デザイナー、コーダー、ディレクターなど）を配置しているので、１人がこれらすべての作業をこなすということはありません。ですが、フリーランスとして案件を受注するなら、外注しない限り、全て出来ておく必要があります。

毎回毎回クライアントに確認を取っていたら、「コミュニケーションに負担がかかる奴」認定されてしまうので、最初のヒアリングでしっかりと要件定義を行い、あとは進捗報告を細目に行うだけで信頼関係も築くことができます。