マーカーネット株式会社

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

関連記事

【リマーケティング広告】失敗しないために気をつけたいこと

【リマーケティング広告】失敗しないために気をつけたいこと

リマーケティング広告を聞いたことがあるでしょうか。 一度該当のサイトに訪れると、ほかのウェブページを見ている時にそのサイトの広告が優先的に表示されるサービスです。 ここ最近導入する企業が増えてきて、 …

CSS3のみで吹き出しを作成

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

CSS3のセレクタは幾つもありますよね。 今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。 Contents E:first-child 親要素の最初の子要素であるE要 …

コロナ太り解消!!!~会社の取組~

【Illustrator小技】PDFファイルを代替フォントでなくアウトライン化して開ける便利なワザ

アウトライン化されていないPDFをIllustratorで開こうとする時、 Illustrator「このPDF、該当するフォントがないから代替しちゃいますね~」 デザイナー「うわぁぁフォント変わっちゃ …

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、 幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。 それだと効率も悪く、修正もしづらいためコーディングが大 …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …