Web制作の独学は何から始める？未経験者向け学習ロードマップ【実体験】

結論から言うと、Web制作を独学するなら、まずはHTMLとCSSから始めれば大丈夫です。

その後は、次の順番で進めるのがおすすめです。

最初から全部覚える必要はありません。

私自身、Web制作を始めた頃はコードの種類も、それぞれにどんな効果があるのかもほとんど分かりませんでした。

それでも、実際にコードを書いて画面の変化を確認したり、分からないところをChatGPTに質問したりしながら、少しずつ理解できるようになりました。

今はAIに何度でも質問できる時代です。

初心者ほど「全部理解してから始める」のではなく、AIを使いながらHTMLとCSSを実際に触ってみるところから始めてみてください。

この記事では、未経験からWeb制作を学んでいる私自身の経験をもとに、

• Web制作は何から始めればいいのか
• どんな順番で学べばいいのか
• 初心者が最初から覚えなくてもいいこと
• AIをどう使うと学びやすいのか
• 実際に学んで感じたこと

を紹介します。

Web制作の独学は何から始める？まずHTML・CSSでOK

Web制作をこれから始めるなら、まずHTMLとCSSを学ぶのがおすすめです。

HTMLはWebページの文章や画像などの構造を作り、CSSはその見た目を整えるために使います。

基本を確認したいときは、MDN「初めてのウェブサイト」も参考になります。

例えば、今見ているWebサイトも、

• 見出しを表示する
• 文章を配置する
• 画像を表示する
• 文字の色を変える
• 要素を横並びにする
• スマホでも見やすくする

といった処理の多くにHTMLとCSSが使われています。

最初からJavaScriptやWordPressまで勉強しようとすると、覚えることが一気に増えます。

まずはHTMLとCSSを使って、自分の書いたコードがブラウザに表示される感覚をつかむところから始めれば大丈夫です。

そもそもWeb制作とは？

Web制作とは、Webサイトを作る仕事全般を指します。

Webサイトが完成するまでには、さまざまな工程があります。

例えば、

• サイトの構成を考える
• デザインを作る
• HTML・CSSでコーディングする
• JavaScriptで動きを付ける
• WordPressで更新できるようにする
• 公開後に修正・運用する

などです。

これはWordPressで更新するサイトの一例です。サイトの目的によって、必要な工程は変わります。

この記事では、その中でもHTML・CSSを使ったコーディングからWordPress制作へ進みたい人を中心に解説しています。

Web制作とWebデザインの違い

Web制作を調べていると、「Webデザイン」という言葉もよく出てきます。

初心者の頃は、この違いも分かりにくいと思います。

大まかに分けると、

Webデザイン
→ Webサイトの見た目やレイアウトを考える

コーディング
→ 完成したデザインをHTMLやCSSなどでWebページとして実装する

という違いがあります。

実際の仕事では両方を担当する場合もあります。

ただ、これから始める段階でデザインもコーディングも全部覚えようとする必要はありません。

まずはHTMLとCSSから始めて、Webサイトがどう作られているのかを知るところからで十分です。

Web制作で身につける主なスキル

Web制作を続けていくと、HTMLやCSS以外にもいくつかの技術を使うようになります。

代表的なのは、

• HTML
• CSS
• JavaScript
• Git / GitHub
• WordPress

などです。

最初から全部を学ぶ必要はありません。

この記事で紹介する順番に沿って、少しずつ増やしていけば大丈夫です。

Web制作を独学するおすすめロードマップ

ここからは、未経験からWeb制作を学ぶ場合の順番を紹介します。

私自身は、

YouTube
↓
Progate
↓
HTML・CSSの模写コーディング
↓
ChatGPTに質問しながら学習

という流れで進めてきました。

その経験も踏まえて、今から始めるなら次の順番をおすすめします。

STEP1：HTMLを学ぶ

最初はHTMLです。

HTMLでは、

• 見出し
• 文章
• 画像
• リンク
• リスト

など、Webページの基本的な構造を作ります。

最初からHTMLタグを全部暗記する必要はありません。

「見出しを表示したいならこのタグ」「画像を表示したいならこのタグ」というように、必要になったときに調べながら使えば大丈夫です。

私も最初はほとんど分かりませんでした。

実際にコードを書き、ブラウザに表示させながら覚えていきました。

STEP2：CSSを学ぶ

HTMLの次はCSSです。

CSSを使うと、

• 文字の色や大きさ
• 背景色
• 余白
• 横並び
• 画像サイズ
• スマホ表示

などを調整できます。

私はここで、かなり戸惑いました。

コードの種類が多く、「このコードを書くと何が変わるのか」がまったく分からなかったからです。

そこで、全部覚えようとするのをやめました。

コードを書いてみて、画面がどう変化するかを確認することを繰り返しました。

HTMLやCSSは、読むだけで覚えるより、実際に触りながら覚える方が理解しやすいと感じています。

STEP3：HTML・CSSで実際にWebサイトを作る

基礎を少し学んだら、早めに実際のWebサイト制作へ進むのがおすすめです。

私の場合は、YouTubeやProgateで基礎を学んだあと、HTML・CSSの模写コーディングを始めました。

実際に作り始めると、「横並びにならない」「余白が合わない」「画像が思った位置に来ない」など、それまで気づかなかった疑問が一気に出てきます。

でも、この疑問を一つずつ解決していくこと自体が学習になります。

教材を最後まで完璧に終わらせてから制作するより、ある程度理解した段階で実際に手を動かした方が、自分には合っていました。

STEP4：JavaScriptを学ぶ

HTMLとCSSでサイトを作れるようになってきたら、JavaScriptへ進みます。

JavaScriptを使うと、Webサイトに動きを加えられます。

例えば、

• ハンバーガーメニュー
• アコーディオン
• スライダー
• ボタンを押したときの処理
• スクロールに合わせたアニメーション

などです。

初心者の段階では、JavaScriptそのものを完璧に理解しようとしなくても大丈夫です。

まずはWeb制作でよく使う機能から少しずつ覚えていく方が進みやすいと思います。

STEP5：Git・GitHubを使う

制作を続けていくなら、GitやGitHubも少しずつ覚えていきます。

Gitを使うとコードの変更履歴を残せるため、

「変更したら表示がおかしくなった」というときにも以前の状態を確認しやすくなります。

Git・GitHubも最初は難しく感じやすい部分です。

最初からすべての機能を覚えるのではなく、まずはコードを保存・管理するための基本操作からで十分です。

STEP6：WordPressを学ぶ

HTML・CSSでサイト制作に慣れてきたら、WordPressへ進みます。

WordPressを使うことで、お知らせやブログなどを管理画面から更新できるWebサイトを作れます。

Web制作を仕事にしていきたいなら、学んでおきたい技術の一つです。

ただし、最初からWordPressを学ぶとHTML・CSSだけでなくPHPなども登場し、一気に複雑になります。

まずHTMLとCSSでWebページの仕組みを理解してから進む方が、初心者には分かりやすいと思います。

STEP7：1つのWebサイトを完成させる

最終的には、小さくてもいいのでWebサイトを1つ完成させます。

最後まで作ることで、

• 自分が何につまずくのか
• 何が理解できていないのか
• 何を調べればいいのか

が見えてきます。

Web制作は、

全部覚えてから作るのではなく、作りながら覚えるくらいの感覚で進める方がいいと感じています。

Web制作の独学で私が最初につまずいたこと

私がWeb制作を始めて、一番最初につまずいたのはコードではありませんでした。

コードを書く環境を作ることです。

初心者にとっては、

• 何のソフトを使えばいいのか
• VS Codeとは何なのか
• HTMLファイルはどこに作るのか
• ファイル名はどうすればいいのか
• 書いたコードをどうやってブラウザで確認するのか

ということすら分かりません。

今なら当たり前にできることでも、最初は一つひとつが分からないことだらけでした。

だからこそ、これから始める人には、環境構築で止まってほしくありません。

分からなければ、AIにそのまま質問して大丈夫です。

例えば、「Web制作を始めたいけど、コードを書く環境の作り方がまったく分かりません」と聞けば、最初から順番に説明してもらえます。

Web制作初心者は最初から全部覚えなくていい

Web制作について調べると、HTML、CSS、SCSS、JavaScript、jQuery、PHP、WordPress、Git、GitHubなど、次々に知らない言葉が出てきます。

私も最初は、「こんなに全部覚えないといけないのか」

と感じました。

でも、実際に学んでみると、最初から全部覚えておく必要はありません。

コードをすべて暗記しようとしない

コードは、必要になったときに調べれば大丈夫です。

重要なのは、すべて暗記することよりも、

「こういうことができるコードがある」と知っていることだと思います。

必要になったら検索したり、AIに質問したりすれば使えます。

PHPを最初から深く学ばない

WordPressまで進むとPHPが出てきます。

ただ、Web制作を始めたばかりなら、まずHTMLとCSSを優先する方が分かりやすいです。

PHPは必要になった段階で学べば十分です。

教材を見るだけで終わらせない

YouTubeやProgateは、Web制作を始める入口として使いやすいと感じました。

ただ、教材を見ているだけでは、実際にサイトを作るときに思ったようにコードを書けませんでした。

ある程度基礎を学んだら、実際に手を動かすことが大切です。

AIがある今でもHTML・CSSを勉強する必要はある？

私は、AIがある今でもHTMLやCSSの基礎は必要だと思っています。

確かにChatGPTなどのAIにお願いすれば、コードを書いてもらうことはできます。

でも、AIが出したコードを見て、

• どこを変更するのか
• なぜ動かないのか
• 自分が作りたい表示になっているか
• コードがおかしくないか

を判断するには、ある程度の知識が必要です。

AIがコードを書いてくれるから学ばなくていいのではなく、AIをうまく使うためにも基礎を学ぶという感覚が近いです。

Web制作初心者ほどAIに頼っていいと思う

もしWeb制作を始めたばかりの自分に一つだけアドバイスするなら、「まずAIに頼ることから始めよう」と伝えます。

初心者の頃は、本当に分からないことだらけです。

でも、人に質問するとなると、「こんな初歩的なことを聞いていいのかな」と思ってしまうこともあります。

AIなら、その心配がありません。

同じ質問を何度してもいいですし、「もっと簡単に説明して」「初心者でも分かるように教えて」「コードの横にコメントを書いて意味を説明して」といった聞き方もできます。

私自身、ChatGPTを使っていて特に助かっているのが、コードの近くにコメントで意味を書いてもらえることです。

例えば、

display: flex;
/* 子要素を横並びにする（初期設定の場合） */

のように説明してもらうと、コードを見ながら役割を理解できます。

また、

• エラーの原因
• タイポ
• コードが動かない理由

なども質問できます。

自分だけでエラー原因を探していたときより、かなり学習しやすくなりました。

ただし、AIのコードをそのままコピーするだけでは、自分の知識にはなりにくいと思います。

「なぜこのコードを書くのか」

まで質問しながら使うのがおすすめです。

AIは、コードを全部作ってもらうための道具というより、

何度でも質問できる先生として使う方が、初心者の学習には向いていると感じています。

Web制作の独学にはどのくらい時間がかかる？

Web制作を始めると、「何ヶ月でできるようになる？」というのも気になると思います。

ただ、私は期間だけを目標にしすぎない方がいいと思っています。

学習できる時間は人によって違いますし、

• Webサイトを作れるようになりたい
• 転職したい
• 副業したい
• 独立したい

など、目指す場所によって必要なスキルも変わるからです。

そのため、

「3ヶ月で習得する」より、

• HTML・CSSでWebページを作れる
• スマホ表示に対応できる
• JavaScriptで簡単な動きを付けられる
• WordPressでサイトを作れる

というように、できるようになったことを増やしていく方が分かりやすいと思います。

私自身もまだ学習途中なので、一つずつできることを増やしています。

Web制作を始めて良かったと感じること

私がWeb制作を始めた理由は、今の仕事を辞めたいと思ったことでした。

仕事へのやりがいを失い、それ以上に家族との時間や、自分で働き方を選べる自由がほしいと感じるようになったからです。

そこで、在宅で働けて、AIを活用しながら将来的に独立も目指せそうなWeb制作に興味を持ちました。

私はまだWeb制作で独立したわけでも、0→1を達成したわけでもありません。

それでも、Web制作を始めて良かったと思っています。

一番大きいのは、

今の仕事にしがみつかなくても、別の仕事で稼げる未来があるかもしれないと思えるようになったことです。

以前は、仕事を辞めたいと思っても、その先に何があるのか分かりませんでした。

今はまだ途中ですが、HTMLやCSSを書き、サイトを作り、AIを使いながら分からないことを解決していく中で、少しずつ自分の選択肢が増えている感覚があります。

将来本当に独立できるのかは、まだ分かりません。

だから、「Web制作を始めれば必ず人生が変わる」とは言えません。

ただ、私にとってWeb制作を学ぶことは、今の働き方以外の選択肢を作るための一歩になっています。

Web制作をこれから始める人が今日やること

この記事を読んで、「Web制作をやってみようかな」と思ったなら、今日から全部勉強する必要はありません。

まずは次の3つだけやってみてください。

インストールはVS Code公式サイトから進められます。

インストールから最初のHTMLを表示するまでの操作は、VS CodeでWeb制作を始める環境構築の手順で、実際の画面と一緒に紹介しています。

これだけで大丈夫です。

途中で分からなくなったら、AIに質問してください。

例えば、

「Web制作を始めたいです。VS CodeもHTMLも分かりません。最初から順番に教えてください」と聞いてもいいと思います。

私自身も、コードを書く環境を作るところからつまずきました。

まずは、自分で書いたコードがブラウザに表示されたという小さな成功体験を作るところから始めてみてください。

まとめ｜Web制作の独学はHTML・CSSから始めよう

Web制作を独学したいけれど、何から始めればいいか分からないなら、まずHTMLとCSSから始めれば大丈夫です。

おすすめの順番は、

1. HTML
2. CSS
3. HTML・CSSでWebサイトを作る
4. JavaScript
5. Git・GitHub
6. WordPress
7. より実践的なWebサイト制作

です。

最初から全部覚える必要はありません。

私自身も、コードの種類や効果がほとんど分からないところから、実際に書いて画面の変化を確認しながら少しずつ覚えてきました。

そして、今からWeb制作を始めるならAIも積極的に使っていいと思います。

分からないことを何度聞いても恥ずかしくありません。

AIに質問しながら、自分の手でもコードを書いてみる。

まずはそこから始めてみてください。