みなさんこんにちはふっかるノマドのたいぺーです！
本日の記事ではweb制作で稼げるようになるための教材をレベル別に紹介していきたいと思います。
・レベル別に最適の教材を紹介
・この記事で紹介している教材をこなすだけでweb制作で稼げるスキルがつく
・読者のみの豪華特典をプレゼント
全くの初心者レベル
全くの初心者だという方でも心配しないでください！
今の時代全くの初心者からでもweb制作に必要なスキルを取得することはできます。
事実、僕はweb制作に必要なスキルだけで言えば2ヶ月で取得しました。
そんな僕が全くの初心者の時からお世話になった教材やwebで稼げるようになった今「いいな」と思う教材を紹介します！
と、その前にまずはこの教材について説明する前にweb制作で稼ぐために最低限必要なスキルを軽く紹介していきたいと思います。
・HTML/CSS(bootstrap)…webサイトの見た目を作る
・JavaScript(jQuery)…webサイトに動きを加える
・PHP…サイトを見た人と繋がれるようになる、wordpress制作
ざっくり言うとこんな感じです。（PHPはできなくても案件はありますが、できた方が単価が上がります。）
これを踏まえた上でこれらのスキルを学べる教材を紹介していきます。
prorate
言わずと知れたweb制作初心者のためのバイブル的教材です。
progateのすごいところは先ほど上げたweb制作のための全てのスキルの基礎をprogate上だけで学べるというところです。
月額980円しますが十分その価値があります。
正直、今僕の周りでweb制作で稼いでいる人のほとんどはprogateを使って勉強しています。
本気でweb制作のスキルを学びたいと思っている人は課金しちゃいましょう。
下記僕がprogateでやったほうがいいと思うコースを紹介していきます。
・HTML/CSS 中級編まで（道場編含む）
・JavaScript I〜IVまで
・jQuery 中級編まで（道場編含む）
・PHP I〜IVまで
いずれのコースも2週ほどやったら大丈夫かと思います。
ここで覚えておいて欲しいのは、ここで完璧に理解しなくても大丈夫だということです。
正直僕もこのレベルの時はあまり理解せずに進んでましたw
あとで詳しく説明しますが、この時十分理解することよりも、とにかく自分で既存サイトなどを利用して模写して勉強するほうが力がつくので…
とはいえ、progateは最初の導入部分としてとても優れたサービスです。概要を理解するという程度で使用してください。
ドットインストール
こちらは無料で学習できるサービスです。
動画を見ながら自分で手を動かしながら勉強できるのでお勧めです。
progateでは解説されていない、web制作のために必要な環境を整える方法などやbootstrapという簡単にサイトを作れるようになる講座もあるのでprogateで足りないところを補うのに最適だと思います。
bootstrapの講座はこちら
HTML/CSSやJavaScriptなどのコースなどもありますがprogateである程度理解ができてるならやらなくても大丈夫だと思います。
・progate
・ドットインストール
でweb制作の基礎を習得！！
これだけでこの段階で必要なレベルには十分いけます！
progate、ドットインストールが終わったレベル
まだこの段階では十分なスキルがついたとは思えない人がほとんどだと思います。
なのでここからはより実践的な内容に入っていきます。この段階をクリアすれば簡単な案件であれば受注することも十分可能です！
web制作のスキルを伸ばすのに何が一番いいかってとにかく模写することだと僕は思います。
この段階ではとにかく模写しまくって実務レベルで生かせるスキルをつけていきましょう。
まずは下記ドットインストールを見ながら前の「全くの初心者レベル」で身につけたHTML/CSSなどを使って一から自分でサイトを作る環境の準備をしましょう。
↓windowsでの環境の準備
↓macでの環境の準備
こちらで準備ができたら今から紹介する教材を使って実際にサイトを模写してみてください。
はにわまんさんのnote模写
まずはこちらです。
このnoteはprogate初級レベルが終わった人向けに作られています。
実務になったら必須になってくるデザインカンプからの模写が学べるので早いうちからやっておいて大丈夫かと思います。
実ははにわまんさんのnoteを一番最初に持ってきたのには理由があります。
このnoteにははにわまんさんが実際にコーディングしたファイル、いわば正解が付いてきます。
どうせいつかやるならはじめのうちからプロのコーディングを見て身につけておいたほうがいいです。
ちづみ(@098ra0209 )さんのnote模写
続いてはこちら
こちらもprogateのHTML/CSSが終わった人向けに作られています。
・ちょうどよいレベル感
・サイトが可愛い
・ポートフォリオとして掲載可能
と最高の内容になっています。
ポートフォリオとして掲載可能というのは後々案件を受注する時に助かります。
web制作をしていく上で後々自分のポートフォリオサイトというのを作ることになるのですが、その際に制作物を記載していいというのは大きなメリットになります。
ちづみさんのnote模写part2
こちらは先ほどの「コーディングの練習ならこれやってみて！（初級編）」の続きとなっています。
ちづみさんのレベル設定って本当に絶妙で先ほどの初級編よりも少し難易度が上がっています。
このレベルの模写ができればかなり実践レベルにも近づいていると思います。
こちらもポートフォリオ掲載可能なようです。さすが！
たいぺー（@taipei_freedom）のサイト模写
上記3つのサイト模写をすればHTML/CSSは十分実務レベルで使いこなせるようになっているのではないかと思います。
次はJavascript(jQuery)を使ってサイトに動きをつけていきましょう。
その際に模写して欲しいのがこちらのサイトです。
はい、僕のポートフォリオサイトですねw
このサイトの中では結構動きがつけられていますので最初のJavaScriptの練習には十分良いんじゃないかなと思います。
突然ですがここで！！ここまでこの記事を読んで頂けたみなさんだけにプレゼントがあります！
この僕のポートフォリオサイトも
・練習模写としてポートフォリオへの掲載
・直接自分のポートフォリオサイトに
することをOKにします！
普通、ポートフォリオサイトに掲載するのはOKでも直接ポートフォリオサイトにしてしまうのをOKにしていることはあまりないですよ。優しい！！w
写真や文章などは自分の物に変えて自分のポートフォリオサイトにしちゃってください。
ただし以下注意点を守ってください。
①練習模写として使用する際
・LP（https://taisei-work.com)の画像キャプチャを掲載する形での公開をお願いします。
・その際には(https://taisei-work.com)が元ページであるようにわかるように記載し、リンクを貼ってください。
・キャプチャタイトルは「taisei-portfolio模写制作LP」とし、クライアントさんに模写制作ということがわかるようにしてください。
②直接自分のポートフォリオサイトにする場合
・ソースコードの完コピは禁止です。
・footer部分の「©︎Taisei Sakamoto All Rights Reserved」は変更しないでください。
・footer部分の「©︎Taisei Sakamoto All Rights Reserved」をクリックすると「https://taisei-work.com」へリンクできるようにしておいてください。
僕サイトをお手本にしてポートフォリオサイトを作ってくれた方はtwitterでメンションしていただけたら拡散します！(フォロワー1860人）(@taipei_freedom)
iSaraLP模写
こちらは実際にiSaraが使っているサイトなのでより実践的な内容になっています。
こちらのLPもポートフォリオへの掲載が可能です。
ただし注意点があるので下記ツイートを参照してください。
https://twitter.com/Keisukexlife/status/1068728920931856385?ref_src=twsrc%5Etfw
ここまでできるようになればもう実際に案件を受注しても十分大丈夫かと思います！
実際に僕が初めて頂いた案件はiSaraLPが自分でできれば十分大丈夫な内容でした。
模写が終わったレベル
すでに先ほどの模写を全てこなした人であれば十分案件を受注することが可能です。
そこで、ここからは単純にお金を稼ぐという段階からさらにレベルアップして単価を上げるというレベルに入っていきます。
具体的にはWordPressでサイトを作れるようになるのが目標です。
pluser
こちらのサイトは全てサイト内でWordPressを学べるようになっています。
体系的にwordpress制作を学ぶことができるのでとても良い教材だと思います。
こちらのサイトを自分で完成させることができたら十分wordpress案件（高単価）も受注できるかと思います。
クラウドソーシング
あとはとにかく実践を積むだけです。
ここで大事なのは案件を見て自分の力で7〜8割ほどできそうだと思ったらすぐ提案することです。
7〜8割できるなら今の時代解決策はネットに載っているのでなんとか完成させることができます。
そしてなによりそういう案件の方が自分が一番成長できるからです。
そんなので大丈夫なのと思われるかもしれませんが僕はweb制作始めた時からそのマインドでやってきて全てどうにかなっていますw
その他おすすめの本
ここまでくれば十分実務でも大丈夫だと思いますが、一応その他お勧め書籍を紹介します。
こちらは必須ではありませんが、不安であればやってみてください。
こちらはHTML5/CSS3の本。本に沿っていくだけで一つのサイトを作ることができるので体系的に学びたいという方にお勧めです。
こちらはwordpress取得のための本ですね。
先ほどの「Plusers」をやればある程度は大丈夫ですが、こちらもさらに体系的に学びたいという方にはお勧めです。
僕はwordpressをやっていてわからないところが出てきた時にこの本で調べるようにしています。
まとめ
何度も言いますがこれらの教材を全て自分の力でこなすことができれば実際に案件を受注することは可能です！
今回の記事で紹介した教材
「progate」…980円/月
「Photoshop、Illustrator、XDからのコーディングに慣れよう！」…980円
「コーディングの練習ならこれやってみて！（初級編）」…800円
「コーディングの模写ならこれやってみて！（中級編）」…1500円
合計4260円でweb制作のためのスキルがつくと思ったら安い買い物だと思いませんか？
今の時代学ぶことに対するコストはどんどん下がっているので学びたいと思った時に即学び始めるのがいいと思います！
web制作で50,000円稼ぐまでの道のりや模写する際の注意点などはこちら
