- Webサイト制作の仕事をしたいのだけど、どういう手順で進めればよいのか分からないです。
- クライアントから何回も修正依頼を受けて困っている。
- Web制作会社に発注依頼をしたけど、イメージ通りの内容に仕上げてくれるか不安になってきた。
このような方のために、Webサイト制作におけるワークフローを紹介します。
要約すると以下の通りです。
フリーランス案件の場合はここまできっちりする必要がない場合も多いですが、双方の認識の相違をなるべく減らすためにはしっかりと手順を踏んでいくことは大切になります。
ヘイショー
それでは、見ていきましょう。
目次
工程1：ヒアリング
ヒアリングの重要性
Webサイト制作の過程において、ヒアリングはもっとも大切です。
それは、「最高のWebサイト」=「クライアントのイメージに100%合致するサイト」であるからです。
これが難しいところで、Webディレクターやデザイナーは当然経験もあるし最先端の情報を知っているので、クライアントの要望する内容よりもクオリティの高いアイデアを持っていることが多い。
クライアントの言う通りのサイトを作るのもよいですが、出来ればクライアントにいろいろと提案して、一緒にベストなイメージを共有していく形が一番よいですね。
その際に必要なのがヒアリングのスキルです。
チェックシートの項目
- ターゲットユーザー（例：新卒など）
- ターゲットユーザーの年代、性別（例：40代女性など）
- 会社の強み
- 会社の事業内容
- ページ数
- 見せたいコンテンツを出来るだけ多く挙げてもらう
- ロゴ有り無し
- 画像の提供有無
- テキスト（文章）の提供有希望する色
- シンプル or 複雑
- カラフル or 単色
- 日常 or 高級
- 遊び心 or 厳粛
- 未来的 or 伝統的
- 女性的 or 男性的
- イメージしているサイトがあれば出来るだけ多く挙げてもらう
- 集客方法（ターゲットユーザーをどのようにサイトへ誘導するか）
- ゴール（例：問い合わせ数を増やす、公式サイトから応募してもらうなど）
- 運用者にHtmlやWordPressの経験があるかどうか
- 競合しているサイトを出来るだけ多く挙げてもらう
工程2：サイトマップ
アクセス性の高いWebサイトの需要が高まる中、サイトマップ構築は重要です。
特にSEO対策をする場合はここで失敗すると後から大変なことになります。
工程3：見積提出、受注、前金を払ってもらう
ここまで打合せをした段階で大体の工程は把握できるので、見積は提出できます。
より精度の良いコスト計算をするのであればワイヤーフレーム後にこの処理を行っても良いですが、失注した時に痛いです。
工程4：ワイヤーフレーム
コンテンツの構成を絵にしたものです。
ワイヤーフレームを作るツールはいろいろありますが、僕は他のフォーマットと統一させるためにエクセルを利用します。
ヒアリングシート、サイトマップのダイヤグラム、各伝票系書類、ワイヤーフレームを全て一つのエクセルシートにまとめます。
工程5：デザインカンプ
Photoshopで実際のデザインを提出する工程。
Webディレクター志望であれば、ここから後の工程は外注することも出来ます。
レスポンシブの普及によりここの工程を省略する人が増えてきていますが、僕はこの工程を省略しないことをおすすめします。
クライアントのイメージや、その人のこだわり具合によっては後から全てがひっくり返る可能性があるからです。
工程6：コーディング
Htmlで実際にコーディングしていきます。
ここは外注すると安くつきますが、僕は綺麗なソースコードを残すことにこだわるので、自分でコーディングします。
ただしBootstrapなどのフレームワークは必須です。
一からレスポンシブデザインのコーディングをするととんでもなく手間だし、ミスの多いサイトになる可能性も高いです。
工程7：CMS構築（WordPressなど）
クライアントの運営チームにWordPressの経験者がいれば、WordPressでCMS構築することによってクライアント側でコンテンツの更新などを行ってもらうことが可能です。
サイトのメンテナンス、更新頻度が重要視されている今の時代ではCMS構築はかなり需要が高いです。
工程8：ドキュメント、トレーニング提供
コンテンツ制作のガイドラインを守ってコンテンツ制作を行わないと、数年後にサイトのコーディングはカオスと化すことは必至です。
クライアント側でメンテナンスを行う場合はガイドラインや、方法を教えるトレーニングを実施することが必要になります。
工程9：納品
全てが終わった時点で納品。
まとめ
参考になれば幸いです。
ご精読ありがとうございました。
