マーカーネット株式会社

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

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

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

ブログの記事の編集などにWYSIWYGエディタCKEditor + KCFinderを導入しているサイトでログインするユーザごとに画像のアップロード先を切り替えたい状況がございます。 その方法を紹介し …

ウェブデザインの幅が広がるFREEフォントの紹介

ウェブデザイン作りに当たって、フォントの選択はすごく大事なところであり難しい問題です。 普段、使うフォントってもう決まっていたりしませんか? 私の場合、欧文はHELVETICA,Futuraを和文はモ …

WEBトレンド!?パーツの動きに注目!!~素敵サイトの旅 その2~

明けましておめでとうございます。web初心者のKです! 本年もどうぞよろしくお願いいたします。 みなさま、お正月はいかがお過ごしでいたでしょうか? 私はあまりに寒すぎて冬眠できないかな~、と、 食いだ …

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

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

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

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …