こんにちは、はなです。
「ホームページ作成を副業にできる？」
「Web制作って未経験からでも始められる？」
そんなふうに検索して、情報が多すぎてページを閉じたことはありませんか？
わたしも看護師として15年以上働きながら、体力・精神的な限界を感じているときに「Web制作」という仕事に出会いました。
この記事では、未経験からWeb制作副業を始めて初案件を獲得するまでのロードマップを、わたしのリアルな体験談をもとに徹底解説します。
結論からいうと、「コードを学ぶ →模写コーディング → ポートフォリオ作成 → クラウドソーシング応募」の4ステップです。詳しく見ていきましょう。
未経験者がWeb制作副業でつまずく3つの壁
初心者がWeb制作副業を始めようとするとき、よく出てくる3つの壁があります。わたしも全部ぶつかりました。
壁① 勉強方法が分からない
「独学？YouTube？スクール？」と情報が多すぎて、どこから手をつければいいか迷子になります。最初は無料のProgate一択でOKです。
壁② スクールの費用と選び方
スクールは10〜30万円以上かかるものも多く、いきなり投資するのはリスクが高い。まず低コストで試してから投資判断するのが正解です。
壁③ 時間が確保できるか不安
仕事が忙しい中での学習継続が不安。でも1日15〜30分で十分。夜勤の合間や通勤中のスマホ学習でも確実に積み重なります。
パソコン買っただけで満足しちゃう人、けっこう多いにゃ〜
ポイント：
「完璧な準備が整ってから始める」は一番の落とし穴。
小さく始めて少しずつ投資を増やすのが副業成功の鉄則です。
クラウドソーシングについての記事もおすすめ
Web制作副業は独学とスクールどっちがいい？メリット・デメリット徹底比較
Web制作副業を始めるとき、まず悩むのが「独学かスクールか」という問題。
それぞれのメリット・デメリットを整理しました。
| 比較項目 | 独学 | スクール |
|---|---|---|
| 費用 | 月0〜数千円 （本やオンラインツール） | 10〜30万円以上 （一定スキルを学ぶための総額） |
| ペース | 自由 | カリキュラムあり（スクールによって内容やペースに違いあり） |
| わからない時 | 自己解決が必要 | 講師に質問できる（スクールによって体制は異なる） |
| モチベ維持 | 難しい | コミュニティあり（スクールによってないところや活発なところなど違いあり） |
| 案件サポート | なし | あり（スクールによってないところもあり） |
| おすすめ対象 | まず試してみたい人 | 最短で副業デビューしたい人 |
わたしのおすすめ：最初の1〜2ヶ月は独学（Progate・Paiza）で基礎固め。
「もっと本格的にやりたい」と感じたらスクール投資を検討するのが無駄のない順番です。
Web制作初心者におすすめの学習サービス＆ツール
1. デザインツール（Canva / Figma）
- Canva
→ 無料プランでもテンプレート豊富で、SNS画像やバナー作成も簡単。
→ 有料のCanva Pro（月額1,500円前後）は背景透過やブランドカラー登録が可能で、デザインの統一感がアップ。 - Figma
→ 無料で使える高機能デザインツール。WebサイトやアプリのUIデザイン練習に◎。
→ チーム共有やリアルタイム編集ができ、案件でも採用されやすい。
選び方ポイント
「SNSやバナー作成から始めたい」ならCanva、「Webサイトデザインを本格的に練習したい」ならFigma。
2. 学習サービス（Paiza / Progate ）
- Paizaラーニング（月額980円～）
→ 動画＋コード練習でゲーム感覚。
→ Progateで基礎を終えたあとに挑戦すると定着しやすい。 - Progate（月額990円～）
→ スライド形式でHTML/CSS/JavaScriptの基礎をやさしく学べる。
→ 初めてコードを書くならこちらから。
選び方ポイント
「初めてコードを書く」ならProgate、「ゲーム感覚で進めたい」ならPaiza。
3. オンラインスクール比較＆特徴
- 講師は通過率10％の選考に合格した現役のプロだけ
- 初心者にも優しく実践的な力が身につくカリキュラム
- スケジュールをライフスタイルに合わせられる
- 副業の案件斡旋まで約束。転職支援も
- 満足度98.7%の手厚いマンツーマン指導
- 未経験者にも優しいオリジナルカリキュラム
- 自分の学習スタイルに合わせて講師が選べる
- 1レッスンあたり40分、講師が生徒の習得度に合わせたマンツーマン指導
- デザイン・マーケティングなど45以上の職種が学び放題
- SHEが紹介する企業のお仕事案件で実績が作れる
- サポート体制が充実
- 未経験でも安心
- 自分のペースで学べる。だから挫折しない。
- 現場のプロに聞ける。実践で通用するスキルが身につく。
- リーズナブルでオーダーメイド。だから学びが続く。（平均契約価格帯1.4万円）
【体験談】Progate・Paiza・YouTube・MENTAを使って私が実際に学習した感想
看護師時代、夜勤の合間や休日の隙間時間を使って、少しずつWeb制作の学習を始めました。
「まとまった時間がないから無理」と思っていたけど、1日15分でも続けると知識は積み重なることを、このとき身をもって実感しました。
Progate｜最初の一歩はスマホでも十分
家事の合間にスマホでHTML学習をスタート。
最初は <div> と <span> の違いがわからず、「え、どっち使えばいいの？」と混乱…。
でもレベルアップ音が鳴るたびに「今日はここまで！」と区切れる達成感があって、学習が習慣化できました。
学べたこと
- タグの役割を理解する基礎力
- HTMLの構造（ヘッダー・本文・フッターの概念）
- CSSで文字色や背景色を変える初歩スキル
気づきポイント
「完璧に理解しなくても、とりあえず手を動かす」ことで知識が積み重なっていく。
初心者は“習慣化”が勝ち筋。
Paiza｜エラーに慣れるトレーニング
夕飯の煮込み中にタイマーをセットして、1ミッションだけ挑戦。
「全角スペース1個」でエラーになった日はショックだったけど、エラー文の意味を調べるクセがついたきっかけになりました。
学べたこと
- エラー文を読む習慣（問題を自力で探す力）
- 短時間でもコードを書く“積み上げ”感覚
- 「毎日少しでも触ると確実に前進する」という実感
気づきポイント
最初はエラーが怖いけど、むしろ“エラー＝先生”。
直すたびに「なるほど！」が増えていくから、ゲーム感覚で続けられる。
YouTube｜デザイン力が一気に伸びた瞬間
無料動画で見つけたランディングページをそっくり再現。
「この余白どう作る？」「フォントサイズの違いは？」と何度も巻き戻しながら調整するうちに、CSSのレイアウト力がぐっと伸びました。
学べたこと
- レイアウトの再現力（余白・文字サイズ・色）
- コードを自分で書き換える柔軟性
- 実際のWebページを分解して考える視点
気づきポイント
模写は「デザイン目」と「コード力」を同時に鍛える最強トレーニング。
とくに無料でできるから、コスパ最強の学習法。
MENTA｜プロの目線で世界が変わる
わたしは基礎を学び始めた初期から、案件を取れるようになるまでの間、MENTAで現役エンジニアさんに継続的にサポートしてもらいました。
最初は「このコードで大丈夫なのかな…？」と不安だらけ。
でも毎回コードレビューやアドバイスをもらえることで、次にやるべき課題が明確になり、迷子にならずに学習を進められました。
特に印象的だったのは、案件に応募する前のポートフォリオ添削と、プロフィール・提案文のチェック。
自分ひとりだったら不安で動けなかったけど、プロの「これなら通用するよ」という一言が背中を押してくれて、実際に初案件を獲得できました。
さらに、その案件に取り組むときも「納品の流れ」「対応の仕方」までフォローしてもらえたので、最初の案件を安心して完了できたんです。
学べたこと
- 実務で求められるコーディングルール
- 命名規則の重要性（class名や変数名の付け方）
- 案件を意識した設計・ポートフォリオ作成のコツ
- 提案文・プロフィールの具体的な書き方
- 案件獲得〜納品までの流れと注意点
気づきポイント
MENTAは「知識を学ぶ」場所というより、案件獲得まで伴走してくれる学習の地図＋ナビゲーターみたいな存在でした。自己流だと遠回りしがちな部分も、プロの目線で修正してもらえるから「最短ルート」で副業デビューできたと実感しています。
未経験から初案件まで！Web制作副業の勉強法と実践ロードマップ（4ステップ）
「Web制作を副業にしたいけど、何からやればいいの？」
最初の一歩って、正直めちゃくちゃ迷うんですよね。
わたしも看護師から始めたときは、教材ジプシーになりかけてました（笑）
でも、順番を決めて小さく進めれば大丈夫。
ここでは 「未経験から案件獲得までのロードマップ」 をシンプルにまとめました。
ステップ1｜基礎学習（HTML/CSS）でコードに慣れ、学ぶ
- 期間：1〜2週間（1日20〜30分）
- ツール：Progate or Paiza
- ゴール：タグの役割を理解して、簡単なレイアウトを書ける状態に
- 注意点：教材を“見るだけ”で終わらせず、必ず手を動かす！
ポイント
最初は <div> と <span> の違いがわからなくても大丈夫。触り続けるうちに必ず慣れるよ。
ステップ2｜模写コーディングでレイアウト力を身につける
- 期間：2〜3週間（週3日以上）
- 流れ：好きなサイトを1ページそっくり再現 → ズレを直す
- ゴール：ヘッダー〜フッターまでHTML/CSSで書ける
- 注意点：画像や文章は必ずフリー素材を使う
ポイント
模写は「デザインを見抜く目」と「コードを書く力」を同時に鍛えられる最強の練習。
ステップ3｜ポートフォリオ作成で案件に挑戦する準備を整える
- 期間：2週間
- 内容：自己紹介、スキル一覧、制作物3〜5点
- 工夫：自分の経験を活かせるジャンルを入れると差別化になる（例：看護師→医療系サイト）
ポイント
「ただ作りました」よりも「誰に役立つサイトか」を意識すると評価がアップ。
ステップ4｜クラウドソーシングで初案件にチャレンジ！
- 期間：1週間〜継続チャレンジ
- 最初の案件例：バナー制作、簡単なHTML修正、ブログのCSS調整。
最初は低単価でも「納期・品質」を守って評価を積む。
ポイント
未経験者は、提案文を送ってもスルーされることが本当に多い。
でも、それが「普通」だから落ち込まなくてOK。
20送って1返事が来れば大成功くらいの気持ちで、数をこなすことが大事。
続けていくうちに提案文の書き方も上達して、少しずつ反応が返ってくるようになるよ。
やってみるだけなら無料だし、今すぐ始められるにゃ
＼初心者でも始めやすい副業はこちら／
まずは無料登録して、どんな副業があるか見てみるのがおすすめです◎
こちらの記事もおすすめ
まとめ｜未経験OK！Web制作副業は小さく始めて案件獲得まで進めよう
この記事で紹介したことをおさらいします。
- パソコン・ツール・勉強法をそろえれば、ホームページ制作副業は誰でも始められる
- Web制作副業は未経験・忙しい人でも1日15分から始められる
- 未経験からWeb制作副業を始めて初案件を獲得するまでのロードマップは大きく「コードを学ぶ →模写コーディング → ポートフォリオ作成 → クラウドソーシング応募」の4ステップ
- 続けるためには「小さく始めて徐々に投資」がコツ
- 看護師の経験や接客スキルは、Web制作にも活きる
行動提案
- 明日Progateで「HTML入門」を1本だけ学習
副業を始めるのに“完璧な準備”はいりません。
動き出した人から、未来が変わります。
読んでくださってありがとうございました。
今日もあなたの1日がいい日になりますように！
