「WEBデザイナーになりたいけど、どんな流れで仕事をするのだろう？」
「WEBデザイナーって具体的にどうやって納品するの？」
という疑問がある方向けに、この記事ではWEBデザイナーの仕事の流れを具体的に解説します。
WEBデザインの勉強をしている方は、将来的にどんな流れで仕事を進めていくのかを理解することで、今の勉強がどのように活かされるのかをイメージできるようになるので、学習効率を高めることができます。
WEBデザイナーが実務でどのように企画して、納品しているのか、具体的な仕事内容を解説するので、これからWEBデザイナーになりたい方必見です。
実際に案件を受注して、業務を行う際も確認できるように、ブックマークしておきましょう。
WEBデザインの企画から納品までの流れ
ではまず、WEBデザインの企画から納品までの流れを解説します。
初心者WEBデザイナーの方は、WEB制作会社もしくは、クラウドソーシングサイトから案件を受注して仕事を始めることが多いです。
どのような作業範囲の仕事を受注するかによっても変わりますが、基本的な流れは以下の通りです。
- 企画
- ワイヤーフレームの作成
- デザイン作成
WEBデザインを行うためには、いきなりデザイン作成からスタートするのではなく、まずは、どんな目的のサイトを作りたいのかをクライアントに確認して、目的を達成するために必要なデザインを企画するところから始まります。
WEBデザインの質を決めるのは、デザイン作成段階ではなく、この企画が最も大切です。
企画のないデザイン作成は、ただ自分の作りたいデザインで作成しているだけになり、クライアントの目的を達成できません。
継続的に依頼される稼げるWEBデザイナーを目指している方は、企画作成に最も時間をかけて注力するようにしましょう。
具体的な企画作成方法は、この記事で解説するので安心してください。
次に、企画が作成できたら、ワイヤーフレームというデザイン案を作成します。
企画段階では、クライアントと目的やターゲットの認識を一致させますが、デザインイメージは抽象的なので、ワイヤーフレームを作成することで、デザインイメージを具体化します。
ワイヤーフレームではデザインを作りこむ場合と、簡単に骨格部分だけ作成する場合がありますが、クライアントとイメージが相違しないように、なるべく作りこむのがおすすめです。
具体的なワイヤーフレームの作成方法についてもこの記事で解説します。
企画とワイヤーフレームでクライアントと認識のすり合わせを行ったら、いよいよWEBデザインの作成を行います。
いきなりWEBデザインの作成に入ると思っていた方は、驚くかもしれませんが、重要度やかける時間も企画とワイヤーフレーム段階が7割ほどで、WEBデザインの作成作業はワイヤーフレームを形にするだけなので、そこまで重要度は高くありません。
WEBデザインの学習をしている方は、WEBデザイン作成段階の学習に注力していると思いますが、実務の現場では、ワイヤーフレームを形にできるスキルは当然のこととして、企画やワイヤーフレーム作成段階で、WEBデザイナーの質が決まります。
なので、デザインカンプを元に完璧に形にできるスキルは最低条件として、必ず習得するように学習を進めてください。
以上がWEBデザインの企画から納品までの流れになります。
ここからは企画・ワイヤーフレーム・デザイン作成のそれぞれの方法を具体的に解説するので、将来的にWEBデザイナーとして実務に取り組むことをイメージしてご覧ください。
WEBデザインの企画
WEBデザインの企画段階で最も大切なことは以下の通りです。
- 目的を決める
- ターゲットを明確にする
- 作成予算と運営方法の確認
解説した通り、WEBデザインの質を決めるのは、企画段階なので、クライアントと認識の相違が決して生まれないよう、制作するサイトの目的や想定しているターゲットユーザーを明確にしておきます。
ここでは、なるべく具体的に決めることを意識してください。
なぜなら企画段階ではただでさえデザインイメージが抽象的になりやすいので、目的やターゲットが具体的に定まっていなければ、元も子もないからです。
そして、作成予算と運営方法についても企画段階でしっかり確認しておきましょう。
目的を決める
まずはWEBサイトの目的を決めましょう。
目的が決まれば、作成すべきデザインを決めやすくなります。
- 商品販売のLP
- コーポレートサイト
- SEO集客
例えばこのように、商品を販売するためのLPや、会社の顔になるコーポレートサイト、SEO集客目的のメディアサイトなどがあります。
それぞれ最適なデザインは異なるので、クライアントの方に目的は確実に確認しておきましょう。
ターゲットを明確にする
次に目的を達成するために、集客するターゲットユーザーを明確にします。
ターゲットの年齢や性別、属性、住んでいる地域などによって、作成すべきWEBデザインは変わります。
当然20代の女性をターゲットにするサイトと、50代のビジネスマンをターゲットにするサイトのデザインが同じでないことはイメージしやすいと思います。
このターゲットユーザーを明確にすればするほど、デザインを作成しやすくなるので、時間をかけて決めていきましょう。
あらかじめクライアント側でターゲットユーザーを明確にしている場合もありますが、年齢や性別といった確定要素だけでなく、新規顧客なのか既存顧客なのかなども深堀していくと、よりデザインを作成しやすくなるでしょう。
作成予算と運営方法の確認
目的とターゲットユーザーを決めたら、作成予算と運営方法の確認を行います。
作成するデザインやページ数によって作業工数が変わるので、予算はどのくらいか確認して、適切な金額で契約するようにしましょう。
また、サイトを作成した後は、どのように運営していくのかも確認してください。サイト保守まで担当する場合は必要予算も変わってきます。
初心者WEBデザイナーの方は作業工数がイメージしづらく、低単価で契約して苦労しがちなので、事前に価格表を作成しておいて、適切な価格を提示できるようにしておくと良いでしょう。
WEBデザインのワイヤーフレーム作成
企画ができたら、デザインイメージを具体化していくためにワイヤーフレームを作成します。
解説した通り、ワイヤーフレーム段階でどこまでデザインを作りこむかは仕事によって変わってくるので、クライアントと話し合った上で決めてください。
基本的には、なるべくデザインを作りこんで、イメージを具体化した方が、最終的な修正にかかる時間を減らすことができるので、おすすめです。
ワイヤーフレームでは配色やフォント、雰囲気などを具体化して、認識を一致させます。
ワイヤーフレームの作成段階は、WEBデザイナーとして経験を積むほどスピーディーに行えるようになるので、以下を参考に進めてください。
デザイン集の作成
まずはデザイン集を作成して、クライアントの確認を取ります。
目的やターゲットに合うデザイン集を一度作成しておけば、他の案件でも部分的に使いまわすことができるので、作業工程の時短に繋がります。
デザイン集は、なるべく雰囲気や配色の異なるサイトを用意して、クライアントが持つイメージに近いサイトを探せるようにしておきましょう。
どれだけ企画でイメージを一致できたと思っても、いざデザインを作成すると「イメージと違うよ」となることがよくあるので、デザイン集を見てもらう際も、念入りにイメージを確認してください。
複数デザインイメージを提案
次に、デザイン集で確認したイメージを元に、複数のデザインイメージを作成し提案します。
この工程ではクライアントイメージをしっかり引き出せているはずなので、2〜3個のデザインイメージだけで大丈夫です。
イメージに相違がなければ、そのままワイヤーフレームを作りこんでいきます。
ワイヤーフレームを作成
ワイヤーフレームを作成する際は、配色や雰囲気などのイメージが固まっているので「何を・どこに・どのように」配置していくかを決めていきます。
ワイヤーフレームを作りこむ場合で解説すると、そのままデザイン作成を行えるように、配置を決めてクライアントから最終確認を取っておきましょう。
ここまで、企画とワイヤーフレーム作成でクライアントとのデザインイメージをすり合わせてきたので、WEBデザインを完成させてからの修正を少なくすることができるでしょう。
反対にこの事前段階を疎かにした場合は、デザイン作成後に修正が多くなってしまうので、注意しましょう。
WEBデザインのデザイン作成
ワイヤーフレームを作成したら、いよいよWEBデザイン作成段階に入ります。
ワイヤーフレームを作りこんでいる場合は、細部を作り込んでいくだけなので、時間をかけずに完成できるはずです。
デザイン作成
デザイン作成段階では、後はコーディングして見た目を作るだけという所まで作成します。
行間やフォント、文字サイズ、カラーなどをコーディングを担当する方が分かりやすいように、完成品と変わらないレベルで作ります。
WEBデザインの学習をしている方は、このデザイン作成段階のスキルを学習しているはずなので、ワイヤーフレームを完璧に形にして、コーディング作業をスムーズに行えるようにする必要があることを知っておきましょう。
WEBデザイナーは作成したデザインをコーディングするまで行う場合と、デザイン作成段階まで担当して、コーディングは別の方が行う場合の2種類があるので、デザイン作成までの場合は、クライアントが指定する方法で、デザインを納品します。
多くの場合はデザインデータをzipフォルダにまとめてギガファイル便で送信したり、デザイン作成ツールで直接共有する方法で納品します。
コーディング
コーディングまで行う場合は、HTML/CSSやJavaScriptというプログラミング言語を活用して、デザインデータを元に見た目を形にしていきます。
WEBデザイナーとして収入を増やしたい方は、コーディングまで対応できるのが望ましいので、WEBデザインが作成できるようになったら、コーディングスキルも習得しておきましょう。
コーディングまで行った場合は、サーバーにサイトをアップロードして納品となる場合が多いです。
ただし、部分的な修正や改善に対応する必要もあるので、この運営についても最初の企画段階で話し合っておくようにしましょう。
まとめ
以上がWEBデザイナーの仕事の流れです。
いかがでしたでしょうか？実務の現場ではWEBデザインを作成するメインの作業よりも、企画やワイヤーフレームを作成する作業の方が重要で、時間をかけて行います。
このデザイン作成に入る前の段階で、クライアントとデザインイメージを一致させなければ、後々修正が多くなってしまったり、クライアントの目的を達成できないデザインになってしまいます。
現在WEBデザインを学習している方や、これからWEBデザイナーを目指したい方は、この記事を参考に実際の仕事の流れをイメージして、学習を進めてみてください。
