Webサイト制作プロセスフロー表
お客様からのご依頼で「Webサイト制作プロセスフロー」の図解表を作りました。これを作った理由は、
「サイト依頼前に社内で何を準備するのか？」を理解してもらい、前準備を円滑に進めていただくためです。
Webサイト制作の外注は、この予算で「何をやってもらえるのか？」をはっきりさせ、依頼側と外注先の制作側が、一体のチーム連携を取ってはじめて、ご満足のサイトが出来ます。
お客様側で行う事は、下フロー表の1から4までと、6もしくは7です。Web制作側では行うのは５か５+6です。
Web制作の前に、お客様が決めておく事
上のWebサイト制作プロセスフロー表で、お客様側で行う前準備と後始末についてさらに詳しく解説します。
この表の前準備を社内で行う事が多い理由は、予算を節約するため。例えばこの表の1と2、アートディレクターが担う、コミュニケーション施策やブランディング戦略の外注は、予算が膨大なので大企業はよく行っています。
| 前準備(お客様側） フロー表 1、2、3、4 |
職責名：1と2 アートディレクター、3 UXデザイナー、4 Webディレクター。 通常この仕事は経営者や管理職、広告宣伝部の社員さんが担う事が多い |
|---|---|
| Web制作(外注先） フロー表 5、6 |
職責名：5 Webデザイナー、6 フロントエンドエンジニア。 5は外注が多い。6は社内のエンジニアがいる場合は技術部社員さんが担う事が多い |
| 後始末(お客様側） フロー表 7 |
職責名：7 Webマーケッター 7は社内の広告・宣伝部社員さんが担う事が多い |
また３のUXデザイナーを外注すると、ターゲティングユーザーへの商品テストや座談会を企画・実施、その結果レポートも報告してくれますが、これにも膨大な予算が必要となるだけでなく、UXデザイナーの確保が難しい現状があります。
それでは「Webサイト制作プロセスフロー表」の、各仕事の説明です。
「Webサイト制作プロセスフロー表」前準備：1・2について
お客様の前準備の一つ1は、重要な、商品やサービスの企画に関する戦略のとりまとめです。
これは通常社内で何度もミーティングを重ね、決められる内容ですが、プロのアートディレクターに依頼する大企業も最近はよくあります。1の概要はこのような分析から導かれます。
・ 望んでいる社のビジョンは何か？
・ 今の課題は何か？その課題の本質は何か？
・ 角度を変えて創造的思考で俯瞰してアイディアを出す
大企業が膨大な予算を確保して、これをわざわざ外注するのは、第三者の視点で見た方が、自社の強みが見つかったりするからです。社内で当たり前の中に、強みがあったりするからです。
前準備の二つ目２は、今回のWebサイトを作る目的の、商品やサービスについての具体的施策です。
・ ウェブサイトの商品やサービスを決める
・ コミュニケーション施策やブランディングを決める
・ 商品やサービスのコンセプトを決める
・ ターゲットユーザーを決める
「Webサイト制作プロセスフロー表」前準備：３について
「前準備が長いなぁ〜」と思う方はしろうとです。自社サイトを一度でも立ち上げるとわかってきますが、Webサイトの成功度を左右するのは、全てこの前準備の質と期間・クオリティによってキマるからです。
「とにかくサイトを急いで立ち上げて！」と急いだあまり、これらの前準備を飛ばしてしまい、結局求心力が弱いサイトだと気づいた時は遅く、「もう一度前準備をやり直した方がいいのか？」と迷いながら、先送りしている経営者が多いのです。
だから言います。「Webサイトを作る前に、ユーザーテストを行いましょう。」その専門職を
UXデザイナーといいます。UXデザイナーが行う仕事内容は、マーケケットの分析を行う事です。
・ ユーザーテストを行う
・ ユーザー座談会を実施する
・ 結果を踏まえ、ウェブサイトコンセプトやコンテンツを決める
・ サイトのキーワード、トンマナ、ロゴなど具体的コンテンツの意向を決める
※ ただUXデザイナーの確保は難しく高額なので、社員さんをUXデザイナーに育てる会社もあります。
Web制作の前に、お客様が用意しておく物
Webディレクター役を担う社員さんが、お客様と外注先Web制作側とをつなぐ窓口となります。
「Webサイト制作プロセスフロー表」前準備：４について
Webディレクターはこの４のプロセスで、お客様側社内で以下をまとめ、外注先の私のようなWebデザイナーに渡します。
・ 社内で前準備した１から３のサイトビジョンやサービス内容の意図を渡す
・ サイトのロゴやトンマナ等をまとめ渡す
・ Web制作側に渡す材料（著作権のある画像と文章）を揃え渡す
・ こだわりのある画像があればイメージ画像を準備し渡す
・ コンセプトやコンテンツの材料になる印刷物やデータを揃え渡す
・ 今までの検索分析結果を踏まえ、新サイトのキーワードを決め渡す
・ サイトページの骨組み、導線、段組の自社案をPDF等作成し渡す
この時点の、WebディレクターからWeb制作側に渡す、自社著作物の資料やデータが多ければ多いほど、納期が短縮し、お見積もり金額では予算の節約につながります。
渡す材料を多くし、サイトの骨組みを手書きでもいいので、細かく意図を表現した方が、お客様の目的や希望にそったウェブサイトが短期間で出来上がりますので、ここで手をぬかず、自社でできるだけのサイトページ構想を作成し、１から４までの意図・指示・構想・材料を制作側に渡して下さい。
上の１から４のファイナルアンサーを受取り、次の流れの３までが済んでから、下の５からのWebサイト制作を開始します。
その後の変更については、契約書に記述した内容での対応となりますので、契約前にご確認下さい。
自社で所有権を持っているかどうかについて、著作権についての注意事項を参考にどうぞ。
Web制作の流れ
ここからがWebデザイナーの仕事です。上「Webサイト制作プロセスフロー表」のうち、前準備の1から4が済んでから、5がWeb制作側との契約になります。
事前にしっかり前準備をする間に、相談や質問、それから込み具合について、問合せをどうぞ。
Web制作の実際の流れは下の通りです。
「Webサイト制作プロセスフロー表」Web制作：５について
上の「Webサイト制作プロセスフロー表」で、１から４はお客様側で行っていただく前準備の流れを説明しました。その後「Web制作の流れ」で、３までの申込、決済が済み、契約が済んだら、Web制作は開始されます。
Webデザイナーは、お客様の窓口であるWebディレクター職責の社員担当者から、材料を受け取ります。
このステップで受取る材料の量と質、内容が出来不出来に影響するのは当然の事です。
・ ４で準備されたWeb制作の材料をお客様より受取る
（前準備した１から4：ビジョンや意図、ユーザーテスト結果、ロゴやトンマナ、著作権のある画像や文章、キーワード、近いイメージ画像、過去印刷物やデータ等参考資料、サイトの段組み、コンテンツ骨組み、導線のご指示を含む上の詳細資料）
・ 上の流れのフローで３までが済んだら制作を開始する
・ 受取った材料の内容を精査・確認する
・ お客様窓口と職責があるWebディレクター役の社員さんと、質疑応答しながら制作を進める
この窓口となるWebディレクター職責の社員さんは、原則1人に絞って、契約書に記名してもらいます。
これは指示系統を一つにするための措置です。
お客様側の指示はこの契約書に記名された職責のある社員さんを通して行います。
これはお客様側の指示系統が複数だと制作側が混乱するからです。よって社内意見の変更時制作側に伝える時のルールを遵守してもらいます。
「Webサイト制作プロセスフロー表」Web制作：６について
当方はWebコンテンツの制作が職域で、プログラマーではありません。しかしWeb制作にはプログラマーが絡む仕事があります。つまりこのフロントエンジニアが必要か不要かは、仕事内容で決まります。
ヒヤリング時に必要とわかったら、開発案件は社内で社員さんにやってもらうか、当方の追加オプションとして外部技術者にやってもらうか選んでもらい、それに従った内容で、お見積もり書や、契約書を作成します。
フロントエンジニアの職責はこのような内容です。
・ サーバーカスタマイズ
・ PHPカスタマイズ
・ Javascriptカスタマイズ
・ サイトシステムの開発書き換えに関する作業
制作終了後に残額が入金されたら、納品準備を行います。納品はサーバーアップロードで行い、DVD郵送などはありません。お客様Webサイトローンチ日程に沿って公開します。
公開後当方側で、各デバイス、実機、ブラウザでの出来る限りの最終稼働確認を行いお知らせします。
それにより、お客様側のサービスローンチが開始となり、ローンチイベントを開始下さい。
「Webサイト制作プロセスフロー表」後始末：７について
マーケティングは広告宣伝部社員が行う事が多いでしょう。
マーケティングは当方はタッチしておりませんので、ここから先は専門外で、
プロのWebマーケッターにお任せしますが、だいたいこんな内容かと思われます。
・ Webサイトローンチを広く告知する
・ Webサイト完成後の広告戦略を立て、実施する
・ ターゲティングユーザーへのSEMや顧客化戦略の施策を打つ
・ Webサイト完成後のSNS戦略の準備を行い実施する
以上が Webサイト制作プロセスフロー 1から７までの流れの説明でした。
Web制作の予算を絞りつつ、ローンチを成功させるために、
お客様側で行う前準備や後始末や、勘違いしやすい、この仕事はWeb制作に含まれませんをお役立て下さい。
※ 参考：一番簡単でページ数の少ないサイト例です
※ 参考：自社開発のシステムサイト作りました
※ 参考：Webデザイナーが良心的かどうかをこっそり知るには？
PAGE TOP