こんなお悩みありませんか？
・webデザイナーになりたいが、何から勉強すれば良いか分からない
・現場での必須スキルが分からない
・どうやってwebデザイナーとして就職するのか？
本記事ではこういった疑問に答えていきます！
私（筆者）も3年前までは普通のサラリーマンでした。そこからスクールなどには通わず独学で勉強し、web制作会社にwebデザイナーとして入社し、現在は独立しフリーランスとして3年目を迎えました。当時行っていた勉強法から、今のweb業界の現状も含めて解説していきます！
本記事ではデザインとコーディングの両方を勉強すると仮定しご説明させて頂きます。私も最初の目標はwebデザイナーとしてまずは会社に入ることだったのですが、その先は独立しフリーランスとして働くことだったのでWebサイト制作を一人で完結する必要がありました。また会社でも、デザイナーはコーディングのことも、コーダーもデザインのことを理解していると連携などがスムーズです。ですので私は、デザイン・コーディングの両方を勉強することをオススメします！
独学でwebデザイナーになるための必要最低スキルとその勉強順序
webデザイナーになるための必要最低スキル
デザイナーとコーダーではもちろんですが、使用するツールが異なってきます。現場などで一般的に使用されるツール（コーディングだと言語）は下記になります。他にも覚えることはたくさんありますが、あくまでも独学で最低限のスキルで雇用してもらえるのを目標としたスキルとなります！
【デザイン/ツール】
・PhotoShop
・Illustrator
・Adobe XD
・Figma
【コーディング/言語】
・HTML 5
・CSS 3
・JavaScript(JQuery)（※もし余裕があれば）
勉強順序は？
私が勉強を行っていた全体の流れとしては、
- コーディングの勉強をして、webサイトの構造（作り方）を知る
- 実際にサイトデザインを作ってみる（サイト模写でもOK）
- デザインしたものを、コーディングしてみる
という流れで実際に習得していきました！
これを参考にして勉強しよう！それぞれに応じた勉強方法
コーディング勉強方法
ドットインストール
私はコーディングに関してはこちらのドットインストールで勉強しました！（多分Progateはその頃ありませんでした）
動画で解説しながら進めていくので、参考書などより自分はかなり進めやすかったです。
今は項目が新しくなっているのですが【ウェブサイトを作れるようになろう】という項目は一通り勉強する形が良いかと思います！
Progate
こちらは私がwebデザイナーになれた後にできたサービスなのですが、知人に教える際は現在こちらもオススメしています。
HTML&CSSコースと、余裕があればJQueryコースまでできると良いと思います！これらを勉強後、個人差はありますが簡単なLP（ランディングページ）くらいはコーディングできるまでになっていました！
サイト模写コーディング
ドットインストールやprogateが終わると、だいたいHTMLとCSSの基礎は理解出来たかと思います。その次は実践に近い形で勉強していくことをオススメします。といってもいきなり、世に落ちているサイトを模写してコーディングは難しいかと思います。そんな方の為に、コーディング練習用のサイトデザインを作成いたしました！ここからデザインの素材等はダウンロードできるので、実際に見た目通りにコーディングすることができるか、腕試ししてみましょう！
デザイン勉強方法
どれにでも共通して言えることなのですが、まずは基本的な操作ができるようになるのが第一歩です。例えばですが、サイトなどでよくある「もっと読む >」みたいな遷移ボタンをささっと作れるようになるくらいまでは触れるようになりましょう。
PhotoShop
Photoshopでデザインカンプを作成している制作会社さんは多いと思います！ですのでIllustratorより、PhotoShopの方が使用頻度は高いイメージです。
ー初期設定について
【かんたん】デザインカンプに使用するツールや設定についてわかりやすく図解します！ | もぐもぐ食べるおいしいwebデザイン。 | もぐでざ
ー基本操作紹介ページ
【ゼロからのPhotoshop】基本的な使い方から本格的な写真加工・合成テクニックまで
Photoshop初心者のための基本操作 13の練習
Illustrator
Illustratorの使い所ですが、私は装飾パーツなどを作成する際に使用します！ですので正直私は最初の段階では全然といっていい程触れませんでした（笑）
ですので、基本的な操作を覚えるくらいで最初は良いと思います。
イラストレーターの使い方！初心者のための25の基本スキルマスター方法 | Skillhub[スキルハブ]
Illustrator初心者が最初にマスターしたい機能10選 | 株式会社LIG
Adobe XD
AdobeXDですが、私はデザインカンプ作成の際メインで使用しています！操作もしやすく、フレーム作成からデザイン作成まで手軽にできますので是非覚えましょう！
【初心者向け】Adobe XD基本の使い方を紹介！UI/UXデ…｜Udemy メディア
Adobe XDチュートリアル | Adobe XDの使い方
デザインについての参考書
ノンデザイナーズブック
私はデザインの専門学校にいった訳では無いので、全くデザインについての知識もありませんでした。
調べるとよく出てくるのが、「ノンデザイナーズブック」です。私も購入してみたのですが、一番購入してよかったと思っています！
内容としては、デザインの基本原則について書かれています。基本的なことなのですが、なぜこういった配置が良いのかなどが理解できます。これのおかげでデザインをする際に、この場合はどういった形が良いのかという判断ができるようになりました。
Webデザインの基本（きちんと入門）
ノンデザイナーズブックはデザインについての基礎でしたが、こちらの本はwebデザインについての基礎情報が書かれています。色・レイアウトの原則や視線の誘導の仕方など色々と細かく書かれているので、初学者にはもってこいの一冊だと思います！
上記がある程度上達すれば、いざwebデザイナーへ
ここまで勉強し、自分でデザインしたものをコーディングできるレベルになれば、webデザイナーとしては働くチャンスはかなり増えます！
私も実際ににここくらいまでのスキルで転職活動を始めました。実際会社に入ってからは毎日が勉強みたいなものなのでかなり成長できます。ですので、早くその環境に飛び込むことに越したことはありません。
しかし未経験ではすんなり雇って頂ける訳ではありません。ここで僕は色々な転職・派遣エージェントに登録し、気になるところがあればすぐに面接を組んでもらってました。それを根気よく続けた結果、web制作会社に派遣でしたが雇用して頂けました！
私が転職活動の際には見つけられていなかったのですが、オススメは【IT求人ナビ】です！ITに特化しているので、話もスムーズに進めることが出来ます。
またスキルカウンセラーに相談することによって、ご自身のスキルに応じて紹介をして頂くことが出来ます。加えて入社後に、教育を受けれるような企業を紹介頂けるので、働いてからもスキルを磨けます！
会員登録も簡単で30秒で登録できるので、とりあえず登録しておくことをオススメします！
おまけに
やっぱり自分では勉強できない、難しいという方にはTECH CAMP デザイナー転職もオススメしています。
TECH CAMPといえば、プログラミングやデザイナーの教養・転職では言うまでもなく最大手です。こちらはスクールになるのですが、最短で実力・知識をつけたい方はオススメです。
現在無料カウンセリングを行っているので、是非無料相談だけでもいってみてはいかがでしょうか？
独学でのwebデザイナーというのは必ずしも簡単ではありませんが、全然不可能ではありません。しっかり行動して、コツコツと頑張りましょう！
