「WEBデザイナーになりたいけど、実際の仕事内容ってどんな感じなんだろう」
「WEBデザイナーって何だかオシャレ。実際の現場でも華やかなのかなあ」
上記のような疑問にお答えします。
WEBデザイナーは2021年現在でも人気の職業と言われており、目指したい人が増えていると言われています。
デザイナーと言うと華やかでオシャレなイメージを持つ人もいますが、実際の仕事内容や現場の雰囲気はどんな感じなのでしょうか。
そこで現役WEBデザイナー兼エンジニアである筆者がWEBデザイナーの仕事内容などについてご紹介していきたいと思います。
これからWEBデザイナーになりたいと考えている人の参考になればと思いますので是非ご覧下さい。
記事の信頼性
現在現役のWEBデザイナー兼エンジニアとして勤務していることが信頼性の担保になると考えています。
結論
早速疑問に対する返答、結論ですがらWEBデザイナーは非常に地道な努力が必要な職業です。
華やかな印象を持たれている方も多いとは思いますが、デザインには論理的思考力、理解力、表現力など多様なスキルが必要。
それらをコツコツと積み重ねて、一つ一つの作品を作ります。
そもそもデザインとアートは異なるもので、アートは自己表現だったり、自由な表現だったりしますが、デザインは「理論の組み立て」が重要です。
「なぜこのテキストはこの配置なのか？」
「なぜこのオブジェクトの色は赤なのか？」
こういった細かい事にも理由を述べられる、それがWEBデザイナーです。
では次にWEBデザイナーの仕事内容について見ていきましょう。
WEBデザイナーの仕事内容
WEBデザイナーの仕事内容は大きくは以下に分けられます。
・PhotoShopを使ったデザインカンプの作成
・デザインカンプを元にしたコーディング
・バナーの作成
・CMSを使用したサイト構築
・JavaScriptを使用したプログラム作成
それぞれ詳しく見ていきましょう。
PhotoShopを使ったデザインカンプの作成
Photoshopでデザインカンプを作る作業はWEBデザイナーの重要な役割と言えます。
デザインカンプとは、コーディングをする上で「こういったデザインをWEBサイトにして下さい。」というサイトの構成を実際のデザインとして作成するものです。
通常WEBサイトには目的や内容などをまとめた企画書があり、それを元にWEBデザイナーがデザインカンプを作成し、コーディングする流れとなりますが、企画で出た案を実際に目に見える形として作成する第一段階と言えます。
その分重要な役割であり、サイトのデザインや見せ方次第で結果は大きく変わってくる為狙いや目的を明確にした上で最適なデザインで構築する必要があります。
ボタンの位置や、訴求の目立たせ方などもコンバージョン(成約)のためには重要な要素となるため、慎重に構築するようにしましょう。
デザインカンプを元にしたコーディング
次の工程は、実際に作ったデザインカンプを元にコーディングしていくというものです。
ここで必要な要素はHTMLやCSSです。
デザインカンプは各テキストやオブジェクトの大きさ、間隔まで１px単位で決めているものなので、細かい部分までしっかり再現できるように確認した上でコーディングするようにしましょう。
WordPressやMovable TypeといったCMSを使ってPHPファイルを扱う時もありますが、まず前提としてHTMLとCSSで作成してからPHP化すると良いでしょう。
バナーの作成
Photoshopを使ってバナーを作成するのもWEBデザイナーの大事な仕事です。
バナーと一言で言っても奥が深いです。
訴求の目立たせ方や、パーツの配置、配色などデザイナーの腕の見せ所とも言えます。
限られたスペースの中でいかにクリックしたくなるバナーを作れるかがポイントです。
CMSを使用したサイト構築
WordPressやMovable TypeはCMSと呼ばれているサービスで、HTML/CSSだけではなくPHPの知識も必要になってきます。
CMSとは
「CMS」とは、「Contents Management System：コンテンツ・マネジメント・システム」の略で、簡単にいうとWebサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのことです。
引用元：日立ソリューションズ
CMSを使う事で記事の更新などが簡単にできるため、企業からの依頼などでもよくCMSを使った案件はよくあります。
シェアはWordpressが8割ですが、Movable Typeが2割位の印象です。
CMSを使用したサイトは世界中でも役割3割と呼ばれておりWEBデザイナーであれば使用することは非常に多いと思いますので、一通り使い方を覚えておくと良いでしょう。
JavaScriptを使用したプログラム作成
JavaScriptやjQueryなどを使ってサイトに動きをつけたり、フォームのバリデーション(入力項目のチェックのこと)などを行う場合もあります。
JavaScriptを使えるWEBデザイナーはそこまで多くないため、最悪使えなくてもWEBデザイナーになる事は出来ますが、もしJavaScriptを使えると出来る業務の幅が広がる為習得しておくと尚良いと言えます。
JavaScriptのライブラリであるjQueryを使っているサイトもまだまだあるため、WEBデザイナーを志す人は勉強しておきましょう。
まとめ
WEBデザイナーは華やかでオシャレなイメージを持たれている方はいると思いますが、実際は地道に自分のスキルを磨いていく事が大事な職業です。
どんな仕事でも大変な部分はあるということですね。
WEBデザイナーとしてのゴールは依頼者の求めてるものをどれだけ高い次元で具現化出来るかだと思います。
そしてその為には日頃からデザイン力を鍛える必要があります。
参考となるWEBサイトのまとめサイトを見たり、それこそ電車の広告のデザイン一つとっても勉強になりますよ。
それではまた次の記事でお会いしましょう。