WEBデザイン制作工程をご紹介！どうやってつくるんだろう？

2018/11/11

WEBデザイナーの仕事は、制作会社の場合、クライアントからWEBサイトの制作を依頼されたものをデザインするのが一般的です。しかし、狭い意味では制作のデザイン担当ですが、その他の工程でも関わる場面が多々あります。また、WEBデザインにはいくつかの工程があり、企業内の制作チームが少人数の場合はデザイン以外に様々な職種として業務を行うこともあります。そのプロセスをしっかりと理解して組み立てていくことが、良質なWEBサイト制作へとつながります。
ここからは、WEBデザインの制作工程の一例をご紹介します。

1.企画

まずはサイトをつくる目的を明確にします。
目的に沿ったWEBデザインを作成するためにも必ずクライアントの目的を確認しましょう。
クライアントとの打ち合わせ時に、要望・条件・方向性・コンセプトなども決定します。
クライアントとのヒアリングからWEBサイトの目的を明確化することで、デザインやインターフェイスなどの全体像を決定します。

2.設計

クライアントとの打ち合わせが終わったら、サイトマップとWEBデザインの元となるワイヤーフレームを作成します。
クライアントから依頼された内容に沿って、ホームページを設計して行く作業です。
サイト全体のページ階層が把握できるものをサイトマップと言い、ページのどこに何を掲載するのかをレイアウトして表した設計図のことをワイヤーフレームと言います。
この工程で、ホームページのトップページと下層デザインのおおまかな掲載内容が図としてわかるようになります。
この時、クライアントから掲載する画像やテキストも用意してもらうのが一般的ですが、
写真をうまく撮れない、文章が用意できないというクライアントの場合は、カメラマンやライターに制作を代行してもらうこともあります。

3.デザイン

ディレクターから資料・ワイヤーフレームを受け取り、説明を受けたら、ここからはIllustratorやPhotoshopなどのデザインソフトでページデザインをします。
WEBデザインは時代によってトレンドが変わりますが、常にサイトをつくる目的・ブランドのイメージを忘れず、機能性・デザイン全体の統一感を意識して制作することが重要です。
デザイン全体に統一感を持たせるためには、各ページごとに共通したコンテンツの配置・配色・画像の大きさ・フォントなどを使用すると良いでしょう。
なお、スマートフォン・タブレットなどの複数の異なる画面サイズの端末にも対応させる場合は、パソコンだけでなく他のモバイル端末から見たデザインも必要になります。
そのためにパソコンサイトとモバイルサイトで完全に別個のページのレイアウトのサイトをデザインする場合もありますが、近年では閲覧するデバイスの画面サイズに応じて自動的に表示が切り替わる「レスポンシブデザイン」が主流となっています。
WEBデザインとは言っても、パソコンで表示することだけを考えるのではなく、どの端末からでも見やすいデザインをつくることを心がけましょう。

4.モックアップ

テキスト・画像などのコンテンツを配置してデザインができあがったら、クライアントがデザインをチェックします。
完成イメージを視覚的に表示して、全体のデザインをコーディング前に確認するために使われます。
ワイヤーフレームの段階では伝わらなかった、サイト全体のデザインの仕様や色味・雰囲気などが伝えやすくなります。またこの段階でデザインの修正や課題の洗い出しなども行います。

5.コーディング

モックアップ後の修正が完了したら、コーディング作業に入っていきます。
コーディングとは、プログラミング言語を使ってプログラムを組み立てることを言います。
デザイナーがphotoshopで作成したページデザインのPSDファイルをもとに、ウェブブラウザで閲覧できるように、「HTML」や「CSS」などを記述していくことで、実際のページを組み立てていきます。
リンクをクリックすると別のページに跳ぶことができるのも、コーディング作業がなくては成り立ちません。
このように、コーディングを行うことによって、デザイナーが作成したデザインが、「Google Chrome」や「Internet Explorer」「Safari」などのウェブブラウザで実際に閲覧できるようになります。
その後、jQueryと言うJavaScriptなどを使用して動きを付けたり、プログラム完成後に正しく機能しているかどうかの作業検証（デバック）などを行います。
そして本番用のサーバーへファイルを移し、ようやくwebサイトを公開できます。
コーディングとデザインの業務をそれぞれ別の人間が担当する場合、コーディング専門のコーダーの業務になっていきますが、制作会社によってはコーディングもデザイナーが行う場合もあります。

まとめ

今回ご紹介した制作工程は一例にすぎませんが、どの企業でも工程は大きく変わることはありません。
「WEBデザイン」とは言ってもレイアウトやイメージをデザインソフトを使って形にするだけではありません。いろいろな工程に関わり合いながら初めてWEBデザインはWEBサイトとして機能することができます。
デザイン力を身につけることはもちろん重要なことですが、これからはコーディングもデザインもできる人材が求められます。
スキルを上げて、デザインもコーディングもできるWEBデザイナーを目指しましょう！