【Webサイト制作の流れを詳しく解説！】～CRI社員の声と共にお届けします～

こんにちは！
株式会社クリエイティブリソースインスティチュート（以降、CRI）の太田です。

この記事では、Web制作の流れや職種をご紹介します。
サイト制作に興味がある方は、ぜひ最後までご覧ください。

Web制作に関わる職種

まず、サイト制作に関わる主な職種をご紹介します。

・ディレクター
・デザイナー
・エンジニア（フロントエンド・バックエンド・インフラ）
・QAエンジニア/テスター

ディレクター

制作の司令塔であり、スケジュールや予算などの全てを管理します。社外・社内ともに人と接することが多く、関係各所と円滑に調整・交渉を行うためのコミュニケーション能力が必要になります。

デザイナー

サイトのデザイン全般を担当し、ターゲットや目的に合わせて使いやすいデザインを考案します。サイトのデザインはUI（ユーザーインターフェース）やUX(ユーザーエクスペリエンス)と呼ばれる「見やすさ」「使いやすさ」も大切にする必要があります。

※UI・UXとは？
UI：サイトの中で、ユーザーの目にふれるすべての要素
UX：サイトを通して、ユーザーが得る体験のこと

エンジニア

エンジニアは、HTML、CSS、Javascript、PHPなどを用いて、サイトの開発・制作やメンテナンスを行います。エンジニアは担当領域によって大きく3つに分けられます。まず「フロントエンドエンジニア」は、デザインをもとに、ブラウザで動くWebサイトなどのユーザーから見えている部分を作ります。「バックエンドエンジニア」は、入出力処理やデータベースに関わる処理など、ユーザーから見えていない部分の実装を担当します。「インフラエンジニア」は、システムの土台となっているサーバーやネットワークなどのインフラの設計・構築・運用を担当します。

Web制作の流れ

サイト制作は、以下の流れに沿って進むのが基本です。

それぞれの工程について詳しく見ていきましょう！

【STEP 01】企画立案

サイト制作は、「売り上げを増やす」「サイトを通して企業の認知度を上げる」など、サイトの目的を決めることから始まります。この目的を達成するために、どのようなサイトが効果的なのか、調査・分析をすることも必要です。
続いて、どのような人がサイトに訪れて欲しいのか、年齢や性別・人物像・生活習慣に至るまで、ターゲットの詳しいイメージを固めていきます。想定するターゲットの行動やニーズ、競合サイトなどについても確認をします。そうした分析結果をもとに、企画とサイトのコンセプトを固めます。

決めること
✔ Webサイトを制作する目的
✔ ターゲット
✔ コンセプト

【STEP 02】設計

企画の内容が決まったら、サイトの全体設計に入ります。ここではサイトのコンテンツ内容を具体的に考え、「何を・どこに・どのように」配置するかというサイトの設計図(サイトマップ・ワイヤーフレーム)を作ります。ここで大切にしたいのは、UI・UXを考慮することです。
続いて、サイトの制作や運用をするために使用するシステムを決めていきます。システムには様々な種類があり、例えば、更新頻度が高い場合は「システムテンプレートに沿って操作がしやすいこと」、独自性を出したい場合は「カスタマイズができること」など何を大切にしたいのかを考慮した上で、サイトの目的に合ったものを選びます。

【STEP 03】デザイン制作

デザイン制作にあたり、核となるのが「デザインコンセプト」です。これは、Webサイトで表現したい世界観を、コンセプトとして言語化する作業です。デザインコンセプトは、ターゲットを意識して決めていくことが大切です。また、より高い精度でメンバー間でイメージを共有できるようにイメージボードを作るなどして、デザインの目的や方向性を明確にします。
素材の準備も完了したら、いよいよ、各ページのデザインを制作します。デザイン制作では、自分のセンスばかりに頼るのではなく、見る人のことを考えたデザインを意識することが大切です。

【STEP 04】実装/テスト

デザインが完成したら、コーディングやシステムの実装など、サイトとして機能させるための作業を行います。
実装の作業では、デザインと同じものがブラウザ上でも見られようにビジュアル面を主に制作する「フロントエンド」と、ユーザーに見えない裏側のシステムを実装する「バックエンド」に分かれています。またその他にも、サーバー（Webページの情報を格納しているもののこと）の設計・構築や、WebサイトのURLを決めるドメイン設定など、インフラの準備を行うこともあります。
実装が終わった後には、テスト用のページを作り、公開同様の状態で最終確認を行います。ここでは、異なるブラウザで表示した時にレイアウトが崩れていないか、システムが正しく動いているかなど、網羅的にチェックをしていきます。