過去にもこの手の議論はありましたが、15年以上Webデザイナーとして働いてきた私なりにお話できることもあるかと思い、この件について記事にしました。

色々な意見があるのは承知していますが、結論から申し上げれば、Webデザイナーには基礎的なコーディングスキルは必要ということです。

その理由を以下に列挙していこうと思います。

期待通りのWebサイトにしてもらう

これはコーダーに依頼する際のお話です。

ボタンのマウスオーバーのデザインが思っていたのと違う、タイトル下の余白がデザインよりも少し広い・・。など意図通りに仕上げてもらうにはなかなか難しいものです。そのためにコーダーとコミュニケーションし説明していかなければなりません。

HTMLやCSSの特性を理解した上でデザインを制作すれば、コーダーとのアウトプットの齟齬も少なくなり、プロジェクト全体の質やスピードも格段にアップします。

上の画像は、Sketchでタイトルと本文を作った際に、その余白を測ったピクセル数の差です。

青色の線がSketch上で測ったサイズ（対象物を選んで+Altで表示）
オレンジ色の線がタイトルと本文の間のサイズです

適用するフォントファミリー、別のデザインツールで同じような事象はおこりますがコーダーがこれを見たら、どちらでコーディングをするでしょうか。

30pxと12pxでは結構差があるので、ある程度は実際のデザインの30pxに近づけるように忖度してくれると思いますが、実際には30pxなどの正確なサイズを測ることはしません。

どの程度までデザイナーとして許容するのか、事前に明確な態度を示してあげましょう。

厳密に30pxに合わせてほしかったら、文字をアウトライン化して文字ボックス（上の画像でいうとグレーの線）が表示されないように処理をしてあげるなどが必要です。
逆に30pxに近づけてくれば良い、とある程度許容する姿勢をとればコーダーもコーディングしやすいでしょう。

上の画像ですが、CSSのline-heightの概念を説明した画像です。
CSSとしては、下記のような感じです

.example {
    font-size: 16px;
    line-height: 2;
}

CSSのline-heightは、文字の上下に余白を設けて行間を設定するプロパティですが、この余白（画像だと緑の8pxの部分）を余白として含めるか否かで余白のサイズが変わってきます。

このline-height分の8pxを差し引いた余白を設ける場合、技術的に可能ですが少し工数が増えます。

line-heightの概念を知らずにコーダーに指示するデザイナーと、理解しているデザイナーのどちらが的確な指示ができるでしょうか。

さまざまなデバイスでのデザインを考慮できる

上の話と似てますが、これもデザインデータの作り方に影響するお話です。

現在、Webサイトを閲覧するデバイスが増えて、レスポンシブデザインという手法でさまざまな解像度に対応する必要があります。

その為、まずはSP・PC版のそれぞれのカンプを作成し、コーディングする流れが一般的かと思いますが、その制作したカンプの間の解像度（タブレットなど）のデバイスの事も想定しなければいけません。

デバイスの幅が狭まって、メイン画像がどのように縮むかをパターン化しました。デスクトップファースト（PC表示を優先的に考える）からデバイス幅が狭まる場合を想定しました。

1. PCで表示した場合（100%表示）
2. 画像比率を保って縮小
3. 両端を切って画像領域を広くとる

それぞれで与える印象が違いますね。
スマホやタブレット表示の場合には、3の比率が好ましいですが、文字が切れてしまっています。
これは情報の欠如ですし、なんにせよデザインとしてありえません。

原因としては、これは文字も山の画像と一緒になっているためで、4のように山のJPG画像と文字のSVG画像を分離させる必要があります。

HTML/CSSを理解していないとデザインツールで同じグループにして書き出してしまったりレイヤー構成が違うことも想定されます。

HTML/CSSを理解しておらず、レスポンシブデザインを考えられていないデザイナーは上のように、あるデバイスでユーザーを切り捨てることになるので、質の良いWebデザインは到底作れないでしょう。

メンテナンスしづらいサイトになる

Webサイトは1度作ったら終わりではありません（LP以外）

新しいサービスができたり、A/Bテストでデザインを改善したり、日々改変していきます。もちろんHTML/CSSも書き換えていくことになるのですが、デザインがメンテナンスをしづらくさせている可能性もある、というお話です。

上の画像は、カラーコード（#D35933など）を見てください。
全て似た色だけれどもコードはバラバラですよね。

サイトの雰囲気を変えるためにこの色を若干調整したい場合、CSSは変数という箱にカラーコードを入れて、一括で管理する事ができるので効率的に色を変更できますが、上の場合は、この似たコードを見つけ出して、1つ1つコードを書き換えなくてはいけません。

こちらがコードのサンプルです

:root {
    --color: #D35933; <-一元管理
}
.about {
    background-color: var(--color);
}
.title {
    color: var(--color);
}

コーダーに途方も無い作業をさせてプロジェクト全体のスピードを遅らせてしまうこともあるので、この事も理解してデザイン制作をしましょうというお話でした。

（コーディングする際に色を統一してもいいですか？とコーダーに相談されるかもしれませんね）

ユーザー体験を考えられるようになる

ユーザーがサイトに訪れて目的を達成できるまでの道のりを考え、あらゆるデバイスでユーザーに同じ体験・同じ情報を伝達させる必要があります。

ボタンをホバーや押下した際のインタラクションやカルーセルなどのアニメーションの調整などもデザイナーが考慮する範疇です。

Webサイトには必ず「機能」が存在します。
それは、問い合わせフォームに遷移するボタンだったり、なにかの情報を入力させるフォームがあったり。

主にシグニファイヤ（下記参照）と呼ばれますが、ユーザーがそのパーツを見たときに「何が起こるか」を示唆させ、イメージさせる必要があります。
見た目はドアノブなのに、引き戸だった・・・なんて良いデザインとはいえないですよね？

シグニファイア(signifier)とは、対象物と人間との間のインタラクションの可能性を示唆する手掛かりのことである。 デザイン用語としては、アメリカ合衆国の認知科学者ドナルド・ノーマンによって提唱された。
via Wikipedia

上の画像のパーツを押したら、どのような動きになるのか、イメージする事は容易かと思います。（下にスクロールする）

このようにユーザーに迷わせないデザインにする事もユーザー体験の向上の1つの要因となります。

こういったアニメーションをコーダーのためにデザイナーが用意ことは少ないですが、

1. 参考のサイトを提示
2. 自分でCSSをCodePenなどで書いてコーダーに渡せるのか
3. コーダーに一任するのか

どれがより良いユーザー体験を促せるものになるでしょうか？

まとめ

ここ最近、Webデザイナーになるための講座やオンライン教材など一気に普及してきました。以前と比べて、Webデザインスキルとコーディングスキルはセットで語られることも多くなってきましたが、コーディングは苦手だからデザインだけして他はフロントエンドに丸投げ・・・なんて方もまだまだ見受けられます。

書ききれませんでしたが、レイヤー構造がバラバラでコーダーがコーディングするのに一苦労してしまうなど、デザインさせできたら良いと考えるデザイナーはこれから価値がなくなっていくと思います。

サイト制作のみならず、プロダクト制作はチームプレーです。
また納期は必ず存在します。

ユーザーの目に触れる成果物に対して、「見た目」だけではないデザインに責任の取れるデザイナーになっていただきたいと思います。

以上です。