独学

【無料】完全未経験からのプログラミング独学方法まとめ【 Web制作】

悩む人
悩む人

未経験からプログラミングを勉強したいけど、どんなやり方がいいのかな?
Progateをやってみたけど、その後にどんなステップを踏めばいいのか具体的に知りたい

 

こんな質問に答えたいと思います。

 

結論から言うと、

しっかり基礎をこなして、手を動かしていけばスキルは身に付きます。

 

この記事を書いている僕は、

完全未経験からプログラミング学習3ヶ月で、Web制作会社に転職することができました。

この経験を元に、完全未経験からプログラミング(Web制作)を独学した方法についてご紹介します。

 

ぶっちゃけ独学できるかどうかは、向き不向きがあるので、あくまでも僕が行ってきた経験談を元に解説してます。

「参考に」していただき、自分のロードマップに落とし込んでいただければ幸いです。

 

 

この記事の内容は下記の通り。

  1. プログラミングの基礎を学ぶ
  2. 作りながら学ぶコンテンツで深く学ぶ
  3. 手を動かして成果物を作る

プログラミングの基礎を学ぶ

Webサイトを作っていくには、やはり基礎を知っておく必要があります。

料理を作るのに、塩と砂糖の使い方がわからないと、美味しい料理は作れませんよね?

 

基礎編の具体的な手順は下記の方法です。

  1. プログラミングの仕組みをざっくり把握する
  2. Progateで大枠を掴む
  3. ドットインストールでもう少し詳しく学ぶ

 

プログラミングの仕組み

最低限、Webサービスやアプリが動いている仕組みを理解しておくことです。
こちらの動画がわかりやすいので、おすすめしておきます。

基本ですが、まずはこの辺りから抑えていきましょう。

実際にサーバーを触らないにせよ、基本的なところは知っておいたほうがいいと思います。

 

この動画だけだと不十分な部分もあるので、

Web制作だけでなくプログラミング全体に必要な基礎のリテラシーを詰め込んでくれる本がこちらです。

 

まず初めは、こんな感じなのか〜とざっくり把握しておくことが大事かなーと思います。

 

 

Progateで一通りの言語を学ぶ

  • HTML.CSS
  • Javascript
  • jQuery

 

まずはココまで全コースこなしましょう。

先に進めていくと有料な部分もありますが、ここは渋らずにサクッと課金した方が速いと感じてます。

書籍1冊分と考えれば、圧倒的にコスパいいですので、よく考えてみてくださいね。

 

【プログラミング】初学者の勉強で「完璧な理解」は無意味です【手を動かす】プログラミング学習で初心者がハマりがちなのが、「分からないところは全部理解したい」と思ってしまい、なかなか先に進めないことです。 ...

 

後で必要になってくる知識として、下記のものがあります。

この辺りもProgateで学べるのですが、一気にいろんな知識を入れると混乱するので、あとで紹介するWordPressと一緒に習得するといいです。

 

基本に慣れてきたら、Sassを学んでみるのもいいかと思います。

  • Sass
  • コマンドライン
  • mysql
  • PHP

 

ここで学んだ知識を使えば、簡単なWebサイトを制作することが可能です。

 

Progateをこなす上でのポイント

  1. スライドを見まくる
  2. 答えを見てもオッケー
  3. 道場コースまでこなす

です。

わかるまで何周もするのはNGで、Progateは大枠を掴むためにこなしましょう。そのため、スライドや答えを見てもオッケーです。

手を動かして「こうすればこう動く」と雰囲気を感じるのが大事です。理論は後からで大丈夫。

 

→ Progate

 

【プログラミング学習】Progateを1週した後のおすすめ教材HTML/CSSコースを完走しました! 今の理解度は30%くらいなので、Progate2週目に突入です! プログラミ...

 

ドットインストールでもう少し詳しく学ぶ

Progateだけだと、理解できなくて何周もしたり、わかった気になってしまうことも多いです。

次はドットインストールでもう少し詳しく学習していきます。

見るべきなのは下記の動画です。(一部有料)

 

ちょっと多くない?と思ったかもしれませんが、1つの動画が短いのでサクッと終わります。

 

「どうしても多すぎて大変」という人は下記の動画だけでも見ておいてください、このあたりはかなり重要です。

 

Progateではブラウザ上で学習を進めてきましたが、実際に作業するのは自分のパソコンです。

 

ドットインストールのメリットとしては、動画を見ながら自分のパソコンで作業することで「テキストエディタに慣れる」ことだと思ってます。

おすすめは、VSCodeです。

 

【プログラミング】VSCodeの便利なショートハンド【効率化】プログラミングに必要不可欠なのがテキストエディタ。 僕がおすすめしているのが、VisualStudioCodeと言う無料の...

 

紹介した動画は月額1,080円のプレミアム会員になる必要がありますが、動画を見終わって必要なければ退会すればOKですし、他にもたくさん動画があるので、見てみる価値はあるかと思います。

 

 

作りながら学ぶコンテンツで深く学ぶ

ここまで長かったですね、お疲れ様です。

さて、ここからは実際に「作って学ぶ」工程に入っていくので楽しくなってきます!

この過程でのポイントはこんな感じかと思います。

とにかく手を動かす → スキルがつく

不明点は自分で調べる → 理解が深まる

実務に近い方法で学ぶ → 即戦力のスキルがつく

成果物が出来上がる → 自信がつく

 

手を動かして見てもわからない部分は、自分で調べて解消していきましょう。

具体的な方法は下記の通りです。

  1. Udemyの講座を利用する
  2. 無料の学習コンテンツを利用する
  3. WordPressを学んでスキルアップする

②が一番おすすめですが、僕は全部やって来たので全て紹介しておきます。

 

技術書も取り入れたいって人は下記の記事を参考に選んでみてください。

【初心者向け】プログラミング学習を効率的に!挫折しない技術本の選び方 こんな質問に答えたいと思います。 この記事を書いている僕は、30代未経験からプログラミング学習を開...

 

Udemyの講座を利用する

Udemyは「作って学べる教材」がたくさんあり、プログラミング初学者からは好まれています。

僕が実践した講座は下記の講座です。

 

Web制作の現場では、Adobeの PhotoShopなどのデザインツールで作られた「デザインカンプ」を元にコーディングを行うのですが、

こちらの講座ではデザインカンプのサンプルを使って、実際にサイトを作っていくことができます。

 

実務に近い形で学習を進めることができるので、コーディングの流れを理解するのにおすすめの教材です。

PhotoShopをダウンロードしておく必要がありますが、無料体験でもOKなのでダウンロードして試してみてください。

Adobeの無料体験版のダウンロードはこちらから

 

無料の学習コンテンツを利用する

もっともおすすめなのが、東京フリーランスさんの30DAYSトライアルです。

こちらもデザインカンプからのコーディングを進めていく学習コンテンツなのですが、無料で質が高いです。

コーディングスキルを身につけるなら、ぜひやるべきでしょう。

 

30DAYSトライアルは3つの工程に分かれており、ここまで学習を進めて来られた方であれば、途中から実践しても問題ないでしょう。

下記の記事から順番に進めていきましょう。

ここまでで、HTMLCSS、jQueryのスキルは身につくはずです。

 

注意点としては、②のBootstrapです。

こちらの課題は、YouTube動画を見ながらサイトを作っていくのですが、結構詰まる人が多いです。

 

実は、BootstrapをWeb制作の現場で使うことは滅多にありません。こんなものもあるんだなーと知っているくらいでOKです。

詳しくは、別の記事で解説していますので、読んでみてください。

 

【プログラミング初心者へ】Bootstrapに詰まっている時間は無駄【次へ進もう】 こんなお悩みをお持ちの方に、当記事を書いています。 Bootstrapの学習を進めている方が多いなーと感じ...

 

この段階で、「動きのあるHTMLサイトがコーディングできる」スキルが身についているはず。

ですが、市場で求められているスキルはもう一段階上のスキルが必要です。

 

※30DAYSトライアルがアプリになりました!

学習状況の管理もしやすいので、おすすめです。

→ デイトラ

 

WordPressを学んでスキルアップする

WordPressとは、オープンソースのブログ投稿管理システム、CMS(コンテンツ管理システム)です。

サイトやページ制作に必須となるHTML/CSSなどの技術が無い人でも簡単にサイトを管理したり、記事投稿ができるため、個人のブロガーから企業まで幅広く利用されています。

世界中のサイトのおよそ4分の1はWordPressで構築されていると言われているので、Web制作の現場では必須のスキルと言えますね。

 

【仕組みを知る】WordPressって何?ってとこからはじめよう こんな質問にお答えします。 この記事を書いている僕は、 Web制作会社に務める現役のWebコ...

 

WordPressのスキルを身につけるには2つの手順をオススメしています。

  1. 30DAYSトライアル3rd
  2. WordPressの教科書

 

30DAYSトライアル3rd

30DAYSトライアル3rdは、WordPressを学びながらブログテーマを作ることができます。ブログテーマを作ることで、WordPressの基礎を知ることができるので、まずはやってみましょう。

 

phpというプログラミング言語を使いますので、HTMLCSSと進んで来た人が直面するのは「PHP難しすぎ」問題です。

 

どうしてもわからないなら一旦飛ばしてもいいですし、コミュニティで質問してみましょう!

悩んでいる時間は無駄ですよ。

→ 30DAYSトライアル3rdへはこちらから

 

WordPressの教科書

さて、ブログテーマの作り方は一通り学びました。

実務となった時に、WordPressのブログテーマを作ることはあまり無いはずですので、今度は企業サイトを作る練習をしましょう。

 

そこで、おすすめなのがWordPressの教科書です。

30DAYSトライアルでは手が届かなかった部分まで細かく開設されているので、この本をこなせばWordPressの基本は問題ないでしょう。

 

手を動かして成果物を作る

ここまで学習サイトや書籍を使って、作りながら学んで来ました。

ここからは、実際に自分で成果物を作ってみましょう。

一番手軽なのはサイト模写です。

模写の方法については以下の記事で解説していますので、参考にしてみてください。
ポイントは、「なるべく実務に近づける」です。

 

【HTML・CSS】効果的な模写制作の方法について考えてみた「コーダーとしてスキルを上げたい」と思った時、効果的なアウトプットの方法が既存サイトの模写制作ですね。 未経験からだと実績もありま...

 

しかし、模写制作物は著作権の関係上「自分の作品」としてポートフォリオに載せることができません。
練習でやるならいいですが、やり過ぎても時間が勿体無いなーと今更後悔してますw

スキルを伸ばしつつ、成果物を作る最適な方法は、「自分の作品を作ること」だと思います。

 

例えば、

  • WordPressブログテーマを1から作ってみる
  • 架空のサイトを制作してみる

といった感じです。

「そんなこと言われてもデザインもできないし、どうすりゃいいの?」

って思うかもしれませんが、簡単なアウトプットの方法をご紹介します。

 

「サイトのデザインを模写」して、

「コンテンツはオリジナル」に作り変えて架空サイトを作る

 

今あるサイトをデザインから全て模写すると、それは「模写制作」ですが、

「デザインは参考にしつつ、コンテンツはオリジナル」であれば、成果物になります。

 

ポートフォリオサイトを凝って制作してもいいですが、

良質なポートフォリオサイトを作るよりも、成果物の質の方が大事だと思っています。

 

どうやって作っていくのか?
例をあげて説明していきましょう。

WordPressテーマの例

僕がアウトプットの為に作成したワードプレスブログテーマです。

参考にしたブログは manablogです。

30DAYSトライアルとはまた違ったレイアウトにして、シンプルにまとめました。

 

レストランサイトの例

全体画像はこちら

架空レストランサイトです。

 

参考にしたサイトはこちら。

京都・祇園の和食「祇園うえもり」

雰囲気も全く違いますが、なんとなくデザインは似てますよね。

ヒーローイメージと、スティッキーヘッダーの練習の為に作成しました。

 

大枠はいいとこ取りして、あとはテキストや全体的な色調を微調整すればOK。

ゼロベースから作ることで、自分の頭で考えながらコードを書いていくのでめちゃくちゃ勉強になるのでおすすめです。

 

手を動かして壁を乗り越えよう

かなり長くなってしまいました。。まとめます。

 

基礎を学ぶ

→プログラミングの仕組みをざっくり把握する

→Progateで大枠を掴む

→ドットインストールでもう少し詳しく学ぶ

 

作りながら知識を蓄積する

→Udemyの講座を利用する

→無料の学習コンテンツを利用する

→30DAYSトライアル3rd

→WordPressの教科書

 

自分の作品を作る

→模写+架空サイト制作

 

こんな感じで学習を進めていけば、間違いなくWeb制作会社でコーダーとして勤務しても問題ないレベルだと思います。

転職活動時の面接でも、かなり高評価をいただいたので、この学習方法で進めていけば間違いなく内定はもらえるでしょう。

 

詳しくはこちらの記事で↓

【30歳でも可能】未経験からコーダー転職!応募から内定までの記録実務未経験からコーダーとして内定をもらうことに成功しました。 30歳という一般的には年齢のハンデはありつつも、8社応募して...

 

完全未経験でも、スクールに入らずに独学でプログラミングスキルを習得することは可能です。

ただ独学できるはどうかは、ぶっちゃけ向き不向きがあるので、それを判断する意味でも「無料教材を活用して判断材料として使う」のはとっても大切なことです。

 

まじで独学無理ってなれば、結局エンジニアになれば回収できる金額なので、スクールを検討した方が効率的です。

 

こちらの記事も一緒にどうぞ。

【環境を変える】プログラミング学習でやる気が出ない時の対策【挫折しない】 こんな質問にお答えします。 結論から言うと、環境を変えることで人は変わることができます。 ...

 

【環境を変える】プログラミングの学習効率を上げる最も簡単な方法 こんな質問にお答えします。 先日、下記のようなツイートをしてまして、コレが結論です。 爆速で成長する...

 

【注意】初心者がプログラミング独学するなら「他人との比較」は捨てようわりと「人との比較」をしてしまってる人が多いなーと感じてます。 結論から言うと、無意味です。今すぐやめましょう。 今回は、 初心者がプログラミングを独学する上で大切な注意点について解説していきたいと思います。...

 

 

さて、

これを読み終わったら、あとは行動するのみです。

まずはProgateから始めましょう。