はい、前回の記事でも触れましたが今回はweb制作という仕事において一体どんな工程があってどんなことをしなければならないかを自分の備忘録も兼ねて経験からおさらいしていこうと思います。
前回の記事はこちら
実際は制作会社さんや個人によって行われる内容も細かく変わってくると思うので、「うちの会社はこう」「私はこうしてる」などあればコメントで教えてもらえると嬉しいです。
目次
受注まで
営業
顧客を見つける行為。一般的には営業と表現されるが、厳密には集客という言い方が近いと思っている。
要するに自分を知ってもらって制作の依頼をしてもらうためにどうしましょう、という話。
顧客にも種類があり、主に4種類を考える。
- 潜在顧客 ：商品を知らない
- 見込顧客 ：商品を知ってはいるが買ってはいない
- 新規顧客 ：商品を初めて買った
- リピート顧客：商品を複数回買った
顧客に商品を知ってもらい、1→2の状態にするのが「集客」
顧客に商品を買ってもらい、2→3の状態にするのが「営業」
顧客に商品をまた買ってもらい、3→4の状態にするのが「リピート戦略」
と言われる。（リピート戦略についてはWeb制作の流れからは若干外れるので説明は割愛）
集客においては、基本的に社会に対してなんらかの発信行為が行われる。オウンドメディアや広告などがある。
営業は営業メール、テレアポ、面談、問い合わせ対応などがある。顧客に接触し自分の強み、相手にとっての価値を伝える。この後の「ヒアリング」や「プレゼン」はこの営業に当たる。
Web制作においてはリスティング広告を用いる例や、見積もりを簡単に出せるシステムを作ってお問い合わせに繋げる施策が例として見られる。
ヒアリング
顧客との接触に成功したら、具体的にどのようなWebサイトが欲しいのかを知るために相手にいくつかの質問をする。質問項目としては、
- 制作全体の目的、コンセプト
- デザインについて
- ページ制作、設計について
- 本番環境、管理について
の4つに大別される。特に制作の目的については丁寧に確認しなければならない。ここがずれるとそれ以降の全てがずれるため。
また、相手の言葉をそのまま受け取れば良いとは限らず裏のニーズを把握することを意識したい。例えば「webサイトが欲しい」という言葉の裏には、「自社のことを多くの人に知って欲しい」という要求がある。
提案書作成
ヒアリングした項目をもとに、具体的にどのようなサイトを構築するかという内容を資料にまとめて相手に提案する。
基本的には自分（自社）の紹介から入り、この提案書でも改めてサイト制作の目的、サイト制作によって何を達成したいのか確認する。
そして具体的なサイトの要件について説明していき最後に金額の見積もりでしめる。
項目としては、
- 提案概要
- 要求の確認
- 競合調査
- 要件定義
- 参考サイト
- サイトマップ
- ワイヤーフレーム
- スケジュール
- 制作メンバーの体制
- 見積もり
というような流れ。見積もり項目はページごとにデザイン/コーディング、PC/SPをそれぞれ分けてなるべく細かく出すと良い。何がどのようになって見積もりの数字なったかを伝えた方が余計な疑問を生まない。
web制作の場合は常に相手にITリテラシーが備わっているとは限らないので、なるべく専門的な表現は避ける。また制作においてSEOなどの難しい話が関わって来る場合はその言葉の説明も添えておくと良い。
プレゼン
作成した資料を使って対面で相手にプレゼンを行う。先にメールで資料送っているなど、状況によっては全てを細かく説明せず要点のみ説明するなどの工夫が必要。当然内容も重要だが、アイスブレイクの重要性が高い。アイスブレイクでそれ以降の本題の伝わりやすさが決まると言っても過言ではない。
また話し方や声色、仕草など意外と細かいところを見られていることにも意識を向ける。
そしてプレゼンにおいて特に重要なのは相手からの質問に答えることで、資料に書かれていることは全て答えられるよう準備をしておく。それによって相手が受注する際にネックとなる部分を排除できる。
クロージング
契約にいかに持っていくかの部分。可能ならその場で契約してもらうように持っていく。
プレゼンでも触れたが、相手が受注する際にネックとなる部分をいかに排除できるかが鍵。まずはプレゼンの率直な所感を相手に聞き、どんな疑問点や不安なことがあるかを丁寧に確認し対応していく。
請求書作成・送付
契約が決まったらお礼メールとともに請求書を送る。請求書の項目は見積もりと同様細かく出す。また基本的に月末締めの翌月払い。
受注〜制作
ワイヤーフレーム作成
まずはじめにワイヤーフレームを制作し、各ページの構成、内容を固める。この段階で相手の確認を挟み手戻りのリスクを減らす。デザインを作ってから構成の修正が入ると結構工数がかかる。
また相手に都度確認をしてもらうことで「Webサイト制作はあくまで受注側と制作側の共同作業である」という認識を持ってもらう狙いもある。
ツールはIllustrator、Photoshop、XDなどが挙げられるが、共有用のURLを発行しさらにコメント機能もあるXDが個人的におすすめ。
デザインカンプ作成
ワイヤーフレームの段階でサイトの構成、内容が決まったらデザイン制作に入る。ヒアリングの段階で確認した情報をや参考サイトをもとにどのようなテイストで制作していくかを決める。
ここで作ったものがそのままコーディングの対象となるが、デザインデータからは読み取れない情報が意外と多い（ブレイクポイントは何pxか、アニメーションはどうなるのか）のでデザイナーとコーダーのコミュニケーションは実はかなり重要。
コーディング
デザインデータをもとにHTML/CSSのコードに落とし込む。前述の通りデザインからは読み取りにくい情報が多いので逐一デザイナーに確認するのが良い。
また当然デザインデータを確認する必要があるのでコーダーといえどもツールはある程度使えなければならない。
技術的にはHTML/CSS/JSに加え、コーポレートサイト制作の場合はWordpressを用いることが多い。ただしWordpress開発の技術はツール依存であまり汎用的でない側面もあるので、将来的にシステム開発を視野に入れる場合はシンプルにPHPやNode.jsの方が良いと思っている。
動作チェック
コードを書いたら終わりではないのがWeb制作。ちゃんと各種ブラウザで想定通りの描画、挙動をするか確認する。（要求されたらあの憎きIEも対応しなければならない）
ざっと挙げると、
- Chrome
- FireFox
- Safari
- Edge
- IE
- AndroidのChrome
- iOSのSafari
- 各種サイズのスマートフォン
IE以外はほぼ前提。またブラウザだけでなくスマートフォンの様々な横幅にある程度対応しなければならない。ちなみに現状はiPhone5の320pxが最小と考えて良い。
納品〜完了
納品
完成した制作物を相手にお渡しする。ファイルを送れば良い場合と、サーバーへの設置まで行う場合がある。
サーバーへ設置する場合は相手からサーバーの情報をもらいCyberDuckなどのFTPツールを使ってデータを置く。レンタルサーバーならそちらのサイトからコントロールパネルを操作して配置しても良いが、誤操作のリスクや使いやすさを考えるとツールを使うのがおすすめ。
入金確認
最後に相手からの入金を確認して完了。
まとめ
いかがでしたでしょうか。こうやって挙げてみると必要な工程が多いですね。
企業なら分業でしょうがフリーランスであれば全て自分でやらなければなりません。１つづつこなせるように頑張っていきましょう。
だいぶ長々となりましたが、これでもざっくりなのでまた各項目について深められるものは個別で記事にしようかなと思います。
コメントを残す