完全初心者からWeb制作できるようになるまでの勉強方法を語る【体験談あり】

LIFE プログラミング学習方法

完全初心者でも、Web制作できるようになるんだろうか?」という質問には、たった一言でお答えできます。

大丈夫だよ!!!

僕は「エイチテーエムエル?何だそりゃ?」くらいのレベルから、独学でWebサイトを作れるようになりました。

ただ、独学は修羅の道。正しい手順で、効率的に学習しないと、必ず挫折します。

ということで、今回は「僕はこういうやり方でWeb制作できるようになったよ」というテーマでお話します。

こんな人向け

  • Web制作できるようになりたい
  • 効率的に学習を進めたい
  • 挫折しない方法で学びたい
正直、今となっては「お金を払ってでもプログラミングスクール使った方が効率的だったな」と思います。

が、当時は「ホントに自分にできるのだろうか?」という不安が大きくて、踏み出せなかったんですよね…。

過去の僕と同じように感じているなら、この記事が役立つはずです!

まずは「Web制作で何をしたい?」の答えを準備しよう!

h2用画像

プログラミングでできる事は無限大ですが、その分「あなたが何をしたいのか」が明確でないと、そもそも学習すべき分野が定まりません。

野球がしたいのに、リフティングの練習をしているようなもの。

例えば

  • Webデザイナーになりたい
  • サイトの制作をして稼ぎたい
こういった目標であれば、HTMLの基礎から学べばOKです。

他にもいろんな言語がある

  • PHP:ECサイトの開発
  • Ruby:Webアプリ開発
  • Swift:iPhone用アプリ開発
上記はザックリした説明ですが、要は「目的に応じて学ぶべき言語が違うよ」ということ。

いずれにしてもHTMLやCSSの基礎学習は欠かせないので、今回はこの部分について深掘りしていきます。

Web制作の勉強には手順がある

h2用画像

何事も基礎が大切。Webサイトを制作する上での、正しい学習順序は下記。

正しい順序

  1. HTMLの構造を理解する
  2. CSSで装飾を学ぶ
  3. 余裕があったらJavaScript
HTMLとCSSだけでも、簡単なWebサイトなら作れます。

動きのあるサイトにしたければ、JavaScriptも学べばOK。

手順①:HTMLの構造を理解する

基本的には「タグ」の意味や使い方、全体の構成を勉強するようになります。

例えば

  • h2タグ:大見出し
  • brタグ:改行
  • aタグ:リンクを張る
それぞれのタグに意味があり、それを理解して使い分けることで、HTMLの基礎ができてきます。

何はともあれ、ここは動画などで学んだ方が分かりやすい。

記事の後半でも触れますが、ドットインストールというサービスの動画がおすすめ。無料です。

手順②:CSSで装飾を学ぶ

HTMLだけで書かれたコードが「新聞」とするなら、CSSを加えることで「カラフルなチラシ」に変わります。

文字だけの媒体より、見やすく装飾されていた方が、読み手の関心をひきますよね。

CSSでできることの例

  • 文字の装飾
  • 背景色をつける
  • 位置の調整
など、「見た目を整えるため」に必要なのがCSSだと覚えておきましょう。

こちらもドットインストールで、基礎学習ができます。

手順③:余裕があったらJavaScript

サイトに動きをつけたい場合、JavaScriptを学べば解決します。

例えばこんな事ができる

  • 画面がスクロールされたら、文字にアンダーラインを引く
  • クリックされたら、メニューを展開する
誰もがWebサイトで一度は見たことのある動きですね。

HTMLとCSSの基礎ができていれば、JavaScriptも簡単です。

完全初心者だった僕がWeb制作できるようになるまでの流れ

h2用画像

独学で学習するなら、僕と同じやり方をした方が挫折しなくて済むと思います。

徐々にステップアップする感じで進めました。具体的には下記。
  1. ドットインストールで基礎学習
  2. Progateの無料体験
  3. Progateで本格的に学習
  4. Webサイトの模写
ひとつずつ深掘りしますね。

ドットインストールで基礎学習

有料プランもありますが、基礎を学ぶだけなら無料の範囲だけで十分です。

初心者はみんな最初にお世話になるサービスなので、まずはドットインストールの動画から学びましょう。

ドットインストールのメリット

  • 短い動画でポイントがまとまっている
  • レッスンの順序が分かりやすい
  • 効率的に学べる
正直、このサービスがなければ、僕は挫折していたかもしれません。

これが無料で利用できるんだから、いい時代になりましたね。

Progateの無料体験

少しステップアップしたサービスがProgateです。

ドットインストールと違う点

  • 実際にコードを書いて学ぶ
  • イラスト付きの解説が分かりやすい
やっぱり、自分で手を動かしながら学ぶのが一番理解できます。

こちらも基礎の部分は無料で学べるので、まずは「どれくらい分かりやすいか」体感してみてください。

僕は「これだけ分かりやすいなら、課金しよう」と決断しました。

Progateで本格的に学習

月額980円で、あらゆる言語が学び放題です。

ポイント

  • 集中的に短期間で学べば、課金額も少なくて済む
  • プログラミングスクールを利用するよりも、圧倒的に安上がり
独学でやるなら、最低でもこれくらいの投資は必要。1,000円以上する参考書を買うくらいなら、実践的なProgateに課金した方が効率的です。

まずは無料で試してみて、課金するかどうか判断すると良いでしょう。

>>Progateの公式サイト

Webサイトの模写

Progateのレッスンを全て完了させれば、簡単なWebサイト制作はできるようになっています。

ここからは実践として、既にあるWebサイトを模写して、ひたすら練習しましょう。

Webサイト模写の必要性

  • 分からないことを自分で調べるクセがつく
  • 新しいコードを知れる
  • 「これくらいのサイトは作れますよ」という証明ができる
プログラミング学習では、コードを「覚えよう」としますが、ガチでそれは不要。

現役のエンジニアでさえ、分からないことはその都度ググっています。

自分で調べ、解決できるようになれば、自走できるエンジニアになったも同然ですよ。

ブログで発信すれば知識が定着しやすい

僕はプログラミング学習と同時に、当ブログの運営も始めました。

理由

  • 記事を書く事で、知識が定着しやすくなる
  • もし忘れても、自分の記事を読み返せば、すぐに思い出せる
ブログとプログラミングは相性が非常に良いです。

ワードプレスのカスタマイズには、HTMLとCSSの基礎知識が必要なので、どちらも学ぶのはおすすめです。

Web制作での稼ぎ方

h2用画像

ある程度の実力がついてきたら、いよいよ案件を受注してお金を稼ぐ段階です。

稼ぎ方については、大きく2つ。
  • アウトソーシングサービス
  • フリーエージェント・求人サイト
個人で直接営業をかけて案件を受注する人もいますが、ちょっとハードルが高いので、まずはこういったサービスを利用するのが一般的です。

稼ぎ方①:アウトソーシングサービス

Web上に掲載されている案件の中から、自分ができそうなものを見つけて、応募していく感じですね。

代表的なサービス

あまり多くのサービスに登録したところで、あまり意味がないので、上記2つでOK。

フリーランスで生活している人は、ほとんどどちらかのサービスを利用しています。

稼ぎ方②:フリーエージェント・求人サイトを使う

アウトソーシングサービスと違う点は、「エージェントが企業とのマッチングをしてくれる」という部分。

プロが自分の実力に合わせてマッチングさせてくれるので、初心者には心強いですよね。

おすすめのフリーエージェント・求人サイト

有料級のサービスですが、費用は全くかからないので、ひとまず登録だけしておくと良いでしょう。

実績があるとマッチングされやすいので、模写したWebサイトをポートフォリオ化させておくのがおすすめ。

プログラミングスクールを利用するのが一番安心

h2用画像

さて、ここまでは僕の体験談を含めて解説してきましたが、今思うのは「やっぱり初心者はスクールを利用した方がいい」です。

理由

  • 稼ぐ実力を最短で手に入れるには、プロに教えてもらう必要がある
  • 短期間で集中して学んだ方が、時間もコストも抑えられる
  • 就職したあとは、スクール費用なんてすぐ回収できる
「あんなに頑張ったけど、やっぱり自分には無理なんだ…」と挫折する人は、独学で間違った勉強を続けた結果です。

努力も時間も無駄にするくらいなら、お金を払ってでも、プロの力を借りるべき。

最短で実力をつけ、就職すれば、プログラミングスクールの費用なんて一瞬で回収できます。

オンラインで完結するプログラミングスクール

  • Skill Hacks:天才プログラマーの迫さん(@yuki_99_s)が運営していて、初心者が選ぶ定番スクール
  • TechAcademy Pro:転職保証付きなので、本気の人はコレ
  • Tech Boost:独自の人材マッチングサービスがあり、卒業後はすぐにエンジニアとして就職可能
独学でやりきる自信がある人は、まず自分の力だけで試してみるのが良いと思います。

途中で挫折しそうになったとき、プログラミングスクールという手段が残されていることだけは、覚えておいて下さい。

まとめ:独学でもWeb制作できるけど、結構しんどいよ!

h2用画像

今回は「僕はこういうやり方でWeb制作できるようになったよ」というテーマでお話しました。

時間の有り余ってる大学生とか、最初からプログラミングスクールを利用している人だと、1〜2ヶ月で実践レベルに到達する人もいます。

僕の場合は、1年近くかかりました…。

独学で辛かったこと

  • バグが見つからない
  • エラーの原因が分からない
  • 見たことないコードの登場でパニック
半角スペースが、全角スペースになっているだけでエラーが発生する世界。たったこれだけのミスを見つけるのに、1~2時間費やすんですよ。

独学って、これが辛いんです。この苦行に耐える覚悟があれば、独学でも全然大丈夫!

でももし、過去の僕に声が届くなら「いいからプログラミングスクールを使え」と言いますね。

>>Tech Boostで無料相談してみる

人気記事【本気で転職したい人向け】おすすめのプログラミングスクールは3つだけ【独学はダメ】