マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEB制作 ホームページ運用

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

投稿日:2014年6月18日 更新日:

wb0010012484x

WEBデザイナー、WEBディレクター、WEBプログラマー、WEBプロデューサー、プランナー、ライター、営業さん、ときおりカメラマンANDクライアント。とまぁたったひとつのホームページが出来上がるまでにたくさんの人が絡むわけなのですが、WEB業界以外にひとには誰が何するの?という感じの方も少なくないと思います。

というわけで、お問い合わせ~納品までにどのような人がどんなふうに絡み、WEBサイトが出来上がっていくのかということを簡単に紹介していこうと思います。

Contents

■まずは問い合わせ

af0100000756w
大抵はホームページからまたは電話で「ホームページ作りたいんですけど(リニューアルしたいんですけど)」というところからホームページ作成はスタートします。

ホームページからの問い合わせの場合は折り返しの電話がかかってきますが、
その時の電話の相手は主に営業さんまたはWEBディレクターです。

その時の会話は

「なんでホームページ作りたいか」
「希望納期」

など電話ではシンプルな質問をされることが多いでしょう。

営業としてもWEBディレクターとしても電話じゃいまいち伝わらない部分があるということでまずは直接会って話を聞くために互いの予定を確認をしてアポイントをとります。

アポイントまでの間にWEBディレクターはクライアントのホームページや競合っぽいところを事前に確認したり、質問などざっとまとめてからから赴きます(そのほうが話が進むからです)

初回打ち合わせ(ヒアリング)

af9920042658x
ここでも主に登場するのは営業やWEBディレクターですが、状況に応じてWEBデザイナーやWEBプログラマーが同席することもよくあります(例えば要件がプログラム関連だと打ち合わせ前に分かっている場合などはプログラマーが同席するなど)

ここではやりたいことを話していただき、質問答えて話していただくだけでOKです。

登場人物:営業、WEBディレクター、プランナー

提案、スケジュール、見積もり

af0100003769w
ヒアリング内容を持ち帰りクライアントのやりたいことや目的が見えてきたところで、スケジュールや見積もりのフェーズ(段階)にはいります。

提案書、サイトマップ(大よその全体像が分かるもの)やスケジュール、見積もりを作成し再び提案にクライアントの元に赴きます。

主な登場人物:営業、WEBディレクター、プランナー

発注

提案やスケジュール、見積もり、予算などなど、トータルで判断し、発注となります。

制作開始!(0~15%)

まずは情報設計を行います。主に「ワイヤーフレーム(以下ワイヤー)」と呼ばれていることが多いです。
デザイン前に書き起こす白黒の線がみたいなものですが、ワイヤーはデザインイメージというよりはサイトに訪れたターゲットをコンバージョン(お問い合わせや資料請求、購入など)に繋がるまでの導線を設計するものです。ワイヤーは簡易的なものから細かなものまで多種多様です。

ワイヤーはプランナーやWEBディレクターが書くことが多いです。

ここまではまだ具体的な見た目のイメージは湧きにくいかもしれません。

主な登場人物:WEBディレクター、プランナー、

いよいよデザインです。(15%~40%)

af9920057169x
ワイヤーが確定したらWEBディレクターの手からWEBデザイナーに渡り、デザイナーはその設計書を元にデザインを起こします。このあたりからなんとなくサイトのイメージがつかめてくることでしょう。

クライアントと詰めながらデザインを確定させていきます。

主な登場人物:WEBデザイナー、WEBディレクター

コーダーによるHTMLコーディング(40%~65%)

af9970003948w
デザインはまだ見た目を確認する為のものだと思ってください。
デザインが出来たらいきなりホームページが立ち上がるわけではないのです。
普段インターネットを閲覧しているInternetExplolerやfirefox、GoogleChromeなど「ブラウザ」と呼ばれるインターネット閲覧ソフトに表示させるためのコードを各作業が始まります。

主な登場人物:HTMLコーダー、WEBディレクター

ここでのWEBディレクターはコーダーによりHTML化されたものがデザイン通りになっているか、動きなどは仕様どおりになっているかを確認したりしてます。

プログラムの組み込み(65%~90%)

ここからは見た目に「機能」を付ける人の登場です。仕様にもよりますが予算は結構プログラムにウェイトがかかるケースが多いです。よくあるものとしては

●お問い合わせフォームを構築する人
(個人情報などを入力して送信するアレです)
●クライアント側で更新できるシステムを構築する人
(CMSと呼ばれることが多いです)
●ショッピングサイトにショッピング機能を構築する人
(ネットショッピングですね)

WEBプログラマーはクライアントからの要件に沿って見た目以外の機能を付けていきます。

主な登場人物:WEBプログラマー、WEBディレクター

ここでのWEBディレクターはプログラムが組み込まれたものが仕様どおりの動きをするかをプログラマと一緒になって確認していきます。

テストアップ~本番公開(90%~100%)

もろもろ全体が出来上がったら各種ブラウザでのチェックや動作確認を行い最終修正などを経て本番公開となります。

主な登場人物:全員
af9920057309x

最後に

いろんな登場人物や各プロセスを書きましたが、あくまでよくある例を書いておりますので必ずしもこのように進行が進むわけではありません。状況状況に応じてそれぞれの動きが変わることもありますのであくまで参考程度になればと思っております。

あと、ホームページを運用するにはサーバーが必要になりますが、サーバーについて何かよく分からない方はこちらの過去記事初めてのホームページ運用をご覧ください。

最後に簡単にそれぞれの役割をまとめました。

  1. 1.営業さん(最初にコンタクト取る人、見積作ったりする人)
  2. 2.WEBディレクター(情報設計する人、現場を取り仕切る人、営業活動することも)
  3. 3.プランナー(分析したり、企画たてたり、情報設計したり)
  4. 4.WEBデザイナー(情報設計を元にデザインを作る人)
  5. 5.コーダー(デザインを元にHTMLを書く人)
  6. 6.WEBプログラマー(お問い合わせフォームや更新システムなどホームページに「機能」をもたらす人)
  7. 7.WEBプロデューサー(それぞれのプロセスの重要な局面で出てくる人)
  8. 8.カメラマン(撮影が必要になったときに撮影する人。まんまですね)
  9. 9.コピーライター(原稿を書く人)

※営業とディレクター、ディレクターと営業など兼任することが多かったりしますがそれはこれは制作会社によってまちまちです。

いかがでしたでしょうか。こうやって見るといろんな人が関わっているのが分かりますね。だいたいこんな感じでホームページが出来上がっていくというのを見える化したかったわけですので少しでも謎な部分が解決されたら本望です。

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-WEB制作, ホームページ運用

関連記事

AI Webサイト制作サービス「Solo」を使ってみた

こんにちは、デザイナーのSです。 今回は、MozillaがAIによるWebサイト制作サービス「Solo」を公開したということで、実際に使ってみました。 最初に「すでに持っているウェブサイトのURL」「 …

表現の幅を広げる!!AEプラグイン

こんにちは、先日自宅で自分の映像作品を会社に行く前にレンダリングし、仕事が終わって見てみると半分もレンダリングが進んでいなく絶望を味わった新米デザイナー・ムービー担当Iです。 こった映像を作成するには …

面白い動きや便利な機能をJSで実装! その5:ちょっと変わったマウスオーバーの応用編

javascript(jquery)でマウスオーバー時に変わった動きを付けたいと思います。 面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。の続きになり …

制作部隊に仕事を依頼するときに最低限必要な5つのこと。

制作部隊に仕事を依頼するときに最低限必要な5つのこと。 こんにちは。WEBデザイナーのKです。 本日はWEBデザイナーやプログラマーなど制作関係の方に、仕事を依頼するときに、 最低限抑えておかなければ …

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-3-

約3週間に1回の登場になりますが、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて、続いて紹介していきたいと思います。 今回は最終回となりますので、最後まで読んでいただけれ …