デザイナーはコードが書けるべきか？

「HTML&CSSって書けたほうがいいですか？」
「デザイナーでもコードは書けないといけませんか？」

過去にデザイナーの勉強会に参加しているとそのような質問を目にする機会が多く、なぜこのような質問が多くされるのか考えてみました。

・既にコードが書けないことで実務に支障がでている？
・コードに苦手意識がついてしまいコンプレックスとして気になっている？
・デザイナーとしての将来の不安を感じてコードを勉強すべきと考えている？

色々考えたところ『そもそもデザイナーがコードを書ける必要はあるのか』という観点に行き着きました。

それは自分がコードを書くことが好きなデザイナーということもあり、コードが書けることで今までどんなメリットを受けたことがあるのか、個人的に疑問になったからです。

逆にいうと自分は、まっすぐデザインに向き合う彼らと比べてコードに寄り道している身です。

本当にコードを学ぶことが正しいのか？デザイナーとして活躍するということは、目の前の課題にデザインというアプローチでただひたすら向き合うことではないのか？と深く考えさせられました。

そうして考え続けた結果、「コードを学ぶメリット、デメリット」について本当にデザイナーがコードを学ぶべきなのか考えてみることにしました。

現時点でコードを学ぶべきか悩んでいる人たちの、成長の方向性を手助けできるものになれば幸いです。

以下「コードを学ぶメリット、デメリット」について触れていきます。

コードが書けるメリットとは何か

まず、大前提としてここでいうコードとはフロントエンドのコード全般を指します。
俗にいうWEBサイトを構築するスキルであるHTML&CSSやJavaScript。
さらには、ReactやVue、TypeScript等も含んでいます。

この前提を元にコードが書けることによるメリット・デメリットを挙げていきたいと思います。

実現性の高いプロダクトが作れる

コードがかけることの最大のメリットは「デザインの実現性」だと思いました。思いついた挙動やデザインを自らが実装することで、最も実現性の高いプロダクトを作れることが私の考える一番のメリットです。

「実装してもらった挙動が少し違う....。」「ここを修正したいのでエンジニアにお願いしないと....。」など簡単な修正を行うにもコードに触れる必要がある為、小さな修正も自分で出来るようになればプロダクトの改善は容易になります。

伝えるコストの削減

アニメーションやインタラクションの話ではありますが、デザイナーがデザインから実装まで一貫して行うことで、他者にデザインを伝えるコミュニケーションコストを削減することができます。

コミュニケーションコストを具体的に言うと、「自分が想定しているデザインの挙動を他者に伝える」「動的な表現を他者に理解してもらう」などが代表的なコストです。

デザイナーは自分の考えたデザインをコードに落としこんでもらう必要もありますし、多くのレビュワーにデザインが問題ないかを確かめてもらう必要があります。

その際に挙動を伝えるためにFigma上に大量の説明付箋を置いたり、大量のFrameを作成してパターンを作ったり、プロトタイプを作ったりもします。

しかし、それはあくまで社員に伝えるためだけのデモであり、顧客に対して向けられた物ではありません。多くの場合、その社内向けデモを作るために多いの時間をかけて肝心のプロダクトの実装は1ミリも進んでいないのです。

自分は社内向けデモに工数をかけすぎるのは非効率だと考えており、その時間をもっと世の中の人の目に触れる部分に使いたいのです。

社内向けのデモが出来て初めて相手に伝わるというその長々とした工程は、あまり効率の良い物とは言えないため、デザイナーが提案の段階で再現性の高いプロトタイプが出来ていればリリースまで効率的に進めることができると自分は考えています。

高速に仮説検証が回せる

体験設計からUI、フロントエンドまで一貫してデザイナーが担当することができれば、素早く仮説検証を回せるようになると考えています。
各業務に専門の担当者が多くいればいるほどその連携コストは大きく、他者を巻き込む力が求められます。

自身の考えた仮説を素早く検証するために、自身がデザインから実装まで行うようにすることで他者の時間を頂戴することなく、各領域を素早く横断して動くことが可能です。

実装にかかる工数がわかる

ある程度エンジニアリングの知識がないと、自分がデザインしたものがどのくらい工数がかかるのか分かりません。それ故に実装難易度が高いデザインを作ってしまったり、実装をお願いするエンジニアを説得できなかったり、エンジニアの言いなりデザイナーになってしまうこともあります。

今作ってるデザインの実装工数が判断できないので、デザイン作業中にエンジニアに確認すべきことも増えてきます。

プロダクトの開発環境の理解と、ある程度エンジニアリングの知識があればエンジニアにいちいち確認を取らなくても「この機能なら既存APIとコンポーネントを再利用すればいいだけだから彼の残り時間でもできるだろう」など、予測がある程度つくことができます。またPMとのやり取りでもデザイナーがサポートできる範囲も大きくなるのではないでしょうか。

エンジニアと対等に交渉できる

これは業務を依頼する側の人間や、フリーランスの方だと特に重要なスキルだと思っていて、コードは外部委託するとなった場合、こちら側がエンジニアリングについて無知だと分かると実装難易度を言い訳されて相場より値段を高く設定されるなどが起こりやすいと思っています。

具体例としては、仕事をお願いした外部のエンジニアにこれは難しいと言い訳され、不当に費用や工数を上げられるなどのパターンです。

この場合、コードの理解がなければそれが本当に難しいものなのか？本当に相場に沿っているものなのか？を判断しづらいため、こちら側からの説得が難しいと思います。
エンジニアの言葉に左右されずに公平な交渉をする為にも、実装の知識はお互いが理解しておく価値があると思います。(外注とかの場合はですが…)

これはディレクターやPMも同じかもしれないです。

共通言語がうまれる

会議や話し合いでエンジニアリングを理解していると議論できる幅が増えます。エンジニアとの会話についていけて、彼らが何を気にしているのかを理解できるので、コミュニケーションの中でとても役立っています。

会議中に飛び交う専門用語もなかなか多いので、そういった内容を毎回翻訳して伝えてもらうのも時間のロスになってしまいます。

デザイナーでもエンジニアリングや用語を理解しておけば会議に置いていかれるといったことが少なくなるので、学んでいて損はないと思います。

しかし、受動的にいてもなかなかコードについて理解する場面というのは訪れにくいので意欲的に学習していく必要があります。

では、結局コードはかけないといけないのか？

ここまでコードが書けるメリットを上げてきましたが、もちろんデメリットも存在します。

もちろん出来ることのメリットのほうが大きいですが、出来るようになったことで発生したデメリットも紹介していこうと思います。

以下はコードがかけることによるデメリットについて触れていきます。

表現の幅が狭くなる

WEBデザインなどビジュアルデザイン力を重視する場合ですが。
実装工数を知っているだけに再現しやすそうなデザインしか提案できなくなり、表現の幅が狭くなることがあります。

役割の問題もありますが、もし自分で実装もするとなった場合「実装できそう・実装しやすそうなデザイン」を作ってしまう傾向があります。

自分が凝ったデザインをすればするほど自分の書くコードの難易度も増えるため、必然的に凝ったデザインを避けやすくなってしまいクリエイティブらしいデザインではなくレイアウトの整った規則性のあるデザインを作りがちになります。(自分の場合ですが...)

実際に「体験的には絶対このデザインのほうがいいのだけど、実装が面倒すぎるから今回はミニマムで作るか…」という場面もあったりしました。

デザイン専門でやっている人に比べてデザイン力が劣りやすい

当たり前なことですがデザイン専門で勉強している人のほうが、コードを並行で学習している人よりも専門性は優れています。

というのも、エンジニアリングの学習は難しいです。
学習範囲が膨大で、フロントエンドだけだとしても学習に時間がかかります。

自分がエンジニアリングの学習にあてている時間を、デザインに特化している人たちはUI・UX、サービスデザインを重点的に学び、スペシャリストとして成長していきます。

エンジニアリングは圧倒的な学習時間を要するため、両方の専門性を伸ばすことは中々難易度の高い事だと思います。

つまりこれは、デザインの学習を疎かにしてまでも、エンジニアリングを学びたいか？ということでもあります。

個人的な考えですが、エンジニアリングには「適性」があるとおもってます。ここでいう「適性」というのはエンジニアリングに惹かれるか？コードを書く事が好きか？という部分です。

そもそもコードに対する「好きの感情」がなければ学習したエンジニアリングのスキルを、実務で活かせるほどの活きるスキルまで身につきにくいのではないかと思いました。

必要性に迫られてとか、嫌々やるものって、心の底から苦手なんだから中々実務レベルまで身に付きづらいのではないでしょうか。
嫌々勉強するくらいなら自分の強みを伸ばしていくほうが、実務で活かせるスキルは身につきやすいと思います。

好きこそ才能というように、あなたがそのデザインを向上させる時間を犠牲にしてエンジニアリングを学びたい、または本当にエンジリアリングとデザインを両立したデザイナーになりたいと思わないかぎり、深入りせずエンジニアリングはデザインに必要な基本知識をつけるのみに留めておくのも一つの手段かもしれません。

以上、デザイナーがコードをかけるべきかを考えてみました。
読んで頂きありがとうございました。