デザイナーとして新卒入社したわたしがフロントエンドを学んでよかったこと

謎の集団zeneloでデザイナーとフロントエンドエンジニアをしております、ちょいちょいです。新卒２年目です。
私が入社したとある事業会社では、「紙のデザイナーは紙への造詣が深い。ウェブデザイナーもウェブへの造詣が深くないと本質的なデザインはできない」という思想のもと、新卒のプロダクトデザイナーはまずフロントエンドを学びます。
この記事では、デザイナーとして新卒入社をした私が、全くの未経験からフロントエンドを学んでよかったこと・大変なこと、を書いていきます。

この記事のゴール

1. デザイナーとしてエンジニアリングを学ぼうと思っている方のモチベーションになること
2. 「エンジニアリングには興味がなかったけど、少し触ってみようかな」と思ってもらうこと

TL;DR

1. デザイナーがフロントエンドを学ぶとなにが嬉しいの？
【1】「デザインをつくって終わり」にならない
【2】エンジニアと会話ができる
【3】コーデットプロトタイプがつくれる
【4】デベロッパーツールを使って良いデザインを盗む癖がつく
【5】実装を意識したデザインがつくれる
2. それでもやっぱり大変なこと
3. これからフロントエンドを学びたい人へ、おすすめサイトの紹介

デザイナーがフロントエンドを学ぶとなにが嬉しいの？

【1】「デザインをつくって終わり」にならない
デザイナーがデザインをしても、それだけで世にでることはありません。ユーザーがプロダクトを触るまでには、必ずエンジニアが実装をしています。
フロントエンドを学ぶことによって、自分のデザインがプロダクトに反映されるまでに、裏でどんなことが行われているか理解することができます。

「デザインが終わったので、後はエンジニアに任せる」のではなく、自分のデザインがどう実装されるのか？いつまでにリリースできるのか？どの部分を減らすとROIがよいのか？の会話に、デザイナーとして関わることができます。

会社では「課題特定 〜 目標設定 〜 デザイン 〜 実装」までを担当しており、自分のデザインをリリースまで責任を持つことができるのは、とてもやりがいがあります。

【2】エンジニアと会話ができる
配属されてしばらくは、「エンジニアたち何話しているか全くわからない...わからない用語多すぎて頭痛い...」という日々が続いていましたが、フロントエンドとしてサーバーサイドとやりとりを続けるうちに、会話の内容がわかるようになりました。

プロダクトデザイナーはエンジニアとの関わりが不可欠なので、コミュニケーションのしやすは開発のしやすさに直結します。また、エンジニアとの会話はプロダクトの仕様への理解に繋がるので、その後のデザインに活かすことができます。

【3】コーデットプロトタイプがつくれる
デザイナーとしてプロトタイプをつくることは重要です。（理由は長くなるので割愛します）
SketchやAdobe Xdで細かく遷移をつけてなるべく本物のプロダクトに近づけることは可能ですが、どこまで作り込んでも、本物のプロダクトには劣ります。

フロントエンドを学ぶと「コーディングでいきなりプロトタイプ」をつくることができます。
実際のプロダクトができてしまうので、プロトタイプツールを作り込むよりもリアルなフィードバックをもらうことができます。

【4】実装を意識したデザインがつくれる
「ここは実装がめんどうくさそうだな」という部分をデザインしながら認識できるので、あらかじめ仕様の優先度をつけることができます。
「この部分は最悪なくてもよいですが、ここはデザイン的に譲れないです」という提案ができるので、
「ここのデザイン反映されていない！」
「実装の工数上、削りました。」
という実装後の亀裂を事前に防ぐことができます。

また、異常系のパターンを考えやすくなることで、コミュニケーションコストが下がります。
デザイン時には気づけなかった異常系パターンに、実装時に気付く、ということがよくあります。
未入力だったら、数が0だったら、途中で離脱したら、最大文字数を超えたら...など、想定されるパターンをあげるとキリがありません。
フロントエンドがわかると、懸念になる部分を想像することができるので、あらかじめ異常系パターンをエンジニアと相談しておくことができます。

【5】デベロッパーツールを使って良いデザインを盗む癖がつく
普段開発でデベロッパーツールをよく使うので、気になったデザインに出会った時に、すぐデベロッパーツールを開いて調べる癖がつきます。

「このフォントはなんだろう？」
「ここのmarginはどれくらいだろう？」
「ここのグレーのHEX何だろう？」
など、気になったたらすぐに ⌘Command + Shift + C ！
ウェブデザインでよく使われる色や数字をストックしていくことができます。

それでもやっぱり大変なこと

良い点ばかりを述べましたが、それでもやっぱり大変なことはあります。

フロントエンドエンジニアとして身につけなければいけない知識は日に日に増えていくし、サーバーサイドの知識や、コードの設計思想など、学ばなければいけないことは底をつきません。
そのうえ自分はビジュアルコミュニケーションが好きでデザイナーになったので、コードではなく、ただひたすらデザイン作りたい...と思うこともしょっちゅうです。

しかし、デザイナーという職種が多義になり、「なんでもできる職種」になってきている今だからこそ、デザイナー×〇〇という、自分なりの武器を増やしていくことが重要なのではないでしょうか。
その視点でみると、たまたまエンジニアリングを学ばせていただいている今の環境は、今後デザイナーとして働いていく上で武器になるかもしれません。

これからフロントエンドを学びたい人へ、おすすめサイトの紹介

最初はわからなすぎて毎日頭を抱えていたJavascript...
毎日触れ続けることによって、少しずつ概念の理解ができてきました。

自分が１年目にお世話になったサイトを並べるので、同じような悩みを抱えている方はのぞいてみてください！
1. progate（いわずとしてた初心者用サイトだが、Command Line、Git、SQLなどの基礎を学ぶのにもオススメ。）
2. Angular（会社で主に触っているフレームワークで、チュートリアルが楽しい。Atomic designの考え方で実装ができるのでデザイナーと親和性が高い。）
3. JavaScript初級者から中級者になろう（プリミティブ型って何？など、Javascriptの基礎知識がわかりやすくまとめられている。読みやすいので電車の中とかで読めようにもオススメ。）
4. Javascript30（とにかく作りたい！という人にオススメ。）