WEBデザインとはコーディング込みだと思っていた
ことあるごとに私がいろいろな所で言っている「コーディングができないWEBデザイナーはいらない」発言。
そもそもはWEBデザイナーを名乗る人は、コーディングが出来るものだと勝手に先入観をもっていたのですが、いろいろな人と仕事をしていると、どうやらコーディングが出来ないWEBデザイナーがいることを知りました。
私の場合WEBデザインは完全に独学であり、WEBデザインを学ぶ事＝コーディングが出来ることだと思い、HTMLとCSSの本を買ったことから始めました。専門学校、大学、オンラインスクールなど、WEBデザインの講座があればそこでは、まずコーディングを学ぶのではないのでしょうか。詳しくは知りませんが多分そうでしょう。オンラインスクールのカリキュラムを見るとどこも「HTMLとは」「CSSとは」のような単元はあるので。
コーディングができないデザイナーとは
ではどこからこのコーディングが出来ないWEBデザイナーが生まれてきたのでしょうか。推測ですが、元々チラシや書籍などの紙のデザイン（ここではDTPデザイナーと呼びます）をやっていた人が、DTPデザインの仕事をもらっていた代理店などから声を掛けられ、デザインだけ依頼されたのが始まりなのではないのでしょうか。
WEBサイト構築が仕事として出始めた1990年代。当初それを担うのはエンジニア（プログラマー）であり、コードが書ける人たちでした。しかし非デザイナーの彼らがテーブルで構築したWEBサイトに、「おしゃれ」「かっこいい」デザインを求めたクライアントが、その部分だけデザイナーに任せようとデザイナーに依頼したのが始まりです。WEBデザインも広告デザインの一部なので、その当時広告デザインを担っていたのはコーディングとは無縁のDTPデザイナーに依頼するのは自然の流れです。現在のようにSEOという言葉もないどころかWEBサイトは登録制だったので、ユーザー目線でWEBサイトを構築するという考え自体ありませんでした。
しかし2000年以降、専業DTPデザイナーが将来性を考え、WEBデザイナーに転向することが多くなりました。この時多くのDTPデザイナーはHTMLとCSSによるコーディングを学んだと思います。Adobeに吸収される前のMacromedia DreamweaverとFireworksのセットが、15,000円ほどの激安で販売されていたので、これを購入しWEBデザインの道に入った人も多いでしょう。
ここでDTPデザイナーがWEBデザイナーに転向する際に、コーディングを学ばなかった人たちが、現在のコーディングができないWEBデザイナーになったものと思われます。先述したように、コーディングができなくてもクライアントから発注が来ることも学ばなかった理由だと思います。
最近は、WordPressによるWEBサイト制作のみを受けている企業や個人をよく見ます。これらもコーディングが出来ないデザイナーやそれ以前にデザイナーではないコンサル業の人たちによるものです。WordPressでコーディングの知識なくそれなりの立派なWEBサイトが出来るからです。ただしカスタマイズするとなるとコーディングの知識が必要になりますので、発注する場合には注意が必要です。
コーディングができないと何が問題なのか
では具体的にコーディングができないWEBデザイナーの何が問題なのでしょうか。
これはコーディング作業する際にわかります。通常少し大きなプロジェクトになると、WEBサイト構築に関わる人たちがそれぞれの工程に細分化されます。実際のサイト構築部分に絞ると、大体以下の工程順になります。
1）WEBデザイン
2）HTML、CSSコーディング
3）プログラマー
この工程で、WEBデザイナーはAdobe XD、Figma、Illustrator、Photoshopなどを使いデザインを仕上げ、2）のコーダーに渡します。これを受け取ったコーダーがコーディングしてゆくわけですが、ここで問題が起きます。
現在WEBサイトの多くはPC画面、スマートフォン画面に最適化されたレスポンシブ・デザインでできています。これは基本的に一つのHTMLに対して、CSSでそれぞれに表示方法を調整するコーディングの方法です。
WEBデザイナーはデザインする際に、多くの場合はPC画面とスマートフォン画面の2つ、必要な場合はそれに加えタブレットやその他デバイスを縦と横それぞれに傾けた場合のデザインします。
ここでPC画面とスマートフォン画面をデザインする際に、画面サイズの変更によりオブジェクトの移動・拡大縮小、フォントの拡大縮小など様々な要素の変化についてCSSを意識しながら、デザインしないといけません。それはCSSだけでは変更できないものもあるからです。CSSで実現できない場合は、Java Scriptを使う場合もありますが、JavaScriptを使ってまで変化させる必然性があるのかを考え、できるだけCSSだけで処理しようと考えます。その方がブラウザーに負担がかからないからです。
要するにデザイナーがその変化に必然性はないが「なんとなくスマートフォン（PC）ならこんなデザインでいいだろう」とするデザインこそが問題なのです。コーディングの知識がないデザイナーはこれをやりがちです。レスポンシブ・デザインの知識がないのですから。
基本的に私の場合、WEBデザインとコーディングを一緒に請けるか、WEBデザインのみかの何れかで、コーディングだけ依頼されることはあまりありません。しかし時々、デザイナーから渡されたデザイン・カンプを元にコーディングをしていると、コーディングが出来ないWEBデザイナーからコーダーにとって負担のかかるデザインが要求されるとことが多いことに気が付きました。コーディングが出来ないので、コーダーにかかる負担がわからないのです。基本的にコーダーはデザイン・カンプを1pxの違いもなくコーディングするのが仕事です。これをピクセル・パーフェクトと言います。
いくつか経験した実例を挙げましょう。
実例1：困難なレスポンシブ・デザイン
PC画面からスマートフォン画面をデザインする、またはその逆。その過程のおいて、デザイナーは各オブジェクトがCSSによりどのように変化するのか考えながらデザインします。PCの時に表示させ、スマートフォンの時にはそのオブジェクトを非表示にして別のオブジェクトを表示させることは出来ます。しかしその分コードが増えるので、同一オブジェクトをCSSで変化させるのが基本です。
CSSが分からなければ、CSSでオブジェクトのどのような変化が可能なのか、またコードが単純になるのかなど分かるはずもありません。その結果、必然性もないのにコーダーに負担のかかるデザインが渡されることあります。
実例2：必然性のない画像
現代のWEBデザインにおいては、以前は画像を切り出していたものをなるべくCSSで描こうとする傾向にあります。これは画像読み込みによる負担を減らすためです。特にCSS3になってからは限界はありますが、より複雑な図形やグラデーションがCSSにより実現可能になりました。CSSを知っていれば、できるだけCSSのみで実現可能な図形やグラデーションを使うことを考えてデザインします。もちろん必然性がありCSSだけでは実現不可能なものは画像の書出しで構いません。CSSを知らなければ必然性のない部分に無理やりデザイン処理した図形を配置することも多々あります。
実例3：必要のない画像変換
コラムとコラムの間を矢印でつなぐ。これは説明をする場合によく使う方法です。PC画面では2つのコラムを左右に並べ、矢印は右横向き、スマートフォンでは2つのカラムを上下に並べ矢印は上から下へ向かう。デザイナーが送ってきたデザイン・カンプを見るとPCとスマートフォンで矢印の形が異なっています。このような場合、それぞれ形が異なる矢印を2つ用意するか、1つの矢印画像でどちらかを変形するかになります。
ただこの2つの矢印の変形に必然性はありません。要するにどちらか1つの矢印を回転させればそれだけで良いのです。デザイナーに変形した理由を聴いていませんが、特に変形した理由はないでしょう。何となくなのです。しかしコーダーはデザイン・カンプそのままコーディングします。当然ひと手間かかり負担が増し、画像読み込みに時間がかかります。
コーディングが出来ないWEBデザイナーはいずれ駆逐される
もし現在WEBデザイナーを名乗る人で、コーディングができない人は今すぐ学ぶべきでしょう。今所属している会社で通用しても、他の会社では通用しません。もちろん独立してWEBサイトの制作を依頼された場合、コーディングを外注していたのなら予算がない場合など採算が取れないでしょう。私がWEBデザインを依頼される場合、そこには双方暗黙の了解でコーディングができることが前提です。これから入社してくる新人もコーディングを学んだ上でWEBデザイナーを名乗るので居場所はなくなります。
専門コーダーのように早いコーディング、深い知識は必要はありません。また実際にコーディングをしなくても良いのです。ただデザインをするに当たりコーディングの知識は最低限必要なのです。
