はじめに
Web制作は、未経験からでもスキルを身につけて仕事にできる分野です。しかし、何から始めればいいのか分からない方も多いはず。この記事では、完全未経験からWeb制作で稼げるようになるまでのステップをわかりやすく解説します。
筆者が実際に辿った道をベースにしているので、「確実にスキルを積み上げていける方法」になっています。ぜひ参考にしてください！
Step 1：HTML・CSSの基礎をさらっと学ぶ
まずはWebページの骨組みと見た目を作るための言語、HTMLとCSSの基本をざっと学びます。
おすすめ教材
- Progate（無料でも基礎が学べる）
- ドットインストール（動画でわかりやすい）
「全体の流れがなんとなくわかる」くらいでOK。完璧を求めず、次に進んだ方がいいです。（自分はここで覚えようとして何回も挫折しました…）
HTMLでよく使うタグ（hタグ、pタグ、divタグなど）、CSSのセレクタやclassの使い方など、ざっくり理解できたらコーディングスタートした方が楽しい！コーディング中、わからない箇所が出てきたら再度復習すればOK！
Step 2：VSCodeの導入と使い方を覚える
実際にコーディングするにはエディタが必要です。
無料で使えてプロも愛用する「Visual Studio Code（VSCode）」を導入しましょう。
おさえておきたいこと
- 拡張機能の入れ方（Live Serverなど）
- フォーマッター、Emmet
- ファイル構成の基本
おすすめ拡張機能やEmmetなどは別の機会に記事にします！
CodeJump入門編で実践的に学ぶ
基礎がわかったら、いきなり実践。
CodeJumpの「入門編」を使って、本物のデザインを見ながらコーディングの流れを学びます。
学習の進め方（3周ルール）
- 1週目：解説や答えを見ながら、とにかく完成させる
- 2週目：答えをなるべく見ずにやってみる
- 3週目：答えを見ずに自分だけで完成できるように！
正直、1週目は全く手が動かないです。そんな時は答えがあるのでカンニングOK！どんどん手を動かしましょう。
2～3個入門編を終えたら、次のステップへ！（2個目、3個目と進むうちに、徐々に分かってきます）
Step 4：CodeJump初級編に進む（3周ルールを継続）
入門編で基礎の流れを掴んだら、初級編にチャレンジ。
より実案件に近い構成で練習できます。
こちらも3周ルールで進めて、「設計図をもとにHTML/CSSで形にできる力」を育てましょう。
2～3個終えたら、十分基礎力が身についている状態！
Step 5：JavaScript・jQueryを学ぶ
次にWebページに動きをつけるためのJavaScriptとjQueryを学びます。
実務でよく使うパーツ
- クリックで開くハンバーガーメニュー
- アコーディオンパネル
- モーダルウィンドウ
- スライダー
このあたりは、後述する【中級編】で手を動かしながら学べます。
Step 6：CodeJump中級編で動きのあるパーツを練習
JSの基本がわかったら、中級編に取り組みながら「よくあるUIパーツ」を実装できるようにしていきましょう。
よくある練習パーツ
- ハンバーガーメニュー
- アコーディオン
- スライダー（Swiperなど）
Step 7：ポートフォリオ作り
ここからは実案件を意識してポートフォリオサイト制作に入ります。
おすすめ教材：しょーごログの「添削付き課題」
- 実務に近い構成の課題
- 初級〜上級までレベル別
- 添削付きなので改善点が明確にわかる
まずは中級 Ex（エクストラ）課題までやってみましょう。
正直かなり難しくて心が折れそうでしたが、ここまででも十分実務レベルです。
Step 8：WordPressを学ぶ
中級Exをクリアしたら、次はWordPress（ワードプレス）のスキルを学びます。
これができると実案件の幅が一気に広がります。
学ぶ内容
- オリジナルテーマの作り方
- カスタム投稿タイプやカスタムフィールド（ACF）
- 管理画面との連携
- テンプレート階層
おすすめ教材は、たにぐちまことさんのUdemyです。
Step 9：CodeJump上級課題に挑戦！（激ムズ注意）
いよいよ最後の壁、上級課題にチャレンジです。
- 複雑なレイアウト
- WordPress連携
- 保守性を意識したコード設計
ここまで来ると、正直「無理かも」と感じる人も多いですが、これができれば実務でも通用するレベルです。
まとめ｜独学でもWeb制作はちゃんと身につく
ここまでの過程は正直かなりしんどいです。
途中で何回も挫折しましたが、諦めずに続けていればなんとかなります。
Web制作は独学でも確実にスキルが積み上がるジャンルです。大切なのは、「完璧を求めずに進み続けること」。
あなたのペースで、一歩ずつ積み上げていきましょう！
コメント