Web制作の流れ

 

ここではお客様が自前サイトを新設か、リニューアルする際の
賢いコスパで制作したい個人や小・中企業に役に立つ「Web制作の流れ」をお伝えします。

Webサイト制作の流れ、全体像

これが「Web制作の流れ」全体像です。。このうち依頼主の前準備が1〜4の緑色部分です。

「Web制作の流れ」全体像

 

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

ご依頼主の前準備、1〜4緑色部分について

全体像の中で、ご依頼主の前準備、1〜4緑色部分について、表にするとこうなります。

前準備
お客様側で行う

上表1〜4緑色部分
前準備は社長自らや中核の社員さんが担う事が多い。
具体的にはサイトブランディング、素材や印刷物資料から素材の準備
ユーザーテストやお客様の声から掘り起こし

以下でご依頼主の前準備、1〜4緑色部分について、もっとていねいに説明します。

ご依頼主の前準備、1と2について

まず1〜4緑色部分のうち1と2です

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

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


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

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

ご依頼主の前準備、3と4について

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

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

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

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

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

コスパのいいWeb制作したけど、後悔している経営者が多い理由

これだけ説明するのは、UXデザイナーがWeb制作のキモだからです。「急いで作ってくれ!」と急ぐ事にコストをかけても、ユーザーテストなしでWeb制作の指示を出してしまい、数カ月後に後悔する経営者を多く見かけるからです。UXデザイナーは専門職で人員も少なくコスト高で、中小には適さないのは事実です。

それでWeb制作前に、ユーザーテストができなくても、今まで集まった「お客様の声」の見直しや集計、まとめを掘り起こし、その声を新しい自前サイトに反映される事をお勧めしているのです。この概念を知ってるだけでも違うと思いますので。

 

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

ご依頼主の前準備、4の「制作側に渡す物」はこれです

お客様側社内で以下「制作側に渡す物」をまとめ、外注先の私のようなWebデザイナーに渡します。

この材料は自社で所有権を持っているかどうか著作権についての注意事項に注意を払って下さい。自前サイトに使用できるのは「商用可」の自社で著作権を持つ素材に限ります。外注先がWebサイト制作を開始するのは、この前準備の材料を受け取ってからです。

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

この時点の、社内からWeb制作側に渡す、自社著作物の資料やデータが多ければ多いほど、納期が短縮し、予算の節約につながります。

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

 

Web制作の流れ

ここから「Web制作の流れ」全体像のうち、外注をお受けしたWebデザイナーの領域、表の5の部分です。

 

外注先が担うWeb制作内容はこれ

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

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

お客様から受け取った材料の質と量で、自前サイトの出来不出来に影響するのはおわかりでしょう。

何も材料が受け取れず、その上「無料素材だけ使って!」ならサイトの完成度に期待は持てないとおわかりでしょう。有料でも「商用可」の素材さえ、ぴったりを探す時間を取られ、加工時間が短くなるくらいです。

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

制作側に指示を出す職責の社員さんは1人に絞り、制作側への指示系統が混乱しないようにします。

外注先の6についての概略

この6のステップはWebにより必要でない時とある時があります。この担い手はエンジニアで、この領域の仕事はデベロッパー案件と言われます。予算が2倍になる事も多いその内容は、

Web制作でのエンジニアの職責「デベロッパー案件」は、機能を増やす以下のためです。
・ サーバーDNSカスタマイズ
・ PHPカスタマイズ
・ Javascriptカスタマイズ
・ サイトシステム(Wordpress等)の書き換えに関する作業

納品について

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

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

「Web制作の流れ」全体像の、フロー表後処理7について

 

この7のお客様側マーケティングで、自前サイト公開後のサイトローンチが本番開始できます。

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

最後に後処理7、マーケティングは何を行うのか、お客様側作業はこんな内容です。参考までに。

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

賢い個人や小中企業は自社のリソースを大切にし、自前サイトをお育てです。制作のご縁があれば幸いです。

お気軽に問合せからご相談・ご質問・ご予約ください。

 

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

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

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

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

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

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

お問合せ_Atsuko Saitoh

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

Web制作の流れ

Web制作の流れ

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

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

ピックアップ記事

  1. 【用語を解説します】LPとはランディングページ(販売促進用の全幅なウェブページ)の事です。ブラン…
  2. 上のアイキャッチ画像を見て下さい。スパイウエア「ペガサス」がスマホやPCに入ってしまったら、被害者は…
  3. 「あなたの名前"Copilot"さんって、何て読むんですか?」と本人に聞いてみたところ、Copi…
もっとくわしい何を頼めるの?料金は?
PAGE TOP