見出し画像
Photo by chicori_3_3

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

KojimaKohei


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

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



独学できるかどうかはその人次第。

よって、再現性があるか？と聞かれたら「向き不向きがある」と答えます。


様々な要因から「独学に向かない人」もいると思っていて、そんな人はプログラミングスクールに通うのが効果的なのでしょう。


あくまでも僕が行ってきた経験談を元に解説しますので、

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


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

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



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

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

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


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

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



プログラミングの仕組み

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


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

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


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

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


とりあえず言われた通りコードを書いていれば、Webサイトは作れます。

しかし、実務ではトラブルはつきものですし、トラブルを解決するためには、基礎知識は必要不可欠だったりします。


ここでは、「基礎知識を甘く見ない」ことを意識しつつ、仕組みをしっかり理解しましょう。

サーバー、クライアント
フォルダ、ディレクトリ
プロトコル、HTTP
IPアドレス、DHCP　など


より詳しく知りたいという方は、「Webを支える技術」がおすすめです。

いきなりは難しいかもしれないので、HTMLやCSSなどを書き始め、実務に触れるようになってから読んでもOKだと思います。


Progateで一通りの言語を学ぶ

HTML.CSS
Javascript
jQuery


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

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



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

Sass
コマンドライン
mysql
PHP

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


まずCSSの基本を学び、その後でSassを学んでみるのも一気に進めるか、じっくり進めるかはその人の進め方次第ですので、理解度に合わせて調整していきましょう。


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




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

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


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

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


個人的な意見ですが、「数をこなせば、知識はあとから付いてくる」と思っています。はじめは全然理解できなくても、焦らず、まずは手を動かしていきましょう。



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

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

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

僕が主に見ていたのは以下の動画です。

HTML/CSSの学習環境を整えよう [Windows編] (全5回)←自分の環境
HTML/CSSの学習環境を整えよう [macOS編] (全5回)←自分の環境
Visual Studio Code入門 (全13回)
詳解CSS セレクター編 (全12回)
詳解CSS フレックスボックス編 (全16回)
詳解CSS レスポンシブウェブデザイン編 (全8回)
実践！アプリ紹介ページを作ろう (全16回)
Chrome Developer Tools入門 (全10回)


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


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


詳解CSS セレクター編 (全12回)
詳解CSS フレックスボックス編 (全16回)
詳解CSS レスポンシブウェブデザイン編 (全8回)
Chrome Developer Tools入門 (全10回)


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


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


おすすめは、VSCodeです。


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



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

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

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


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


とにかく手を動かす　→　スキルがつく
不明点は自分で調べる　→　理解が深まる
実務に近い方法で学ぶ　→　即戦力のスキルがつく
成果物が出来上がる　→　自信がつく


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


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

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


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


Udemyの講座を利用する

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



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

実践Webサイトコーディング講座　｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう


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

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


実務に近い形で学習を進めることができるのでポイントですね。

デザインカンプを使ったコーディング教材って、Udemyの中でも実はあまりなかったりするので、コーディングの流れを理解するのにおすすめの教材です。


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


コードの内容はさておいて、基本の書き方を総復習するにはうってつけだとおもいます。


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

僕は、30DAYSトライアル　といって、無料の学習コンテンツを使ってWeb制作を学びましたが、今は有料となっています。　→　デイトラ


今は、コーディングするためのデザインが無料や破格で公開されているので、まずは低額から学習を始めることができます。


コーディング教材をまとめたNoteはこちら



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

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


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


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


独学で学習をすすめるなら、WordPressの教科書がおすすめです。




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

かなり細かく解説されているので、この本をこなせばWordPressの基本は問題ないでしょう。



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

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

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

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


しかし、模写制作物は著作権の関係上「自分の作品」としてポートフォリオに載せることができません。

練習でやるならいいですが、やり過ぎても時間が勿体無いなーと今更後悔してますｗ


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


例えば、

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

といった感じです。


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

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



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

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



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

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


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

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


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


レストランサイトの例

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



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

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

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

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



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


他にも、コーポレートサイトとか、

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


WordPressのブログテーマを作る


ポイントとしては、以下のあたりかなーと思います。

JavaScriptでよく使う機能を実装する（モーダル、スライダー、スティッキーヘッダー等）
CSSアニメーションを実装
カスタム投稿やカスタムフィールドを使う



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


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

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



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


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


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

Web制作であれば、デイトラが業界最安値で間違いなくコスパいいのでおすすめです。


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

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

サポートいただければ嬉しいです。