WEB制作

Webデザイナーになる為のロードマップ【独学可】

2021年6月11日

【webデザイン】大学生が独学で案件獲得できた学習方法

皆さんこんにちは、よしです!web制作で月10〜20万円程度を継続的に稼いでいるWebデザイナーです。

me
悩んでいる人

「Webデザインを学習したいけど、必要なスキルや学習環境が分からない」

「具体的にどんなロードマップに従って学習すればWebデザイナーになれるの?」

今回は以上のようなお悩みを解決していきます!

Webデザイナーを目指して学習中の人これから初めようとしている人はぜひチェックしてみてください!

本記事の信憑性

・web制作独学6ヶ月で月収20万越え

・web制作会社2社と業務連携

Webデザインのみの案件も多数経験

Webデザイナーに関する他の記事もあるので、気になればぜひ!
>>>「Webデザイナー やめとけ」と言われる理由とは
>>>絵が下手でもWebデザイナーになれる??
>>>Webデザイナーはコーディングできないといけない?

【独学可】Webデザイナーを目指すロードマップを公開!

いきなりですが、Webデザイナーを目指すためのロードマップをご紹介します。

Webデザイン学習ロードマップ

1:学習環境を整える

2:Webデザイナーに必要なスキルを知る

3:本記事の「Webデザインの具体的な学習方法」参考に学習を進める

4:ポートフォリオを作成する

5:案件獲得に向けて営業する or 就職活動する

以下でひとつずつ丁寧に解説していくので、安心してお読みください!

Webデザイナーを目指す為の学習環境

Webデザイナーを目指すにあたって、適切な学習環境を整える必要があります。

PC

まずはパソコンを用意しましょう。

既に持っている人が多いと思いますが、出来るだけスペックの高いパソコンを使うことをおすすめします

Webデザイナーが使用するデザインソフトは割と容量を使うので、パソコンのスペックが低いとデザイン作成や保存時にかなり時間がかかります。

実際にWebデザイナーとして働く時は、複数のデザインソフトを同時に使う事もあり、重くなると作業効率がかなり落ちるので、可能なら購入した方が良いです。

WindowsかOSはどちらでも問題ないので、好みの方を使いましょう。以下に最低限必要だと思われるスペックを記載するので、参考にしてください。

必要なPCのスペック

CPU:i5以上

メモリ:8ギガ or 16ギガ

デザインソフト

Webデザイナーに必要なデザインソフトは以下の通りです。

基本的にはAdebe製品で揃えておくと、ほとんどの案件で問題なく受けられます。

必要なデザインソフト

・Photoshop

・Illustrator

・XD

Photoshopは画像加工、バナー作成、サイトデザイン
Illustratorはイラスト作成、バナー作成
XDはサイトデザインで主に使われます。

少し前まではPhotoshopをつかう案件が多かったのですが、近年はXDが主流になりつつあります。

ドメイン・サーバー

Webデザイナーとして、サイト作成にも関わる場合、ドメイン、サーバーの知識も必要になってきます

今後ポートフォリオをサーバーにアップできるレベルの知識があれば問題ありません。

Webデザイナーに必要なスキル

Webデザイナーに必要なスキルは、目指すべきデザイナー像によって変わります。

Webデザイナー基礎スキル

・Webデザインの知識、スキル

・HTML,CSS,javascriptの基礎

・Photoshop

・Illustrator(軽く)

・XD

WebデザイナーはHTML,CSSは使わないからと言って、学習する必要がない訳ではありません。

コーダーにとって扱いやすいデザインデータを作る為に、基礎部分だけでも学習しておきましょう。

>>>Progate

これらのスキルに加えて、「Webデザイナー特化型」か「コーディングもできるWebデザイナー」どちらを目指すかで必要なスキルが変わってきます。

Webデザイナー特化型

・デザインソフトの高度なスキル

・Illustratorを使ったイラスト制作

・IU,UXに関するスキル

コーディングを視野に入れずWebデザインに特化する場合、各デザインソフトのさらに高度なスキルを身につける必要があります。

自分で画像を作成したり、イラストを作る事が求められるので、専門性を高めましょう

また、Webデザイナーとしてさらに成長するにはUIはもちろんUXについての知識も必要です。

コーディング兼デザイナー型

・HTML,CSS,Javascript(jQuery)

・WordPress

Webデザイナーとして市場価値を上げるために、コーディングもできるようになりたい場合はHTML,CSS,Javascriptに加え、WordPressの学習が必要になります。
>>>WordPress学習ロードマップ

Webデザインの具体的な学習方法

Webデザイナーに向けての学習環境、必要なスキルがわかったところで具体的な学習方法をお伝えします。

私が実際に学習してきた方法を解説していきます。*今回はコーディングではなくWebデザインの学習をメインにご紹介します。

"知識をつける"

Webデザインには例えば「近接」「整列」「強弱」「反復」などの基本的なルールがあります。

独学で進める場合、インターネットでの情報収集だけではなく、書籍で一通り体型的に学習する事がおすすめです。

ちなみに僕は独学した時「ノンデザイナーズ・デザインブック」という参考書で基礎を学習しました。webデザインに限らず、デザイン全般の基礎知識が理解できるので、独学をする方にはおすすめです!

この段階では全て覚えようとするのではなく、読んで理解する程度で十分です。

「書籍での勉強は苦手!」という方は、動画教材での学習もおすすめです。

【Udemy】web制作が学べるおすすめ講座  
【Udemy】web制作が学べるおすすめ講座  

続きを見る

webデザイナーにおすすめのYouTubeチャンネル6選!
webデザイナーにおすすめのYouTubeチャンネル6選!

続きを見る

”実践する”

Webデザインの基本的なルールの知識を身につけたら、次はその知識を「経験」する事で自分のものにしていきましょう。

しかし、「独学の場合何をするべきかわからない〜」という方もいますよね。

そこでもってこいの独学方法がトレースです。

トレースで学べる事は大きく分けて二つありますので、しっかり意識して取り組みましょう!

IllustratorやPhotoshop、XDの頻出機能を実践で覚える

Webデザインを独学する際に、初めにIllustratorやPhotoshop、XDから徹底的に学習する人がいますが、あまりお勧めできません。

トレースに使う頻出の機能だけ効率よく覚えましょう

デザインツールは機能がとても多く、覚え切る事は出来ませんし、その全ての機能を実際の案件で使うわけではありません。
デザインツールの学習で挫折してしまうくらいなら、実際にトレースをしながら頻出の機能を使えるようになっていれば全く問題ありません!

フォントサイズやジャンプ率、マージンやパディングの感覚を掴む

Webデザイン始めたての人は、タイトルや本文のフォントサイズ、要素の間のマージンの幅など基準が分からずバランスが悪くなりがちです。

トレースではこれらの感覚を養う事ができ、自分でデザインを作成する際にとても活きてきます。

バナートレース、サイトトレースを複数個こなした後は、かなりwebデザインの感覚が掴めてくると思います。

”活かす”

いよいよオリジナルデザインを作ってみましょう!

ここで注意しておきたいのは、

webデザインは0から自分で作るものではない

という事です。

僕は、日頃からPintarestなどのwebデザインギャラリーサイトで情報収集をして「あ、このデザインいいな」と感じる部分をつまみ食いする感覚で作成しています。

ちなみに私が作った仮想サイトはこちらです。>>>仮想サイト

おすすめデザイン参考サイト

オリジナルデザインを作る際は、自分が今後ターゲットにしていきたい業種のサイトをデザインしてみましょう!

練習がてらポートフォリオサイトに実績として掲載する事ができ、他の初学者、独学者と差をつけられます。

番外編 日頃のデザインから学ぶ

この時点で、初案件を獲得できるスキルは身についていますが、さらにwebデザインのクオリティーを上げる事ができる学習方法を紹介します。

それは「日常からデザインに目を向ける」事です。

街中の広告、ポストに入っているチラシなど、webデザイン以外にも普段何気なく目にしている部分にデザインは転がっています。

特におすすめなのは、電車の広告です。電車の広告はバナーデザインの似ていると感じているので、僕は積極的に観察するようにしています。

なぜこのデザインがいいのか、どうすればもっとよくなるのかを考える事で、自分の中のwebデザインで使える引き出しも増えていくので是非試してみてください!

ロードマップを挫折せずにWebデザイナーになる為に

正直、一人前のWebデザイナーになるのは簡単なことではありません。

ロードマップを知ったからといって、実際に手を動かし、やり遂げなくては結果は出ません。

少しでも挫折するリスクを減らすためのポイントを解説します。

挫折防止ポイント

・目標を立てる

・SNSで仲間と繋がる

とにかく楽しむ

目標を立てる

何事でも初めは目標を立てることが大切です。

目標を立てないと「自分がどんな未来に向かっているのか」「頑張ることで何が起きるのか」の想像がつかず挫折しやすいです。

「とにかく初案件をとる」でもいいですし、「デザインで売り上げを伸ばしたい」でもなんでもいいです。

とにかく目標を設定しましょう。

SNSで一緒に頑張っている人と繋がる

一人で学習していると、孤独ですよね。

とはいえ、「身近にWebデザイナーを目指してる人なんていないよ!」と言われそうですね。

そんな方は、TwitterなどのSNSで一緒に頑張る仲間を作りましょう。

一緒に頑張る仲間ができると、俄然やる気がでます。

サボってしまった時も、「あの人は頑張っているのかな」とやる気を起こさせてくれます。

また、Twitterで日々の学習成果を発信すると、仕事に繋がることもあります。

まだアカウントを作っていない人は、今すぐ作っちゃいましょう!

楽しむ

Webデザインの学習を挫折したい為に一番重要なのは、「楽しむ」ことです。

色んなモチベーションの保ち方はありますが、これに勝るものはありません。

「かっこいい、かわいいデザインができた!」「こんなデザインの方法もあるんだ!」など、日々の学びを楽しめるようになったら、あなたはもう挫折の心配はありません。

それでも独学では厳しいと感じたあなたへ

厳しいことを言いますがWebデザイナーとしてお金を稼ぐのはそう簡単ではありません。

まして、独学でWebデザイナーを目指すのは本当に大変です。

少し学習してみて、「独学では厳しい」と感じたらスクールに通う事も視野に入れましょう。

>>>おすすめWebデザインスクール【安い】

おすすめ

【独学では太刀打ちできないと思ったら?】

WebデザインやWeb制作で稼げるようになりたいけど、何から始めたらいいかわからない、、、と感じているそこのあなた!

この記事でご紹介しているように、独学でも案件獲得は目指せますが、やはりスクールにも大きなメリットがあります。

今なら、Webデザインスクール「デジタルハリウッド STUDIO by LIG」無料個別説明会に参加することができます!

簡単登録&オンラインOKなので、今すぐ申し込みしてみてください!

>>無料説明会に参加してみるimpression?a id=2718238&p id=2322&pc id=4990&pl id=30576

まとめ:Webデザインを学んだのその先は?

webデザインをここまで進めてきたら、自信を持って営業を初めてしまいましょう!どんどん案件を取って経験を積む事で身に付くスキルも山ほどあります。

さらに単価を上げたい方はWordPressを学習する事で、デザイン・実装を一括で請け負うことが出来るので余裕があれば挑戦してみてはいかがですか?

ちなみにWordPressの独学方法についてはWordPress学習のロードマップの記事で詳しく紹介しているので、是非チェックしてみてください!

チェック!
未経験の大学生がweb制作で案件を取れた方法
【独学】大学生がweb制作で稼げるようになったロードマップ

続きを見る

それではまた!

no image

WEB制作

2021/12/4

CodeCamp/コードキャンプ(デザインマスターコース)の内容と評判

no image

WEB制作 ブログ運営

2021/11/27

SEO特化型スクールWEBMARKSの評判と学べる内容

no image

WEB制作 wordpress

2021/11/26

デイトラのWebデザインコースとWeb制作コースの違いとは【徹底比較】

web制作 稼げない人の特徴

WEB制作

2021/11/16

【Web制作】稼げない人の特徴と稼ぐための対策

no image

WEB制作 ブログ運営 プログラミング

2021/11/16

ZeroPlus(ゼロプラス)の評判や口コミを徹底解説

no image

大学生

2021/11/13

【いつまで続ける?】大学生がバイトを辞める時期と円満に辞める方法

no image

プログラミング

2021/11/13

【プログラミング学習は時間の無駄】という意見について

no image

WEB制作

2021/11/10

Webデザイナーにセンスは必要ない!【経験談】

no image

大学生

2021/11/12

【ぼっちで友達がいない大学生へ】つまらない大学生活とおさらばしよう

no image

WEB制作

2021/11/11

【経験談】Webデザインスクールは本当に無駄なのか

web制作とweb開発の違い 仕事内容や向いている人を解説

WEB制作 プログラミング

2021/11/9

Web制作とWeb開発の違い【徹底的に解説】

【QOL爆上がり】本気でおすすめできる購入品のご紹介

商品紹介

2021/11/9

【QOL爆上がり】本気でおすすめできる購入品のご紹介

no image

WEB制作

2021/11/9

「Webデザイナーはやめとけ」と言われる理由

【受けないと損】テックアカデミーの無料体験は受けるべし

WEB制作 プログラミング

2021/11/11

テックアカデミーの無料体験は受けるべし【受けないと損】

【将来が不安な大学生へ】具体的な解決策を提案します

大学生

2021/11/9

【将来が不安な大学生へ】具体的な解決策を提案します

211031【特化ブログ運営5ヶ月目】ドメインパワーアップ!?

ブログ運営

2021/11/9

【特化ブログ運営5ヶ月目】ドメインパワーアップ!?

https://kouspro.com/time-students/

大学生

2021/11/9

【暇な大学生におすすめ】暇な時間を有効活用できる方法

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

WEB制作 ブログ運営 プログラミング

2021/10/16

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

211007アートボード 1 のコピー 42

ブログ運営

2021/10/7

【特化ブログ運営4ヶ月目】アクセス微増、収益4桁達成!!

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

プログラミング

2021/11/26

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

-WEB制作

© 2021 よしブログ Powered by AFFINGER5