Webデザイナーとは?Webデザイナーの業務内容と仕事の流れについて

Webデザイナーとは?Webデザイナーの業務内容と仕事の流れ
所要時間:約856

WEBデザイナーの仕事とは、その名の通りWEBサイトをデザインする人のことです。

しかし、仕事の受注を受けてからいきなりサイトを作り始めるわけではありません。

『こういうサイトを作りたいから作る』『こういうデザインにしたらかっこいいから作る』だけではダメなのです。

まずはWEBサイトを作る目的・コンセプトを明確にし、その目的を達成するために何が必要かをまずは考える必要があります。

それらを踏まえたうえで必要な要素を洗い出し、デザインに落とし込んでいきます。

その上で効果的なデザインを考えていかなければならないのです。

今回はWEBデザイナーの業務内容と、WEBサイトが出来るまでの流れをもう少し具体的に見ていきましょう。

WEBデザイナーの業務内容

WEBデザイナーとは一般的にはWEBサイトをデザインする人のことで、WEBデザインは大きく分けると『デザイン』『コーディング』とに分けられます。

両方が出来てWEBデザイナーですが、大きい会社などでは分業化されていることが多く、デザインをする人をデザイナー、コーディングをする人をコーダーと言います。

デザイン

デザイン

WEBサイトとして表示されるものをワイヤーフレームや画面設計書をもとにデザインする作業です。

制作の現場ではAdobeのPhotoshop(フォトショップ)やIllustrator(イラストレーター)を使用することがほとんどです。

基本的にはパーツごとにデザインするのではなく、完成図をイメージしやすいようにブラウザ上に表示される状態の通りにデザインします。

このフルレイアウトでデザインされた状態のデザイン案を『デザインカンプ』といいます。

コーディング

コーディング

作製したデザインデータをブラウザ上で表示できるようにHTMLやCSSなどの言語を用いて構築する作業です。

プログラミングほど複雑なものではありませんがプログラミングみたいなものだと思ってください。

コーディングするためのデザインデータの切り出し(スライス)もコーダーが行います。

javascriptやphpなどのスクリプトを用いた作業もこのコーディングの作業に含まれます。

両方が出来てWEBデザイナー

デザインとコーディング、この両方が出来てWEBデザイナーです。

近年は大きい会社であれば分業化が進んでいるようで、私が最初に勤めた会社ではデザインチームとコーディングチームに分かれていました。

しかし、会社によっては分業化が進んでいるとはいえ、あくまでも両方出来てWEBデザイナーだということは忘れないでください。

WEBサイトを制作する以前の企画や構成などを決めたりするのはWEBディレクターまたはWEBプロデューサーと呼ばれる人たちの仕事となりますが、小さい会社だと全てWEBデザイナーが兼任することもあります。

WEBディレクターやWEBプロデューサーという職種はWEBデザイナーの経験を経てステップアップする人がほとんどで、いきなりなれる職種ではありません。

WEBサイトが出来るまでの大まかな仕事の流れ

この工程は制作会社によって様々ですが、大体は下記のような流れで進めていきます。

1.
企画
2.
情報設計/仕様書作成(ガイドライン)
3.
画面設計/ワイヤーフレーム
4.
デザイン
5.
コーディング
6.
表示検証(デバッグ)
7.
納品
8.
公開

WEBサイトの受注を受けてから公開するまでにはこのような工程があり、WEBデザイナーだけですべての工程を行うわけではありません。

1.企画

受注を受けてサイトの制作が決まった後にサイトの目的は何か?どういったサイトにするのか?などの制作の方針を決めて行きます。

  • ・サイト制作の目的は?
  • ・どういうデザインがいいか?
  • ・どんなページが必要か?
  • ・どういう層をターゲットにするか?
  • ・どんなキーワードで狙うか?
  • ・納期は?
  • ・予算は?

この企画の段階ではWEBプロデューサーまたはWEBディレクターが行います。

小さい会社であれば全てWEBデザイナーが全て兼任することがありますが、基本的にはWEBプロデューサーまたはWEBディレクターの仕事です。

2.情報設計/仕様書作成(ガイドライン)

企画で決まった情報をもとにサイトの仕様書(ガイドライン)を作成します。

  • ・URL
  • ・title
  • ・description
  • ・対応ブラウザ/対応デバイス
  • ・フォルダ構成
  • ・フォルダ名/ファイル名の命名規則
  • ・id/classの命名規則

などなど、詳細な仕様書を作成します。

特に大規模サイトの制作になると複数人が同時に作業をしますので、効率的に作業を進めるためにも共通のルールのもとに制作を進めていかない行けません。

そのための情報設計、仕様書作成(ガイドライン)です。

小さい会社ではこの手順を行わないことも多いですが、本来はWEB制作の現場では必要な手順であることを覚えておいてください。

3.画面設計/ワイヤーフレーム

画面設計書にはどのページに、どの要素を、どの箇所を使用するかなどの情報が記載されています。

見出しの位置とレベル(h1,h2,h3…)の指示や、テキスト(文言)データもこの画面設計書に含まれています。

例えば1000ページにも及ぶ大規模なページを作る場合は、1000ページすべてのページのデザインデータを作るのは非効率です。

この場合トップページと下層の必要な数ページだけをデザインして、残りのページはこの画面設計書をもとにコーディングをしていきます。

4.デザイン、5.コーディング

先述の【WEBデザイナーの業務内容】に書いたとおりです。

ここでようやくWEBデザイナーの出番です。

6.表示検証

コーディングしたデータをテストサーバー等にアップして実際にWEB上で崩れたりせずに表示されるかを検証します。

これはブラウザによって表示の仕方が微妙に違ったりするからです。

このブラウザ間の表示の差異を対策することを『クロスブラウザ対策』といいます。

IEにもIE7、IE8、IE9、IE10、IE11とバージョンがあり、他にもchrome、firefox、safariなどでキチンと表示できているかどうかを見ます。

昔はIE6から対応していましたが、windowsXPのサポートが切れてからほとんどの会社はIE8以降のブラウザから対応するようになりました。

さらに今ではAndroid、iPhone、タブレットも含まれます。

対応ブラウザのバージョンや、対応デバイスについては企画の時に決めます。

ちなみに、未経験で入社した場合はこればっかりやらされることが多いです。

徐々にスキルの付き具合によって通常のWEBデザインの業務をやらせてもらえるようになってきますが、いつまで起っても仕事を覚えない・努力しない人はこればっかりやらされます。

ですが、納品前の最終チェックという意味合いでは重要な作業です。

このときに見つかった表示の不具合はデータにまとめて作業担当者に渡して修正してもらいます。

7.納品

表示検証で問題が無ければクライアントにデータを渡します。

クライアント側にWEB技術者がいない場合はサーバーにアップロードするところまでこちらでやります。

8.公開

一般公開となります。

最後に

WEBデザイナーの仕事内容とWEBサイトが出来上がるまでの工程について説明いしましたがいかがでしたでしょうか?

作ったサイトから売り上げをあげる、企業としての知名度を上げるなど、WEBサイトを作る目的は様々ですが、根本的には依頼していただいたクライアントに作ったWEBサイトで利益をもたらす事が目的です。

受注を受けてから『こんなサイトをデザインしたい!』と自分勝手に独りよがりなサイトを作っていいわけではないのです。

サイトの制作の前にはしっかりとした企画を提案し、仕様を策定し、情報を設計して、指示書を作り、それをもとにサイト作成し、最後は表示検証まで完璧にやって、そしてやっと公開となります。

しかし、全ての制作会社がしっかりとした手順を踏んでいるわけではないのが現状です。

こう書くと『サイトの作り方に決まりなんてない!』と言う人が出てくると思います、確かに決まりはありませんが正しく合理的で効率的な手順は存在すると言い切れます。

特に未経験者の方はしっかりとした制作体制が整った会社に勤めるべきだと思います。

制作体制がしっかりしている会社は研修制度や教育プログラム、休日や福利厚生などの体制しっかり完備されていることが多いです。

未経験者こそ、まずは『制作体制がしっかりした会社』『本来の正しいWEB制作の手順』を学ぶべきなのです。

WEB業界は転職が多い業界で、ステップアップのために転職するという行為が認められている雰囲気にあります。

私がいた会社はWEB業界では名の知れた会社でしたが、社員のほとんどは中途採用でした。

なので、WEB業界でやりたいこと・目指しているところは様々でと思いますが、まずはしっかりとした会社を目指しましょう。

その後のことは未経験を脱出したころでも遅くはありません。

自分で転職サイトやハローワークなどで求人を探すのも結構ですが、制作体制がや研修制度のような会社の内情までは個人で調べることは難しいと思います。

なので、私は求人サイトよりも転職エージェントを活用することをおすすめいたします。

私はかなりの数の転職エージェントに登録しましたが、おすすめできるのはクリエイティブ職に特化したマイナビクリエイターワークポートの2社と、関東圏内に特化したレバテックキャリアです。

いずれもクリエイティブ職に特化した転職エージェントとしては業界最大手です。

実際に私が就職が決まったのはマイナビクリエイターの方から提案された会社でしたが、ワークポートとレバテックキャリアの方から提案された会社が私の条件と少し会わなかっただけで、サポート内容としてはどちらの会社も素晴らしいです。

スポンサーリンク

役に立ったらシェア!