デザイナーのemiです。

会社でブログを執筆するということで何を書こうかな、と思っていたのですが、デザイナーなのでデザイン関連の内容にしようと思います。

私はデザイナーですが、Webサイトのデザインだけではなくコーディングを担当することもあります。
SNSでよく見る「デザイナーはコーディングができたほうがいいか」論争がありますが、個人的には、何事もできないよりできたほうがいい。と思っているので、この論争についても同じ思いです。

「デザイナーはコーディングできたほうがいい」と思います。

FigmaやXDでデザインデータを作る機会が増えてきましたが、このデザインデータを作成する際に、「コンポーネント」というものを作成します。

（コンポーネントについてはchot.designでも学ぶことができます。）

コンポーネントは各ページなどで共通で使用する部品。という認識だとヘッダーやフッター、ボタンをコンポーネント化すればOKかな。となります。

実際にはこの他にもコンポーネントにすると作業効率が上がるだけでなく、ページによって余白が違っていたり、フォントサイズがバラバラだったり。を避けることができます。
コンポーネントの他にも文字スタイルのアセットや、カラーのアセットを作成します。

なぜデザイナーはコーディングを知っていたほうがいいのか。

このアセットやコンポーネントを作成する際に、脳内ではコーディングの時に使えそうな部分を考えて作成しているからです。

デザイン時にも脳内でコーディングをしているのです。

なんなら使用するclass名まで考えています。その名前をレイヤーやフォルダに付けていき、フォルダを整頓しているのです。

そうすることでコーディングの段階で作業する人も共通のパーツがわかりやすくなります。
共通のパーツがわかりやすくなると、スタイルをどのファイルに書くのが最適か。ということで悩む時間が減ります。

この少しずつの時間を短縮できると全体の工数も減ります。

XDやFigmaじゃなくてPhotoshopで作業するからコーディングのことを知らなくてもいいということでもないです。
Photoshopには「アセットの書き出し」というとても便利な機能があります。これはレイヤーやフォルダにつけられた名前でファイルを書き出すことができるとても便利なものです。

デザインとコーディングで担当が分かれていたとしても、コーディングのことを考えてレイヤーが整頓されたファイルであれば、どの部分を画像で書き出すのかなどが分かりやすくなります。


このようにコーディングのことを知っていれば後の工程でも作業を進めやすいファイルを作成することができます。なので、
「デザイナーはコーディングできたほうがいい」と思います。