未経験からWEBデザイナーになるための完全ロードマップ（独学？スクール？転職？）

こんにちは。
フリーランスWEBデザイナーのタクマです。
閲覧頂きありがとうございます！

さっそくですが、この記事をご覧になられているという方は以下のようなお悩みをお持ちではないでしょうか？

WEBデザイナーになりたいけど、
・何から手をつければいいのかわからない…
・どういうキャリアを歩めばいいのだろうか…
・そもそも私のなりたいもの、したいことってWEBデザイナーであってる？

お気持ちはよくわかります…！
最初は今の仕事に不安を感じ転職を考えるも、はたして自分にできるのだろうか？
WEBデザイナーってなんとなく楽しそうだけど、実際に自分がなるためには何から手をつけていいのかわからない。PCあんまり得意じゃないしな…と。

大丈夫です、私も同じでした😅
未経験からでもWEBデザイナーにはなれます！

私も最初は未経験からスタートしました。
その中で「独学、会社員、スクール、フリーランス」といった様々な過程で試行錯誤を繰り返し、WEBデザイナーになれた今の私があります。
そんな私も今となっては、WEB関係の仕事について3年になりました。
色々経験した私だからこそ、皆様にアドバイスできることがあるのではないかと思い本記事を書きました。

本記事はこれからWEBデザイナーを目指す皆様にとって、可能な限り遠回りをせず、最短でWEBデザイナーになれる方法をお伝えします。
これからWEBデザイナーを目指す皆様の手助けになれば嬉しいです。

一応私の経歴も載せておきます。
・しがないサラリーマン時代　2年半
・独学　1ヶ月くらい
・WEB制作会社　フロントエンドエンジニア　未経験から2年
・デザインスクール＆独学　半年
・フリーランス　WEBデザイナー　※今ここ

あなたのなりたいものはWEBデザイナーであっていますか？

まず初めに、ここ意外と重要です。
　※問題なければこの章は飛ばしてください。

当たり前かもしれませんが、自分のなりたいものの認識が間違っていると、時間を無駄に浪費してしまいます。
「後からこんなはずでは…！」といった感じに。
そして、初心者であればあるほど、WEBデザイナーの仕事について認識が曖昧なまま目指してしまうことがあります。
ですので、この章で自分のやりたいこと、なりたいものがWEBデザイナーであるのか再確認しておきましょう！

◆あなたが仕事としてやりたいことは何ですか？？
①WEBデザイン
・WEBページ制作、ECサイト制作、ランディングページ（LP）制作
・バナー画像、ヘッダー画像、商品画像、SNS画像制作など

②WEBデザイン以外
・マーケティング要素が強い仕事（ネットビジネス等）
・高度な写真加工系（レタッチ、デジタルアート等）
・チラシ作成、名刺作成、ポストカード　※印刷系のデザイン
・キャラクター作成、グッズ作成
・ロゴ作成
・イラスト、アートが描きたい
・動画編集
 etc...
------------------------------------------------------------------

いかがでしょうか？


◆選択結果について
①を選択した方
あなたのやりたいことはWEBデザインの領域で問題ないです✨
ただ、「WEBデザイナー」というのは、とても広義なのです。
そのため、もう少しだけ自分のやりたいことを具体的に掘り下げてみましょう。

WEB制作やLP制作においては、制作する中でも役割分担があります。
それぞれの役割で「WEBデザイナー」と名乗られている場合があるので注意です。

【デザイナー】
そのままですがデザインを主に担当します。サイトやLPのデザイン制作が主な仕事です。バナー画像、ヘッダー画像、商品画像、SNS画像制作もここに含まれます。
使うツールは、Photoshop、Illustrator、Adobe XD、sketchなど。

【コーダー】
デザイナーが作ったデザインを元にコーディング（プログラミング）を行います。別途ツールやサービスを使わない限り、サイトやLP制作には必要な工程になります。
必要なスキルはHTML、CSS、JavaScript、WordPressなど。
※会社によってはデザインからコーディングまで担当する場合もあります。

【ディレクター】
デザイナーやコーダーの進捗管理や、お客様との要件の打ち合わせなどが主な仕事です。WEB制作の知識があるに越したことはないのですが、経験やコミュニケーションスキルも重要になります。時にはお客さんのために出張などもあると思います。（会社員時代のディレさんは会社のお金で飛行機乗ってたりしました…ｗ）

それぞれになるためのおすすめの方法を後述します。ご自身がやりたい仕事領域を覚えておいてください！

②を選択した方
WEBデザイナーを目指し、勉強することであなたのやりたいことができるようになる場合もあります。ただ、私としてはここで一度立ち止まって、もう一度やりたい職種についてよく調べることをお勧めします。内容によってはWEBデザインとベースの考え方が同じ場合でも、使用するツールが異なる場合があります。
このまま、WEBデザインを学び続けても遠回りになってしまう可能性が高いです。もし、よく調べた上でWEBデザインをやりたいということであればまたこの記事に戻ってきてください👍

WEBデザイナーになるためにすべき事

いよいよここから本題です。
「未経験の方へ」という前提で記載させていただきます。

大まかなキャリアについては、今の仕事を大きく変えず空いた時間に「勉強→転職」、「勉強→副業→独立」という流れをおすすめします。

理由は以下の通り。

・今の仕事を続けつつ勉強すれば経済的ダメージが少ない。
・2021/1現在、コロナの影響により転職市場が縮小中。
・あれ？なんかこの仕事違うなってなってもOK！失敗しても大丈夫。

今の仕事が辛い！辞める！ガッツリWEBデザイン勉強して独立してやるぜ！っていうのは時期が悪いのであまりおすすめしません。

もしすぐに独立したいということであれば、スクールやコンサルしてくれるパートナーを見つけ、プロから学べる環境を作ることをおすすめします。実績がない状態での独立は、仕事を取るのに時間がかかるためおすすめしません。経済的余裕があればOK。

勉強方法は「独学・スクール・転職」結局どれが良いの？？

当然の疑問だと思います。
こちらは私の経験も踏まえ、あなたの目指す役職別にアドバイスさせていただきます。

◆デザイナー志望の方
お金がある（借金してでも自己投資できる）ならスクールもしくはプロに教わることができる環境に身を置くことをおすすめします。

理由はデザインの根本、原理、考え方などは独学では学び難いからです。
Photoshopなどのツールの使い方は参考書やYoutubeで十分学べます。
ただ、ツールの使い方を学んだとしても、良いデザインが制作できるようになるとは限らないのです。「そもそも良いデザインとは？」がわからないまま進んでしまうと、頑張っても頑張っても成果にたどり着けない沼にハマります。

ですので、「お金があるならスクール、なければお金をまずためる（借りる）」をおすすめします。
スクールを何かと推してますが、重要なのはプロから学べる環境です。
個人のコンサルなどでもプロから学べるのであれば問題ありません。

▼参考までに私のおすすめ
※あくまで私個人のおすすめです。特にお金をもらっていたりとかはないので、他のスクール行って頂いても全然構わないです！笑

◆ガッツリ自己投資できるなら
【日本デザインスクール】
・メリット
WEBデザイナーを目指す仲間ができる。
デザインの考え方、ベースを学ぶことができる。※応用力も身に付く
他スクールだった受講生がいたりするから他スクールの話が聞けるかも？

・デメリット
お値段お高め。
一緒に受ける担当講師、チームメンバーに多少左右される。

◆費用を押さえたい場合
InstagramとかSNSで「WEBデザイン オンラインスクール」とかで調べると、個人的にレッスンしてもらえるところがあります。
数万円でプロに教わることも可能ですので、試してみるのはありだと思います。

余談ですが私も近々、学習コンテンツを作成するかもしれません。
興味がある方は私のTwitter（@Takuma_design92）をフォローしておいて頂けると嬉しいです。

そんなこと言っても金がねーんだよ！という方。わかります…！
なのでお金をかけず独学の手順も後述します。そこから、勉強を経て転職へつなげて頂くのが近道かと思います。

ちなみにデザイナーで「独学→独立」はおすすめしません。
基礎を押さえていないと、高単価の仕事の受注は難しいです。
もしそれでも挑戦するのであれば、まずはクラウドソーシング系の仕事を実際に試してからが良いと思います。

◆コーダー志望の方
コーダーは、勉強に関してはスクールに通わずとも独学でも可能だと思っています。※資金に余裕があればスクールに通うのはありです。
基礎を学んでからは経験を積んで上達していくものです。基礎自体を身に付けるのであれば独学でもいけるというのが私の見解。

ただ、やはり「独学→独立」はデザイナー同様におすすめしません。「独学→転職」or「独学→副業→独立」をおすすめします。私も実際、独学(未経験)→転職という過程を踏んでいます。

一度WEB制作会社に入るメリットは、WEB制作に必要なことが体系的に学べるんですね。要はHTML、CSS以外にも、お客様とのやりとりだったり、打ち合わせ、共同開発、Gitの使い方、デザインデータの見方、画像のかき出し方法、コーディングのお作法、ディレクション、スケジュール管理、費用見積もりなど、色々と学べるわけです。

なので勉強していきなり独立というのはお勧めしないです。
（そばに誰かサポートしてくれる方がいれば別ですが）

・余談
転職活動をする際はポートフォリオを必ず持っていきましょう。WEBサイト制作の参考書（後述）を買えば１サイトくらいは知識ゼロでも自力で作れます。多少クオリティが低くてもOKです！
なぜなら未経験者の中でポートフォリオを持ってくるのは全体の1割くらいなので、それだけで内定率がグンと上がります笑

◆ディレクター志望の方
ディレクターについては恐らく実務経験を積まないと独立は難しいかと思います。また、勉強に関してもディレクターの勉強となると少しざっくりしているので、私はまず前述の方法でコーダーになることをお勧めします。

コーダーになることによって、WEBサイトの作り方、制作工数、費用、実装機能の難易度などが徐々にわかるようになってきます。そうなってくるとお客様に自ら提案できるようになり、また、エンジニアとのコミュニケーションや進捗管理なども円滑に進められるようになってきます。

よくある話ですが、制作担当のエンジニアからディレクターにキャリアを踏む場合が多いです。それはこう言った理由も含まれています。
サイトの仕組みや見積もり、スケジュールが想定できないとディレクションが大変なのは言わずともですよね。コーダーとして2年くらい経験を積んでディレクターになるのがおすすめです。

一応補足しておきますが、コーダーにならなくてもいきなりディレクターになることは可能です。
プログラミングアレルギーの方はいきなりディレクターに転職してしまっても良いかと思います。ただ、その場合は業務の中でコーダーさんに工数や費用、仕様などを見積もってもらい、すり合わせを行いながら自身に落とし込んでいく形になると思います。
ガッツリプログラミングを勉強する必要はありませんが、結局大まかに学ぶことにはなると思います。
ちなみに経験上できるディレクターさんはほぼ全員、制作の知識を有しています。入社後でもいいので頑張って勉強しましょう！

いざ勉強！独学での勉強方法

お待たせしました。皆さんの一番知りたい情報はここかもしれません。
もしスクールに通うという選択をした方は、優先度落として頂いて構いませんのでまずはスクールで学んでください。
「未経験独学でWEBデザイナーになる」という点にフォーカスを当てて、ご紹介していきます。

◆◆デザイナーの勉強方法◆◆ーーーーーーーーーーーーーーーーーーーー

・Photoshopの使い方をマスターする
・参考書籍
・バナーをトレースしてみる
・クラウドソーシングでコンペに参加してみる
・余裕があればホームページやランディングページをトレースしてみる

解説していきます。

◆Photoshopの使い方をマスターする
まず、デザイン制作に使うツールですが、一番最初はPhotoshopで良いと思います。理由は一番応用が効く、2021年現在まだまだ主流かなと思うため。操作に慣れたらIllustratorなど徐々に使えるツールを増やしていく形です。

使い方と言っても高度な技術を覚える必要はありません。
Photoshopではどんなツールがあって、それぞれどういったことができるのかが分かってしまえば、あとは実戦で慣れていけばOKです！

おすすめの勉強教材はUdemy！
Udemyでは有料の動画コンテンツが販売されています。
ここで「Photoshop 初心者」とかで検索すると、いくつかPhotoshop実践講座のようなものが出てきます。

※注意点
・Udemyは月2回くらいセールを行います。普段2万円くらいの講座が1600円くらいまで値下げされるので、必ずセール時に買いましょう！
・最終更新が古いものはなるべく避けましょう！

ぶっちゃけどれでも良いです笑
と言いますのも、どのコースも丁寧に作られており、ツールの使い方を把握するくらいであれば、Photoshopが学べそうなコースを一つこなしてしまえば十分です。これでPhotoshopにどういったツールがあるのか、何ができるのかがざっくり学べます。わからない部分はささっと飛ばしてOKです！実践をこなせば慣れてきます。

参考までに私が受講した講座を記載しておきます。

・Photoshopマスターコース　基礎から上級まで　ステップバイステップでPhotoshopのすべてを学ぼう  村守康

◆参考書籍
最低限の知識も大事なので書籍を紹介しておきます。とはいえ、下記3冊を読んでおけばひとまず十分かなと思います。

けっきょく、よはく。 余白を活かしたデザインレイアウトの本

ほんとに、フォント。　フォントを活かしたデザインレイアウトの本

Webデザイン必携。　プロにまなぶ現場の制作ルール84

◆バナーをトレースする
これは私もデザイン学びたての頃はよくやっていました。
Photoshopの使い方をなんとなく覚えたら、「自分がいいな、これどうやってつくっているのだろう？」と思うバナーをトレース（同じものを制作）します。トレース元のバナーを探すにはPinterestがおすすめです。

ポイントは自分ができそうなものを選ぶのではなく、これ作れるようになりたい！と思うものを選んでください。明らかにクオリティが低いものをトレースしてもスキルアップに繋がらないので。

使用する素材やフォントは多少変えてもいいですが、なるべくクオリティを落とさないよう意識して作成します。デザインの再現方法がわからない場合は都度検索して調べてください。それがスキルアップに繋がります。

ツールの使い方を覚えたり制作スピード向上になるのでおすすめです。
完成したものはInstagramなどにあげてみると、同じデザイナーを目指す方からコメントがもらえたりして面白いかもしれません✨
ハッシュタグは 「#デザイン勉強中 #デザイナーさんと繋がりたい 」 などがおすすめです。

参考までに私が実際にやっていた頃のものを載せておきます。

◆クラウドソーシングでコンペに参加してみる
トレースでデザインスキルを養えたら、バナーサイズのデザインは徐々にできるようになってきます。
そしたら、あとは実践あるのみです。
まずはクラウドソーシング（クラウドワークスやランサーズ等）でコンペ形式の案件に自分の作品を出してみましょう！

最初は勇気がいるかもしれませんが、コンペ形式であれば多くの出品作品の中からお客様の選んだ良いものだけが選ばれるので、ガンガン出してみましょう！ダメ出しされることはないです！

コンペに出すメリットはこんな感じ。

・採用されればお金がもらえる！
・実際の案件に失敗を気にせず挑戦できる
・他のデザイナーさんの作品をみることができる
・自分の作品を評価できる

ここで経験を積めばスキルアップとともに、お仕事のお声がかかるかもしれません。実戦でしか学べないことも多いのでがんばってみてください！

◆余裕が出てきたらホームページやランディングページをトレースしてみる
ここまできたあなたは、ある程度バナーを制作できるようになっています。そんなあなたはホームページやランディングページのような大きなデザインを制作したいと思い始める頃かもしれません。デザインは大きいものになるにつれ難易度は上がります。しかしやるべきことは基本的にこれまでと同じです。

ホームページやランディングページのトレースをやってみる。
　↓
わからないことが出てきたら都度調べて制作してみる。
　↓
できるようになってきたらクラウドソーシングのコンペに出してみる。

でOKです！

ここで作ったものを実績やポートフォリオにまとめれば、転職活動にも活かせます！

◆◆コーダーの勉強方法◆◆ーーーーーーーーーーーーーーーーーーーーー

・WEBサイトの仕組み、作り方
・HTMLとCSSの基礎を理解する
・便利なツールを理解する
・実際にサイトを作ってみる

◆WEBサイトの仕組み、作り方
これはひとまず一記事読んでざっくり流れを把握してみましょう！

Webサイトの仕組みは？Webページの作成〜公開までの流れ

◆HTMLとCSSの基礎を理解する
まず、WEB制作におけるコーディングを行うためには、HTMLとCSSを理解しなければ始まりません。そのため、その2つが学べるサイトを紹介します。ちなみに以下のサイトは、WEB製作者は誰もが最初に通るような登竜門的存在で有名です笑

○ドットインストール
https://dotinstall.com/lessons

無料動画で学べます。全てやる必要はなく、受講すべきは以下のみでOK！

必須
・HTML/CSSの学習環境を整えよう(全5回)
・はじめてのHTML(全14回)
・はじめてのCSS(全15回)

余裕があれば
・詳解HTML 基礎文法編(全22回)
・詳解CSS 基礎文法編 (全33回)

初心者には少しボリュームがあるように感じるかもしれませんが、効率的に基礎を学べますので頑張りましょう！
下手に参考書を広げて学ぶよりはよっぽどためになります。
ポイントはなるべく自分の手を動かすことです。コードをなるべく自分で書くようにしましょう。

また、全て覚える必要はありません。中には実務で使わないものもありますので、「こんなことができるんだ」ぐらいの感覚で進めましょう。
忘れたらその都度調べれば徐々に身についていきます！


◆便利なツールを理解する
○エディタ
エディタというのは実際に効率よくコードを書くメモ帳のようなものです。エディタには種類がたくさんありますが、ぶっちゃけどれでもいいです笑。使うエディタはエンジニアの好みによって別れます。

私のおすすめは「SublimeText」です。理由は以下の通り。

・動作が軽いです
・プラグインが豊富で拡張機能が多いです
→制作スピードも向上！
・利用者が多い

設定方法に関しては以下の記事を確認すれば問題ないです。

SublimeText設定方法
SublimeText便利プラグイン

○Google Chrome Developer Tools（ディベロッパーツール）
WEB制作を行うコーダーには必須のツールです。実際のWEBサイトがどういったHTMLタグ構造になっていて、どのようなCSSが当たっているのかブラウザ上で確認できるツールになります。こちらはマストで使えるようになってください。そこまで難しいものでもないので心配しなくて大丈夫です！

ドットインストールの動画でも出てきたかと思いますが、一つだけ学習動画を紹介しておきます。

Chrome DevToolsの使い方を徹底解説！

Youtubeで検索して他の動画でも構いません。要はサイトがどういったHTML構造になっていて、どんなCSSが当たっているのか、ブラウザ上で確認できるようになればひとまずOKです！使っているうちに慣れてきます。

○FTP転送ツール
WEBサイトはコーディングを行なったファイル一式をサーバーにアップしないとブラウザで確認できません。じゃあ、どうやってやるの？って話です。
ファイルのアップにはFTP転送ツールを使うのが手取り早いです。ファイルを自分のPC（ローカル）からサーバーへドラッグ&ドロップで転送できます。

おすすめのFTP転送ツールは以下です。
インストール〜使い方までの解説記事も貼っておきます。

・WinSCP（Windows）
https://techacademy.jp/magazine/2567

・FileZilla（Mac）
https://techacademy.jp/magazine/2447

○まとめ
上記の3つのツールを使いこなすことで以下のようなことができるようになります。

・エディタで自分のやりやすいようにコーディングができる。
・ディベロッパーツールでサイトの修正箇所や修正後のイメージを把握できる。
・FTP転送ツールでファイルをサーバーにアップできる。（サイト公開）

◆実際にWEBサイトを作ってみる
ここまできたら、あなたには実際にWEBサイトを作るための最低限の知識が集まったと思います！ここからは実践していきましょう！

とはいえ、忘れていることもあると思います。何からするんだっけ…？いきなりコードは書けないよおお！って方へ。

私が未経験の頃、一番最初にサイトを作った頃の参考書をご紹介します。
私はこの本でサイトを作り、その後ポートフォリオサイトにカスタマイズし、転職活動で持っていきました。

HTML&CSSとWebデザインが 1冊できちんと身につく本

すでにここに書かれていることは「あれ？もう一回学んだことあるような？」と感じるようになっていると思います。復習しながらサイトを完成させてみましょう！
そして完成したら、テキストを変更してCSSを調整してあげれば、あなたの最初のポートフォリオサイトが完成です✨

※未経験転職を目指すのであれば、この辺りまでが必須のラインかなと思います。


○おすすめ書籍
もう一冊だけご紹介しておきます。上記の書籍はあくまで最初の1サイトを完成させるという点にフォーカスを当てています。
HTML、CSSを書籍で学びたいということであれば、以下がおすすめです。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

ここまでがコーダーとして、未経験から独学で転職まで結びつける手順になります。実際に私も同じ手順で未経験からWEB制作会社へ転職し、フロントエンドエンジニアとしてWEB制作を仕事にしておりました。

○おまけ
おすすめのIT転職エージェントです。私も実際に使いました。
ワークポート

○コーダーの勉強についての補足
HTML、CSSの勉強法をメインで紹介しましたが、PHP、JavaScript、WordPressは後回しでOKです。まずはHTML、CSSをしっかり押さえてください。よく使うHTMLタグやCSSプロパティが頭の中に入って、いちいち検索しなくてもコーディングできるくらいのレベルにして欲しいです。
そこまで来れば、他の言語の学習も並行して進めてOKです！HTML、CSSは基礎になりますので、ここが曖昧なまま他も勉強するとマジで頭が混乱します。（経験者は語る…。）

◆◆ディレクターの勉強方法◆◆ーーーーーーーーーーーーーーーーーーー
ディレクターについてですが前述の通り、私はディレクターになるにはまずWEBサイトの仕組みを理解することが重要かと思っております。故に最低限コーダーの勉強法を実践してから、コーダーを目指す、もしくはディレクター志望で転職という方法がいいのかと思います。そのため、ディレクターにコミットした勉強法は今回は割愛させて頂きますm(_ _)m

全体のまとめ

今回の記事をまとめるとこんな感じです。

・あなたの目指すものはWEBデザイナーであってますか？
・3つの役職（デザイナー、コーダー、ディレクター）でWEBデザイナーと名乗られている場合があるので注意して！あなたはどれを目指す？
・いきなり一人で「独学→独立」は難しい。もしやるなら、サポートしてくれる人を見つけて。
・どの職もプロから学べる環境が一番。（スクールでもコンサルでもOK！）
・どの職も独学可能。その後の転職で一度実務経験を積むのが私のお勧め。

これまで転職を勧めていますが、何十年も努める必要はありません。2,3年経験を積めば、技術的には独立できるレベルまで達することは可能です。

今回の記事がWEBデザイナーを目指す皆様のお役に立てば幸いです。
また、感想なども頂ければ今後の記事に活かさせて頂きます。

ここまで読んで頂きありがとうございました！m(_ _)m