こんにちは、谷口です。
エンジニアのみなさん、デザイン周りで困った経験はないですか？
Web開発をしていると、
- マージンやカラーやフォントサイズなどをちょっと変えただけでおかしくなってしまった…
- うまく入らなくて1px変更しただけなのにデザイナーに怒られてしまった…
- 作ったサービスや機能が微妙に使いづらい感じだけどどう改善したらよいのかわからない…
といったデザインに関するトラブルは珍しくありません。
基本的なデザインの仕組みやルールを理解しておくと、このようなトラブルを減らして、スムーズに開発することができます。
デザインとシステムは、切っても切り離せないものです。「デザインってセンスがいるんでしょ」と思われるかもしれませんが、デザインはあくまで理論に基づいたものなので、センスなど関係なく理論を学べば習得することが可能です。
今回は、エンジニアがデザインを学ぶメリットについて解説します。
エンジニアがデザインを学ぶメリット
ユーザー目線にしっかり立てる
例えば「プロが作ったリモコンなのに、ボタンが多すぎて使いづらい…」ということってありますよね。情報系学科のデザインの授業などでは、日本のテレビのリモコンとApple TVのリモコンが比較例としてよく出てきます。
Web上でも、こういう「たくさんの情報を置いたサービスを作ったけど、結局使われない…」みたいなケースはよくあります。
このような事態を防いでくれるのが、デザインの知識です。開発する側にデザインの知識があれば、「ユーザーにとってこれは使いやすいのか？」という目線が持てますし、細かい改善もしやすくなります。
技術者としては、ユーザーよりも使っている技術や複雑なシステムについ目が行ってしまいがちですよね。ただ、サービス開発ではそれよりも「ユーザーの需要を満たすこと」が重要です。
極端な話、どれだけ技術力が高くても、ユーザー目線が皆無であれば、みんなに使われるサービスはできません。逆に言うと、技術はそこそこでもデザインをわかっていると、それなりに使いやすいサービスができるはずです。
デザイナーの意図がわかり、やりとりがスムーズになる
最初にも少し触れましたが、エンジニアとデザイナーの間では「少し変えただけなのにおかしくなってしまった」「意味があってこうしたのに勝手に変えないで」みたいな細かいトラブルが起こりがちですよね。
デザインを知らないと、つい「1pxぐらい変えてもいいでしょ」などと思ってしまいますが、その1pxがグリッドシステムを崩しておかしなデザインになってしまい、サイト全体の信頼性が低下してしまうケースもあり得ます。
デザインの基礎を知っておくと、デザイナーの意図がわかるようになるので、こうしたトラブルも減りますし、デザインをコードに落とし込みやすくなるというメリットもあります。
デザインに対して理論立てた指摘や意見ができる
スタートアップなどでまだデザイナーがいない場合や、受託開発でデザインの知識がないお客さんとサービスを作らなければならない場合もありますよね。
デザインの知識がない人たちだけで作っていると、たとえば「目立たせたいからとにかく赤くしよう！」みたいな、デザインのセオリーに反する要望が出たりします。
ここでデザインの知識があると、「なんとなくこれがいい／悪い」ではなく、「押して欲しいボタンなら警戒色になる赤はだめじゃない？」といった感じで、理論にもとづいた指摘ができます。なんとなくの意見よりも理論が背景にある意見のほうが、説得力があるため通りやすいでしょう。
エンジニアとしての付加価値が高まる
デザインの知識があってユーザー目線を持ったエンジニアというのは、それほど多いわけではありません。
デザインの知識があると、デザイナーとのやりとりやコードへの落とし込み、開発をしながらデザインレビュー…などといったこともできるようになります。
そのため、エンジニアとしての付加価値が高まって転職時にも役立ちますし、キャリアパスも広がりやすくなります。
個人開発に役立つ
「個人で何かアプリやサービスを作りたい！」となったときに、システム的には問題がなくても、見た目があまりよくないモノになってしまうと残念ですよね。
デザインの知識があると、個人開発でもいい感じの見た目のモノが作れます。
個人で作ったモノは、転職活動時にポートフォリオとして提出することもできるため、前述のようなエンジニアとしての付加価値もアピールしやすくなります。
Webデザインについて学べるコンテンツ
ノンデザイナーズ・デザインブック
デザインについて知りたい初心者にはとりあえずこれ、という一冊です。![ノンデザイナーズ・デザインブック [第4版]](https://m.media-amazon.com/images/I/51HKaOqL-RL._SL500_.jpg "ノンデザイナーズ・デザインブック [第4版]")
内容としてはレイアウトの4つの基本原則（近接、整列、反復、コントラスト）、色彩、タイポグラフィを扱っていますが、実はこれだけでデザインの基本的なセオリーを習得できます。このセオリーが理解できると、今まで漫然と見ていたWebサービスなどのデザインにも「根拠がある」のを認識できるようになります。
なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
「デザインなんてセンスがないとできないんでしょ」と思っている人に、そうではなくて「デザインは理論にもとづいてできている」と教えてくれる本です。
イラストが豊富で、よいデザインと改善すべきデザインの実例を示しながら、「なぜこのデザインがいいのか・悪いのか」を、デザイナーじゃなくてもわかる文章で解説してくれます。「実際のデザインがなにで構成されているのか」「どうやってデザインができあがっていくのか」がよくわかります。
paizaラーニングのWebデザイン入門編
動画で学べるpaizaラーニングに「Webデザイン入門編」が追加されました！
ITエンジニアの方、デザイン初心者の方向けの動画レッスンです。デザインの種類・色の3原色と3属性・配色パターン・タイポグラフィ・フォントデザイン・ホワイトスペースなど、すぐに役立つWebデザインの基礎知識が学べます。
まとめ
デザインとは、見た目の表面的な話だけでなく、ものづくり全体にかかわることです。ものづくりが本業であるITエンジニアなら、デザインの基礎を学んでおいて損はありません。
情報とデザインは親和性が高く、エンジニアにとっては近しい領域の話ですから、基礎知識や理論に関しては、それほど難しくなく習得できるはずです。
paizaラーニングの「Webデザイン入門編」では、ITエンジニアやデザイン初心者の方向けに、Webデザインの基礎が学べる動画レッスンを公開しています。
Webデザイン入門編について詳しくはこちら
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
