フロントエンドエンジニアを目指す人の中には
「自分はデザインセンスがいまいちだからデザインにはあまり関わりたくないんだよな…」
という方もいれば
「イラストを描いたりポスターを作ったりしたことがあってデザインが好きだ！」という方もいるでしょう。
今回の記事では、デザインからコーディング、プログラミングまで広く仕事を受けている筆者が、フロントエンドエンジニアの仕事をする上でデザインスキルがどの程度必要になってくるのかを解説します。
この記事を最後まで読めば、自分が将来的に目指すべき姿が明確になりますよ。
フロントエンドエンジニアにデザインスキルは必須ではない
いきなり極論です。
フロントエンドエンジニアの仕事をする上でデザインスキルは必ずしも必要にはなりません。
なぜなら多くの制作会社やWebプロジェクトではフロントエンドエンジニアとWEBデザイナーやUIデザイナーは分業にすることが多いからです。
ただし、部署の小さい会社や小規模なプロジェクトだと、一人でデザインから構築まで任されることもあります。
逆にデザインから手掛けたいと思ってはいても案件によって難しい事もあるでしょう。もしデザインから手掛けたいようでしたら、ディレクターやクライアントへ事前に自分のスキルセットをアピールしておくと良いでしょう。
どの程度のデザインが出来ると良いの？
色々な会社やプロジェクトの考え方があるので一概には言えませんが、リッチなLPサイトデザインを手がけられる程のスキルはあまり必要ないでしょう。
餅は餅屋。LPのような凝ったデザインはデザイナーに任せることが多いです。
こだわった画像加工や文字組みなどデザインを専門にやっている人でないと大変時間がかかってしまうため、フロントエンドエンジニアが担当することはとても効率が悪いです。
一方シンプルなコーポレイトサイトやWEBサービスなどはフロントエンドエンジニアでもデザインを任せられることがあります。そこまで凝ったデザインが必要とされないことが多いため、色々なWEBデザインを参考にしながら、いいと思う点を取り入れたり自分なりのアレンジを加えていくと良いでしょう。
デザインソフトの使い方は知っておきたい
デザインスキルは必ずしも必要ではありませんが、よく使われるデザインソフトの操作方法は最低限知っておく必要があります。
なぜなら、Webデザイナーが作ったデザインはデザインソフトのデータのまま渡されます（中には書き出しまでしてくれるデザイナーもいますが）。そのデータをフロントエンドエンジニアはWebで使えるように書き出す必要があるからです。また書き出すだけではなく、パターン違いのものを作ったり、構築に都合の悪いデザインを変更するケースも出てきます。
そのため、Webでよく使われるデザインソフト
- Adobe Photoshop
- Adobe Illustrator
- Adobe XD
- Figma
辺りは軽くで良いので、操作方法を覚えておくと良いでしょう。
とは言え、筆者も初めてFigmaデータを渡されたときは使い方が全く分からなかったため時間をかけながら素材書き出しをしていました。そのように実務の中で覚えていく感じでも十分かと思います。
フロントエンドエンジニア+Webデザイナー兼務は最強!?
自分一人でWebデザインからコーディング、プログラミングまで通してすることにより、複数人で行う分業と比べ圧倒的に作業をスムーズに進めることができます。
なぜなら自分がコーディングやプログラミングをしやすいようにデザインを作ることができるからです。デザイナーの意図を汲み取る時間的損失や、認識の違いによるリテイクなども生まれません。
とはいえ兼務はあくまでも理想論であり、いざやるとなるとそれぞれの仕事をプロフェッショナルにこなすことはとても大変です。そして常に幅広い知識・技術をブラッシュアップする必要があります。
もちろん企業やプロジェクトによっては最初から分業ベースで配置されることもあるので兼務することは難しいでしょう。
ただ、もしあなたがフリーランスのフロントエンドエンジニアなら、デザインスキルはとても強力な武器になるはずです。仕事を頼む側としても、動かす人数は少ないほうが管理しやすいからです。
まとめ
結局は自分のスキルセット、どの分野をどの程度掘り下げた能力を手に入れるかの判断にかかってきます。
「JavaScriptを極めて動的コンテンツに強いエンジニアになる！」
「爆速コーディングができるようになる！」
「幅広い技術・知識を手に入れてフルスタックエンジニアになる！」
そのどれもがフロントエンドエンジニアにとって正解であり、将来的に強みになり得るはずです。
少なくとも苦手なデザインを仕方なくマスターする必要はありません。
自分に合ったスキルを取捨選択して取り入れていくことが一番でしょう。