【22歳で月収100万円達成】
フリーランスエンジニア"あおい"のプロフィール

【経験者が解説】エンジニアがWEBデザインを学ぶ方法

どうも!フリーランスエンジニア兼”WEBデザイナー”のあおいです!
そうなんです、今までブログには書いてきませんでしたが、私は今はそんなにやっていないのですが、一時期WEBデザイナーとしても働いていたのです。
デザイン事務所にフリーランスWEBデザイナーとして所属していました。

今日はエンジニアがWEBデザインを学びたいと思った時に勉強法やオススメしたい本をご紹介します!

特にベンチャー企業で働いているエンジニアだと、人手不足故に自分でなんでもやらなければならないから、WEBデザインを学びたい人も多いと思います。
また、WEBデザイナーと意思疎通を取りたいエンジニアもWEBデザインを知りたいと思っていると思います。
そんな人達にこの記事が参考になれば幸いです。

1.勉強法

まずは、勉強法についてです。オススメの勉強法は以下の通りです。

1-1 下で紹介しているオススメの本 を読んでデザインの基礎をインプットする

まずはデザインが何かを知らなければなりません。
私は最初デザインを芸術と混合していて、何度も先輩デザイナーから指導を受けました・・・。
デザインの勉強も最初は難航していました。
もちろん、デザインの定義は人それぞれなのですが、
先輩デザイナー(企業でCDOも務めた方なのですが)曰く、「デザインとは見やすく情報をまとめる事」だそうです。

その話を聞いて以来、私は
・見やすく
・情報をまとめる
事に焦点を当てて、デザインの知識をインプットして行ったのですが、
今まで混沌としていて理解が出来なかったデザインの知識・方法が頭の中で整理され徐々に理解が出来る様になりました!

1-2 実践練習あるのみ

そして、本を読んだら早速実践です。実践は2フェースに分けます。
まず、第一フェーズはツールの使い方になれる事 です。
ここで言うツールとはPhotoshopやIllustrater、Sketch の事を指しています。
ツールに慣れないと、そもそも作業がスムーズに出来ません。
又、実現したい事があっても、ツールの使い方が分からなければ、処理を施す事が出来ません。
よって、ツールになれる事は単純な様で結構大事な事なのです。
ちなみに、ショートカットのコマンドを覚えておくと便利です。

第二フェーズは実際に手を動かして作品を作る事 です。
実際に作って見ないと自分のダサさに気づけません笑。
これは冗談の様で本気で言っています。
WEBデザイナーのセンスも何回も自分で作品を作って行く過程で磨かれます。
最初から日本のトップWEBデザイナー並みのクオリティで作品を作れる人はまずいません。
実際に作品を作って見て、自分のダメな所を可視化して、その点を修正していきましょう。

作って見る事はいい事づくしで、
・作る過程でツールの使い方が復習出来る
・気に入った作品があれば、そのままポートフォリオに使える
とやらない手はありません。

そして、作品を作って見て、可能なら知り合いのWEBデザイナーに見てもらいましょう。人からのフィードバック程参考になる視点はありません。
もしその様な知り合いがいない場合、ファイスブックとかに自分の作品を投稿して見て、友達にイケてるデザインか聞いて見るのでも良いでしょう。

ちなみに、私は高校生ぐらいからWEBデザインを始めるまで、結構周りから「オシャレだね!」と言ってもらっていたのですが、初めてWEBデザインを作った時の自分のダサさは今だに覚えています笑。
(服のオシャレさとWEBデザインのイケてる度は関係ないのかな・・・?)

2.オススメの本

さて、今度は今まで勉強の為に読んで良かった本5冊をご紹介!
絶対に実践で使える本だと思うので、これらの本を読んで知識のインプットをしましょう。

1 なるほどデザイン

まずは「なるほどデザイン」を読んで、
・どう言う配置・まとめ方でカッコイイデザインが出来るか
・いいデザインと悪いデザインの違い
を視覚的に学びましょう。

なるほどデザイン のオススメポイントは以下の点です。
・視覚的にデザインが学べる
・難しくなく、分かりやすくてサクサク読める

アウトプットのスイッチ

次に、日本を代表するデザイナーの一人である水野学さんの著書の「アウトプットのスイッチ」を読んで見ましょう。
・優れたデザインの概念
・デザインを作る時の方向性の固め方
が分かるはずです。

アウトプットのスイッチ のオススメポイントは以下の点です。
・優れたデザインの考え方を日本を代表するデザイナーの視点から学べる
・小説風の書き方なので、サクサク読める

ノンデザイナーズ・デザインブック

次に、言わずと知れた名著の「ノンデザイナーズ・デザインブック」を読みましょう。
・効果的なグルーピングの仕方
・色の使い方
が学べます。

ノンデザイナーズ・デザインブック のオススメポイントは以下の点です。
・デザインの基礎であるグルーピングが学べる
・サンプルで示されているので、いいデザインと悪いデザインの違いが分かる

Photoshop 10年使える逆引き手帖

ここからはツールの使い方の解説書をご紹介します。
ツールの解説書を選ぶポイントとして、実際に操作して出来るサンプルがマメに乗っている本が良いです。
そう言う本を選べば、本を読みながらツールを操作して見た結果が合っているのか確認する事が出来ます。

まずはPhotoshopの解説書である「Photoshop 10年使える逆引き手帖」をオススメします。

Photoshop 10年使える逆引き手帖 のオススメポイントは以下の点です。
・Photoshopで使う事になる操作の殆どが網羅されている
・操作結果がそれぞれ乗っているので、操作方法を確認しながら学習出来る

Illustrator 10年使える逆引き手帖

Photoshopの本の姉妹本である「Illustrator 10年使える逆引き手帖」をご紹介します。
Photoshopの本と同様、オススメなツール本です。

Illustrator 10年使える逆引き手帖 のオススメポイントは以下の点です。
・Illustratorで使う事になる操作の殆どが網羅されている
・操作結果がそれぞれ乗っているので、操作方法を確認しながら学習出来る

UIデザイナーのためのSketch入門&実践ガイド

案を作る時にSketchを使っているデザイナーが多い様に感じるので、Sketchのツール本もご紹介!
UIデザイナーのためのSketch入門&実践ガイド」がオススメの本です。

UIデザイナーのためのSketch入門&実践ガイド のオススメポイントは以下の点です。 ・記載されている操作方法が分かりやすい
・やりたい操作を元に使い方を調べる事が出来る

まとめ

いかがでしたか?以上がエンジニアがWEBデザインを学ぶ方法になります。
WEBデザイナーも職業の1つで、ちょっと勉強したらすぐなれると言う訳はありませんが、コツコツ勉強して行く事で道が開けます。

最後に、先輩デザイナーからもらった有益なアドバイスを皆さんに共有!
「自分が好きなデザインを沢山見つけ、全てに対して何が良いと思ったのか言語化しよう!そうやってデザインの感度を高くしていこう!」

以上です!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です