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

関連記事

【Fireworks】Flashなしで簡単に作れるGifアニメーション

【Fireworks】Flashなしで簡単に作れるGifアニメーション

サイトにちょっとした動きがほしい時、Flashを使わず、Fireworksでも簡単にGifアニメーションを作成できます。 ここで画面読込中のローディングアニメーションを作る手順をご紹介したいと思います …

サイトリニューアル!する?しない?

サイトリニューアル!する?しない?

こんにちは。web制作初心者のKです! さてさて、今日は初心者の私がサイトを制作するうえで、 「サイトリニューアルの判断材料のひとつ」をお話したいと思います! これは、「BtoC(消費者向け)サイトの …

【Illustrator】基本図形で出来ちゃう!ハートマークの作り方

【Illustrator】基本図形で出来ちゃう!ハートマークの作り方

こんばんは、新人Aです。 今日は、Illustratorでハートを作る方法についてお話します! まぁ、素材サイトさんからデータをお借りしちゃえばそれで済む話なのですが… 理想の形が見当たらない!という …

デザインコンセプトとは?重要性や作り方について事例を交えてわかりやすく解説

デザインコンセプトとは?重要性や作り方について事例を交えてわかりやすく解説

デザインコンセプトは、作る側にとっても、見る側にとっても、とても大切です。何を伝えるべきで、何を伝えないべきか。コンセプトをしっかり設定すると、無駄な部分がスリムになってデザインに統一性が生まれるので …

【WEBデザインレシピ】 暑い夏にヒヤッとするホラーなデザインの作り方

【WEBデザインレシピ】 暑い夏にヒヤッとするホラーなデザインの作り方

もうすぐ夏がきますね! 今年は冷夏という噂も耳にしますが、日本の各地でちらほら真夏日が記録されていたりして… そこで今日は夏の暑さも吹き飛ぶ!?ホラーデザインの簡単レシピをご紹介させていただきます。 …