WEB制作のフローを個人的な所感込みでまとめてみました。

こんにちは、中村です。クライアントさんからweb制作を受託したときの制作フローをまとめました。まとめるにあたって、色々なwebデザイナーさんのサイトも参考にさせていただきました。

参考にさせていただいたサイト様

それでは順をおって紹介します。

事前摺り合わせ

クライアントはweb制作のことについては明るくないと場合が多いです。なので、事前の打ち合わせ段階でweb制作に必要なフローについて説明を行います。最初に伝えておくと、スケジュールの摺り合わせをするときがスムーズになります。

暫定スケジュールの設定

web制作の納期の納期を明瞭化させておきます。また、納期にはそれなりのバッファを持たせるようにしましょう。無理なスケジュールを設定すると、中途半端な納品物を提出してしまう可能性がでてきます。双方に対してデメリットになるのでお互いのためにもゆとりを持ったスケジュールを建てましょう

予算の打診

依頼を請ける側のモチベーションに影響する部分です。安く買いだたかれてしまうと、制作物へのモチベーションはおろか、今後の単価にも影響を及ぼします。安値を言われそれを受け入れるのではなく、ここはしっかりと金額交渉をおこないましょう。

対応範囲の明確化

納品したwebの運用がクライアント側になるのか。それとも代行で請けるのかで制作方法が変わってきます。これによってCMSの導入やその設定などのオプションが発生する場合もあります。

要件定義に関して

目的の明確化

僕がクライアントから仕事を依頼されたときは、最初の打ち合わせでまず「なぜwebサイトを作りたいと思いましたか？」という質問をしています。

web制作は、いくつかのフローを経て１つのwebサイトを制作するプロジェクトです。こういったプロジェクトでは、気がついたら当初の目的から離れてしまうことがあります。

例えば、webを使ってコスメを売りたかったとします。よりコスメが魅力的に見えるようなwebサイト作りに没頭して、その結果とても魅力的なコスメを紹介するwebサイトが出来上がったとしても、購入のフローがわかりにくかったりサポートや運営元がまるでわからないwebサイトになってしまったら、そのページに訪れたユーザーは「たしかにコスメは魅力的だけど、このサイトは信用できるのかしら？」と不審に思われてしまうことがあるのです。

なので、ユーザーにどうなって欲しいか。どんな行動を取って欲しいか。というwebサイトのコンセプトを明瞭に定めておく必要があるのです。

ユーザーの設定

利用するユーザーを想定することも、重要な要素のひとつです。上の例と同様ですが20歳の女性と、50歳の男性とでは「カッコいい」や「可愛い」の感覚も大きく異なります。ターゲットを明確にすることで、より大切にしたいユーザーにとって魅力的が使いやすいwebサイトの制作が行えます。

コンセプトの決定

webサイトの存在意義を決定します。「誰に何を伝え、どうなってもらうwebサイトか」

コンセプトというと、なんだかふんわりしたイメージというか、抽象的なものを想像する方も多いかと思いますが、ここで言うコンセプトはかなり限定的なものになります。目的を明確にするのと似ています。webサイトのコンセプトを決めると、何かに行き詰まった時や確認をするときの指標になります。

強みを明確にする

webサイトは、今では誰でも作れる時代です。少し勉強さえすれば簡単なwebサイトであれば一日で公開することができます。でも、それでは世界に10億もあるwebサイトに埋もれて誰の目にも見えなくなってしまいます。

強み。周りとの違いを明確にすることで、ユーザーがwebサイトに気づいてくれるきっかけになりますし、その強みを求めているユーザーに対してのオファーになります。また制作家庭のデザインなどの参考になります。

ユーザーとの接点

対象となるユーザーがwebサイトにどのような経路でアクセスするのかを摺り合わせます。これによりデバイスなどの対応度合いも変わってきますし、何に重点を置くかも変化します。

要素の洗い出し

ある程度、ターゲットやユーザーの導線をイメージできたら「このwebサイトに必要な項目」の洗い出しを行います。ここまでのフローができていれば必要な項目はそれなりに絞られてくるのではないでしょうか。

運営方法の決定

制作側が管理するのか、クライアントの管理になるのかを明瞭にしておきます。

運営側が管理する場合は、当然CMSの準備や構築設定が必要になりますECであればEC-CUBEや企業サイトであればwordpressなどになるかと思います。

余談ですが、僕はクライアント側で管理になった場合でも、CMSの設定をおこなってクライアントに納品して終わり、という状態にはしないように心がけています。クライアントの人ですので、意外とわからない部分をうやむやにしたまま納品されたものを運用することが多いので、マニュアルを簡単に作成して渡したり、実際に作業がかかりそうな案件でも相談にのったりしています。結局、仕事も人と人とのやり取りですので、できるだけ気持ちの良い仕事ができるようにこういった心配りをするべきだと思います。

見積もり出し

要件定義が完了したら、こまかな項目を改めて見積もって、クライアントに提出しておきましょう。

フリーで働いている人にとっては、シビアな問題になりますので、ここの認識がクライアントとずれてしまわないように連絡をとっておくことをオススメします。

スケジュール設定

必要な項目を洗い出したら、細かな設計からデザインの制作、デモチェックなどの細かい項目を洗い出した上で、可能なかぎり綿密なスケジュールを一度制定します。

ちなみに、スケジュールの修正や進捗については細かくクライアントと話すようにしておきましょう。実際に実働し始めてからの変更は必ずといっていいほど発生しますが、その結果スケジュールをおざなりにしてしまうと、クライアントが満足するものはできあがりません。報連相を必ず行いましょう。

設計（必要な項目の精査）

コンテンツの決定

要件定義である程度固めたコンテンツを改めて精査します。webサイトに取り入れるコンテンツに関しては、すべてコンセプトから一貫性があるかをクライアントと相談しておくと良いです。「あるかないかで言ったらどっちがよいか？」と聞かれるとほとんどの人が「あったほうがいい」と答えます。だからといって何でも取り入れるとコンセプトとかけ離れてしまいますので、コンセプトに立ち返り「なぜこのコンテンツが必要なのか」を明確にしてください。できないものは無くしてください。

優先順位はどうなるか

コンセプトからユーザーの導線を想定し、コンテンツで決定した項目から優先度を決めます。

デバイス対応決定

対応ブラウザはどうするか。という項目になります。PC/SP/タブレットの対応は？といった形で決定します。「誰に見て欲しいか？」が明瞭に定まっていて、かつクライアントとの摺り合わせもしっかりと行えていれば、ユーザーがどういったデバイスのブラウザで閲覧するのかなどが、自ずと見えてくるかと思います。

これに合わせて、コーディングでCSS3かjavaScriptのどちらを利用するかも、見えてくる項目かと思います。

サイトマップと簡易ラフ作成

導線の設計

ユーザーがどのページからどう遷移してコンバージョンに至るのかを摺り合わせ、それにそった構成を考えます。

ラフデザイン

簡単にラフデザインの作成に入ります。先で決めた優先度を考えつつ暫定のUI設計を行います。清書ではなくあくまでも配置決めくらいの認識が良いかと思います。

また、このタイミングでクライアントからの要望があれば、SEO的な目線から各ページに対してのワードを簡単に把握しておくことも必要になります。

デザインカンプの作成

ラフを清書する

より具体的なモックアップとしてラフを作成します。使用するソフトは何でも良いのですが、Illustratorやphotoshop、Frameworkなどのソフトが一般的ですね。

デザインに関しては、どうしても完成

必要素材の洗い出し

この段階で、クライアントとデザインの摺り合わせも行いつつ、クライアント側に必要な素材を依頼しておきましょう。

コーディング作業

ここまできてようやく、HTML＋CSSでのコーディング作業になります。

納品

納品のパターンは大きく２つあります。制作側でアップするパターンかクライアント側で対応するパターンです。

アフターフォロー

仕事は、納品して終わりと思っている方もいますが、ここからの対応次第でまた発注してもらえるかが決まる。といっても過言ではないです。ぜひ、クライアントが想定している以上のサービスを行いましょう

クライアントの要望を120%叶え、感動させると当然さらに仕事の発注をもらえます。これを念願においておくことが重要です。

おわりに

いかがでしょうか。少しでも参考になれば幸いです。