2019年5月2日2みなさんこんにちはふっかるノマドのたいぺーです!本日の記事ではweb制作で稼げるようになるための教材をレベル別に紹介していきたいと思います。まとめ全くの初心者レベル全くの初心者だという方でも心配しないでください!今の時代全くの初心者からでもweb制作に必要なスキルを取得することはできます。事実、僕はweb制作に必要なスキルだけで言えば2ヶ月で取得しました。そんな僕が全くの初心者の時からお世話になった教材やwebで稼げるようになった今「いいな」と思う教材を紹介します!と、その前にまずはこの教材について説明する前にweb制作で稼ぐために最低限必要なスキルを軽く紹介していきたいと思います。・HTML/CSS(bootstrap)...webサイトの見た目を作る・JavaScript(jQuery)...webサイトに動きを加える・PHP...サイトを見た人と繋がれるようになる、wordpress制作ざっくり言うとこんな感じです。(PHPはできなくても案件はありますが、できた方が単価が上がります。)これを踏まえた上でこれらのスキルを学べる教材を紹介していきます。prorate言わずと知れたweb制作初心者のためのバイブル的教材です。creative.https://prog-8.comProgateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。progateのすごいところは先ほど上げたweb制作のための全てのスキルの基礎をprogate上だけで学べるというところです。月額980円しますが十分その価値があります。今僕の周りでweb制作で稼いでいる人のほとんどはprogateを使って勉強しています。本気でweb制作のスキルを学びたいと思っている人は課金しちゃいましょう。下記僕がprogateでやったほうがいいと思うコースを紹介していきます。I〜IVまでいずれのコースも2週ほどやったら大丈夫かと思います。ここで覚えておいて欲しいのは、ここで完璧に理解しなくても大丈夫だということです。僕もこのレベルの時はあまり理解せずに進んでましたwあとで詳しく説明しますが、この時十分理解することよりも、とにかく自分で既存サイトなどを利用して模写して勉強するほうが力がつくので...とはいえ、progateは最初の導入部分としてとても優れたサービスです。概要を理解するという程度で使用してください。usersドットインストールhttps://dotinstall.com3分動画でマスターする初心者向けプログラミング学習サイトです。Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができます。こちらは無料で学習できるサービスです。動画を見ながら自分で手を動かしながら勉強できるのでお勧めです。progateでは解説されていない、web制作のために必要な環境を整える方法などやbootstrapという簡単にサイトを作れるようになる講座もあるのでprogateで足りないところを補うのに最適だと思います。bootstrapの講座はこちらHTML/CSSやJavaScriptなどのコースなどもありますがprogateである程度理解ができてるならやらなくても大丈夫だと思います。完全な初心者レベルまとめ・progate・ドットインストールでweb制作の基礎を習得!!これだけでこの段階で必要なレベルには十分いけます!progate、ドットインストールが終わったレベルまだこの段階では十分なスキルがついたとは思えない人がほとんどだと思います。ここからはより実践的な内容に入っていきます。この段階をクリアすれば簡単な案件であれば受注することも十分可能です!web制作のスキルを伸ばすのに何が一番いいかってとにかく模写することだと僕は思います。この段階ではとにかく模写しまくって実務レベルで生かせるスキルをつけていきましょう。下記ドットインストールを見ながら前の「全くの初心者レベル」で身につけたHTML/CSSなどを使って一から自分でサイトを作る環境の準備をしましょう。(全4回)https://dotinstall.com/lessons/basic_pcsetup_win初めてHTML/CSS入門を受講する方に向けて、必要なツールや設定について解説していきます。(全4回)https://dotinstall.com/lessons/basic_pcsetup_mac初めてHTML/CSS入門を受講する方に向けて、必要なツールや設定について解説していきます。こちらで準備ができたら今から紹介する教材を使って実際にサイトを模写してみてください。はにわまんさんのnote模写まずはこちらです。pocketsPhotoshop、Illustrator、XDからのコーディングに慣れよう!|はにわまん|notehttps://note.mu/haniwaman/n/nefa48db83682Webコーダーの仕事は、デザイナーさんの作成したデザインカンプをHTMLやCSSのマークアップでWeb上に再現することです。デザインカンプはAdobe製品のPhotoshop、Illustrator、XDで作成されることが多く、コーダーはそれらのデザインカンプから正確な値を取得して再...このnoteはprogate初級レベルが終わった人向けに作られています。実務になったら必須になってくるデザインカンプからの模写が学べるので早いうちからやっておいて大丈夫かと思います。実ははにわまんさんのnoteを一番最初に持ってきたのには理由があります。このnoteにははにわまんさんが実際にコーディングしたファイル、いわば正解が付いてきます。いつかやるならはじめのうちからプロのコーディングを見て身につけておいたほうがいいです。)国内外を旅しながらサイト制作で生計をたてています。コーディングの練習用のための初級、中級はあるのですが、今回はもっとコーディングに挑戦しやすいように、入門編のデザインを作ってみまし...こちらもprogateのHTML/CSSが終わった人向けに作られています。・サイトが可愛い・ポートフォリオとして掲載可能と最高の内容になっています。ポートフォリオとして掲載可能というのは後々案件を受注する時に助かります。web制作をしていく上で後々自分のポートフォリオサイトというのを作ることになるのですが、その際に制作物を記載していいというのは大きなメリットになります。web制作で生計を立てながら国内外をノマドしているものです。この中級編は「コーディングの練習ならこれやってみて!(初級編)」の次のステップの難易度で作成しております。ポートフォリオを増やしながら練習した...こちらは先ほどの「コーディングの練習ならこれやってみて!(初級編)」の続きとなっています。ちづみさんのレベル設定って本当に絶妙で先ほどの初級編よりも少し難易度が上がっています。このレベルの模写ができればかなり実践レベルにも近づいていると思います。こちらもポートフォリオ掲載可能なようです。上記3つのサイト模写をすればHTML/CSSは十分実務レベルで使いこなせるようになっているのではないかと思います。次はJavascript(jQuery)を使ってサイトに動きをつけていきましょう。その際に模写して欲しいのがこちらのサイトです。PORTFOLIOhttps://taisei-work.com坂本大成のポートフォリオです。お仕事依頼はこちらからお願いします。はい、僕のポートフォリオサイトですねwこのサイトの中では結構動きがつけられていますので最初のJavaScriptの練習には十分良いんじゃないかなと思います。・直接自分のポートフォリオサイトにすることをOKにします!普通、ポートフォリオサイトに掲載するのはOKでも直接ポートフォリオサイトにしてしまうのをOKにしていることはあまりないですよ。優しい!!w写真や文章などは自分の物に変えて自分のポートフォリオサイトにしちゃってください。以下注意点を守ってください。・LP(https://taisei-work.com)の画像キャプチャを掲載する形での公開をお願いします。・その際には(https://taisei-work.com)が元ページであるようにわかるように記載し、リンクを貼ってください。・キャプチャタイトルは「taisei-portfolio模写制作LP」とし、クライアントさんに模写制作ということがわかるようにしてください。・ソースコードの完コピは禁止です。Reserved」は変更しないでください。Reserved」をクリックすると「https://taisei-work.com」へリンクできるようにしておいてください。pocketsiSara[イサラ]|バンコクのノマドエンジニア育成講座https://isara.lifeiSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。今なら月15万円稼げるま...こちらは実際にiSaraが使っているサイトなのでより実践的な内容になっています。こちらのLPもポートフォリオへの掲載が可能です。注意点があるので下記ツイートを参照してください。https://twitter.com/Keisukexlife/status/1068728920931856385?ref_src=twsrc%5Etfwここまでできるようになればもう実際に案件を受注しても十分大丈夫かと思います!実際に僕が初めて頂いた案件はiSaraLPが自分でできれば十分大丈夫な内容でした。模写が終わったレベルすでに先ほどの模写を全てこなした人であれば十分案件を受注することが可能です。そこで、ここからは単純にお金を稼ぐという段階からさらにレベルアップして単価を上げるというレベルに入っていきます。具体的にはWordPressでサイトを作れるようになるのが目標です。pocketsPlusershttps://plusers.net常にスキルをプラスしていく人のためのWeb情報サイト~WordPressを中心にPHP・HTML・CSS・Javascriptを使ったWEBのノウハウを紹介~こちらのサイトは全てサイト内でWordPressを学べるようになっています。体系的にwordpress制作を学ぶことができるのでとても良い教材だと思います。こちらのサイトを自分で完成させることができたら十分wordpress案件(高単価)も受注できるかと思います。クラウドソーシングあとはとにかく実践を積むだけです。ここで大事なのは案件を見て自分の力で7〜8割ほどできそうだと思ったらすぐ提案することです。7〜8割できるなら今の時代解決策はネットに載っているのでなんとか完成させることができます。なによりそういう案件の方が自分が一番成長できるからです。そんなので大丈夫なのと思われるかもしれませんが僕はweb制作始めた時からそのマインドでやってきて全てどうにかなっていますwその他おすすめの本ここまでくれば十分実務でも大丈夫だと思いますが、一応その他お勧め書籍を紹介します。こちらは必須ではありませんが、不安であればやってみてください。こちらはHTML5/CSS3の本。本に沿っていくだけで一つのサイトを作ることができるので体系的に学びたいという方にお勧めです。こちらはwordpress取得のための本ですね。先ほどの「Plusers」をやればある程度は大丈夫ですが、こちらもさらに体系的に学びたいという方にはお勧めです。僕はwordpressをやっていてわからないところが出てきた時にこの本で調べるようにしています。現在、web制作で生きているフリーランスです。色々なことに興味が出てくるお年頃なのでたくさんのことにチャレンジしています。【注意点あり!!】アメリカで取得した運転免許を日本の免許に外免切り替えしてみた。