Web制作概論2 : Web制作の職種と制作フロー（所要時間10分）
制作フロー
基本的な制作フローは以下です。
- 営業
- ヒアリング : クライアントの要望を聞き出します
- 企画 : 要望に応えられるかを調査します
- 設計 : 要望や調査結果を基に、サイトの設計をします
- デザイン : Adobe XDやPhotoshopを利用し、実際に作成するページをデザインします
- 環境構築、セキュリティ対策 : サーバーの設定とセキュリティの設定を行います
- 静的コーディング : HTML / CSS / JavaScriptで機能のないページを作成します
- 動的コーディング : WordPressなどのCMSを組み込み機能を追加します
- テスト : ページ崩れがないか、機能的な不具合がないかを確認します
- 納品 : Web上に公開することで納品完了
- 運用・保守 : Webサイトをさらに改善したり、アクセス解析をして次の施策を練ります
Web制作に関わる職種
Web制作者の職種は以下です。
- Webディレクター
- Webデザイナー
- Webコーダー
主にこの3つ。
制作フローと職種
Web制作プロジェクトは基本的にチームで進めていきます。
それぞれがそれぞれの仕事をこなすことでやっとWebサイトは完成するのです。
運用・保守
Webサイトは作って終わりではなく、育てていくもの。
育てるためにはクライアントだけでなく、Web制作者側も手助けが必要です。
これを運用・保守といい、その仕事は以下のようなものが挙げられます。
- アクセス解析
- テキストや素材、デザインの修正
- コンテンツ作りのアドバイス
- 広告運用
- SNS運用
クライアントの課題解決をするのが運用・保守の仕事。これらの努力によって作ったサイトが多くの人に知れ渡るのです。
各職種の役割
ディレクター
ヒアリング・企画・提案
ヒアリングを通してクライアントの要望や意向を把握します。
クライアントが抱える課題を解決するために、ヒアリングの結果を踏まえ内容を精査し提案を行います。
サイトの訪問者（ユーザー）に対してどのように情報を見せていくかや機能的な面で何が必要なのかをまとめていきます。
Webディレクターが作るもの
- ワイヤーフレーム
- 機能設計書
- 画面設計書
- ページ構成表
ワイヤーフレームとは「Webサイトのレイアウトを決める図」です。
これを紙に書いたり、ツールを使って書いたりすることでクライアントやデザイナーに完成イメージを伝えることができます。
プロジェクト管理
制作するWebサイトの仕様が固まり次第、リリースに向けた精緻なスケジュールを引きます。
ガントチャートやタスク管理ツールを使いスケジュールを作成します。
ヒアリングをもとにしたワイヤーフレーム、機能設計書やスケジュールをプロジェクトメンバー（デザイナー・コーダー）やクライアントに共有し、認識をすり合わせます。
スケジュールにはクライアントのタスク（素材や原稿の提供、プレビューなど）も盛り込み、合意のもとで進めていく必要があります。
リリースの遅延、トラブルに柔軟に対応できるようにメンバーやクライアントとのコミュニケーションを綿密にコミュニケーションを取り、円滑にプロジェクトが進むようにしていきます。
- Excel（Googleスプレッドシート）
運用保守・更新
制作したサイトは見られなければ意味がありません。
Webディレクターは制作されたサイトが見られるために、施策や日々の更新に対応をします。
施策は、訪問者を集め、利用・販売を促進するためのWebマーケティングを担います。
アクセス数やヒートマップのデータから施策をしていきます。
要望や目標に沿って広告の出稿やSNSの利用を提案することもあります。
日々の更新の対応は、クライアントから届いた記事の掲載内容を確認し、クライアントが希望する日時に公開します。
◆ 使うもの
- Google Analytics
- Google サーチコンソール
- 各SNS
- ヒートマップツール
Webデザイナー
Webデザイナーはその名の通り、Webに関するデザインをする職業です。
ディレクターのワイヤーフレームや画面設計を元にデザインの作成を行います。
施策によってバナーの作成やSNSの画像作成などをすることがあります。
企業によっては静的ページのコーディングを任されることもあります。
◆ 使うもの
- Adobe XD
- Adobe Photoshop
- Adobe Illustrator
- ストックフォトサイト
- フォントサイト
コーダー
コーダーの仕事は主に
- コーディング環境構築
- サーバーの設定
- 静的コーディング
- 動的コーディング（CMS導入）
- CMSのプラグイン追加、作成
- サーバーアップロード
デザインやクライアントの要望を実際に形にしていきます。
◆ 使うもの
- レンタルサーバー
- MAMP（XAMPP）
- FTPクライアント（Filezilla）
- テキストエディター（VSCode）
- WordPress
