WEBデザイン デザインの勉強方法

【おすすめ勉強法】Webデザイナーがやっておきたい勉強を悩み別にまとめてみた

「デザインがいつもなんかイケてない」
「コーディングがいつまでも苦手意識ある」
「クライアントや上司にデザイン説明するの苦手」

Webデザイナーとして働いていたら
上記のような悩みって尽きないんではないでしょうか。

仕事で悩みがある時
それを解決しようと勉強する事は大事ですが
他人が勧める勉強方法をやるより
自分の悩みの原因を分析して、自分なりの勉強をする事が大事かなって思います。

今回は、悩み別にWebデザイナーがやった方が良さそうな勉強をまとめてみました。

未経験〜駆け出しWebデザイナーにありがちな悩みと勉強方法

【勉強法1】1つのデザインを作るのに、めちゃくちゃ時間がかかる方向け

これは、誰もが通る道なんじゃないでしょうか。
僕も、20000回ぐらい通っては戻りました。

学生の頃はまだしも、入社後に先輩から
「バナー作っといて」
と言われて、悩みに悩んで1つのバナー作るのに
半日ぐらいかかってしまった経験が懐かしいです。

【原因】そもそも何故デザインに時間がかかってしまうのか
・自分の中にデザインの引き出しがない
・デザインの順番を間違えている

主にこんなところかなーと思います。
では、原因別に必要なスキルとオススメの勉強方法をご紹介したいと思います。

自分の中にデザインの引き出しがない

デザインを10回やった人であれば、10通りのパターンが自分の頭の中にあり
10000回やった人であれば、10000通りの引き出しを持っている。
もちろん、10000回全部覚えている人は稀ですが
それに近い経験値があるように思います。

このパターンのオススメ勉強方法
色んなデザインを見て、スクラッチする

スクラッチは、仕事中にいつでも引き出せるように
オンラインのものを使用するといいと思います。
色々試して見たけど管理人のオススメは、Clipular。

https://www.clipular.com/welcome

デザインをブラウザ上でクリップできるClipular

デザインの順番を間違えている

もしかしたらデザインの順番って何?
と思われるかもしれません

ここでお伝えしたいのは
大まかなデザインを決める前に
細部を詰めすぎて失敗してしまうパターンです。

例えば
「スポーツジムのポスターを作る」
となった時
ある程度、経験を積んでいれば
1.軽いラフを作り
2.大まかなレイアウトを考え
3.配置していき色や書体
4.最後にパーツを作る

だいたいこんな順番になると思うのですが

経験が浅い人にありがちなのは
いきなり、パーツから作り始めてしまったり。

このパターンのオススメ勉強方法
・先輩や自分よりできる人に制作の流れを教わる
・デザインのフローがわかる初心者向けの参考書や記事を読み漁る

でしょうか。
ただ、あまり実務的な参考書を見た事がないので、習うより慣れろで先輩から教わるのが1番良いように思います。

【勉強法2】作ったデザインがパッとしない人向け

これもあるあるですね。
自分では良い感じにデザインできたと思っていても
クライアントや上司に見てもらった時に
なんか、薄い反応を取られてしまう。

【原因】なぜ作ったデザインがパッとしないのか
・ヒアリングの時に、相手が求めてるトーンを聞き出せなかった
・自分のクリエイティブ力が不足していた

なのかなと思います。

ヒアリングの時に、相手が求めてるトーンを聞き出せなかった

これは、手を動かすようなデザイン力ではなくて
クライアントと話す時にヒアリング力が重要な気がします。

このパターンのオススメ勉強方法
ディレクションを勉強する。

ディレクションを勉強するというと、大げさですが
「何を聞いたら自分はデザインを進められるのか」
がはっきりとわかっていれば、この悩みはクリアできると思うので
クライアントなり上司なりと会話の中でこれらを引き出すテクニックを学ぶのが良いように思います。

自分のクリエイティブ力が不足していた

手を動かす時の力が足りてなかったって事ですね。

このパターンのオススメ勉強方法
デザイントレースをとにかくやる。

参考サイトを見たり人のデザインを見たりして
学べることも確かにあるのですが
それだけをしていて
実作業になった時、的確に作業できるかというとなかなか難しいと思います。

「見て、できたつもりになる」
のではなく、実際に自分で手を動かして再現できないと意味がないですしね。

https://www.webcreatorbox.com/tech/improve-design-skills

 少し前ですが、とても参考になった記事:Webクリエイタースボックスさん

【勉強法3】コーディングにめっちゃ時間がかかる人向け

コーディングに苦手意識を持っているデザイナーは多いと思います。
僕も最初はあまり好きじゃなかったです。

苦手意識を持ってしまう原因って
「修正したはずなのに、レイアウトが崩れたまま」
「jQueryがエラーばっかりで困る」

みたいな感じだと思います。

【原因】なぜコーディングに時間がかかってしまうのか
・ファイルの整理ができていないため
・単純に知識が足りていないため

ファイルの整理ができていないのは
日々の勉強でクリアにするというより
整理術に近い話なので、今回は割愛します。

単純に知識が足りていないため

「CSSの記述方法を完全に覚えていないので
毎回調べていたらすごく時間がかかってしまった。」

「jQueryの書き方がわからないので
エラーばかりで前に進まない」

なんてことは、死ぬほどある事だと思います。

これは要するに
「◯◯な場合の時に、△△すれば良い」
という知識と経験が足りないために起こるんだと思います。

このパターンのオススメの勉強方法
・気になる動きをするサイトがあればデベロッパーツールでコードを見る
・CSSやHTMLタグは最低限使用するものについては覚える。
・タグ打ちが遅いようなら、e-mmetを勉強する。
・jQueryやJavascriptは、簡単なアニメーションから作って覚えていく。
→いつもコピペで済ましていたら、いつまで経っても覚えられずスピードは上がらないので。

https://saruwakakun.com/html-css/basic/chrome-dev-tool

デベロッパーツールについてわかりやすくまとめられていた記事:サルワカさん

https://tracpath.com/works/development/emmet-for-web-developers/

emmetについてわかりやすくまとめられていた記事:tracpathさん

【勉強法4】ロジカルに説明するのが苦手な人向け

作ったデザインを、他人に対してわかりやすくロジカルに伝えるのが苦手。
そんな人、結構多いんじゃないでしょうか。
恥ずかしながら僕もめちゃくちゃ苦手です。

【原因】なぜ、ロジカルに説明するのが苦手なのか
デザインをする時に感覚任せでデザインしている。

自分では、感覚ではないと思っていても
他人に説明できないようであれば
感覚に任せている部分が大きいように思います。

せっかく良いものを作っても
相手に伝わらないのって辛いですよね。

このパターンのオススメの勉強方法
毎日、何かデザインをみてどういう意図で作られたのか、誰に向けて作られたのか、どういう所がいいと思ったのかなど、デザインを言語化して考察してみるのがいいと思います。


これやる人は、結構多いと思うのですが
続いていない人の方が多いので
続けるだけで周囲と大きく差をつけられると思います。

【番外編】これからデザインの勉強を始める人はスクールに通うべきか独学で頑張るべきか

これから、webデザイナーになろうって人は、まずスクールに通うか独学で頑張るか
もしくは今はやりのテックアカデミーのようなオンライン学習をするか。
ネットを探せば、いろんな情報が出てくるのでなかなかどれを選んでいいのか
判断するのが難しいように思います。

僕はスクール(デジハリ)卒という事もあり、もしお金と時間に余裕があれば断然スクールをオススメします。
また、別記事でもしっかりと説明できればと思うのですが

スクールはある程度、カリキュラムがしっかりと組まれているので
先生によって、大外れする事が少ないです。

また、デジハリのようなスクールだと
「デザインが得意な先生」
「コーディングが得意な先生」
「プログラムが得意な先生」
と、それぞれの専門分野に特化した先生がいるので
知りたい事があれば授業外で先生を捕まえて直接聞けるというのも
メリットかな思います。

あとは、縦横のつながりが増える事。
ぶっちゃけ、同級生のだいたい7割は卒業後3年も経てば異業種に転職するなどで他の道を選んで離脱する事が多いですが
業界に残った人達とは将来的に仕事を回しあったり
情報交換できたり時には愚痴を言い合えたり刺激を貰えたりと
貴重な仲間になる事は間違い無いかなと思います。

デジタルハリウッド無料相談会予約ページへ

中堅以降のWebデザイナーにありがちな悩みと勉強方法

【勉強法5】デザインがいつもワンパターンになってしまう人向け

「いつも可愛いデザインになってしまう」
「レイアウトがいつも同じ感じ」

デザイナーとして数年働いていて
ある程度、自分のデザインが認められるようになった時に
気づいたら、いつも同じようなデザインしてしまってるな
っていう人は結構いるんじゃないでしょうか。

【原因】なぜ、デザインがワンパターンになってしまうのか
・変化をつけなくても仕事として成立する場面が多い
・ずっと同じディレクターと仕事をしている

変化をつけなくても仕事として成立する場面が多い

いつもワンパターンなレイアウト、デザインでも
初めて仕事するクライアントにとっては
新しく見える事ってあるので、変化を出さなくても成り立ってしまう。

でも、「今までと違ったデザインもできるようになりたい」

このパターンのオススメの勉強方法
「デザイントレース」で、自分が覚えたい系統のデザインを分析してやり込む。

例えば、いつもシンプルなデザインばかり頼まれるけど
「可愛いデザイン」もできるようになっていきたい場合。

「可愛いデザイン」って、どんな物があるのか考えると
1.ポップで可愛いデザイン
2.ガーリーなデザイン
3.ゆる可愛いデザイン
4.オシャレで可愛いデザイン

いっぱいありますね。

いつもシンプルなデザインをやってきた人が
いきなり、「1.ポップで可愛いデザイン」を覚えようと思っても
これまでと違いすぎて、数回のトレースでは上手くいかないことが多い。

なので、
「3.ゆる可愛いデザイン」「4.オシャレで可愛いデザイン」など
シンプルなデザインもベースで使えつつ、+αで可愛さを覚えられるような
デザインからトレースを始めていくのがいいように思います。

ずっと同じディレクターと仕事をしている

企画やワイヤーフレームを
ディレクターが作る会社ならありがちなのですが
ディレクターにWEBの知識が乏しかったり
あまり新しい物への熱意が少なければ
毎回同じようなワイヤーフレームを作られてしまう事があります。

こんな時、必要なスキルは
ディレクターに、デザインパターンを変える事の必要性を説得する
事かなって思います。

闇雲に、色んなデザインをやりたいとだけ伝えると
ただのアーティスト系デザイナーと思われてしまいガチなので
論理的にロジカルに説得する必要があると思います。

このパターンのオススメの勉強法
マーケティングの本や記事を読み込む<。/dd>

例えば、「いつも1カラムレイアウト、シンプルなデザイン」を要求してくる
ディレクターがいたとして

競合他社を引き合いに出したり
コンバージョンや数字の観点からディレクターの要求を覆すような提案ができれば
意見は通りやすくなると思います。

人を説得する時は、感覚で伝えるよりロジカルシンキングや数字で伝えると
伝わりやすい
ので、マーケティング目線から語れればとても効果的だと思います。

【勉強法6】やる前から自分の上限を決めてしまう人向け

自分ができる事、できない事がはっきりしてるのって
仕事上でロスがなくなるので、いいことでもあるのかなって思います。

ただ、できる事の範囲を自分で狭くしすぎてしまうと
どんどん新しいことに挑戦する機会が減っていき
年だけを重ねてしまう事になると思います。

【原因】何故、自分の限界値を決めてしまうのか
いきなり仕事で新しい物に挑戦しようとしても
良いクオリティの物ができる自信がないし
時間も膨大にかかってしまいそう
このパターンのオススメの勉強方法
プライベートの時間を使って個人制作の時間を増やす

に尽きるのではないでしょうか。

例えば、「svgアニメーション」を使われてるサイトを見て
作ってみたいけど、なんとなく自分にはハードル高くて難しそうだな
っていう考えが浮かんだなら

いくらでも時間を使える
自分のポートフォリオサイトに練習でsvgアニメーションを使ってみるとか
svgアニメーションについて調べてみてブログで記事にしてみるとか

やってみたら案外難しくはなくて
自分で勝手に範囲を狭めてしまっていることって多いようにも思います。

【勉強法7】営業の仕方がわからない人向け

独立を考え始めたデザイナーとかにありがちな悩み。

「今の会社を出たいけど、周りはどうやって営業してるのか」
「自分にあった仕事の取り方ってどんな方法なのか」

【原因】なぜ、自分で営業する方法がわからないのか
営業方法の種類を知らなすぎる事なのかなって思います。

このパターンのオススメの勉強方法
周りで独立してるor過去にしてた人にたくさん会ってみて話を聞きまくる

たくさん会うのが良いのは
人によって、営業方法や仕事の取り方が全然違うので
自分のこれまでと照らし合わせて一番合うものを選ぶべきだと思うからです。

【勉強法8】これからの自分のキャリアついて悩む人向け

「WEBデザイナーを5年やってきたけど、何歳まで続けようか」
「ディレクターにも興味はあるけど、自分で手を動かしたい。」

中堅ぐらいにありがちな悩みだと思います。

【原因】なぜ自分のキャリアについて悩みのか
・自分で将来を描けていないことと ・モデルとなる人物が身近にいないこと

このパターンのオススメの勉強方法
色々な先輩クリエイターの働き方を知る事で
その中から自分が理想とする将来を選ぶ事がいいと思うので
クリエイターの働き方を紹介した雑誌や記事などで
いろんな人のキャリアを見てみる事だと思います。

また、それと同時に
自分はこれから何をしたいのか
マインドマップのように書き出して自己分析してみるのも
いいのではないでしょうか。

Webデザイナーの勉強方法まとめ

冒頭でもお伝えしましたが
自分の悩みや弱みの原因を分析して
自分なりの勉強をする事が1番大事だと思います。

この記事で挙げた勉強方法はほんの一例なので
自分に合う方法があればどんどんカスタマイズしてもらえれば幸いです。

-WEBデザイン, デザインの勉強方法