【2021年版】駆け出しエンジニアのWeb制作学習ロードマップ

2021年こそは挑戦!と新しい気持ちでプログラミング(Web制作)を学び始めた方も多いはず。

学習開始から半年経過した僕が過去の失敗を含めて、Web制作をはじめたばかりの人に向けてロードマップをまとめました。

半年前のtweet

参考までに学習開始前の僕のスキル感は

「ぃ」が変換できない。

「セミコロンってどこだっけ?」

「え?ディレクトリってなに?」

完全に原始人でした。

半年経過した今ではHTML、CSS、Sass,jQuery、JavaScript、WordPress、php、Gitなど

半年前は宇宙語にしか聞こえなかったものを一通り使いこなせるようになっています。

なにも知らない状態で闇雲に勉強するより効率よく学びましょう!

過去の自分へのアドバイスを込めて効率のいい脱初心者ルートをお伝えします!

progateかドットインストールからはじめる

はじめたばかりの人にとってこの上ない最強学習サービスです!

両方やる必要はない

無料でできる範囲を一通り試して、使いやすいと感じたサービスで有料会員になりましょう!

1000円くらいの出費なので惜しまず払いましょう。一通り学んだら1ヶ月で解約でオッケーです。

ふたつのサービスの違いはprogateだと疑似エディターにコード書いていくスタイルです。

自分のエディターに直接コード書いて勉強するわけではありません。

より実践的にエディターを使って学べる動画学習サービスのドットインストールを僕は使ってました。(ショートカットとかディレクトリ構成、エディターのインストールや設定も学べるからドットインストールから入ると効率いいです)

ただprogateはスマホ用のアプリもあるので通勤、通学中も勉強したいならprogateもいいですね。

どっち選んでも間違いないです。あなたの好み次第。

Google ChromeとVSCodeをインストールしよう

エディター(コードを書く高機能なメモ帳みたいなもの)はなんでもいいですが、使ってる人が多いものを使うのが賢明。

なぜならエラーで困ったときに解決策が検索してヒットしやすいからです。(重要

ブラウザはデフォルトのものではなくGoogle Chromeを必ず使う

Chromeを使うと後述するデベロッパーツール(Webサイトの構成を見れる神ツール)が使えるのでWeb制作やるならChrome一択です。

【一冊ですべて身につくHTMLとCSSとWebデザイン入門講座】

HTMLとかCSSをなんとなくでいいので実践したらさくっと次のステップへ!

一冊ですべて身につくHTMLとCSSとWebデザイン入門講座の概要は基礎を学びながら架空のカフェのサイトを制作します。

重要実際に手を動かして形あるものを作りましょう

文字の大きさを変えるとか、マウス当てたら色が変わるとか

上記のようなテンション上がらない内容ではなくて、Webサイトをつくる楽しさが圧倒的に味わえて、たった一冊で基礎が学べます。

スマホ表示とかSNSの埋め込みとか実用的な内容が盛りだくさん。

レスポンシブ対応(スマホできれいにWebサイトを表示するための技術)とFlexbox(Webサイトのレイアウトを簡単にできるようになる魔法)の基礎はこの一冊で身につきます。

※2021年2月により実践的な内容の続編がでるようです。

Webクリエイターボックス
WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。

Bootstrapはスルーでオッケー

簡単!便利!って言葉に惹かれてBootstrapに手を出しましたが、ホントの初心者の状態だとBootstrapでも苦戦します。ある程度コード書かないと便利さがわからないです。(体験談)

当時の僕は.pl-md-5とか.h-autoとか初心者にとっては宇宙語なクラス名を、必死に暗記しようとしてました。

受験勉強とは違って暗記は不要です。わからないときは都度ググるでオッケー。

CSSがある程度自分で考えて書けるようになると、Bootstrapはクラス名の規則性が洗練されているので感覚である程度わかるようになってます(実体験)

Sassを取り入れよう!

Sassを早い段階で学ぶってのが一番のポイントです

Sass?なにそれおいしいの?な状態でも取り組む価値あり。

SassはCSSをだらだら長い行数書く必要がなくなる便利な仕組みです。

ネスト(入れ子)構造になっていることから初心者にとっては学習コスト高いのが難点ですが、かかった学習コスト(時間)はその後のコーディングスピードの上達で必ず回収できます。

VSCodeお使いの方ならlive sass compilerとlive severってプラグイン(機能拡張するアプリみたいなもの)をインストールすればすぐ使えます。

CSSがある程度理解できたら取り入れましょう。

僕は「なんか難しそう!」という理由でSassを避けて、JavaScriptの門を叩いたけど今考えるとSassからやるべきでした。

後述するjQueryもJavaScriptもSass(CSS)という土台あってこその言語です。

初心者のうちに基盤は固めておきましょう!

Sass学ぶなら下記の動画が圧倒的わかりやすさです。

Sassではじめる CSSプリプロセッサー #01:VS Codeの拡張機能で手軽にコンパイルしよう

JavaScript or jQuery?問題について

Webページが作れるようになったら、次は動きをつける方法を学びましょう!

具体的にはハンバーガーメニューとかスライダーとかですが、よくわからない人は「なんかWebサイト見てたら動くやつ」って捉え方でオッケー。

はじめて自分で作ったものがPC上で動いたときは素直に感動します

Webサイトを動かすためにJavaScriptとjQueryのどっちから学べばいいのか問題については

諸説ありますが2021年時点でもjQueryでオッケーです。

あ、jQueryオワコン論は気にしなくてオッケー。そんなこと考えるよりもコード書きましょう!

理由は学習コストが低いから。

Webサイトに動きをつけるためのJavaScriptを学ぶにはある程度学習時間がかかります。

コードや理論の意味がわからなくてなって、せっかく始めた学習がストップするよりは、簡単な方から実践して手を動かすことが優先です。

jQueryは記述がシンプルなのではじめたその日に使えるくらい圧倒的にわかりやすいです。

学んだ時間が無駄になるリスクは初心者にはなし。

まずはハンバーガーメニュー(スマホとかの右上あたりに表示されてる押すと動く三本線のマーク)を自分の手を動かしてつくってみることからjQueryに触れてみましょう。

jQueryについては下記参照

jQuery入門 2020 #01:セレクターと Vanilla JS

余談ですが僕はJavaScriptから入りました

変数とかオブジェクトとか言われてもまったく意味がわからなくて挫折寸前でしたw

この辺りが挫折ゾーンなので順番としては初心者にもわかりやすいjQueryから入りましょう。

やめないことが大事。

模写は何度もやる必要ない

文字や画像をWebサイトに表示できてスタイリングや動きをつけるって基本的なスキルがここまでで身についています。

すげえじゃん俺!って自分を1回褒めておきましょう

次にやることは模写です。

模写ってなに?

実在するホームページのコピーサイトを作ります。

実際にはじめて模写やってみると多くの人が「あれ?こんなはずじゃなかった」ってなるはずです。

動画や本を見ながら他人の書いたコードを書き写していた状態から、自分の頭で構成を考えてコード書く状態に突入となにもできない自分にびっくりすると思います。

自分のスキルの現状がわかったら学習を始めたころの基礎をもう一度!ってなってしてしまうのが人間ですね。

実体験としてお伝えしますが上記の流れが時間を浪費する負のループです

人の書いたコードを書き写していても身につくものが少ない事実が、すでに証明されているので基礎に戻る必要はありません。

理解することとできることはイコールではないです。

わからないままでも手探りで無理やり模写を進めましょう!

模写についてはデベロッパーツールに頼ってオッケー!

カンニングにはなるんですが最初のうちはディベロッパーツール見ても、構造が理解できないと思います。(僕はそうでした)

デベロッパーツールの使い方を模写しながら学びましょう!

デベロッパーについては下記参照。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
Googleクロームの便利な「要素の検証」機能の使い方を分かりやすく解説します。ウェブデザインをする人が特に知っておくべき機能を中心に紹介していきます。

模写は初心者にとってかなり大変な作業ですが、調べながら問題を解決する力(ググり力)が手に入ります。

僕が実際に模写をした参考サイト貼っておきます。RaiseTechのLPはなめてかかると痛い目みますよw

RaiseTechのLP

z-indexやpositionを駆使してレイアウトが組まれているので初心者がやると学ぶことが多いです。

残念ながらおそらくこの模写の段階でほとんどの駆け出しエンジニアが挫折するはずです。

デザインカンプからコーディング

無事挫折ラインを乗り越えたら次は、実案件さながらのデザインカンプからのコーディングに挑戦ましょう!

模写を複数やるのはオススメしません。

理由としては当たり前ですが

模写を仕事で頼まれることはないからです。

ここまでの学習の流れで、Webサイトのデザインを見ると、自分が実装できるかできないかの判断ができるようになってるはず

作業工程判断力もスキルです。

日頃から気になるサイトはデベロッパーツールで調べる習慣をつける

ようにすると判断力が身につきます。

XDの使い方も同時に学べてリターン大きいです

無料で使えるものを下記にまとめています。

クリ★スタサイトリニューアルのお知らせ
サイトのリニューアルを行いました!
コーディング練習用のデザイン~お花屋さんのLP編~|ひらともや|note
Webデザイナー&コーダー3ヶ月目のひらともやです。 お花屋さんのLPのデザインをAdobe XDで作りました。コーディングを勉強している人の練習になればと思い、シェアします。 元々のデザインはあかねさん(@omsss22)が作ったものです↓ 今回わたしは、コーディングしやすいようにXD...

お疲れ様でした

ここまでできるようになれば、ポートフォリオ(自分のスキルを面接や営業で売り込むための作品集)をまとめて、転職するなり、副業するなり自分の目指す方向に進むための準備は完了です。

足りない知識や技術は行動しながら補いましょう。

自分の思ったようにコードが反映されなくて挫折しそうになっても、手を動かして学んでいると、どこかのタイミングで「あ、なるほど!」な瞬間が必ず出てきます。

この記事が、Web制作を学ぶあなたとってなにかのきっかけになればうれしいです。一緒にがんばりましょう。

以上です。

タイトルとURLをコピーしました