こんにちは🌻 ちこです。
私自身未経験からWebデザイナーになって現在はフリーランスのWebデザイナーとしてお仕事をしています。
< 自己紹介 >
● 旦那の転勤をきっかけに仕事を辞めることに。そこからWeb制作を学び、コーダーに。
● 元々コーダーだったけど、依頼が来たことをきっかけにデザインを学び始める
● 現在はデザインの仕事をしながらデザインスクール「デザトレ」を運営
そして、今は断らないといけないくらいお仕事をいただけています。
そんな私が、Webデザイナーとしてお仕事をしていくために何を学んだらいいのかこの記事にまとめました。
実際に、私がデザイナーとして仕事が溢れるようになるまでにやってことなので、
順番にやっていただければ、
相当力がつくと思います。
「デザイナーってどうやって勉強したらいいか分からない」
「スクール通ったけど、実力不足を感じる」
「自分で作ったデザインがなんかダサい」
こんな悩みを持っている方に読んで欲しいです✨
私自身も、最初どう勉強していいか分からず、なんとなく作ってみるも「なんかダサい」そう感じていました。
そんな私も、試行錯誤した結果、今ではデザインも褒められることも多くなり、平均収入も平均100万以上になってきました。
今回は、私が今まで学んできて、そして私が人に教えてきて
「この方法がベスト」って思う方法を、超具体的にご紹介します。
このロードマップこんな効果があった!?
このロードマップでは
私がやってる「デザトレ」で教えている内容を詰め込みました。
これをやった上で、営業のコツも伝えると、
● 営業開始から1ヶ月で同時に7件ものお仕事をこなしている
● 営業する暇がないくらい仕事がたくさん！?
● 営業開始してたった2週間で50万受注!
● コーダーとして2,30万くらいだった方が、
たった 4ヶ月デザインを勉強して、月100万受注!
そんな状態になっていました♪
実際にデザインツールを触れないところからスタートした方もいらっしゃいますが、
たった4ヶ月でこんな制作できるようになりました。
私自身、まだまだデザインの制作のお仕事もしています。
そしてデザトレを初めて1年間ずっとデザインの添削もしてきました。
その中で、どんな勉強をしたら、最短で仕事が溢れるくらいのクオリティーになるのかを考え抜いた結果、このロードマップになりました。
そして、50人ほど受けてくださって改良を重ね、どんどん再現性の高いものにしたので、
今、「デザインを勉強したいなぁと思っている」
「デザインの勉強をし始めたけどうまくいかないなぁって悩んでいる」
「デザインを一通り仕事をしたけど、なかなか仕事につながらない」
って方にぜひ読んで実践見てほしい！
「 仕事がないんじゃないかと思っている方へ 」
正直、求められるデザインスキルを身に付けられれば、仕事は溢れるくらいになってきます。
だから、「今からだとWebデザイナーが多くて、仕事がないんじゃないか」って不安になっている人も大丈夫✨
デザインってただ綺麗なだけだとダメ！?
デザインってただ綺麗なだけだとダメ！
ってよく聞きますよね！
綺麗なデザインを作るのと、現場で求められているスキルは違うなと感じます。
だからこそ、このロードマップでは「現場で使っているスキルが身に付く方法」をお伝えしていきます♪
求められるデザインとは！？
実際のデザインする上で、この考え方は大切！
ってことを動画でまとめてみました✨
これを意識してデザインすると、出来上がりがかなり違うかなぁって思います♪
／
ではレッツゴー！！
＼
Webデザイナーとして学ぶならこの順番！
Webデザイナーってデザインの勉強だけでは足りないんです。
実はコーディングも必要になってきます。
実務ではコーディングをする事は無いにしても、
自分が作ったデザインをどうコーディングで実装されるのか、がわかってないと、
実装しにくいデザインになってしまうので、
コーディングの基礎知識は必要になってきます。
なので、デザインを学ぶ際に私ならこんな順番で学んでいきます。
01 コーディングの基礎知識
02 デザインの考え方 / デザインの原理原則
03 ツールの使い方
04 デザインの分析
05 文字組
06 デザイン模写
07 オリジナルデザインを作って添削
08 ターゲットに合ったデザイン制作訓練！
これをどの順で、何を使って学ぶか具体的に解説していきます！
コーディングの基礎知識を学ぶ ( 1ヶ月くらい )
Webデザインのみで仕事をしたい場合は、コーディングは自分で1から作ることはないのですが、
「作ったデザインがコーディングでどう実装するか」を知らないと、コーディングしにくいデザインを作ってしまう可能性があります♪
だからコーディングできる必要はないけど、コーディング知識は頭に入れておこう！
コーディングを学ぶときにおすすめの本！
こちらの本がおすすめ！
1回目はさらっと読むだけでOK!
2回目は手を動かしながら、実際に作ってみてね！
＊この時もよく分からなかったら、飛ばしてOK!
3回目は2回飛ばしたところだけでOK!
デザインの考え方の基礎を学ぶ (2週間くらい)
デザインする上で、原理原則ってすごく大切です！
どうしたら、見やすいデザインになるのか、伝わるデザインになるのかを学んでいきます。
期間(目安)：2週間くらい
まずはこれらの基礎を学んでいきます♪
● 文字組
● フォントの選び方
● 余白
● デザイン4原則
● 配色の選び方
● 写真選びのコツ
これを学ぶのにまずはこの2冊がおすすめ！
デザインの基礎知識を学ぶのに読んで欲しい本2冊
/
今から紹介する本を2冊とも読んでみてね！
\
1冊目：なるほどデザイン
綺麗なデザインだけではだめ！やっぱり目的にあったデザインにする必要があります。
その方法や考え方などが、具体例などを使って説明されているのですごくオススメです！
この本はデザインの考えかを知れる本になっています。
全体をザッとで良いので、3回くらい読んで、
フォント選びや余白の意味、色の選び方を頭の中に入れておいてください
2冊目：ノンデザイナーブック
この本では、デザインの基本的な考え方が図や表などを用いており、すごくわかりやすい本です。
この本もサラッと3回読んでみてください。
特にここでは「デザインの4大原則」を理解してください🌻
- 近接
- 整列
- 強弱
- 反復
この4つに関して、具体例を用いて説明されています。
具体例を見ながら、4原則がどのように活用されているか考えてみると、理解が深まると思います。
ツールの使い方を学ぶ(2から3週間くらい)
期間(目安)：2から3週間くらい
デザインツールの使い方をここでは学んでいきます。
ツールの機能は全て使うことはないので、
ここは全て覚えようとしなくてOK！
重要な機能が使えたら、そのあとは、デザインしていくうちに手を動かして覚えたら大丈夫ですよ！
<デザインツールって何があるの？>
デザインするときは4つのツールが使われていることが多いです。
● Photoshop
● Illustrator
● XD
● Figma
でも、このすべてを完璧に覚える必要はなくて、
最初のうちは、自分がメインで使ってきたいものを選んで、それを中心にその他も少し覚えるくらいで良いと私は思います。
私自身は、Figmaをメインで使って、Figmaで対応できない写真加工などはPhotoshopで行っています。
ここにそれぞれのツールの特徴を書いているので、自分が使いやすいものを選んで学んでください。
デザインツールの特徴
● Photoshop.
デザイン会社やLP専門の会社はこのツールをメインとして使っていることが多いです。
● Illustrator
パンフレットとかチラシなどの紙媒体をメインに制作している会社さんは、Illustratorを使うことが多いです。
● XD
Webサイトのデザインをしている制作会社さんとお仕事をすると、6割くらいはXDを使用していました。(私の体感)
● Figma
無料でも使えてすごく便利です！比較的新しい制作会社さんや、個人のマーケターの方などは使っていることが多いです。
▶︎ 簡単な写真加工ならFigma上でできるのですごく便利です。
ここでは、私と同じように、「Figma」をメインで使用して、写真加工などでPhotoshopを使う場合の勉強方法をお伝えしますね！
【 Photoshopを学ぶなら 】
URL：https://www.youtube.com/c/MappyPhoto
／
「Mappy Photoさん」のYoutubeが本当におすすめ！
＼
すごく分かりやすい上に、無料でみられるのは本当にすごい！
特にこの部分の動画は必ず見よう！
見て欲しい再生リストが2つあります。
上から順に見ながら、手を動かしてみよー！
01:手を動かしながら最低限の基礎を学ぼうシリーズ
URL:https://www.youtube.com/playlist?list=PLOrrFIaJ2FFmekcA5sp1gB0t8SmslKM_N
Photoshopの超基礎から教えてくださっています。
もし、Photoshopを触ったことがないって方はこの動画から見ることをオススメします🌻
02:はじめてのPhotoshop#1【独学の方に絶対に見てほしい動画】
URL：https://www.youtube.com/c/MappyPhoto
この辺りの動画を見て使い方の基礎をこちらで学ぶとGoood!!
03:はじめてのPhotoshop#2【何度も復習して覚えたい動画】
ここで紹介した以外の動画は、困った時に調べる！くらいで良いかと思います。
Photoshopの機能ってすごくたくさんあるので、全部覚えようとすると大変です。
実際に使う機能としては、8割が基本的な操作になっているので、困った時に調べよう！
【 Figmaを勉強するなら 】
Figmaを使うなら、このサイトがオススメ！
無料で学べる「chot.design 」
*会員登録は必要ですが、無料で使えますよ！
特にこの部分の動画はやってほしい✨
参考：https://chot.design/figma-beginner/
ツールの使い方になれる (2週間くらい)
期間(目安)：2週間くらい
上で覚えた機能などを実践で使って、ツールを使うのに慣れていきます。
Photoshopの使い方に慣れる
Photoshopの使い方に慣れるために、そしてデザインの基礎を学ぶために使えるのがデザインドリル！
このドリルをPhotoshopでやってみてください。
すべてやってると結構時間がかかってしまうので、
まずはできそうなものを4〜6個くらいやるだけで大丈夫！
次にFigmaの使い方に慣れる
Webサイトデザインの模写をFigmaで1つ行う
ここではツールの使い方に慣れるのがメインなので細かいところまで模写しなくても大丈夫です。
もし、どんなサイトの模写をしたら良いか分からない場合
もしどんなサイトの模写をしたら良いか分からない場合は、このサイトがおすすめ！
URL：http://fullhouse-ai.com/
文字組の練習 (2週間くらい)
期間(目安)：2週間くらい
文字組の練習の数：最低でも10個
文字組って少しコツが必要なので、こちらは訓練する必要があります。
文字組って？
視認性を高めるため、分かりやすくするために、文字や行の間隔を調整する作業
例えば、
この文言、文章だけ並べているとぱっとみた時に目に止まらないけど、
文字組をすると、
/
ぱっとみて内容が把握しやすくなったよね！
＼
この文字組のスキルは、バナーやLPで使うことが多いよ！
私がやってる「デザトレ」ではみんなで同じ課題に取り組んでるのですが、
文字組一つでもいろんな表現があるからみんなでやると本当に勉強になる！
例)「反応がUPするバナー制作高品質スピード対応即レス対応3名限定で30%OFF」
文字組例
この文字組の考え方をこちらにまとめました
文字組する時、文字の目立たせ方などをこの動画で紹介しています✨
こんな感じで、
「どの文字を目立たせるとスッと内容が入ってくるのか」
「ターゲットが興味を持ってくれるのか」
を考えながら、文字を組み立てていきます。
これを10個くらいやるとだいぶ力がついてきますよ！
文字組の添削例
<改善前> 
<改善後>
バナーの模写をする(1週間くらい)
期間(目安)：1週間くらい
量：5枚程度
ここではバナーの模写をしていきます。
模写するバナーは自分が好きなものでOK！！
この段階では、めっちゃ細かいところまで見て欲しい。
模写するときも、影の付け方とかまで見ると力がつくよー☺️
「そのデザインにどんな印象を持ったのか」
「なぜそんな印象を与えるデザインなのか」
って考えながら模写してください☺️
これを考えることで応用力がついてきますよ。
例えば、こんな細かいところまで見た上でバナー模写すると力がつくよ！
こんな感じの分析をいろんなバナーでやっていくよー！
どんなバナーを模写したらいいの？
模写するならこのサイトからバナーを探すのがおすすめ！
バナー広場
もし、模写するバナーが見つからない場合
徹底解説したバナー模写解説動画を2本準備しました！
/
バナーを作るときはこんな感じで考えて作るのがオススメ！
＼
【模写用バナー1本目】初心者向け！0からバナー制作
【模写用バナー2本目】Figmaでこんなバナーを作ろう!
解説動画はこちら
オリジナルバナーの制作 ▶︎ 添削
期間(目安)：3週間くらい
作業量：5枚から10枚
まずはオリジナルのものを作って添削を繰り返してください🌻
バナーってデザインする上で、いろんなことを考えて制作しています。
上の模写の動画で説明したように、細部まで考えてバナーを作ってみよう！
その後添削
実際は誰かに見てもらうってことってめちゃめちゃ大切で、
私も、私も駆け出し時期は、人に見てもらって添削してもらうってことを繰り返していました。
だからこそ、私が運営しているデザトレでも添削ってことをすごく大事にしていて、
週3回くらい添削の時間をとっています。
ただ、もしこういったスクールが難しい場合は、
制作会社さんと一緒にお仕事をして、修正から学ぶとかでもOK！
ここが抜けていると独りよがりのデザインになりがち。
何がダメで、
どう変えたら、
どんな印象になるのか
を知るために添削をしていきます♪
ここは抜かせないかなって思います。
デザインって綺麗なだけじゃダメ。ターゲットに合ったものや、目的を達成するものでないといけないんだなぁって思っています。
それが私は添削をしたおかげで、
どうしたら「ターゲットに合った、伝わりやすい」デザインができるのかが分かりました。
自分だけじゃ絶対たどり着けなかったです。
未経験からスタートして、仕事をもらえるデザイナーになるためには、ここは避けて通れないなぁって。
でも逆に、ここを乗り越えたら、めっちゃ仕事が取りやすくなったし、仕事をとるのが簡単になりました。
フィードバックをもらう時のコツ！
フィードバックは、1つのデザインで2から3回くらい受けることをおすすめします。
1回だけだと、修正が正しくできているのか分からないので複数回受け、完成するまでフィードバックを受けてください。
最初からどう修正するかなどの結果だけを出されると、次、応用が効かなくなってしまい、デザインの上達が遅くなってしまうので、
修正案のみ出す人ではなく、違和感を感じる理由を教えてくれる人にフィードバックを頼むと成長しますよ！
表現の幅を広げるために知識を貯める(5日くらい)
このタイミングで、表現の幅を広げるために「目的のためのデザイン」
について考えることが大切です♪
期間(目安)：5日くらい
そんな時にオススメなのが、こちらの本です。
鬼フィードバック
この本を読むと、なぜこのデザインなのか、よりイメージが伝わるのないか。
なんて視点で見えるようになってくるので、オススメです🌻
この本は、読むだけでOK！
プロはどんな視点でデザインを見ているのかがこの本を読むと分かると思います。
「こんな視点で見てるのか。。。」
と腑に落ちるまで何回も読んでほしいです。
サイト分析をして、デザインの共通項を調べる(1週間くらい)
期間(目安)：1週間くらい
サイト分析の方法を動画にしました。
ここではサイトの与える雰囲気の共有点やいろんなデザインのデータを貯めていきます♪
サイト分析を動画で解説
これは文章で分かりにくいと思うので、動画で紹介しますね！
▶︎ 実際のサイトを分析したもの
ジャンルが違うサイトを10個程することをおすすめします☺️
＊ 私自身は、デザインの勉強をしてる時に一気に10サイトくらいやりました☺️
分析するサイトはここから探すのがおすすめ！
せっかくサイト分析をするなら、クオリティーが高いサイトを分析するといいなぁと思うので、
クオリティーが高いサイトを扱っている「サイトギャラリー」を紹介します
● 81-web
URL:https://81-web.com/
● STOCK
URL:https://stock.pulpxstyle.com/
Webサイトを模写する(2週間くらい)
期間(目安)：2週間くらい
サイトを模写する数：2〜4サイトほど
模写するWebサイトは何でも大丈夫です！
ただ少しデザインがダサイものとか古いデザインだとなかなかデザイン力が上達しないのでオススメはこの2つのサイトから探すと良いかなと思います。
(先ほどおすすめしたサイトと一緒になります)
Stock-日本のWebデザインギャラリー
https://stock.pulpxstyle.com/
81-Web.com
https://81-Web.com/
- まずは、参考サイトを見ながら模写をする
- サイトの文章だけ持ってきて、何も見ずに制作する
- 参考サイトを見て、 「なんか違うなぁ」と思うところを参考サイトに近づけるように、見ながら修正する
- 参考サイトに近づくように何度も繰り返して模写を行う
Webサイトの模写をする上でも、めっちゃ細かいところまで見て欲しいです。
「そのデザインにどんな印象を持ったか」
「なぜそんな印象を与えるデザインなのか」
「余白や文字サイズはどれくらいになっているのか」
って考えながら模写してください。
これを考えることで応用力がついてきますよー！
どのサイト模写したらいいか分からない場合
もしどのサイト模写したらいいか分からない場合はこちらのサイトを模写してみてね！
■https://nicottolabo.info/ (株式会社ニコットラボ)
■https://www.asmo-e.co.jp/ (株式会社牛久工務店)
オリジナルのWebサイトデザインを作って添削を繰り返す(2ヶ月くらい)
期間(目安)：2ヶ月くらい
オリジナルデザインを作って添削：3〜5サイトほど
ここでオリジナルのWebサイトを作って添削をバナーと同じように繰り返します♪
最低でも3サイトはやって欲しいなぁ！
自分でテキストを制作してデザイン制作をスタート！
今だと、Chat GPTを使用すると簡単に文章が作成できますよー！
実際の実務を想定してデザインをすると良いので、
次の事を決めてから、その内容に沿ってデザインをしてみてください。
「サイトを作る目的」
「ターゲット」
「与えたいイメージ」
「テーマカラー」
「参考サイト」
作り終わったら、添削を！
こちらの添削もバナーと同じように、1つのデザインで2から3回受けることをおすすめします♪
すぐ、修正案を出すのではなく、なぜダメなのかを教えてもらえると応用力がついてきますよー！
ターゲットに合ったデザインを作る
デザインって綺麗なだけではダメ！
ターゲットに合ったデザインが作れるデザイナーってやっぱりいいなぁって✨
最初の方は特に、自分の好みで作りがちなので、この辺りも訓練すると、上達していきますよー！
ここからは、デザトレでやってる「ターゲットに合ったデザイン訓練法をお伝えします🌻」
私も初期この訓練してたけど、意外と自分の好みでデザイン作ってたなぁって
反省できたので、これは絶対やって欲しい！
ここまでやったら、今まで作ったものをポートフォリオにして営業開始！
【 最後までありがとうございました 】
ここまで読んでくださってありがとうございます。
読むのもすごく大変だったかと思います。
Webデザイナーって結構いろんなこと勉強しなきゃいけないので正直なるの大変。
ただ実際なってみるとめちゃめちゃ楽しいーーー！
海外にいながらでも仕事ができました。
今でも楽な仕事とは全く思わないけど,
直接お客さんと関わることが多くてこの仕事をしてから、毎日充実してるなと思っています。
そしてフリーランスになってみてやっぱり自分の意思でいろいろ決定ができるっていうのは、こんなに楽しいことなんだなと体感しました。
だからこそ
今苦しんでいる人
現状変えたい人
そしてデザインが何よりも好きな人
そんな方の
Webデザイナーとしてお仕事をするきっかけになれば嬉しいです。
でも、、、、実際は、
実際は、ちゃんと添削してくれるところって本当に少なくて、
コメントだけでの添削だったり、添削回数が少なかったり、
なかなか添削の機会が取れずに、十分にクオリティーが上がらなかったり。。。
だからこそ、成長できる機会が少ないかなぁって体感しています。
だからこそ添削を多くして、どんどん力がつくといいなぁと思って、
1人最大42回添削できるような「デザトレ」というデザインスクールもしています。
興味があったらこちらも見ていただけると嬉しいです☺️
Webデザイン身につけるまで本当に大変だと思います。
でも、私はこれを始めて、大袈裟でもなんでもなく、人生が変わったなぁって思います。
大変だと思うけど、一緒に頑張っていきましょー！🌻
