こんにちは。今回は「Web制作ってやってみたいけど、HTMLって何？」という完全初心者向けに、副業で月5万円稼ぐまでの具体的なロードマップを作りました。
「Web制作で副業したい」という人は多いのですが、何から始めればいいのかわからずに挫折してしまう人がほとんどです。この記事では、実際に初心者がつまずきやすいポイントと、それを乗り越えるための具体的なステップを、時系列で解説しています。
正直に言うと、完全初心者から月5万稼ぐまでには3～6ヶ月程度かかります。ただし、正しいロードマップに沿って進めば、十分実現可能です。このロードマップに沿って進めば、無駄な遠回りをせずに最短で目標に到達できます。
【この記事で紹介する流れ】
- ステップ1：基礎知識を身につける（1～2週間）
- ステップ2：HTML・CSSを実践的に学ぶ（2～3週間）
- ステップ3：実際にサイトを作ってみる（2～3週間）
- ステップ4：ポートフォリオを完成させる（2～4週間）
- ステップ5：案件を獲得して稼ぐ（継続）
ステップ1：基礎知識を身につける（1～2週間）
1-1. まず知っておくべき3つの言葉
Web制作を始める前に、最低限の用語を理解しておきましょう。難しく聞こえますが、実は単純です。
HTML（エイチティーエムエル）
HTMLは「ホームページの骨組み」だと思ってください。例えば、家を建てるとします。HTMLは「壁」「屋根」「ドア」などの構造を決める部分です。ホームページも同じで、「ここに文章」「ここに画像」「ここにボタン」という構造を決めるのがHTMLです。HTMLだけだと見た目は地味ですが、これがないとホームページは成り立ちません。
CSS（シーエスエス）
CSSは「ホームページの見た目を整える部分」です。家で言うと、壁を何色に塗るか、カーテンをつけるか、床のタイルはどうするか、という「デザイン部分」です。HTMLで構造を決めて、CSSでそれを美しく見せます。
JavaScript（ジャバスクリプト）
JavaScriptは「ホームページを動かす部分」です。ボタンをクリックしたら何か起こる、スクロールしたらアニメーションが出る、みたいな「動き」を実装するのがJavaScriptです。初心者のうちは難しいので、後回しにして大丈夫です。
1-2. Web制作の仕事内容を理解する
副業で案件をもらう場合、どんな仕事が来るのか、ざっくり知っておきましょう。
案件の種類
初心者向けの案件は、大体以下の3つです。
LP（ランディングページ）制作：1ページだけのサイトを作る仕事です。例えば、新商品の宣伝ページや、セミナー申し込みページなど。単価は5千円～5万円くらいです。
企業のホームページ制作：小さな企業の簡易ホームページを作る仕事です。5～10ページ程度のサイトです。単価は5万円～20万円程度。ただし、初心者には難しめです。
WordPress案件：WordPressを使ってサイトを構築する仕事です。コーディングというより、テーマの設定や記事の入力が多いです。単価は3千円～2万円程度。初心者向けとしては狙いやすいです。
初心者が最初に狙うべきは、LP制作かWordPress案件です。LPは単価が高いですが難しく、WordPress案件は単価は低めですが簡単です。
1-3. 必要な環境を整える
Web制作を始めるには、以下のものが必要です。ただ、全部無料でそろいます。
パソコン：Windows、Macどちらでもいいです。スペックも普通のパソコンで十分です。ただし、スマートフォンだけではできません。
テキストエディタ：コードを書くためのソフトです。Windowsの「メモ帳」でもできますが、初心者なら「Visual Studio Code（通称VSCode）」がおすすめです。無料で、初心者向けの解説も多いです。
ブラウザ：Chrome、Firefox、Edgeなど、何でもいいです。ただ、Chromeが最も一般的なので、Chromeを入れておくといいです。
その他：Adobe XDやFigmaなどの「デザインツール」もありますが、最初は不要です。
ステップ2：HTML・CSSを実践的に学ぶ（2～3週間）
2-1. 独学の方法を選ぶ
Web制作の基礎を学ぶ方法は、いくつかあります。
YouTubeの無料動画：最も手軽です。ただし、玉石混交で、古い情報も多いので注意が必要です。
Udemy：有料ですが、体系的に学べます。初心者向けなら、3000円～5000円程度の講座がおすすめです。特に「HTML・CSS基礎」と「実践LP制作」の2つの講座を選ぶといいです。
Progate：インタラクティブに学べる学習サイトです。月額1000円程度。ゲーム感覚で学べるので、初心者には向いています。
書籍：「1冊でわかるHTML&CSS」みたいな本を買う方法もあります。ただ、独学初心者には、動画の方が理解しやすいです。
初心者向けの推奨順序：Progate（基礎を楽しく）→ Udemy（実践的に）という流れが理想的です。
2-2. 最初に学ぶべき内容
すべてを完璧に学ぶ必要はありません。初心者が最初に学ぶべきは、以下です。
HTMLの基礎
- タグの概念（タグって何？）
- よく使うタグ（div、p、h1、img、aなど）
- フォームの作り方（入力欄、ボタンなど）
- セマンティックHTMLの考え方
CSSの基礎
- セレクタの書き方（どの要素にスタイルを当てるか）
- よく使うプロパティ（color、font-size、paddingなど）
- ボックスモデルの概念（margin、border、paddingの違い）
- レスポンシブデザイン（スマートフォン対応）の基本
JavaScriptは今は不要です。 HTML・CSSだけで作れる案件から始めましょう。
2-3. 学習で気をつけること
多くの初心者が、ここで挫折します。気をつけるべきポイントです。
「完璧に理解してから進む」はNG
Web制作は、完璧に理解してから進むのではなく、「とりあえず作ってみる」というアプローチが正解です。わからないまま進んでも、実践しているうちに理解できます。
コードを暗記しようとしない
HTMLやCSSのすべてのタグやプロパティを暗記する必要はありません。Google検索で「HTMLタグ一覧」と検索して、必要に応じて調べる。これが実務のやり方です。
動画を流し見しない
動画講座は、ただ見るだけではダメです。必ず「自分のパソコンで同じように書く」ことが重要です。手を動かさないと、実力は身になりません。
ステップ3：実際にサイトを作ってみる（2～3週間）
3-1. 最初の練習作品「シンプルなLP」を作る
基礎を学んだら、すぐに実践です。まずは、以下のようなシンプルなLPを自分で作ってみましょう。
練習作品の要件
- ページ数：1ページ
- 内容：架空の商品やサービスの紹介ページ
- 含まれる要素：ヘッダー、メインビジュアル、商品説明セクション、フッター、お問い合わせボタン
- ファイル形式：HTMLファイル1個、CSSファイル1個（計2個）
例：「オンライン英会話サービス」のLPを作る
実在しない架空のサービスでいいので、以下の構成でサイトを作ってみてください。
【ヘッダー】
ロゴ + ナビゲーションメニュー
【メインビジュアル】
大きな画像 + キャッチコピー + CTAボタン
【サービス説明】
3つの特徴を箇条書き
【料金表】
3つのプラン比較
【お客様の声】
3つの口コミ
【フッター】
著作権情報 + リンク
3-2. 制作時のコツ
デザインは「シンプルに」
最初は、複雑なデザインを目指す必要はありません。色は3色程度、フォントは2種類程度に絞って、シンプルなデザインを心がけましょう。複雑なサイトより、シンプルで見やすいサイトの方が、実務でも喜ばれます。
参考サイトを研究する
「LP デザイン」で Google 検索して、プロのLPを見てください。「このサイト、どういう構成なんだろう？」と分析することが、デザイン力を高めます。
スマートフォン対応を意識する
CSSで「メディアクエリ」を使い、スマートフォンでも見やすいデザインにしてください。実務の案件のほとんどがスマートフォン対応を要求されます。
3-3. 完成したサイトを公開する
GitHub Pages や Netlify などの無料ホスティングサービスを使って、作ったサイトをインターネットに公開しましょう。これがポートフォリオの一部になります。
ステップ4：ポートフォリオを完成させる（2～4週間）
4-1. ポートフォリオとは
ポートフォリオは「あなたの実力を示す作品集」です。副業で案件を獲得する際、クライアントは「このコーダーは本当にスキルがあるのか？」を判断するために、ポートフォリオを見ます。ポートフォリオが充実していないと、案件を獲得するのは難しいです。
4-2. ポートフォリオに必要な作品数
最低限3～5個の作品があれば、初心者としては十分です。
作品1：シンプルなLP（ステップ3で作ったもの）
作品2：企業のホームページ（5ページ程度）
トップページ、サービス紹介ページ、ブログページ、お問い合わせページ、プライバシーポリシーページなど。架空の企業でいいので、実務的なサイトを作ります。
作品3：WordPress案件のシミュレーション
WordPressの既製テーマを使ってカスタマイズしたサイトを作ります。これにより「コーディングだけじゃなく、WordPress も使える」ということを示せます。
作品4・5：得意分野の作品
もし得意な分野があれば（例：ECサイト、ブログなど）、それを作品にしましょう。
4-3. ポートフォリオサイト自体も作る
作品をまとめるためのポートフォリオサイトを作ります。以下の構成がおすすめです。
【トップページ】
自己紹介 + 得意分野 + 実績
【作品ギャラリー】
3～5個の作品を一覧表示
各作品にクリックで詳細ページへ
【スキル一覧】
HTML、CSS、WordPress、などのスキルと習熟度
【ブログ】（オプション）
Web制作の知識を発信するブログ
クライアントに「この人、ちゃんと知識がある」と示せます
【お問い合わせ】
クライアントが案件依頼できるフォーム
このポートフォリオサイト自体も、HTMLとCSSで作ることをおすすめします（WordPressでもいいですが）。自分で作ったサイトの方が、スキルをアピールできます。
ステップ5：案件を獲得して稼ぐ（継続）
5-1. 案件を獲得する場所
ポートフォリオが完成したら、実際に案件を探します。初心者向けの案件獲得先は以下です。
クラウドソーシングサイト
Coconala、ランサーズ、CrowdWorks などのクラウドソーシングサイトが最も初心者向けです。小さな案件から始められます。ただし、手数料が高い（20～30%）のが難点です。
SNS
TwitterやInstagramで「Web制作します」と発信するのも有効です。ただし、実績がないと難しいです。
知人の紹介
友人や知人から「ホームページ作ってくれない？」という依頼が来ることもあります。これが最も単価が高く、やりやすい傾向があります。
ストック販売
Gumroad などで、HTML・CSSテンプレートを販売する方法もあります。初心者向けの案件獲得より、難易度は高いですが、単価は高いです。
5-2. 最初の案件選びのコツ
「とにかく実績作り」を目指す
最初は、単価より「実績を作る」ことを優先しましょう。単価が安くても（例：3000円）、実績があれば、次の案件はもっと高い単価で獲得できます。
自分のスキルレベルに合った案件を選ぶ
「リモート・完全初心者向け・HTML/CSSのみ」みたいな案件から始めましょう。高度な案件を選ぶと、できずに挫折します。
最初は「修正案件」を狙う
「既存のサイトを修正してほしい」「スマートフォン対応にしてほしい」みたいな案件が狙い目です。ゼロから作る案件より、技術的に簡単なことが多いです。
5-3. 副業で月5万稼ぐまでの流れ
計算例
- 案件単価：5000円（初心者向け LP制作）
- 月10案件をこなす
- 月収：50,000円
または
- 案件単価：10,000円（中程度の難易度）
- 月5案件をこなす
- 月収：50,000円
最初は月3～5案件程度から始まることが多いので、実現には3～6ヶ月かかると想定しておきましょう。ただし、実績を積んで単価が上がれば、案件数が少なくても月5万は十分実現可能です。
5-4. よくある質問
Q. 本業との両立はできる？
A. 初心者の案件なら、1案件に10～30時間程度かかります。月10案件なら月100～300時間で、週20～30時間程度です。本業が定時で終わる仕事なら、十分両立できます。
Q. 単価を上げるにはどうする？
A. 実績を積んで、ポートフォリオを充実させることです。あとは、クライアントとの信頼関係。良い評価をもらえば、自動的に高い単価の案件が来るようになります。
Q. JavaScriptが必須？
A. 完全な初心者なら不要です。ただし、ある程度実績を積んだら、JavaScriptの基礎を学ぶことをおすすめします。単価が上がります。
まとめ：完全初心者から月5万稼ぐまでのロードマップ
Web制作で副業月5万を稼ぐのは、決して無理な目標ではありません。ただし、正しいロードマップに沿って進めることが重要です。
重要なポイント：
- 基礎学習は2～3週間で十分：完璧を目指さず、とにかく実践に移ることが大切です
- ポートフォリオ作成に2～4週間：作品数より質が重要。3～5個の良い作品があれば、十分案件を獲得できます
- 最初の実績作りが鍵：単価より実績を優先し、良い評価をもらうことで、その後の単価が決まります
- 継続が最も重要：月5万稼ぐまでに3～6ヶ月かかると想定して、焦らず続けることです
これからWeb制作の勉強を始めるなら、このロードマップに沿って進めてください。3～6ヶ月後には、副業で月5万稼いでいるあなたがいるはずです。
頑張ってください！
