WEBデザイナーが飽和状態だそうです。
昔から言われていることですが、ある程度のデザインができるWEBデザイナーは世の中に多く存在します。
その中でもWEBデザイナーがどこまでの範囲をやるかは昔からよく議論されている内容ではありますが、もはや「WEBデザイナー」「コーダー」が完全分業という考えは、今はもう古くなりつつあります。
今はコードもかけないと普通に没ります。
WEBデザイナーなら、自分の作ったデザインを自分できちんとコーディングできるのか？
このことが非常に重要だと思います。
今回はそのWEBデザイナーのスキルについての記事で、
- WEBデザイナーに必要なスキル。
- コーディングスキルとは？
- 2種類に分類されるWEBデザイナー。
の記事です。これからWEBデザイナーを目指そうと思っている方や、現役のWEBデザイナーの方には、この記事をきっかけにスキルセットを考えるきっかけになったら嬉しいです。
目次
WEBデザイナーのスキル
WEBデザイナーのスキルは、必須スキルとプラスアルファを含めて、ざっくりと以下の5つに分類されると思います。
デザインツールスキル
デザイナー的スキルとして必要になるのは、Adobeの「Photoshop」「XD」などのデザイン系ソフトを使って、ロゴやイラストを作成するスキルが必要です。
最近は、ADOBEだけでなくMACユーザーは「Sketch」を使っているユーザーも多い為、使えると環境やTPOに応じたデザインが可能な為、オススメです。
かく言う、自分もsketch好きです。
配色スキル
二つ目は基本となる配色のスキルで、デザイナーはクライアント企業のトンマナや、インハウスであればその企業のトンマナに準拠して作る必要があります。
それ以外にも、アクセシビリティを考慮して、どういった色彩を充てていくか考えるのは、不慣れな人にとっては大変なことですが、デザイナーには必須と言えるスキルです。
また、余白の使い方もこのスキルの中で重要なことです。
情報設計
最も大事なスキルと行ってもいい、情報設計です。
WEBサイトをインターネット上に公開する目的は、情報を発信し、なにかを知ってもらう事にあり、その価値を提供できないWEBサイトは、存在の価値がありません。
Webサイトの価値を高めるために、どのような情報をどこにどのように置くかを考えることが、この情報設計のスキルです。
マーケティングやSEOのスキル
デザイン以外に付加価値があるWEBデザイナーの方が、他のWEBデザイナーにはない強みによって、希少価値の高い人材として扱われます。
特にインハウスのWEBデザイナーは、マーケティングやSEOに強いスキルが業績やKPIに紐付き、重宝されます。
数字を適切に見て、売り上げを上げられるのはとっても強みになります。
これからWEBデザイナーとして生き残っていくためには、そのような付加価値のあるWEBデザイナーを目指していくことで、飽和している中に埋もれずにすみます。
システムエンジニア的スキル
システムエンジニア的スキルとは、WEBサイト構築の為のコーディングスキルです。
WEBサイトは、HTML・CSSが基本ですが、インタラクティブなサイトでは、jQueryやJavaScriptが使われており、今や一般的に多く使われています。
HTML、CSSは読み書きができるのが当たり前で、今時のWebサイトのほとんどが動的ページなので、JavaScriptについては、書ければ文句なしですが、書けないにしても、ソースコードを読めば動作が分かる程度である必要があります。
その為、WEBデザイナーを名乗るのであれば「意識しているのが当たり前」「知っているのが当たり前」の知識です。
このコーディングスキルは一朝一夕に身に付くものではないかもしれませんが、CSSの〇〇という言葉が分からない、という状況だとコーダーやマークアップエンジニアを泣かせるデザイナーとも言えます。
コーディングスキルを持つ専門的な職種
そもそもを考えた場合、WEBデザインは、グラフィックアートやイラストとは違い、最終的にはhtml化をしないといけない媒体です。
このことからも、デザインしかできないWEBデザイナーか？デザインとコーディングができるデザイナーかによって辿るプロセスと、アウトプットが大きく異なるのは火を見るより明らかです。
ですが、コーディングには専門的な知識と技術が求められ、そこは専門的なスキルを持つ人材や同僚がいるなら素直に力を借りた方がより良いものができます。
ちょっと余談ながら、コーディングスキルを持つ2つの職種についてご紹介します。
マークアップエンジニア
マークアップエンジニアは、HTML5でのコーディング、CSS3でのスタイルをあてることはもちろん、コンテンツの内容をきちんと理解しながらデザインや文章を構造化します。
そして、検索エンジンにもクローラーが読み取りやすいマークアップをするなど、ディレクターやデザイナーの意図を汲み取り、さらに改善の提案もできるレベルでのコーディングができる職種です。
フロントエンドエンジニア
フロントエンドエンジニアは、アクセシビリティに配慮した質の高いコーディングを行い、長期的に見た保守性にも優れた設計をできることが前提となります。
その他に、UIにも意識した実装に気を配りつつ、デザイン設計といったWEBサイトや、ページデザインなどのWEBデザイナーとしての役割も求められることがあります。
企業によってはこの職種がバックエンド寄りの部分を理解して触っているケースも多く見られます。
本当にWEBデザイナー？
WEBデザイナーという職業なら、自分の作ったデザインをきちんと自分でコーディングできますか？
これが本題で、デザインしかできずに無理難題なデザインや、ページ構成を無視したデザインが上がってきて、ひとりよがりのデザインだけ出し、コーダーやマークアップエンジニアを泣かせるデザイナーです。
と言うのも、特にインハウスのデザイナーが「WEBデザイナーです」と名乗ることで、最低限のコードは書けると思われることがほとんどなので、自分の首を絞めないためにも、「コードはかけませんがWEBデザイナーです」と言うことが誤解を生まない一つの礼儀とも言えます。
インハウスだと、よく知らない人から「コード書けて当たり前でしょ？」的な感じが暗にあります。
では、何故デザインしかできないWEBデザイナーがダメなのかについての理由についても考えてみましょう。
デザインの理由や構成を説明できない
業務上、デザインとコーディングが完全分業であっても、きちんとコードを思い描いてデザインする必要があり、コードを言語化できないことによって一方通行なコミュニケーションで、業務を進めることとなります。
HTML構成を初心者であれば手書きで、できるようになってきたら頭の中でもいいので最初に決めてからデザインし、少なくてもそれを言語化できるようにしましょう。
フィードバックが曖昧
WEBデザイナーだけで完結できる仕事では自己完結できていましたが、マークアップの多様化と日々技術が進化することで、デザイナーだけでは自己完結できなくなってきています。
その為、エンジニアに伝えたり、指示書を書いたり、クライアントに説明する資料を作ったり、仕様書を作ったりとコミュニケーションコストが多くなっているのも事実です。
その為、ある程度のコーディングスキルを有した上で話さないと、コーダーやマークアップエンジニアとのコミュニケーションや、フィードバックが至極曖昧な形になってしまいます。
そこをもっと明るく！とか、大きく！とかです。
もちろん言語能力が高い人もいて、一概には言えませんが例えば「ここはもっと遅いページ遷移」「ここはもっと薄くパッと」的な、感覚的なフィードバックが多くなりがちです。その為、フィードバックのすり合わせの為にコーダーやマークアップエンジニアがまず理解してから、デザイナーとのやりとりが発生します。
そうして、何回もすり合わせの往来があるので時間もかかりがちです。
フレームワークを知らない
完全分業であれば大きな問題にはなりませんが、時間的な制約でローンチする場合、逆算した工数の見積もりが甘くなります。
いわゆる、依頼する人へ「簡単にできるでしょ。」での丸投げ状態です。
例えば、bootstrapなど予め用意されたHTMLとCSSを使用してカスタマイズを行うフレームワークを、方法として考慮できないので臨機応変に対応することができず、
誰のためのデザイン・サイトなのか理解できていない
どんなデザインにも言えますが、デザインは自分のためではなく、必ず誰かのために作らなくてはいけないものです。
CJM(カスタマージャーニーマップ)を作ってペルソナを設定する手法がありますが、まさしくこれを活用した方法で、できない場合でも「どうすればこのターゲット層に対してアプローチできるか」を考えてデザインすることが重要です。
デザインする為にと言うと語弊がありますが、コーディングスキルもユーザーに届ける為の表現の一つなので覚えておいて損はありません。
WEBデザイナーは2種類に分けられる
WEBデザイナーは、WEBデザインと初歩的なコーディングまでしか出来ないデザイナーと、マークアップエンジニアの領域も手広くこなすデザイナーの2種類に分けられます。
世間に名を知られ、飛び抜けたデザインスキルを持つ以外に、デザインしかできないWEBデザイナーは、WEBデザインに一歩踏み込んだばかりの人で、他業種からの転職を決意し、この世界に足を踏み入れたタイプの人に多くみられます。
しつこいようですが、WEBはグラフィックアートやイラストとは違い、最終的にはHTML化をしないといけない媒体です。
最終的にはマークアップしないとユーザーも見えないし。
いくらデザイン単体で優れていても、HTML化するにあたって、構造が複雑すぎたり、奥行きがなく平面的（ワクワクするUXがない）デザインをしてしまうことで、その媒体はユーザーにとって結果届かないデザインとなってしまいます。
だからこそ、マークアップを最初から意識しているWebデザイナーとそうでないWebデザイナーに分けられます。
当然の話ながら、デザインしか出来ないWEBデザイナーでも最低限度のHTMLの知識はあり、Webサイトデザインとしてはとりあえずの形にはなりますが、根底からマークアップを理解し制作したWEBデザイナーのサイトデザインの場合は、デザイン要素とマークアップ要素が完璧に合致し、素晴らしいWEBサイトを作ることができます。
かく言う自分も、WEBデザイナーがデザインとコーディングの両方の手法を知らないことで、デザイナーとコーダーの両者の負担が大きく、デザイン通りのサイトにならなかったりと上手くいかないケースがあったのを目にしてきました。このあたりをまとめると、
- WEBデザイナーはコーディングスキルは必須。
- それ以外にマーケティングスキル等他のスキルと組み合わせることも必要。
- コーディングができるとデザインの幅が広がる。
です。
一概にWebデザイナーと言っても優れているか否かを見極める際は、マークアップエンジニアの範疇もこなせるか？という基準に基づき、見定めることが重要だと思います。
