WEB制作 ホームページ運用

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

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

wb0010012484x

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

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

■まずは問い合わせ

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制作, ホームページ運用

関連記事

中国語圏のSEO事情を知る!多言語サイト向けSEO対策の基礎知識

中国語圏のSEO事情を知る!多言語サイト向けSEO対策の基礎知識

ここ最近、サイト多言語化の依頼が増えておりますが、 そもそも多言語サイト向けのSEO対策はどうすればいいのかと思ってる方のために、 今回は中国語圏のSEO事情について少し説明させていただきたいと思いま …

VScodeのおすすめ設定と拡張機能

VScodeのおすすめ設定と拡張機能

目次1 使用しているエディター2 自動整形3 連番の入力4 エディターの画面分割5 コードを見やすくする拡張機能6 スペルミス防止7 最後に 使用しているエディター こんにちは。2年目コーダーXです。 …

簡単レシピ!アメコミ風デザイン素材と活用法!!

簡単レシピ!アメコミ風デザイン素材と活用法!!

今回はアメコミ風のデザインを作るときに役立つフリー素材と活用法をご紹介いたします。 まずは実際のアメコミを見て、簡単に特徴を分析してみます。 アメコミでgoogle画像検索をかけると、、、 とってもカ …

WEBトレンド! 全面に写真を配置した 最新サイトのご紹介 ~素敵サイトの旅 その3~

WEBトレンド! 全面に写真を配置した 最新サイトのご紹介 ~素敵サイトの旅 その3~

こんにちは!web初心者のKです! 今日は曇りですが、みなさんお風邪など召されていませんか? 私は雪対策にブーツとコートを少し前に購入しました! 備えあれば憂いなし! もう雪が来ても怖くありません!! …

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xでは、404 NOT Foundエラーが発生した場合、 デフォルトでは、 app/View/Errors/error400.ctp の内容が表示されます。 サイトによっては、 40 …