Web制作

【初心者向け】Web制作を独学する方法【未経験でも仕事が取れる】

この記事では、

「Web制作初心者なんだけど、独学する方法が知りたい、、、」

「最低限仕事を獲得するにはどんなことをやればいいの、、、?」

こんな疑問にお答えしていきます。

本題に入っていく前に、軽く僕の自己紹介。

  • Web制作未経験から独学でエンジニアになった
  • 新卒から年収400万円もらえる話をいただいている

未経験&独学にしては割と良い結果が出せているかなと。

というわけで、この記事では未経験からでも仕事を獲得することが出来る学習フローチャートについて解説していきます。

実際に僕がやってきた学習方法なので、信頼できる情報です。

ちなみに、TechAcademy [テックアカデミー]というオンラインのプログラミングスクールでも学習可能です。(※無料体験&学割あり)

フロントエンドコースを受ければ案件を受けれるレベルにはなります。

「独学では挫折してしまいそう、、、」という方は、TechAcademy [テックアカデミー]を利用するのがおすすめです。

では、記事に入っていきます(/・ω・)/

この記事の内容
  • WEb制作で学ぶべきこと
  • Web制作を独学するための学習フローチャート
  • Web制作について学習するのはコスパが良い

WEb制作で学ぶべきこと


Web制作について学習するにしても、「何をやったらいいの、、、」なんて状況に陥っているかもしれません。

実際に仕事を取れるようになった僕からすると以下が出来れば大丈夫ですね。

WEb制作で学ぶべきこと
  • HTML
  • CSS
  • JavaScript(JQuery)
  • PHP
  • Sass
  • SQL
  • Bootstrap
  • Flexbox
  • WordPress

現時点では、何のことか分からないかもしれませんが、やっていく内に分かるようになります。

スキルレベルなどについては後述していきますが、大体3ヶ月ほどあれば全て出来るようになりますね。

「うわっ、、、やること多すぎ、、、」となっているかもしれませんが、実際にやってみると割とすぐ出来るようになります。

これほど短期間で仕事が出来るようになれるのってエンジニア以外には無いと思うので、かなりコスパ良いです。

では、具体的な学習フローチャートについて以下で詳しく解説していきます。

Web制作を独学するための学習フローチャート


学習フローチャートとしては以下の通り。

Web制作の学習フローチャート
  • Progateをやる
  • 開発環境を構築する
  • Bootstrapの学習をする
  • Flexboxの学習をする
  • Photoshopの使い方を覚える
  • WordPressの学習をする

では、一つずつ具体的に解説していきます。

Progateをやる


Progateとは、オンラインの学習サイトですね。

現時点では14種類のレッスンがあり、色々なプログラミング言語について学ぶことが出来ます。

レッスンをクリアするごとにレベルがアップしていくので、ゲーム感覚でやれますよ。

とりあえず、Progateで以下のコースを2~3周しましょう。

  • HTML & CSS(初級~上級)
  • jQuery(初級~上級)
  • PHP(I~IV)
  • Sass
  • SQL

最初は無料で出来るのですが、途中から有料になってきます。

まずは無料でお試ししてみて、続けられそうだったら課金すれば良いかと。

有料会員を使ってみた感想については以下に書きました。

Progateは以下から無料でお試し出来ます。

>>Progateを無料でお試してみる

開発環境を構築する

Progateはインターネット上でプログラミングが出来るのですが、実際に開発をするときにはパソコン上で行う必要があります。

それゆえ、開発環境を構築する必要がありますね。

開発環境と聞くと難しく感じてしまう方もいるかもしれませんが、全然大丈夫です。

具体的には、「エディタ」と呼ばれるメモ帳の強化バージョンみたいなものをパソコンにインストールするだけですね。

主要なエディタとしては、「Atom」、「Sublime Text」、「Visual Studio Code」の3つがありますが、個人的には「Sublime Text」をおすすめしたいです。

サクサク動いて使いやすいですね。

インストール方法については以下の記事を参考に。

「Sublime Text」のインストール方法

一応他のエディタのインストール方法も以下に置いておきます。

他のエディタのインストール方法

Bootstrapの学習をする

既にProgateが終わっている方だったら、Web制作についての基礎の部分については出来ていますね。

次は、Web制作を行うにあたってかなり便利な「フレームワーク」について勉強していきます。

「フレームワーク」とは、制作の効率を大幅に上げるツールだと思っておけば大丈夫です。

僕が説明するよりも実際に使ってみた方が理解も早いので、早速学習していきましょう。

Web制作で使われる代表的なフレームワークは「Bootstrap」です。

具体的な学習ステップとしては以下の通り。

Bootstrapの学習ルート

では、具体的に解説していきます。

ドットインストールで基礎について学ぶ

ドットインストールとは、オンラインの学習コンテンツですね。

基礎的な部分については、ドットインストールでカバー出来ます。

具体的には、以下の講座を使いましょう。

ドットインストールのおすすめ講座

動画で分かりやすく解説しているので、すんなり理解することが出来ます。

Youtubeで「Bootstrap」のチュートリアルについて学ぶ

次は以下の動画を真似してコーディングしましょう。

英語の教材ではありますが、「Bootstrap」の使い方について学ぶことが出来ます。

英語が苦手な僕でも出来たので、臆せずやって大丈夫です。

Udemyで「Bootstrap 4 From Scratch With 5 Projects 」を学習する


Udemyとは、オンラインの学習サイトです。

動画で学ぶことが出来るので、すんなり理解出来ますね。

具体的には、「Bootstrap 4 From Scratch With 5 Projects」という講座をやりましょう。

5つのサイト制作を通して、「Bootstrap」について理解できる講座です。

Udemyはセール時に安く買うことが出来るのですが、1000円台なら迷わず買っていいですね。

働けば余裕で取り返せますし、僕の周りの結果を出している人で自己投資を渋る人はいません。

個人的にかなり役にたった教材の一つなので、胸を張っておすすめ出来ますね。

以下からページへ飛べます。
>>>Bootstrap 4 From Scratch With 5 Projects を見てみる

Flexboxの学習をする

「Flexbox」とは、レイアウトを整えるときに使う機能ですね。

とはいえ、ここまで学習してきた方だったらそこまで難しくないと感じるかと。

「Bootstrap」と重なる部分があるので、取っ付きやすいと思います。

具体的には以下の本がおすすめです。

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

この本をやれば、Flexboxについては理解出来ますね。

HTML/CSSの復習も合わせて行うことが可能です。

実際に僕もやってみましたが、デザインが綺麗で分かりやすいと感じました。

感想については以下の記事でも触れています。

Photoshopの使い方を覚える

Web制作の現場では、Photoshopというデザインツールが良く使われていまして、学習はほぼ必須ですね。

コーダーでも簡単なデザインをしたりすることもあるので、きっちり学習しておきましょう。

具体的には、Udemyの「未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース」で学習すれば良いです。

Photoshopの使い方を実践的に学ぶことが出来ます。

実際にWebサイトを作るところまで学べますが、Webデザイナーでないなら深いところまでやる必要は無いので、「実践Webデザイン」の部分はやらなくても大丈夫です。

講座のレビューを見たい方は以下の記事を参考に。

WordPressの学習をする

WordPressとは、ブログや企業のサイトで使われるソフトウェアですね。

具体的な学習法としては、2冊ほど本をやれば大丈夫です。

WordPressレッスンブック

created by Rinker
¥3,024
(2019/06/25 14:53:54時点 Amazon調べ-詳細)

初心者におすすめなのは、この本です。

WordPressのオリジナルテーマを作ることが出来ます。

基本的な部分については、かなり抑えられますね。

内容については割と簡単なので、すんなり理解できます。

やってみた感想については以下の記事に詳しく書きました。

本格ビジネスサイトを作りながら学ぶ WordPressの教科書2

こちらの本は中級者向けの本となっています。

WordPressのカスタマイズなどを行えますね。

割と難しいので、「WordPressレッスンブック」をやってからの方が良いです。

やってみた感想については以下の記事に書きました。

Web制作について学習するのはコスパが良い


とりあえず、上記をやれば仕事獲得は可能ですね。

結構多いように感じるかもしれませんが、実際にやってみるとそこまでの量ではありません。

3ヶ月ほどあれば全部出来ると思うので、ゴリゴリ学習していきましょう。

世の中には、医者や弁護士などの職業がありますが、割と学習コストが高めです。

しかし医者や弁護士と比べると、エンジニアはかなり少ない学習コストで職を得ることが出来ます。

控えめに言ってコスパ良すぎなので、Web制作の学習をするのはおすすめですね。

というわけで、この記事はここでおわりとなります。

ありがとうございました~。

Web制作の独学を終えたら、次はポートフォリオサイトを作成を行いましょう。

就職するにせよ、フリーランスになるにせよ、ポートフォリオサイトは必須と言っても過言ではありません。

以下の記事より、ポートフォリオサイトの作り方について解説しているのでぜひ。

【簡単】ポートフォリオサイトの作り方【デザイン知識は不要です】どうも、「なか」です。 この記事では 「ポートフォリオサイトが作れない、、、」 「デザインの知識がないから、サ...
RELATED POST