webサイトってどうやって作るの?一連の流れをまとめてみました

そろそろお花見の季節ですね。
東横線の車内から見える目黒川沿いの桜並木が大好きなむらたです。

今日は私たちがwebサイトをどうやって作っているか、一連の流れをまとめてみようと思います。

①お客さまへのヒアリング

サイト制作のご依頼をいただいたお客さまの元へ営業担当がお伺いし、サイトの目的・ターゲット・載せたい内容などをお客さまの想いとともにヒアリングします。
場合によって、デザイナーが同行することもあります。

②サイトマップ・お見積もり・スケジュールの作成

お客さまにヒアリングした情報を元に、サイトマップ・お見積もり・スケジュールを作成し、お客さまへ提出します。
同時に必要な原稿や写真素材等をリストアップし、手配を進めます。

③ワイヤーフレームの作成

各ページの構成案(ワイヤーフレーム)を作成します。
ワイヤーフレームというのは、ページに何をどのように配置するのかを表す設計図のようなもの。
ここをしっかり作っておかないと、あとで辻褄が合わなくなる可能性もあるので、しっかりじっくり考えます。
作成はワイヤーフレーム作成ツールなども色々ありますが、大体みんな持っていて使える(=誰でも加工・修正が可能)という面でエクセルが好きです。

④トップページのデザイン作成

ワイヤーフレームが確定したら、いよいよデザインの開始です!
ヒアリング時にお客さまにお伺いしたイメージを考えながら、どんなデザインがいいかなーと参考になりそうなサイトや雑誌等を見ながら考えます。
ある程度デザインの方向性が見えてきたところで、作業開始。PhotoshopやIllustratorといったソフトを使いデザインラフを作成します。
トップページのデザインが確定したら、同じ雰囲気で他のページのデザインもどんどん作っていきます。

⑤コーディング

デザインが確定したページから順番に、コーディングを開始します。
コーディングというのは、ざっくり説明するとデザインしたものをブラウザで見られる形にすることです。
デザインとコーディングは1人でやる場合もありますし、別の人が担当する場合もあります。

⑥確認・動作検証

ひと通りコーディングが完了したら、サーバーにアップロードして表示や動作の確認を行います。
公開前の確認や検証は、テスト環境と呼ばれる非公開の環境を用意して行うことが多いです。
各ページの見た目・内容がデザインと相違ないか、細かいところまでしっかりとチェックします。
ここでお客さまにもひと通り表示や動作の確認をしていただきます。

⑦納品(公開)

確認が終わったら公開です!
制作側でサーバーにアップロードする場合と、ファイル一式を納品してお客さまの方でアップロードしていただく方法があります。

こうして私たちが作ったサイトが世の中に公開されます。
余談ですが、webデザイナーになりたての頃、初めて自分が作ったバナーがサイトに表示されているのが嬉しすぎてキャプチャを撮ったことも、今となっては懐かしい思い出です。