Webサイト制作の流れ
制作体制
Web制作では、以下の4つの職種が必要です。
大きなプロジェクトの場合、デザイナーの上にアートディレクターが存在することもあります。
その場合は、デザインの基本となるガイドラインをアートディレクターが作成し、それにしたがってデザイナーが細部を作成するという役割分担で業務を進めます。
また、デザイナーとコーダー、コーダーとバックエンドエンジニアを同じ1人が兼ねることもあります。
- ディレクター：サイトの内容を考えたり、チーム全体をまとめる監督役
- デザイナー：UI（ユーザーインターフェイス）を設計し、レイアウトや配色などサイトの見た目を決定して完成イメージを作る
- コーダー：完成イメージをもとに、ブラウザで実際に表示されるように実装する
- バックエンドエンジニア：データベースとの連携など、フロントエンドだけでは実現できない機能を実装する
企画・要件定義
案件が発生したとき、まずはディレクターが窓口となってクライアントにヒアリングを行い、どんな情報を載せたいか、どんな機能を実装したいかを洗い出します。このプロセスを 要件定義 と呼びます。
クライアントにとって、何が目的であり、何を実装するのが重要かを明確にします。
サイト設計・ワイヤーフレーム制作
次に、要件をもとにディレクターやデザイナーが主体となって、サイトの骨組みを考えます。ここで、サイトのページ構成や、各ページにどんな機能を持たせるかを決めます。このときに作るラフスケッチを ワイヤーフレーム と呼びます。
ワイヤーフレームは制作時のコミュニケーションが目的なので、手書きで作ってもかまいませんし、CacooなどのWebサービスを使って作ることもできます。
ワイヤーフレームができたら、クライアントに確認してもらい、問題なければ次のステップに進みます。
併せて、ページ上でどういう動きをもたせるか、などのサイトの仕様を 作業指示書 にまとめます。コーダーは、作業指示書の内容に沿ってコーディングを進めます。
デザインカンプ制作
ワイヤーフレームをもとに、デザイナーが各ページの完成形の見本を1枚の画像で作ります。
この画像のことを デザインカンプ と呼びます。
デザインカンプは単なる1枚の画像なので、ボタンやリンクをクリックしても反応しません。
デザインカンプを作るにはPhotoshop、Adobe XD、Sketch、Figmaなどのアプリがよく使われています。
Photoshop
Adobe XD
Sketch
Figma
デザインの完成形であるデザインカンプをクライアントに確認してもらい、問題がなければ次のステップに進みます。
プロトタイプ制作
デザインカンプを使って、クリックなどの操作に反応する紙芝居のようなものを作ります。これを プロトタイプ と呼びます。
プロトタイプは実際にブラウザで動作し、エフェ クトやアニメーションなども表示されるので、実際にユーザーが訪問したときと同じ感覚でサイトを眺めることができます。
ただし、中身の機能はまだ完成しておらず、あくまでも使い勝手がよいかどうかを確認するためのものです。プロトタイプを作るためのツールとしてはProttやInVision、Adobe XD、Figmaなどがあります。
Prott
InVision
Adobe XD
Figma
Web制作に詳しくないクライアントでも、プロトタイプを見れば、完成形を具体的にイメージできます。そのため、コーディングに入る前の最終確認としても有用です。プロジェクトによってはプロトタイプを作成せず、次のコーディング作業へ入ることもあります。
コーディング（実装）
デザインカンプと作業指示書をもとに、HTML/CSS/JavaScriptを駆使して、実際にブラウザで動作するように実装します。この作業を コーディング と呼びます。コーダーは、コーディングの作業が中心となります。
バックエンドのプログラムが必要な場合はバックエンドエンジニアが並行して開発を進め、コーダーと連携して、つなぎ込み（システム同士を連携させること）を行います。
コーディングすることで、サイトの各機能が完成します。このとき、実装された制作物を ソースコード と呼びます。ブラウザで好きなサイトを開き、右クリックして「ページのソースを表示」で表示されるものがソースコードです。
納品前確認（テスト）
コーディングした内容一式を納品する前に、デザインカンプや作業指示書の内容のとおりにWebページを作れているか、確認を行なう必要があります。
以下のようなエラーがあるままで納品してしまうと信用を損なってしまい、次の仕事につながらなくなります。
- レイアウトが崩れている
- 動きのある部分が動作しない
- フォントの種類がデザインカンプと異なる
- 異なるブラウザやデバイスによる見え方の調整を行なっていない
- etc… このような状態になっていないかチェックを行ない、問題ないことを確認してから納品します。
また、バックエンドのプログラムと連携している場合「プログラムの動作に問題がないか」、「システムとして使いやすいか」などの確認も実施されます。このような動作確認は テスト と呼ばれています。
納品（公開）
ソースコードや画像など、ページを構成するデータ一式を納品・公開すれば、Webサイトの完成です。
納品は、一式をzipファイルに圧縮して提出する場合や、Webサーバにアップロードする場合などがあります。