Hatoblog(はとブログ)

【現役Webエンジニア視点】Webエンジニアでもデザインを学ぶべき理由と方法

Web design concept. Modern web site on computer display surrounded by brush color drops.

Webエンジニアをしているけど、デザインは全く勉強しなくてもいいのかな?個人の趣味としてやっておけば大丈夫かな。

このような疑問にお答えします。

結論から言うと、Webエンジニアでもデザインが出来たほうが絶対に良いです。

その理由として、「単にフルスタックエンジニアに近づくから良い」だけではありません。デザイナーとの連携や個人制作の時に大きく役立ちます。

この記事では、Webエンジニアでもデザインを学んでおくとどのように役に立つのか、また、今後のWeb業界を生きていく上でどのように進んでいけばいいのかを解説していきます。

この記事を読むことで、コーディングとデザインを兼ね備えた、よりデザイナーやクライアントから感謝されるWebエンジニアに近づくことが出来ます。

目次

Webエンジニアがデザインを学ぶメリットとは?

Webエンジニアがデザインを学ぶことには多くのメリットがあります。
それぞれ解説していきます。

デザイナーとの連携時に役に立つ

会社に属してWebエンジニアとして働く場合や、フリーランスでもチームでの開発時にはデザイナーと連携しながらサイトやWebサービスを開発することが多いと思います。

この、デザイナーとの連携の際、こちらからデザイン・UI・UXに対して提案を行うことでよりよいサイトにすることが出来るというのが1つ目のメリットです。

もちろんデザイナー側は本職ですので、デザイナーが出してきたデザインのすべての要素には基本的に意味があります。ただ、別の人から見た視点や見落としなど、エンジニアがユーザー + デザイナーの視点で考えられることにより、スムーズな連携を取ることができます。

要は、お互いが相手の立場になって考えられれば、驚くほどスムーズに仕事が進む。ということです。デザイナーから一目置かれるエンジニアになるためにも、デザインを学んでおくことは決して無駄ではありません。

個人制作時の効率とクオリティアップに役に立つ

WebエンジニアはサイトやWebサービスを作る際元々綺麗にマークアップできるため、デザインを学ぶことで個人での作業効率、クオリティがかなり上がります。

これは特にフリーランスの方や、将来フリーランスを目指す方にとって大事なスキルだと思います。完璧になる必要はなく、デザインが多少できるだけでもコーディングしかできないWebエンジニアとは一線を画す存在になれます。

さらに、デザインを作る際にも、デザイナー以上にエンジニア側の視点が分かる事によるメリットが多くあります。px単位でデータを作ったり、はじめから自分の得意なレイアウトにしたり、レスポンシブを考えた配置にしたり、デザイナーよりもスムーズに作れる部分もあるかと思います。

もちろんWebのことを良く分かっているデザイナーは、最初から上記に挙げた文まで考えたデザインを出してきてくれたりしますが、全員ができる訳ではありません。個人制作のクオリティアップのためにも、デザインはできるだけ学んでおいたほうがいいでしょう。

デザインの視点により、逆にコーディングを最適化できる

デザインの視点が入ることによって、本業であるコーディングにも良い影響を与える事ができます。

デザインありき、UI・UXありきでサイト構造を考えることにより、これまで作ってこなかったレイアウトや動き、ページ構成などに触れる機会が増えます。

今のトレンドや、より使いやすいUXを学ぶ機会は多いに越したことはありません。それをコーディングすることに慣れておけば、プロジェクトが始まったときの引き出しになりますし、いざという時に役立ちます。

デザイナーだけでなくWebエンジニアである自分も、日頃からより良いものに触れることで、アウトプットされるもののクオリティも上がります。

このように、Webエンジニアがデザインを学ぶことには多くのメリットがあります。エンジニアだからと軽視することなく、まずは出来る範囲でいいので触れてみましょう。意外とデザインに適正がある場合もありますので、馬鹿には出来ません。

デザインを学ぶのにオススメのWebサービス

ここで僕がデザインの参考としていつも使っているWebサービスを紹介しようと思います。あくまでも参考として使っているというだけで、デザインを学んでいる訳ではありません。そちらはまた別の記事でご紹介できればと思います。

一番のオススメは「Pinterest」です。先日もこんなツイートをしました。

Pinterestの特徴は何より情報量が多く、そのクオリティも高いです。また海外サイトと違い日本語でのデザインであるため、いざ再現してみたらダサくなったということもありません。

また、Webデザインだけでなく紙媒体、イラストなど様々なジャンルのデザインが揃っており、他の媒体のテイストを持ってきてワンポイントを作ったり、オリジナリティを出したりもしやすいです。

さらに、Pinterestのコンセプトでもあるピン機能により、イメージやカテゴリ毎にデザインをまとめて保存しておけるため、日頃から気になったものをストックしておくといざという時に役に立つことも多いです。

他にも使うサイトやWebサービスはありますが、ここでは一番のオススメをご紹介しました。Pinterestは本当にオススメです。

2020/4/21 追記:
その他のデザインの参考になるギャラリーサイト・Webサービスをまとめました!気になる方は下記リンクからどうぞ。

まとめ

ということで、Webエンジニアがデザインを学ぶ必要性について解説してきました。デザインを学ぶことで、横にも縦にも幅が広がり、巡り巡ってプログラミングの役に立つこともおわかりいただけたと思います。

また、Pinterestを使って日頃からデザインをストックしておきましょう。「Webデザイン」や「春 イラスト デザイン」など、色んなワードで検索すると、驚くほどオシャレなデザインがたくさん出てきて、目の保養にもなります 笑。

Webエンジニアの皆さんも、一度デザインに挑戦してみてはいかがでしょうか。
必ず自分の糧になると思いますよ。

参考書籍