ブログの更新通知をメールで受け取る

Webサイト制作の流れ。ヒアリング~ホームページのデザインカンプ作成など

web制作の流れ

チビ

ねぇねぇ。フリーランスのWebデザイナーになろうと思うんだけど、どう思う?

ついに独立するのですか。フリーランスのWebデザイナーは、そんなに簡単じゃないよ?

世界のヘイショー

チビ

そんなこと分かってるし。けどもう会社で働くのは嫌になったから。自分でお客さんから直接仕事をもらって、最高のホームページを作りたい。

そこまで言うなら協力するよ。アドバイスするとすれば、フリーランスのWebデザイナーに一番重要なのがコミュニケーション能力だ。

世界のヘイショー

チビ

チビは実力があるから、大丈夫だよ。最高のホームページを作ればいいんでしょ?

それが問題なんだ。ちびにとって「最高のホームページ」ってなんだと思う?

世界のヘイショー

チビ

最高にクールでイケてるサイトに決まってるでしょ。最先端のトレンドを取り入れた、かっこいいサイトのことだね。

そうとは限らない。最高のホームページとは、クライアントが100%満足するホームページのことだよ。問題はクライアントの求めているもの、イメージしているものが何かを知らなければならない。

世界のヘイショー

チビ

なるほどね。どうやってコミュニケーションするの?

一般的なホームページの作成手順はこんな感じかな。

世界のヘイショー

STEP 1
ヒアリング
クライアントの要望するホームページを特定する
STEP 2
サイトマップ提出
全体の作業量を把握する
STEP 3
見積提出
修正回数なども決めておく
STEP 4
受注、前金半分もらう
未払いが無いように前金をもらっておく
STEP 5
ワイヤーフレーム提出
トップページの構成を決める
STEP 6
(必要であれば)デザインカンプ提出
Photoshopでトップページ、サブページのデザインを提出
STEP 7
コーディング
HTMLでサイトを作成
STEP 8
(必要であれば)CMS構築
WordPressなどでサイトを構築する
STEP 9
(必要であれば)トレーニング提供
クライアントが管理する場合、管理方法を指導する

チビ

めんどくさっ。。

ここまできっちりする必要がない場合も多いけど、細かいクライアントはけっこういるからね。作ってみたら、「思ってたのと違った」という状況を防ぐためにも、しっかりと手順を踏んでいくことが大切なんだ。

世界のヘイショー

チビ

なるほど。I got it。じゃあそれぞれの工程について細かく説明してくれる?Webサイト制作に必要な工程、

出てこいやぁ!!

工程1:ヒアリングについて

Web制作のヒアリング

ヒアリングの重要性

Webサイト制作の過程において、ヒアリングはもっとも大切です。

なぜか。

それは、「最高のWebサイト」=「クライアントのイメージに100%合致するサイト」であるからです。

これが難しいところで、Webディレクターやデザイナーは当然経験もあるし最先端の情報を知っているので、クライアントの要望する内容よりもクオリティの高いアイデアを持っていることが多い。

クライアントの言う通りのサイトを作るのもよいですが、出来ればクライアントにいろいろと提案して、一緒にベストなイメージを共有していく形が一番よいですね。

その際に必要なのがヒアリングのスキルです。

チェックシートの項目

  • ターゲットユーザー(例:新卒など)
  • ターゲットユーザーの年代、性別(例:40代女性など)
  • 会社の強み
  • 会社の事業内容
  • ページ数
  • 見せたいコンテンツを出来るだけ多く挙げてもらう
  • ロゴ有り無し
  • 画像の提供有無
  • テキスト(文章)の提供有希望する色
  • シンプル or 複雑
  • カラフル or 単色
  • 日常 or 高級
  • 遊び心 or 厳粛
  • 未来的 or 伝統的
  • 女性的 or 男性的
  • イメージしているサイトがあれば出来るだけ多く挙げてもらう
  • 集客方法(ターゲットユーザーをどのようにサイトへ誘導するか)
  • ゴール(例:問い合わせ数を増やす、公式サイトから応募してもらうなど)
  • 運用者にHtmlやWordPressの経験があるかどうか
  • 競合しているサイトを出来るだけ多く挙げてもらう

ヒアリングシート詳細版のテンプレート

工程2:サイトマップ

アクセス性の高いWebサイトの需要が高まる中、サイトマップ構築は重要です。

特にSEO対策をする場合はここで失敗すると後から大変なことになります。

サイトマップのテンプレート

工程3:見積提出、受注、前金を払ってもらう

Webサイト制作の契約

ここまで打合せをした段階で大体の工程は把握できるので、見積は提出できます。

より精度の良いコスト計算をするのであればワイヤーフレーム後にこの処理を行っても良いですが、失注した時に痛いです。

見積、請求書などのテンプレート

工程4:ワイヤーフレーム

ワイヤーフレーム

コンテンツの構成を絵にしたものです。

ワイヤーフレームを作るツールはいろいろありますが、僕は他のフォーマットと統一させるためにエクセルを利用します。

ヒアリングシート、サイトマップのダイヤグラム、各伝票系書類、ワイヤーフレームを全て一つのエクセルシートにまとめます。

ワイヤーフレームのテンプレート

工程5:デザインカンプ

Photoshopで実際のデザインを提出する工程。

Webディレクター志望であれば、ここから後の工程は外注することも出来ます。

レスポンシブの普及によりここの工程を省略する人が増えてきていますが、僕はこの工程を省略しないことをおすすめします。

クライアントのイメージや、その人のこだわり具合によっては後から全てがひっくり返る可能性があるからです。

工程6:コーディング

コーディング

Htmlで実際にコーディングしていきます。

ここは外注すると安くつきますが、僕は綺麗なソースコードを残すことにこだわるので、自分でコーディングします。

ただしBootstrapなどのフレームワークは必須です。

一からレスポンシブデザインのコーディングをするととんでもなく手間だし、ミスの多いサイトになる可能性も高いです。

工程7:CMS構築(WordPressなど)

WordPress

クライアントの運営チームにWordPressの経験者がいれば、WordPressでCMS構築することによってクライアント側でコンテンツの更新などを行ってもらうことが可能です。

サイトのメンテナンス、更新頻度が重要視されている今の時代ではCMS構築はかなり需要が高いです。

工程8:ドキュメント、トレーニング提供

トレーニング

コンテンツ制作のガイドラインを守ってコンテンツ制作を行わないと、数年後にサイトのコーディングはカオスと化すことは必至です。

クライアント側でメンテナンスを行う場合はガイドラインや、方法を教えるトレーニングを実施することが必要になります。

工程9:納品

全てが終わった時点で納品。

まとめ

僕がフリーのWebデザイナーをしていたころ、この一連の手順を知らなくてすごく苦労したんだ。

世界のヘイショー

チビ

なにがあったの?

コーディングをした後に修正を要求されまくって、泣きそうになったこともある。はじめにデザインカンプを提出して承認をもらっておけば楽だったんだけど。。

世界のヘイショー

チビ

まぁ、なにごとも経験だよ。その経験があったからこそ、今の自分がいるんでしょ?

(なんで上から目線やねん。。)

世界のヘイショー

チビ

とにかく、これを参考にやってみるよ!ところで、どうやってクライアント見つけるの?

~次回に続く~