【本記事を読むことによる目標到達点】
- Webデザイナー/エンジニアとして現場で働けるスキルが身に付く
- Web制作案件を受注して月収30万円以上の継続的な収入が手に入る
当メディアのWeb制作独学ロードマップは、どの有料商材よりも、どの書籍よりもわかりやすく再現性の高い内容を目指して作成し改善を繰り返しております。もちろん無料で全てを公開しています。初心者の方はSTEP1から、中・上級者の方はSTEP4からご覧いただくことをおすすめします。
この記事の信頼性(ゆうけんブログの筆者はこんな人)
- 現役Webデザイナー/エンジニアが執筆
- 継続して月収80万円超のフリーランス
- 完全未経験から独学でWeb制作スキルを習得
- Twitterフォロワー数1,900人超(→@twinzvlog_yk)
- Web制作のメンター経験多数
- 認定ランサー(ランサーズ最高ランク)
以下Twitterでの本記事の評判
web制作で稼ぎたい”未経験者”は全員見てほしい。
あとは実行するだけ。こんなに詳細に教えてくれるゆうけんさんに感謝です😭
本当に稼げるのか、未経験の僕が今日から発信していきます!
まずAdobeCCの契約・Udemy教材購入は完了した! https://t.co/d4Kx5bZdLs— マル│デザイン×マーケ (@tytmtytm) April 27, 2021
ゆうけんさんの記事すごく勉強になったし自信をもって伝えてくださっている感じが伝わってきて勇気もらえました~!私も成功体験をシェアーして人に勇気を与えられるようになりたい♩がんばるぞ~♩ https://t.co/BGlu2g676O
— miki…SHElikes (@MiiiShelikes) May 20, 2021
この記事を読んでいる時点であなたは相当な熱意と行動力をお持ちなので、確実にスキルを習得できると断言します。独学だろうが未経験だろうが関係ありません。あとはやるだけです。
前置きはここまでにして、早速ロードマップを見ていきましょう!
目次
【STEP1】Webデザインを学ぶ|Web制作独学ロードマップ
まずはじめにWebデザインの入門としてAdobeツール(Photoshop・Illustrator・Adobe XD・Dreamweaver)の使い方や豆知識を解説していきます。AdobeツールはWeb制作の現場でも当たり前に使われているので必ずマスターしましょう。全て無料で学べます。
Adobe製品をインストール
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/04/adobe_plan.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/04/adobe-complete-install.png?resize=160%2C160&ssl=1)
【無料】Adobe公式チュートリアルで基礎を習得
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/03/adobe_photoshop_tutorial.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/03/adobe_illustrator_tutorial.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/03/adobe_tutorial_xd_trail.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/03/adobe_dw_tutorial.png?resize=160%2C160&ssl=1)
Udemy講座でAdobeを完全マスター
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/04/udemy-adobe-osusume.jpg?resize=160%2C160&ssl=1)
【STEP2】コーディングを学ぶ|Web制作独学ロードマップ
次にWebデザイナーに必要なコーディングを学んでいきます。ここでは筆者が実際に使用していた『Udemy』というサービスの動画教材を使って学習していただきます。知っている方は多いかもしれませんが、Udemy講座はセール中に購入することでスクール並の内容を1,000~2,000円ほどで学ぶことができます。この機会に必ずマスターしましょう。
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/01/udemy-free-register-matome.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/01/udemy-html-css-bootstrap.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/01/html-css-javascript-udemy.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/08/udemy-course-image.jpg?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/12/udemy-wordpress-osusume.png?resize=160%2C160&ssl=1)
【STEP3】ポートフォリオを作る|Web制作独学ロードマップ
次にポートフォリオを作っていきます。ポートフォリオとは簡単にいうと実績を示すための作品集です。
自分はこれだけのことができるんだぞ!とアピールする際に使います。
もっと言うと、ポートフォリオはクライアントに自分のスキルをアピールするために重要な役割を持っています。例えば、Web制作会社にメール営業をする際にも優れたポートフォリオがあれば返信率や契約率が数倍も変わってきます。逆にいうとポートフォリオを持っていない場合、あなたがどれだけ高いスキルを持っていようが、どれだけ魅力的な人物だろうと『判断材料がない』ことで見向きもされないのでこの機会に必ず作りましょう。
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/05/kuronekoya_starter-set.jpg?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/03/WordPress-portfolio-make.jpg?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/06/cording-rules.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/03/portfolio-design-student.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/03/adobe-photoshop-make-portfolio.jpg?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/03/Illustrator-make-portfolio.png?resize=160%2C160&ssl=1)
【STEP4】案件を獲得する|Web制作独学ロードマップ
最後のステップでは案件の獲得方法を解説していきます。これまでの学習を活かして稼ぐためのステップです。筆者が実際にやってきた営業方法やその失敗談などを全て共有しているのでお役に立つはずです。ちなみにこの章で紹介する内容は有料記事として出す予定だったため、筆者が最も力を込めた『他にはない』濃厚で深みのある内容となっています。ぜひ最後までご覧ください。
(随時更新していきます。)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/04/new-web-design-freelance-job.jpg?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/04/crowdtech-review.jpg?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/08/web-designer-roadmap-img.png?resize=160%2C160&ssl=1)
【Web制作独学ロードマップの関連記事】
この章ではWebデザインで使える豆知識や素材をご紹介します。ぜひ学習に使ってみてください。
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/01/udemy-skill-13.jpg?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/07/rotate-images-animation-top.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/08/navbar-design-matome-css.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/07/click-animation-sliders-simple-material-design.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/07/hamburger-menu-3picks.png?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/07/css-effect-hover-button-animation-.png?resize=160%2C160&ssl=1)