Web制作の流れ

 

Web制作の流れを視覚化した、予算を抑え成果を最大化する「Webサイト制作プロセスフロー」を更新しました。もちろんWeb制作に潤沢な予算がある大企業は、何百万とかけてこの表の全てを外注できますが、賢いコスパで制作したい個人や小・中企業には、役に立つプロセスフローです。

ここでは以下賢いコスパで制作したい個人や小・中企業に役に立つフローをわかりやすくお伝えします。

Webサイト制作プロセスフロー表

これにより「サイト依頼前に社内で何を準備するのか?」その前準備が一目瞭然です。

依頼元側の前準備は下の1から4まで、後処理が7です。5か5+6が当方への外注内容です。

Webサイト制作プロセスフロー図解表

 

Web制作の前に、お客様が決めておく事

Web制作にかかわる職責名と流れ

下の表で、賢いコスパで制作したい個人や小・中企業に役に立つ、もっと具体的な各ステップのふさわしい担当者を解説します。

前準備
お客様側で行う

フロー上表STEP1、2、3、4
サイトブランディング:上表STEP1と2 アートディレクター
ユーザーテスト:上表STEP3 UXデザイナー
素材の準備と要件定義:上表STEP4 Webディレクター、これは社長自らや経営企画部・広告宣伝部の社員さんが担う事が多い
Web制作
外注先で行う

フロー上表STEP 5、6
サイトデザイン制作・文筆とコーディング:5 Webデザイナー
DNS・PHP・JavaScript等機能実装:6 フロントエンドエンジニア
このSTEP6は必要時のみで、開発ができる社内の技術部社員さんが担う事が多い。いなくても不要の時が多いし外注できる。
後処理
お客様側で行う

フロー上表STEP 7
広告戦略の実施・SNS・SEM:7 Webマーケッター
このSTEP7は社内の広告・宣伝部社員さんが担う事が多い

大企業では上表の全ては潤沢な予算を当て外注します。コスパ重視の個人や小・中企業では、5だけを外注し、他は社内で行う事例がほとんどです。

以下はそのための各STEPごと以下詳細な解説です。社内と外注先の連携のためにお役立て下さい。

「Webサイト制作プロセスフロー表」前準備:1・2について

まず上のフロー表で、依頼元のお客様側で行う、前準備の上表STEP1から4までと、後処理の7についてさらに詳しく解説します。

Webサイト制作プロセスフロー表

お客様の前準備の一つ1は、重要な、商品やサービスの企画に関する戦略のとりまとめです。
これはお客様社内で何度もミーティングを重ね決めていく内容ですが、それを外注するとプロのアートディレクターが「ビジョン・フェロソフィ・ストーリー」の三拍子そろったブランディングを紐解くプロセスです。
・ 望んでいる社のビジョンは何か?
・ 今の課題は何か?その課題の本質は何か?
・ 角度を変えて創造的思考で俯瞰してアイディアを出す


大企業が膨大な予算を確保して、これをわざわざ外注するのは、第三者の視点で見た方が、自社の強みが見つかったりするからです。社内で当たり前の中に、強みがあったりするからです。

前準備の二つ目2は、今回のWebサイトを作る目的の、商品やサービスについての具体的施策です。
・ ウェブサイトの商品やサービスを決める
・ コミュニケーション施策やブランディングを決める
・ 商品やサービスのコンセプトを決める
・ ターゲットユーザーを決める

「Webサイト制作プロセスフロー表」前準備:3について

Webサイト制作プロセスフロー表

「前準備が長いなぁ〜」と思われるかもしれませんが、Webサイトの成功度を左右するのは、この前準備の質とかける時間により決まってきます。これは何回も失敗してわかる事ですが。

「とにかくサイトを急いで立ち上げて!」と納期を短縮できたけど、これらの悠長な前準備を飛ばしてしまい、結局求心力が弱いサイトだと気づき、後悔されている経営者が多くいらっしゃいます。だからこの前準備が重要なのです。

そのための存在「UXデザイナー」とは?

Webサイトを作る前に、ユーザーテストを行う人、その専門職をUXデザイナーといいます。UXデザイナーが行う仕事内容は、マーケットの分析を行う事です。
・ ユーザーテストを行う
・ ユーザー座談会を実施する
・ 結果を踏まえ、ウェブサイトコンセプトやコンテンツを決める
・ サイトのキーワード、トンマナ、ロゴなど具体的コンテンツの意向を決める

コスパのいいWeb制作したいけど、うまくいかない最近の出来こと

この全ステップの中で、人員が足りないのが、3のUXデザイナーです。UXデザイナーが担うのは、ターゲティングユーザーへの商品テストや座談会を企画・実施して、ユーザー層の需要をしっかりと把握し、人気のある商品へと結果レポートを作成し、Webに反映させるために社内稟議を通します。これには、膨大な予算と時間がかかるだけでなく、

今UXデザイナーの人材不足で有能な人材が確保できない事態がおこっています。年収1千万でも人材が来てくれないという声もあるほどで、そのため最近では有能なUXデザイナーを社内で育てようと、余力のある会社では、見込みのある社員さんをUXデザイナーにと社内育成に取組む会社もあります。

これだけ説明するのは、UXデザイナーがWeb制作のキモだからです。でもそれが浸透していません。UXにかけるコスパをはしょって、分析なしのイメージでWeb制作の指示を出してしまい、数カ月後に後悔する責任者を多く見かけるからです。それでWeb制作前に、UXとUIの違いから口を酸っぱくしてご説明し、UXデザイナーの担うWeb制作前の集客戦略にリソースをかける事をおすすめしています。

 

Web制作の前に、お客様が用意しておく物

前準備の最後STEP4はWebディレクターの職責で、お客様と外注先をつなぐ窓口であり司令官です。社内事情に精通している経営企画部や広告宣伝部の社員さんが担当される事が多いです。

「Webサイト制作プロセスフロー表」前準備:4について

Webディレクターはこの4のプロセスで、お客様側社内で以下をまとめ、外注先の私のようなWebデザイナーに渡します。

Webサイト制作プロセスフロー表

・ 社内で前準備した1から3のサイトビジョンやサービス内容の意図を渡す
・ サイトのロゴやトンマナ等をまとめ渡す
・ Web制作側に渡す材料(著作権のある画像と文章)を揃え渡す
・ こだわりのある画像があればイメージ画像を準備し渡す
・ コンセプトやコンテンツの材料になる印刷物やデータを揃え渡す
・ 今までの検索分析結果を踏まえ、新サイトのキーワードを決め渡す
・ サイトページの骨組み、導線、段組の自社案をPDF等作成し渡す

この時点の、WebディレクターからWeb制作側に渡す、自社著作物の資料やデータが多ければ多いほど、納期が短縮し、お見積もり金額では予算の節約につながります。

渡す材料を多くし、サイトの骨組みを手書きでもいいので、細かく意図を表現した方が、お客様の目的や希望にそったウェブサイトが短期間で出来上がりますので、ここで手をぬかず、自社でできるだけのサイトページ構想を作成し、1から4までの意図・指示・構想・材料を制作側に渡して下さい。

この社内Webディレクターの手腕で、社内の統括力も強まり、外注先も喜んで力を尽くしてくれます。これを理解されている社長様は、優秀な人材をわりあてるか、自ら担われる会社もあるくらいです。

外注先がWebサイト制作を開始するのは、この前準備の材料を受け取ってからです。この材料は自社で所有権を持っているかどうか著作権についての注意事項を参考にどうぞ。その後契約書に記述した内容での対応となります。

 

Web制作の流れ

ここからが外注をお受けしたWebデザイナーの仕事です。フロー表の5の部分にて、さらに詳細にまとめました。

Web制作の実際の流れ、5を箇条書きにするとこうなります。

 

「Webサイト制作プロセスフロー表」Web制作:5について

ここからがステップ5、外注先の「Web制作」です。
5+6の6はオプションのエンジニアを依頼する場合です。

Webサイト制作プロセスフロー表

Webデザイナーは、社内窓口のWebディレクターの社員担当者から、材料を受け取ります。
このステップで受取る材料の量と質がウェブサイトの出来不出来に影響します。

・ 4で準備されたWeb制作の材料をお客様より受取る
(前準備した1から4:ビジョンや意図、ユーザーテスト結果、ロゴやトンマナ、著作権のある画像や文章、キーワード、近いイメージ画像、過去印刷物やデータ等参考資料、サイトの段組み、コンテンツ骨組み、導線のご指示を含む上の詳細資料)
・ 上の流れのフローで3までが済んだら制作を開始する
・ 受取った材料の内容を精査・確認する
・ お客様窓口と職責があるWebディレクター役の社員さんと、質疑応答しながら制作を進める

この窓口となるWeb制作側に指示を出すWebディレクター職責の社員さんは、1人に絞り
指示系統が混乱しない配慮が大切です。なぜならお客様側の指示系統が複数だと制作側が混乱するからです。

「Webサイト制作プロセスフロー表」Web制作:6について

この6のステップはWebにより必要でない時と必要な時があります。この担い手はフロントエンドエンジニアとか、Webエンジニアとか呼ばれる開発スキルのある技術者です。この部分はデベロッパー案件と言われます。よって最近は、この6のステップが必要かどうかは「Webサイトで機能させたいシステム」により、ステップ6は不要な事例が多いです。

ヒヤリング時に必要とわかったら、追加オプションとして、別お見積もりとなります。これは高額ですので社内の開発職社員さんにやってもらえば、予算をおさえることができます。

Web制作でのそのエンジニアの職責「デベロッパー案件」は以下のような場合となります。
・ サーバーDNSカスタマイズ
・ PHPカスタマイズ
・ Javascriptカスタマイズ
・ サイトシステム(Wordpress等)の書き換えに関する作業

上までのWeb制作が終了したら入金後に、納品を行います。納品はサーバーアップロードで行い、DVDやマニュアルなどの郵送や手渡しはありません。お客様Webサイトローンチ日程に沿って公開します。
公開後当方で、各大小デバイス、実機、各ブラウザでの出来る限りの最終稼働確認を行い、表示修正を行います。

その報告後お客様側のサービスローンチが開始となり、下の7にてローンチイベントを開始下さい。

「Webサイト制作プロセスフロー表」後処理:7について

Webサイトローンチ後からが、お客様側の仕事が本番になります。それがマーケティングです。

 

このステップ7マーケティングは、継続して広告宣伝部社員が担当されています。

マーケティングには専門知識が必要なため、社内で宣伝部社員さんが担う事が多いです。Web制作側として必要なSEO入力やalt入力、ご希望のキーワード選定はWeb制作に含まれますので、ステップ4で受け取っており、この段階、制作完了時にはすでに設定済みです。

最後に後処理7、プロのWebマーケッターは何を行うのかについて。概略はこんな内容です。

・ Webサイトローンチを広く告知する
・ Webサイト完成後の広告戦略を立て、実施する
・ ターゲティングユーザーへのSEMや顧客化戦略の施策を打つ
・ Webサイト完成後のSNS戦略の準備を行い実施する

以上が 賢いコスパで制作したい個人や小・中企業に役に立つWebサイト制作プロセスフロー 1から7までの「Web制作の流れ」の詳細説明でした。

賢い個人や小・中企業は、その多くが自社のリソースを大切にし、自社Webを育てていらっしゃいます。この記事がお役に立てれば幸いです。

Webサイト制作プロセスフロー表

社内でWebの構想が出たら前準備の前に、込み具合や作業時期についてはお早めに、問合せからご相談・ご質問・ご予約ください。

 

Web制作の予算を絞りつつ、ローンチを成功させるための関連記事もどうぞ!
勘違いしやすい、この仕事はWeb制作に含まれませんや、
Web制作チームが成功する時>お客様が握っている「Web制作チーム成功」の切り札とは?

※ 参考:自社開発のシステムサイト作りました
※ 参考:Webデザイナーが良心的かどうかをこっそり知るには?

デザイン画像創作_齋藤天津子

デザイン画像作ります_齋藤天津子 Webデザイナー

Webサイト作品集_齋藤天津子

Webサイト作品集_齋藤天津子 Webデザイナー

お問合せ_Atsuko Saitoh

お問い合わせフォーム_齋藤天津子 Webデザイナー

Web制作の流れ

Web制作の流れ

良心的なWebデザイナーを探す

良心的なWebデザイナーを探すには?

ピックアップ記事

  1. 上のアイキャッチ画像を見て下さい。スパイウエア「ペガサス」がスマホやPCに入ってしまったら、被害者は…
  2. 「あなたの名前"Copilot"さんって、何て読むんですか?」と本人に聞いてみたところ、Copi…
  3. Affinity Photoでも簡単に電子印鑑ができます!
    目次2023年10月インボイス制度導入前、Affinity Photoでの電子印鑑…
もっとくわしい何を頼めるの?料金は?
PAGE TOP