完全初心者からWeb制作できるようになるまでの勉強方法を語る【体験談あり】
「完全初心者でも、Web制作できるようになるんだろうか？」という質問には、たった一言でお答えできます。
大丈夫だよ！！！
ただ、独学は修羅の道。正しい手順で、効率的に学習しないと、必ず挫折します。
ということで、今回は「僕はこういうやり方でWeb制作できるようになったよ」というテーマでお話します。
こんな人向け
- Web制作できるようになりたい
- 効率的に学習を進めたい
- 挫折しない方法で学びたい
が、当時は「ホントに自分にできるのだろうか？」という不安が大きくて、踏み出せなかったんですよね…。
過去の僕と同じように感じているなら、この記事が役立つはずです！
まずは「Web制作で何をしたい？」の答えを準備しよう！
プログラミングでできる事は無限大ですが、その分「あなたが何をしたいのか」が明確でないと、そもそも学習すべき分野が定まりません。
例えば
- Webデザイナーになりたい
- サイトの制作をして稼ぎたい
他にもいろんな言語がある
- PHP：ECサイトの開発
- Ruby：Webアプリ開発
- Swift：iPhone用アプリ開発
いずれにしてもHTMLやCSSの基礎学習は欠かせないので、今回はこの部分について深掘りしていきます。
Web制作の勉強には手順がある
何事も基礎が大切。Webサイトを制作する上での、正しい学習順序は下記。
正しい順序
- HTMLの構造を理解する
- CSSで装飾を学ぶ
- 余裕があったらJavaScript
動きのあるサイトにしたければ、JavaScriptも学べばOK。
手順①：HTMLの構造を理解する
基本的には「タグ」の意味や使い方、全体の構成を勉強するようになります。
例えば
- h2タグ：大見出し
- brタグ：改行
- aタグ：リンクを張る
何はともあれ、ここは動画などで学んだ方が分かりやすい。
記事の後半でも触れますが、ドットインストールというサービスの動画がおすすめ。無料です。
手順②：CSSで装飾を学ぶ
HTMLだけで書かれたコードが「新聞」とするなら、CSSを加えることで「カラフルなチラシ」に変わります。
CSSでできることの例
- 文字の装飾
- 背景色をつける
- 位置の調整
こちらもドットインストールで、基礎学習ができます。
手順③：余裕があったらJavaScript
サイトに動きをつけたい場合、JavaScriptを学べば解決します。
例えばこんな事ができる
- 画面がスクロールされたら、文字にアンダーラインを引く
- クリックされたら、メニューを展開する
HTMLとCSSの基礎ができていれば、JavaScriptも簡単です。
完全初心者だった僕がWeb制作できるようになるまでの流れ
独学で学習するなら、僕と同じやり方をした方が挫折しなくて済むと思います。
- ドットインストールで基礎学習
- Progateの無料体験
- Progateで本格的に学習
- Webサイトの模写
ドットインストールで基礎学習
有料プランもありますが、基礎を学ぶだけなら無料の範囲だけで十分です。
ドットインストールのメリット
- 短い動画でポイントがまとまっている
- レッスンの順序が分かりやすい
- 効率的に学べる
これが無料で利用できるんだから、いい時代になりましたね。
Progateの無料体験
少しステップアップしたサービスがProgateです。
ドットインストールと違う点
- 実際にコードを書いて学ぶ
- イラスト付きの解説が分かりやすい
こちらも基礎の部分は無料で学べるので、まずは「どれくらい分かりやすいか」体感してみてください。
僕は「これだけ分かりやすいなら、課金しよう」と決断しました。
Progateで本格的に学習
月額980円で、あらゆる言語が学び放題です。
ポイント
- 集中的に短期間で学べば、課金額も少なくて済む
- プログラミングスクールを利用するよりも、圧倒的に安上がり
まずは無料で試してみて、課金するかどうか判断すると良いでしょう。
Webサイトの模写
Progateのレッスンを全て完了させれば、簡単なWebサイト制作はできるようになっています。
Webサイト模写の必要性
- 分からないことを自分で調べるクセがつく
- 新しいコードを知れる
- 「これくらいのサイトは作れますよ」という証明ができる
現役のエンジニアでさえ、分からないことはその都度ググっています。
自分で調べ、解決できるようになれば、自走できるエンジニアになったも同然ですよ。
ブログで発信すれば知識が定着しやすい
僕はプログラミング学習と同時に、当ブログの運営も始めました。
理由
- 記事を書く事で、知識が定着しやすくなる
- もし忘れても、自分の記事を読み返せば、すぐに思い出せる
ワードプレスのカスタマイズには、HTMLとCSSの基礎知識が必要なので、どちらも学ぶのはおすすめです。
Web制作での稼ぎ方
ある程度の実力がついてきたら、いよいよ案件を受注してお金を稼ぐ段階です。
- アウトソーシングサービス
- フリーエージェント・求人サイト
ハードルが高いので、まずはこういったサービスを利用するのが一般的です。稼ぎ方①：アウトソーシングサービス
Web上に掲載されている案件の中から、自分ができそうなものを見つけて、応募していく感じですね。
代表的なサービス
フリーランスで生活している人は、ほとんどどちらかのサービスを利用しています。
稼ぎ方②：フリーエージェント・求人サイトを使う
アウトソーシングサービスと違う点は、「エージェントが企業とのマッチングをしてくれる」という部分。
おすすめのフリーエージェント・求人サイト
- レバテックフリーランス
：業界最大級の案件数
- at-engineer
：丁寧なサポートが評判
- エンジニアルート
：コラムを読むだけでも勉強になる
実績があるとマッチングされやすいので、模写したWebサイトをポートフォリオ化させておくのがおすすめ。
プログラミングスクールを利用するのが一番安心
さて、ここまでは僕の体験談を含めて解説してきましたが、今思うのは「やっぱり初心者はスクールを利用した方がいい」です。
理由
- 稼ぐ実力を最短で手に入れるには、プロに教えてもらう必要がある
- 短期間で集中して学んだ方が、時間もコストも抑えられる
- 就職したあとは、スクール費用なんてすぐ回収できる
努力も時間も無駄にするくらいなら、お金を払ってでも、プロの力を借りるべき。
最短で実力をつけ、就職すれば、プログラミングスクールの費用なんて一瞬で回収できます。
オンラインで完結するプログラミングスクール
- Skill Hacks
：天才プログラマーの迫さん（@yuki_99_s）が運営していて、初心者が選ぶ定番スクール
- TechAcademy Pro
：転職保証付きなので、本気の人はコレ
- Tech Boost
：独自の人材マッチングサービスがあり、卒業後はすぐにエンジニアとして就職可能
途中で挫折しそうになったとき、プログラミングスクールという手段が残されていることだけは、覚えておいて下さい。
まとめ：独学でもWeb制作できるけど、結構しんどいよ！
今回は「僕はこういうやり方でWeb制作できるようになったよ」というテーマでお話しました。
僕の場合は、1年近くかかりました…。
独学で辛かったこと
- バグが見つからない
- エラーの原因が分からない
- 見たことないコードの登場でパニック
独学って、これが辛いんです。この苦行に耐える覚悟があれば、独学でも全然大丈夫！
でももし、過去の僕に声が届くなら「いいからプログラミングスクールを使え」と言いますね。