Web制作を独学で稼げるようになるまでにやるべきこと

こんばんは、Yukiです。

Twitterで質問が多かったので、今回は【Web制作を独学で稼ぐまでの流れ】を解説したいと思います。

完全な未経験の状態の人が0からやるべきことを解説していきますので、未経験ではない方は自分の位置を見極めて読み進めていただければと思います。

結論から言うとノースキルの人でも３ヶ月くらい本気で勉強すれば月5万くらいは稼げるスキルがつきます。

スポンサードサーチ

Web制作の独学Step1

まずはこのステップの大まかな流れを解説します。１〜４の順番にやってください。

これらは１日５時間のペースだと１ヶ月程で終わるかなと思います！

1. Progate HTML&CSS
2. Progate JavaScript
3. Progate jQuery
4. Progateで学んだことを使ってHPを自作し公開

 １.Progate HTML&CSS

初級編から上級編まで（道場コース・学習コース含む）をやりましょう。

目安としてだいたい学習コースを３周、道場コースを５周くらいできれば良いかと思います。

Progate HTML&CSSの詳しい学習方法が知りたい方はこちらの記事で詳しく解説しています。

Progate HTML＆CSSコースの最も効率の良い進め方【20周して編み出した】

２.Progate JavaScript

Progate JavaScript「ES6」のⅠ〜Ⅲをやってください。

（Ⅳに関してはWeb制作ではあまり使わないのでやらなくていいです。）

JavaScriptに関してはそこまでがっつりやらなくても良いです。だいたい３周くらいして基本の文法や繰り返し処理（for文）が理解できていればOKです！

3.Progate jQuery

初級編〜上級編（道場コース含む）をやりましょう。

どのコースもそれぞれ３〜４周くらいしてレッスンの内容を覚えるというより、jQueryの基本的な書き方をマスターするようにしましょう！

レッスンの中では特に「addClass」「removeClass」あたりが重要なのでここはしっかり理解するようにしましょう。

4.Progateで学んだことを使ってHPを自作して公開

このタイミングここまでProgateで学んできたHTML&CSS、JavaScript、jQueryを使ってHPを自作し、公開しましょう。

Progateは非常にわかりやすく初心者に最適である一方、実践的な内容が学べないためここで自分でHPを作ることで実践的な内容を学んでいきます。

実践的な内容とは「エラーを自分で解決する」「環境構築をする」「検証ツールの使い方を学ぶ」などです。

HP制作の流れや注意点などに関しては下記の記事で詳しく解説しています。（下記の記事ではHTML&CSSを終えたらと書いてありますが、jQueryまで終えた方でもやることは変わらないので大丈夫です。）

ProgateでHTML＆CSSを終えた後にやるべきこと

なお、ここまでしっかり学習できた人は自分でも驚くくらいのものを作れる実力がついているので安心してください！

Web制作独学step2

ではこのステップでやるべきことをまとめます。

だいたいこれは１日５〜６時間の勉強で１〜２ヶ月くらいで終わるのが目安です。

1. ドットインストールにてBootstrap入門
2. 技術書：いちばんよくわかるHTML5&CSS3デザインきちんと入門
3. サイト模写（5〜10個）

1.ドットインストールにてBootstrap入門

BootstrapとはCSSフレームワークといってCSSをより簡単に書くためのツールです。

実案件ではBootstrapの使用を指定されることもあるので使いこなせなくてもいいので、仕組みや基本的な書き方は理解しておきましょう。

またドットインストールは動画形式のレッスンで自分で用意した環境を使うことになるので、1.stepで学んだ環境構築を使っていきましょう。

進め方に関しては、３分ほどの動画毎に自分が用意した環境でコードを書いていき、２〜３周くらいしてだいたい内容が理解できればOKです！

2.技術書：いちばんよくわかるHTML5＆CSS3デザインきちんと入門

こちらはHTML＆CSSの技術書で、そこまで難しい内容ではなく「フレックスボックス」「レスポンシブデザイン」など、より実践的な内容が載っているためProgate終わったレベルくらいの方にはちょうど良い技術書です！

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

created by Rinker

• Amazon
• 楽天市場

この技術書の進め方ですが

1周目は３０分ほどで読み流して全体像の把握をし、自分が知っている知識とそうでない知識を明確にしましょう！

2周目で自分の知らない内容が載っているところだけを熟読します。

3周目で2周目でやったところを実際にコードを書いて理解を深めます。

4周目以降は3周目と同じことを繰り返し、だいたい理解できたなと思ったら巻末にあるサンプルページを作成しましょう！

サンプルページに関してはまずはコードを書き写して完成させることで学んだ知識がどうゆう形で使われているのか理解しましょう。2回目には見本だけを見て、できるだけ正解のコードは見ずに自力で作りましょう！

2回目の作成まで終了できればOKです！

3.サイト模写(５〜１０個)

ここからはサイト模写をやりましょう。

サイト模写とはその名の通り、ソースコードは見ずに見本のサイトと全く同じにコーディングすることです。

サイトの模写はほぼ実案件とやってることは同じなので、ここまでできればHTML&CSSのコーディングに関しては自信を持って大丈夫です！

だいたい目安としては５〜１０個ほど模写やって、デザイン通り１００％同じにコーディングできるようにしましょう。

模写の詳しいやり方や細かい注意点に関しては下記の記事に詳しくまとめています。

模写コーディングのやり方とポイントを徹底解説！

スポンサードサーチ

Web制作独学step3

いよいよ仕上げに入ります。

ではこのステップでやるべきことをまとめます。

これらは大体１日５〜６時間の勉強で１ヶ月くらいが目安です。

1. Progate PHP
2. Progate Sass
3. 技術書：Sassの教科書
4. 技術書：いちばんやさしいJavaScriptの教本
5. ポートフォリオサイトの作成
6. デザインツール（フォトショ、イラレ）
7. デザインデータからのコーディング

 1.Progate PHP

Progate PHP（I、Ⅱ）をやりましょう。

ここではPHPの基本的な文法を理解することが目的です！

PHPはWeb制作でよく使われるので基本的なことはこのタイミングで理解しておくと便利です。

単純なHTML&CSSのコーディングの案件では使わないのですが、今後WordPressなどをやっていくには必要になってくるのでできればやりましょう。

進め方に関してはProgateのJavaScriptと同じ要領で進めればいいでしょう。

2.Progate Sass

SassとはCSSをより効率的に記述することができるメタ言語と呼ばれるもので、今は多くの制作会社で使われています。

ちなみにSassにはSASS記法とSCSS記法という２つの記法があり、現在ではSCSSを使うのが主流です。

使い方が少し難しいので説明しますと、まずはSCSSという記法でコードを書いていきます。SCSSで書いたコードのままではブラウザで読み込めないので、ターミナルや専用のツールを使ってSCSSで書いたコードをCSSに変換することで使えるようにしていきます。

まあ多分説明されるだけだとよくわからないと思うので、「とりあえずSCSSで書いたものは変換しないと使えないんだなー」くらいに思っておいてください（笑）

今はCSSではなく、Sassを使って書くことが主流となっているので、Sassはしっかりマスターしましょう。

Sassは大して覚えることがないのですぐに理解できると思います！

進め方に関しては、２、３周すればOKです。

なおSassで最も苦労するのは環境構築ですが、ProgateのSassの環境構築の説明はProgateにしては珍しく雑なので、次に紹介する技術書で環境構築をしてください！

3.技術書：Sassの教科書

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

created by Rinker

• Amazon
• 楽天市場

こちらはSassに関する技術書ですが、イラストや図が豊富でとても見やすく、説明も丁寧で理解しやすいです。

この技術書は環境構築を目的に使うものだと思ってください。この技術書を読んで環境構築ができ、SCSSで書いたものをCSSに変換できればOKです！

具体的に言うと、「prepros」を使ってSCSSで書かれたものをCSSにコンパイルできればOKということです。

SCSSの書き方はProgateの内容を理解して使えればOKなので、必要であれば辞書的に使う程度にとどめましょう。

4.技術書：いちばんやさしいJavaScriptの教本

ここでJavaScriptをまたやる理由はJavaScriptを使ったアニメーションをできるようにするためです。

jQueryでもアニメーションをつけることはできますが、jQueryなどでは対応できない案件は多々ありますし、実案件ではクライアントの要望によってJavaScriptだけでアニメーションをつける必要が出てくることもあります。

いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門(「いちばんやさしい教本」シリーズ)

created by Rinker

• Amazon
• 楽天市場

この技術書は僕が本屋三件回ってJavaScriptの本を２０冊くらい読み漁った中で一番わかりやすかったです。

決して全部やる必要はなく、「chapter6,7,9,11」だけで大丈夫です。

ここでJavaScriptを使ったHTML/CSSの操作の基本を覚えて、あとは案件ごとに必要なことをググりながらやっていくというのが最も効率が良い進め方です！

5.ポートフォリオサイトの作成

ポートフォリオサイトは自分はこんなものを作りましたよ！って証明するものです。

なのでフリーランスとして営業する際や、アルバイトをする際にもこういった実績がすぐにわかる制作物を持つことは非常に重要です。

このポートフォリオサイト制作ではできるなら、レンタルサーバーを使い、独自ドメインを取得し、FTPクライアントを使って公開してください。

「 レンタルサーバー」、「独自ドメイン」、「FTPクライアント」は実案件でも使うことが多いので、実案件をこなすまでに一度は触れておいた方が良いです。

ちなみにレンタルサーバー、独自ドメインは年間16,000円ほどで取得できます。

またポートフォリオサイトの作り方などに関しては下記の記事にまとめています。

ポートフォリオサイトの作り方【営業の成果を爆上がりさせる!】

ここまでくればWeb制作に関するスキルはかなり付いていると思います！

6.デザインツール(フォトショ、イラレ、XD)

最後にデザインツールです。

これあまり語られないのですが、デザインツールが使えるかどうかはかなり重要なのでフォトショップ、イラレストレーター、XDは購入し、基本的な動作は必ず使えるようにしておきましょう！

セールがやっている時で3万くらい、学生なら2万円くらいで購入できます。ちょっと高く感じますが、これがないと仕事にならないので自己投資だと思って買いましょう。

なお、本当に基本的なことさえできれば良いので２、３日勉強すれば必要なことはマスターできます。

「画像の書き出し」「デザインから字体などのCSSの取得」「長さの取得」「選択」「アートボード」「レイヤーマスク」「レイヤー」についてわかっていればOKです！

詳しく知りたい方は下記の記事にて

駆け出しのコーダーが最低限覚えておきたいデザインツールの使い方

7.デザインデータからのコーディング

追記です。

実際のコーディング案件ではデザインデータからコーディングすることになるので、デザインから必要なデータを取得してコーディングすることになります。

そしてこの作業が慣れていないと意外と時間がかかったりするので、できるなら実案件をこなす前に一度デザインデータからのコーディングを経験しておきましょう。

有料noteになってはしまうんですが、デザインデータからのコーディングですがハニワマンさんのnoteが非常にオススメです。

理由としては.psd、.ai、.xdの３つのデータが用意されており、比較的コーディングするのに簡単な内容なのでデザインデータからの流れが学びやすいのと、コーダーとしてかなりの実績を持ったハニワマンさんのコードが見ることができるからです。

＞ハニワマンさんのnoteはこちらから

長くなりましたが以上がWeb制作で稼ぐまでにやるべきことです。

まとめ

Step1

• Progate HTML&CSS
• Progate JavaScript
• Progate jQuery
• HP自作

Step2

• ドットインストール：Bootstrap
• 技術書：いちばんよくわかるHTML5＆CSS3デザインきちんと入門
• サイト 模写(5〜10個くらい)

Step3

• Progate PHP
• Progate Sass
• 技術書：いちばんやさしいJavaScriptの教本
• 技術書：Sassの教科書
• ポートフォリオサイト制作
• デザインツール（フォトショ、イラレ、XD）
• デザインデータからのコーディング

といった流れです。

Step1以外は多少やる順番が入れ替わっても問題ないと思います。

「やること多いな」という印象を受けた方もいるかと思いますが、実案件を何件も経験している見ている身からすると最低限これくらいはできないと厳しいかと思います。

またWeb制作業界は移り変わりが非常に早いので、必要な勉強については常に最新の情報を取得する必要があります。

一年前とかの記事はかなりの確率でいまはもう通用しなくなっていますし、「Progateだけやれば稼げる」というのはもう過去の話なので注意しましょう。

今回の記事は最新の動向を踏まえた情報を掲載しましたので、これからWeb制作を学びたいという方はぜひ参考にしてみてください！

長文になりましたが、最後まで読んでくださりありがとうございます。