Webサイトをコーディングできるようになるまでの方法が知りたい。
独学だけで作れるようになりますか？
このような悩みに答えます。
本記事の信頼性
私はプログラミングの勉強を初めて3ヶ月で、以下のスキルを身に着けました。
- HTML
- CSS
- PHP
- JavaScript
- jQuery
- WordPress
もちろん独学で、かかったお金は1万円以内です。
スクールに通えば月に数回の授業でウン十万とかかるので、それに比べるとかなり経済的かつ効率的にプログラミングを学習できたと思います。
そんな私が、Web制作ができるようになるまでに行った学習ロードマップを公開します。
このロードマップの順に学習を進めて、以下の画像のようなブログサイトを自分でイチからデザイン・コーディングまでできるようになりました。
上記のサイトは、このMAKOTO×BLOGの以前の姿で、今は別のブログテーマの切り替えましたが、初めて作ったサイトにしてはなかなかのクオリティだったと思います。（ちゃんとブログとしても機能していたので）
その実際のロードマップは以下の通りです。
Web制作学習のロードマップ
- ProgateのHTML、CSSコース
- Progateの道場コース
- ドットインストールのHTML、CSS
- 忍者CODE
- サイト模写
順番に解説していきます。
WEB制作学習のロードマップ１．ProgateのHTML、CSSコース
progateとは
プログラミング言語をゲーム感覚で楽しく学べるサイト。
さらに、わかりやすいスライドで解説してくれるので、かんたんに理解できるようになっています。
「Progate」は、これからプログラミングを始める初心者にとっては、ベストな教材といえます。
「なんとなくweb制作について学んでみたいな〜」という考えの人も、まずはprogateで遊んでみて、プログラミングの楽しさに触れてみましょう。
progateを進めていくうちに、
「HTMLやCSSってこういうものか！」
と分かってきます。
まずは、
「プログラミングのことは、なんとなく分かった。」
「でも、１人で１からコードを書けと言われたらできない」
このくらいのレベルで大丈夫です。
Progateについて詳しくは、以下の記事で解説しています。
WEB制作学習のロードマップ２. Progateの道場コース
次にProgateの道場コースです。
正直、今のレベルでは、道場コースは基本的に詰みます...
これは、あなたの勉強が足りていないのではなく、道場コースが難しいことが原因です。
今までのコースでは、コードの書き方を手とり足取り教えてくれていたのに、道場コースになったとたん、
「さあ、書けるもんなら書いてごらん」
と言わんばかりに、突き放してくるからです。
もし、今までの知識で、なんとなく進められるようならそのまま進めてみましょう。
もちろん完璧である必要は全くなくて、何なら、答えをそのまま写経するのでも大丈夫です。
手を動かしているとなんとなく分かって来ます。
「全く理解できなかった。何をしたらいいかわからず固まってしまった。」
そういった方、全く問題ありません。
道場コースは難易度は難しいです。
普通の人はそんなもんです。
気にせず、次に進みましょう。
WEB制作学習のロードマップ３. ドットインストールのHTML、CSS
Progateはもちろん優秀な教材です。
しかし、完璧ではありません。
そこを補完するために、「ドットインストール」という教材を利用します。
ドットインストールとは
動画でプログラミングが学べるサイト。
１つの動画が、2~3分と短く、サクサク勉強できます。
ドットインストールの勉強方法は、
動画を見ながら手を動かすこと
手も動かすことで、記憶に残りやすくなります。
ただ、細かい書き方まで覚えなくて良くて、だいたいのコードはテキストエディタの補完機能でなんとかなります。（自動で正しいコードに修正したり、予測変換したりできる機能）
だから、コードを一字一句完璧に覚えようとしなくても大丈夫です。
私自身も、紙とペンを渡されて、「コードを一言一句間違わずに書け」と言われたら、絶対に書けません。
ドットインストールのHTML、CSS編は以下の4章に分かれています。
１から順番に視聴して行きましょう。
とくに学習環境は必須です。
Progateでは、画面にコードを書くスペースが用意されていました。
しかし実際には、テキストエディタというソフトを使ってコードを書いていく必要があります。
ドットインストールでは、ソフトのインストールから、設定まで詳しく解説してくれていますので、簡単にプログラミング環境が整います。
この動画で紹介されているVisual Studio Code (通称:VS Code)というソフトは、私も実際に使用しているもので、ドットインストールでも、このソフトを使って解説されていますので、導入しておいて損はないと思います。
ドットインストールについて詳しくは以下の記事で解説しています。
WEB制作学習のロードマップ４．忍者CODE
忍者CODEとは
忍者CODEさん（@ninjacodeee）が運営しているプログラミングの学習サイト。
実務でweb制作をバリバリこなしている方なので、その経験を生かした、案件で実際に使用しているようなテクニックを問題集として無料公開しています。
「Progate」や「ドットインストール」だけだと、実践的なテクニックに関しては、少々物足りないです。
そういったテクニックを学ぶのに「忍者CODE」というサイトがおすすめ。
「Progate」や「ドットインストール」でも公開していないようなコンテンツが豊富で、基礎理解は完璧だと思っていた自分がぶっ壊されます 笑
それだけ超優良なコンテンツが無料で利用できるので、やっておいて損はありません。
忍者CODEについては、以下の記事で詳しく紹介しています。
WEB制作学習のロードマップ５．サイト模写
ここからは、実際にあるwebページを真似して作っていきます。
より実践的で難しいですが、楽しい部分です。
サイト模写とは
実際に存在するWebページを見ながら、コーディングをすること。
デザインの勉強にもなるし、実際によく使われているコードを知ることができます。
サイト模写は実戦形式のプログラミング学習になります。
実際にインターネット上に公開されているサイトを見ながら、同じサイトを作成していくというもの。
コーディングの仕事は、「デザインカンプ」と呼ばれる設計図に基づいてコーディングを進めていきます。
サイト模写はそれに近いので、より実戦向きなんですね。
ただし、サイト模写は初心者がみんなつまづくポイントでもあります。
今までの学習サイトでは、「まずヘッダー部分を作りましょう」みたいにある程度の道筋に沿ってコーディングしていたと思うのですが、Webサイトを真っ白の状態から作るのって、一気に難易度が上がります。
僕も、初めてサイト模写に挑戦したときは、１つのサイトを完成させるまでに、2週間くらいかかりました。
サイト模写のやり方については、以下の記事で詳しく解説していますので参考にしてみてください。
サイト模写のやり方が分かれば、あとはひたすら模写していきましょう。
とはいえ、模写ばかりやっていても仕事にはならないので、サイト模写におすすめのサイトを難易度別にまとめました。
上記の記事で紹介したサイトを模写できたら、プログラミングで案件を獲得できるレベルにはなっていると思います。
ロードマップ終了後について
ここまでお疲れさまでした。
しかし、まだプログラミングの学習が終わっただけで、ここからが本番ですよ。
さっそく、クラウドソーシングに登録して、案件に応募していきましょう。
登録必須のクラウドソーシング
ただし、上記のサイトはベテランエンジニアも多数登録していて、駆け出しエンジニアには仕事を獲るのが難しいかと思います。
駆け出しエンジニアには、こちらのクラウドソーシングがおすすめです。
駆け出しエンジニアにピッタリのクラウドソーシングサイト
「FLEDGLING」は駆け出しエンジニアへ仕事を依頼する変わりに、報酬を相場よりも抑えることができるという、新しいクラウドソーシングサービスです。
駆け出しエンジニアの悩みで多いのが、
実績がないから仕事が獲れない。仕事が獲れないから実績がない。
ということです。
FLEDGLINGを利用するメリットは、FLEDGLING内での仕事は全て実績として公開OKということ。
つまり、『報酬よりもまず実績を取りに行きたい』というエンジニア向けのサービスになっています。
詳しくは以下の記事で解説しています。
また、プログラミングスキルを活かして、転職してみるのもエンジニアとしてさらに成長する方法です。
初心者だと、案件獲得のハードルが高くなってしまうので、「まずは実務経験を経てフリーランスとして独立」といったエンジニアも多いですね。
登録必須の転職サイト・転職エージェント
どうしても独学ではモチベーションが続かない...
といった人には、プログラミングスクールもおすすめです。
オンラインで、自宅にいながら最高の学習環境が整えられていて、転職までしっかりサポートしてくれます。
おすすめのプログラミングスクールは、以下の記事で紹介しています。
