Webディレクターはおさえておきたい！ Web制作フローの流れと基礎知識

Webディレクター向けに、Webサイトができるまでの流れを企画・制作・公開に大分類して、ご紹介させて頂きます。

Webサイト公開までの流れを感覚的に養って頂ければ幸いです。

Webディレクター必見！Web制作フロー

企画（Planning）

• 基礎情報の入手Web制作の問い合わせに対して、まずはクライアントのこと、その業界のことを出来る限り調べます。

• ヒアリングと問題点のあぶり出しクライアントからのヒアリングと公開されているデータを元に、問題点を全てリストアップする必要があります。

• ソリューション問題点の把握や解決策の模索に、3C分析やSWOT分析など定量的な工程を取り入れてみるのも、高品質な提案につながるでしょう。しかし、あまりインテリっぽくなるとITビギナーからは煙たがられるかもしれません。クライントに応じた提案が必要となります。Googleトレンド、Googleトレンドの要約版特定キーワードのSNS活況状況

• コンセプト・ワーククライアントとコンセプト・ワークを行い、Webサイトの理想形を作ります。

• 見積りある程度形がまとまってきたら、納期と費用を算出する必要があります。

• 受注プレゼン後、受注出来たら契約を交わし、制作作業に進みます。

制作（Production）

• 作成資料の検討サイトマップ、ワイヤーフレーム、モックアップ、ToDoリストなど、どこまで詳しい資料が必要か棚卸しし、制作します。

• 要件定義書これまで打ち合わせしてきた開発内容を文書化し、双方で仕様に食い違いがないか確認します。Webディレクターとして、すごく重要な作業になります。

• 素材の入手・作成Webページに必要となる素材を入手します。社員の写真や仕事風景の動画、代表者のプロフィール写真などです。合わせて代表者からのメッセージや公開する会社情報・公開しない会社情報などコンテンツを整理します。

• 制作指示制作メンバーに作業指示を出します。場合によっては、詳しい作業書などが必要になります。

• コーディング出来上がったデザインとシステムのデータを元に、コーダーの方にHTMLファイル、CSSファイル、JavaScriptファイルの制作を依頼します。（並行作業する場合も有り）＿デザインスキルやHTMLスキル、プログラミング・スキルがないと、チーム内のデザイナーやプログラマーとうまくコミュニケーションを取ることが出きません

• デバッグ（検査）Webサイトが出来上がったらバグがないか、開発担当者以外にWebディレクター本人も確認します。PC、スマホ、タブレット、Chromeブラウザ、MicrosoftEdge、Safri、など要件定義で立てた全仕様でチェックします。

• アップロードの準備出来上がったファイル群をサーバーにアップロードできるように準備します。またクライアントへのバックアップ用としてファイル群を収める準備を行います。

公開（Release）

• 下準備オリジナルのWebサイトを公開するためには、ドメインとサーバー、場合によってはデータベースが必要となります。

• アップロードWebページ用のファイル群をサーバーへアップロードし、サーバーに写したファイルに文字化けや抜けがないか確認します。あわせてデータベースの設定も行います。

• ブラウザでチェックブラウザからWebアドレス（ドメイン名）を入力し、予定通り正しく表示されているか確認します。一通りデバッグ作業を行い、クライアントにも確認してもらいます。それと同時にWebサイトの取り扱い方、注意点、更新方法などをお伝えします。場合によってはクライアント向けに取扱説明書を準備する必要があります。

• SEO対策無事Webサイトをリリース出来たら、間髪入れずにSEO対策を行います。

• SEOチェック数日後にGoogleWebマスターやbingwebマスターでクロール・エラーがないかチェックします。エラーがあれば内容を把握し、適切に対処、説明します。

• 請求問題がなさそうであれば請求書を手配し、入金を待ちます。

• 保証内容など一通り作業が完了したら最後に、念の為開発したWebサイトの無償対応期間を確認しておきます（通常受注契約時にサポート期間記載）。直接お伝えするかお手紙でお伝えするかなどは、ケースバイケースでしょう。＿

• 欲を出せば、制作したWebサイトを自分の実績ポートフォリオで紹介してもいいか、クライアントに確認します。

まとめ

ざっくりとWebサイト制作の流れをご紹介させていただきましたが、重要なのは開発に携わるWebディレクターの気持ちと思います。これからとりかかる案件のゴールは、素晴らしいWebサイトの開発か、確実に入金してもらえるように仕上げていくことか、案件毎にポイントは変わるので、その都度臨機応変に対処していく必要があると思います。CodeCamp

thumbnail : Vinnie Lauria (flickr)VinnieLauria(flickr)