未経験から3ヶ月で初案件を取るロードマップ｜完済率84.7%スクールの学習設計を公開

Q: フリーランスと副業、どちらを先に目指すべき？

まず副業（会社員を続けながら）から始めることを強く推奨する。副業で月3〜10万円の安定収入を得られるようになってからフリーランスに転向するのがリスクの少ないキャリアパスだ。

Q: JavaScriptはいつ学べばいいですか？

HTML/CSSで案件を取り始めてから学ぶ方が効率的だ。初案件の多くはHTML/CSS+αで対応できるため、最初からJavaScriptを詰め込むと学習期間が伸びて挫折リスクが高まる。3ヶ月後に案件収入が安定し始めたタイミングでjQuery→純粋なJSの順で学ぶのがベストだ。

2026年7月10日

生徒

プログラミングを始めたいんですが、3ヶ月で仕事にできるって本当ですか？

ペン博士

本当だ。ポイントは『何を・いつ・どの順で学ぶか』を最初に決めること。今日はWithCodeが実際に使っているロードマップをまるごと公開するぞ。

「未経験から3ヶ月で副業収入を得る」は、正しいロードマップさえあれば現実的な目標だ。しかし多くの初学者が「何から始めればいいかわからない」「途中で挫折してしまう」という壁にぶつかる。この記事では、Web制作会社が直接運営するプログラミングスクール・WithCodeが内部で使っている3ヶ月学習設計を丸ごと公開する。案件獲得率97.9%・受講料金完済率84.7%という実績の裏側には、「続けられる設計」の工夫が詰まっている。

全体設計｜3ヶ月を3フェーズに分ける理由

3ヶ月を闇雲に学習しても成果は出ない。WithCodeが推奨するのは、月単位で明確なゴールを設定し、週単位でタスクを分解するアプローチだ。

フェーズ設計の基本原則は「インプット→アウトプット→マネタイズ」の3段階を意識すること。月1でHTML/CSSの基礎を固め、月2で実務レベルのコーディングと応用スキルを習得し、月3でポートフォリオ制作と案件獲得活動にシフトする。この順序を守ることが早期挫折を防ぐ最大のポイントだ。

フェーズ	期間	メインゴール	週あたり学習時間
フェーズ1：基礎固め	1ヶ月目	HTML/CSS基礎完全習得	10〜15時間
フェーズ2：応用実装	2ヶ月目	LP・サイト制作を独力で完成	15〜20時間
フェーズ3：案件準備	3ヶ月目	ポートフォリオ完成＋初案件獲得	15〜20時間

週あたり10〜20時間は一見多く感じるかもしれないが、1日あたりに換算すると平日1.5時間＋休日3〜4時間で達成できる水準だ。会社員として働きながら副業を目指す方でも十分に確保できるボリュームである。

なぜこの設計が「続けられる」のか。それは各フェーズの終わりに「小さな達成感」を意図的に配置しているからだ。月1の終わりにはシンプルなWebページが完成し、月2の終わりには実際のLPそっくりなサイトが仕上がる。この積み上げがやめたい気持ちへの最大の抑止力になる。

学習環境の準備チェックリスト

ロードマップを始める前に、最低限の環境を整えておこう。

エディタ：Visual Studio Code（無料）をインストール
ブラウザ：Google Chrome（開発者ツール利用のため）
学習記録ツール：Notionまたはシンプルな手帳でOK
参考書：Webサイト制作の入門書1冊（なくても可）
クラウドソーシング：クラウドワークス・ランサーズへの無料登録（月3から本格活用）

時間管理のコツ：25分集中サイクル

学習継続率を上げる実践的なテクニックとして、ポモドーロ・テクニック（25分集中→5分休憩）が有効だ。特にコーディング初学者は「ずっと同じ問題で詰まる」経験をしがちだが、25分で解決しなければ答えを見て次に進むというルールを設けると挫折しにくくなる。

1ヶ月目：HTML/CSS基礎を完全に固める

1ヶ月目の唯一のゴールは「HTMLとCSSの基礎文法を使いこなせるようになること」だ。JavaScriptや他の言語には手を出さない。最初の1ヶ月は集中と絞り込みが命である。

週次学習ロードマップ（1ヶ月目）

週	学習テーマ	具体的なアウトプット
第1週	HTML基礎・タグの意味と構造	自己紹介ページ（テキストのみ）
第2週	CSS基礎・ボックスモデル・Flexbox	ナビゲーションバーとカード一覧
第3週	レスポンシブデザイン・メディアクエリ	スマホ対応の2カラムレイアウト
第4週	模写コーディング（シンプルなLP）	架空ブランドのLP（300〜500行）

1ヶ月目でもっとも重要な習慣は「毎日コードを書くこと」だ。たとえ15分でも手を動かす日を作ることで、コードへの心理的障壁が下がっていく。読んで理解した気になるインプット偏重は挫折の温床だ。

HTML基礎：実際に手を動かす練習課題

以下は1ヶ月目の第1週に取り組む「自己紹介ページ」の基本構造だ。タグの意味を確認しながら、自分の情報に書き換えてみよう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自己紹介ページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1 class="site-title">山田 太郎のポートフォリオ</h1>
    <nav class="site-nav">
      <ul>
        <li><a href="#about">自己紹介</a></li>
        <li><a href="#skills">スキル</a></li>
        <li><a href="#works">制作物</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="about" class="section">
      <h2>自己紹介</h2>
      <p>はじめまして。Webデザインを学習中の山田太郎です。
         現在HTML/CSSを中心に学習しており、
         フリーランスのWebデザイナーを目指しています。</p>
    </section>

    <section id="skills" class="section">
      <h2>スキル</h2>
      <ul>
        <li>HTML5（学習中）</li>
        <li>CSS3（学習中）</li>
        <li>Visual Studio Code</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 山田太郎</p>
  </footer>
</body>
</html>

CSS基礎：Flexboxで横並びレイアウトを作る

Flexboxは現代のWebレイアウトの基本だ。第2週のナビゲーションバー課題に使うCSSを見てみよう。

/* site-header のスタイル */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background-color: #1a1a1a;
  color: #ffffff;
}

.site-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
}

/* ナビゲーションを横並びに */
.site-nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}

.site-nav a:hover {
  opacity: 0.7;
}

/* セクション共通スタイル */
.section {
  padding: 64px 32px;
  max-width: 1000px;
  margin: 0 auto;
}

2ヶ月目：応用実装で実務レベルに引き上げる

2ヶ月目は「実際のクライアント案件に近い制作物を作れるようになること」がゴールだ。具体的には、架空のサービスや店舗のランディングページ（LP）を1から制作できるレベルを目指す。

この段階で多くの学習者が実感する変化は、「何となく書けていたコードが、意図を持って書けるようになる」という感覚だ。ファイル分割の概念、命名規則、レスポンシブの考え方が自然に身につき始める。

週次学習ロードマップ（2ヶ月目）

週	学習テーマ	具体的なアウトプット
第5週	CSSアニメーション・hover効果	アニメーション付きボタン・カードコンポーネント
第6週	Webフォント・アイコン・画像最適化	ヒーローセクション完成
第7週	フォーム実装・JavaScriptの基礎	問い合わせフォームの見た目実装
第8週	LP全体の統合・GitHubに公開	GitHubPagesでLPを公開

LP制作で実務感覚を掴む：セクション構成の考え方

LPとは「1ページで商品・サービスへの申し込みを促す縦長のページ」だ。実務案件の大半はこの形式なので、LP制作を体験することが直接的な実戦練習になる。

ヒーローセクション：キャッチコピー＋CTAボタン（最重要）
課題提示セクション：ターゲットの悩みを言語化
サービス紹介セクション：解決策としての商品・特徴を3〜6点
実績・導入事例セクション：信頼性を高める数字・お客様の声
料金プランセクション：シンプルで比較しやすい料金表
FAQセクション：よくある疑問を先回りして解消
CTA（申し込み）セクション：最終的な行動を促す

GitHubでポートフォリオを管理する初期設定

2ヶ月目の終わりにはGitHubに制作物を公開する。GitHubは採用担当者・クライアントが最初に確認するポートフォリオの場所でもあるため、早めに習慣化しておく価値がある。

# GitHubにリポジトリを作成した後、ローカルで実行するコマンド

# 1. 作業ディレクトリに移動
cd ~/portfolio/lp-sample

# 2. Gitを初期化
git init

# 3. すべてのファイルをステージング
git add .

# 4. 最初のコミット
git commit -m "feat: LPの初期実装を追加"

# 5. リモートリポジトリと紐付け
git remote add origin https://github.com/your-username/lp-sample.git

# 6. プッシュ（mainブランチ）
git push -u origin main

# 7. GitHub Pagesを有効化（設定はGitHub上で行う）
# Settings > Pages > Branch: main / フォルダ: / (root) で公開

公式サイトから無料カウンセリングに申し込む →

3ヶ月目：案件準備フェーズ｜ポートフォリオ完成から営業まで

3ヶ月目は「稼ぐための準備と実行」に全力を注ぐフェーズだ。学習よりも制作・提案・コミュニケーションにウェイトを移す。

WithCodeの受講生で案件獲得率97.9%を達成できている背景には、この3ヶ月目の設計が大きく影響している。ポートフォリオの質と営業の量・質を同時に高めることが成否を分ける。

週次学習ロードマップ（3ヶ月目）

週	アクション	具体的なアウトプット
第9週	ポートフォリオサイト設計	ポートフォリオの構成案・ワイヤーフレーム
第10週	ポートフォリオ実装	作品3点＋自己紹介ページ完成
第11週	クラウドソーシング登録・提案文作成	プロフィール最適化・初回提案10件
第12週	フォローアップ・初案件獲得	初受注（目標：1万円〜3万円案件）

ポートフォリオの作り方｜採用されるサイトの条件

ポートフォリオは「あなたの実力を証明するビジネス文書」だ。デザインの美しさより、クライアントが読んで安心できるかが重要になる。

ポートフォリオに必ず含める3つの要素

自己紹介と強み：何が得意で、どんなクライアントの役に立てるかを1〜2文で
制作実績（最低3点）：GitHubPagesのURL＋制作の意図を添えて掲載
お問い合わせフォームまたは連絡先：クライアントが即座に連絡できる状態に

よくある失敗は「制作物を並べるだけ」のポートフォリオだ。クライアントは「この人に任せると自分の課題が解決するか」を知りたがっている。制作物ごとに「誰のために、何の課題を解決するために作ったか」を一言添えるだけで問い合わせ率が大きく変わる。

ポートフォリオサイトのHTML構造例

<!-- ポートフォリオサイト：works（制作実績）セクション -->
<section id="works" class="works-section">
  <div class="container">
    <h2 class="section-title">制作実績</h2>
    <p class="section-desc">架空サービスのLP・コーポレートサイトなどを制作しました。</p>

    <div class="works-grid">
      <!-- 作品カード1 -->
      <article class="work-card">
        <a href="https://your-username.github.io/lp-sample/" target="_blank">
          <div class="work-thumb">
            <img src="./images/work01-thumb.jpg" alt="フィットネスジムLP サムネイル">
            <div class="work-overlay">
              <span>詳しく見る</span>
            </div>
          </div>
          <div class="work-info">
            <h3 class="work-title">フィットネスジム LP</h3>
            <p class="work-desc">
              30〜40代のビジネスパーソン向けに、
              「忙しくても通えるジム」をコンセプトにしたLPを制作。
              Flexboxとメディアクエリで完全レスポンシブ対応。
            </p>
            <ul class="work-tags">
              <li>HTML</li>
              <li>CSS</li>
              <li>レスポンシブ</li>
            </ul>
          </div>
        </a>
      </article>
    </div>
  </div>
</section>

初案件の取り方｜提案文・単価設定・交渉の実践

ポートフォリオが完成したら、いよいよ案件獲得活動を開始する。多くの初学者が最初の1件が最もハードルが高いと感じるが、正しいアプローチをとれば3ヶ月目中に受注できる可能性は十分にある。

クラウドソーシングで初案件を取るステップ

プロフィールを100%完成させる：写真・スキル・自己PRをすべて埋める
最初は単価より実績を優先する：3〜5万円案件でも受ければ「初受注」の実績が生まれる
提案文を案件ごとにカスタマイズする：テンプレコピペは選ばれない
クライアントの課題を最初に述べる：「私のスキルは〜」より「御社の課題〜を解決できます」
制作期間と修正対応を明記する：不安を先回りして解消する
ポートフォリオURLを必ず添付する：見てもらえることで信頼性が上がる
1日3〜5件の提案を継続する：最初の1件は平均10〜20件の提案が必要

刺さる提案文の型

以下は初案件向けの提案文フレームワークだ。クライアントの課題→自分の解決策→実績の順で構成する。

【提案文テンプレート（案件獲得率が上がる構成）】

件名：[案件タイトル]のご提案｜HTML/CSSコーディング対応可能

はじめまして、[名前]と申します。
HTML/CSS・レスポンシブコーディングを専門に学習してきたWebデザイナー志望です。

━━ 御社の課題への対応 ━━
今回の案件概要を拝見し、特に[課題・要件のキーワード]の部分は
私の得意とするところで、確実にご対応できると判断し提案させていただきます。

━━ 納品イメージ ━━
・制作期間：〇日間（〇月〇日 ご依頼確定→〇月〇日 納品）
・修正回数：2回まで無償対応
・納品形式：HTML+CSS一式（ZIPまたはGitHub納品）

━━ 実績 ━━
ポートフォリオ：https://your-username.github.io/portfolio/
制作したLPやサイトをご確認いただけます。

ご不明点があればお気軽にメッセージください。
どうぞよろしくお願いいたします。

WithCodeの学習設計に学ぶ「続けられる仕組み」

ここまでロードマップを紹介してきたが、最も重要なのは「続けること」だ。WithCodeが受講料金完済率84.7%という高い数値を達成している背景には、受講生が挫折しにくい学習環境の設計がある。

指標	実績	調査対象・期間
案件獲得率	97.9%	受講生アンケート／2025年1月〜12月
受講料金完済率	84.7%	受講生アンケート／2025年6月〜12月
運営体制	Web制作会社が直接運営	現役制作会社が直接指導

※受講生アンケートに基づく自社調査結果（2025年1月〜2025年12月実施）
※受講生アンケートに基づく自社調査結果（2025年6月〜2025年12月実施）

84.7%という完済率は、受講生が最後まで学習を続けた割合を示す指標だ。一般的なオンライン学習の完走率が10〜30%とされる中、この数値は突出している。その理由を分解すると以下の3点に集約される。

現役プロによるフィードバック：Web制作会社の現役エンジニア・デザイナーが直接レビュー
週次メンタリング：詰まったポイントを翌週に持ち越さない習慣
案件獲得サポート：ポートフォリオの添削から提案文のレビューまで一貫して伴走

独学ロードマップで行き詰まった場合、スクールの活用は「コストではなく投資」として捉えるべきだ。3ヶ月間のサポートで得られる時間短縮と成功確率の向上を考えると、合理的な選択肢になり得る。

よくある質問

Q. 未経験でも本当に3ヶ月で初案件を取れますか？

取れる。ただし「週10〜15時間以上の学習時間を確保できること」「毎日コードを書く習慣を作れること」が前提条件だ。WithCodeの受講生データでも、3ヶ月以内の初受注は珍しくない。大切なのは完璧な技術より「今の自分が提供できる価値」を明確にして動き出すことだ。

Q. 最初の案件はどんな種類が取りやすいですか？

初案件として取りやすいのは以下の順番だ。

既存サイトのコーディング修正・追加（難易度低・工数少）
LP制作（シンプルな1ページもの、3〜10万円）
コーポレートサイト（トップ＋3〜5ページ、5〜15万円）

最初は「修正・追加」案件から始めると実績が積みやすい。相手のコードを読む力がつき、コミュニケーションスキルも磨かれる。

Q. フリーランスと副業、どちらを先に目指すべき？

まず副業（会社員を続けながら）から始めることを強く推奨する。副業で月3〜10万円の安定収入を得られるようになってからフリーランスに転向するのがリスクの少ないキャリアパスだ。

Q. JavaScriptはいつ学べばいいですか？

HTML/CSSで案件を取り始めてから学ぶ方が効率的だ。初案件の多くはHTML/CSS+αで対応できるため、最初からJavaScriptを詰め込むと学習期間が伸びて挫折リスクが高まる。3ヶ月後に案件収入が安定し始めたタイミングでjQuery→純粋なJSの順で学ぶのがベストだ。

Q. ポートフォリオは架空サイトでも問題ありませんか？

問題ない。多くのフリーランス案件では「架空でも制作物があれば実力を評価できる」とされている。むしろ「架空だからこそデザイン・実装の両面で自由にこだわりを表現できる」メリットがある。大切なのはサイトのクオリティと「なぜ作ったか」の説明力だ。

Q. 月収いくらから副業を始められますか？

初案件は1〜3万円規模が現実的だ。3〜6ヶ月で月5〜10万円、1年後に月20〜30万円を目指す方が多い。WithCodeではLP制作の相場について「1ページあたり1〜3万円、LP継続案件は月45〜55万円規模も存在する」というデータを参考にしている。

コーディング代行の相場は1ページあたり1〜3万円、LP制作は月45〜55万円規模の継続案件も存在
出典：制作会社・クラウドソーシングの公開相場（2025年時点）

レスポンシブCSSの書き方：モバイルファーストで実装する

現在のWeb案件では、スマートフォン対応（レスポンシブデザイン）はほぼ必須だ。モバイルファーストの考え方でCSSを書く習慣を1ヶ月目から身につけておくと、実務案件に入ったときのスピードが大幅に変わる。

モバイルファーストとは「スマートフォン向けのスタイルをベースに書き、画面が大きくなるにつれて上書きしていく」手法だ。従来のPC優先設計とは逆の発想で、現在のGoogleのSEO評価にも有利とされている。

/* モバイルファーストのCSS設計 */

/* ベーススタイル（スマートフォン向け）*/
.container {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホ：1カラム */
  gap: 16px;
}

.hero-title {
  font-size: 1.5rem; /* スマホ：やや小さめ */
  line-height: 1.4;
}

/* タブレット以上（768px〜）*/
@media screen and (min-width: 768px) {
  .container {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレット：2カラム */
    gap: 24px;
  }

  .hero-title {
    font-size: 2rem;
  }
}

/* PC（1024px〜）*/
@media screen and (min-width: 1024px) {
  .container {
    max-width: 1100px;
    padding: 0 48px;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr); /* PC：3カラム */
    gap: 32px;
  }

  .hero-title {
    font-size: 2.8rem;
  }
}

このCSSの書き方は「最初に最も制約の多い環境（スマホ）向けに設計し、余裕が出てきたら追加する」という考え方だ。最初から正しい順序で書く習慣をつけることで、後の修正コストを大幅に削減できる。

Flexboxで実装するナビゲーションのレスポンシブ対応

ナビゲーションメニューはレスポンシブ対応が特に重要な要素だ。PCでは横並び、スマホではハンバーガーメニュー化するのが一般的だが、まずは「スマホで縦積み→PCで横並び」のシンプルな実装から始めよう。

/* ナビゲーション：モバイルファースト */
.nav {
  display: flex;
  flex-direction: column; /* スマホ：縦積み */
  gap: 8px;
  padding: 16px;
  background: #1a1a2e;
}

.nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: 12px 16px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav__link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* PC：横並びに変える */
@media screen and (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    height: 64px;
  }

  .nav__list {
    flex-direction: row;
    gap: 8px;
  }
}

案件を継続受注に繋げる「リピート率」を上げる方法

初案件を取ることも大切だが、1件目を2件目・3件目に繋げる仕組みを作ることがフリーランスとして安定収入を得るための最速ルートだ。新規開拓のコストは既存客へのアップセルの5〜7倍かかると言われている。

Web制作のリピート案件は主に「保守・更新の継続依頼」「新規ページの追加制作」「デザイン変更・リニューアル」の3パターンがある。これらを最初から意識した受注設計をすることで、月次収入が安定しやすくなる。

初回納品時に次の案件を生む「提案テンプレート」

案件完了時のメールに「次のステップの提案」を1〜2行添えるだけで、リピート率が大幅に向上する。以下はその具体的な文例だ。

【納品完了メールへの追記例】

---

この度はご依頼いただきありがとうございました。
制作物の最終版をお送りします。何かご不明点がありましたらお気軽にどうぞ。

【追加でご提案できること】
今回制作したLPのさらなる改善として、以下をご検討いただけると幸いです：

① Google Analyticsの設置・レポーティング（月1回のデータレポート提供）
② A/Bテスト用バリエーションページの制作
③ 更新・修正の月額保守プラン（月1〜2万円／修正3回まで）

ご興味があればいつでもご相談ください。
引き続き〇〇様のビジネスを全力でサポートします。

保守契約を提案する際の料金設定の考え方

保守契約の料金設定で多くの初学者が悩むのが「いくら設定すればいいか」だ。

保守プランの内容	月額目安	対象クライアント
テキスト・画像の更新（月2〜3回まで）	月1〜2万円	小規模店舗・個人事業主
WordPressプラグイン更新＋バックアップ	月1万円	WordPress使用サイト全般
LPのバナー・テキスト差し替え（月4回まで）	月3〜5万円	広告運用中の企業
分析レポート＋改善提案（月1回）	月3〜5万円	データ活用したいクライアント

保守契約は「一度取れれば毎月安定して入る収入」になる。月3〜5件の保守契約で月10〜20万円のベース収入が確保できれば、スポット案件は「上乗せ収入」として余裕を持って受注できるようになる。

学習の挫折ポイントと乗り越え方

3ヶ月のロードマップを歩む中で、ほぼ全員が通る「挫折しそうになる瞬間」がある。あらかじめつまずきポイントを知っておくことで、乗り越えられる確率が上がる。

挫折ポイント①：Flexboxが理解できない

多くの初学者がCSS Flexboxで詰まる。「思った通りに並ばない」「親要素・子要素の関係が混乱する」という声が多い。

解決策：「Flexbox Froggy」という無料のゲームで直感的に習得できる。理論を読むよりゲームでPlayしながら覚える方が体感的に理解が進む。1時間もあれば基本は習得できる。

挫折ポイント②：コードが動かないときの対処法

コーディング中に「書いたはずなのに表示が変わらない」「エラーメッセージが読めない」という問題は日常茶飯事だ。

まずブラウザの開発者ツール（F12）でConsole・Networksタブを確認する
HTMLとCSSのファイルパスが正しいか確認する（typoが原因の9割）
問題のコードをChatGPT/Claudeに貼り付けて「何が間違いか教えて」と聞く
それでも解決しない場合は15分間休憩して見直す（焦りは判断力を下げる）

挫折ポイント③：モチベーションが続かない

「最初は燃えていたのに1ヶ月後にはやる気が出ない」は学習あるあるだ。モチベーションに頼らない習慣設計が長期継続の鍵になる。

学習記録を数字で可視化する（毎日の学習時間をNotionやスプレッドシートで記録）
小さなアウトプットを毎週SNSに投稿する（Twitterで「#100DaysOfCode」タグを活用）
同じ目標を持つ学習仲間を作る（Discordコミュニティ・勉強会への参加）
「今日15分だけ」という最低ラインを設定する（毎日継続が最重要）

挫折ポイント④：「自分には向いていない」と感じたとき

プログラミングを始めて2〜4週間後に「自分には向いていない」と感じるのはほぼ全員が経験することだ。この時期を「適性がない証拠」と解釈するのは誤りで、単なる「学習曲線の底」だ。

学習曲線では最初に急激な困難感が訪れ、その後に「わかった」という爽快感が来る。2週間〜1ヶ月の間に一度必ず「自分には無理かも」と感じる壁がある。この壁を乗り越えた人とそうでない人で、将来の収入に大きな差が生まれる。

副業から本業化するキャリアパス

3ヶ月で初案件を取り、半年〜1年で月10万円を安定させたら、次のステップとして「本業化（フリーランス独立）」を検討する人も多い。独立のタイミングを間違えると収入が不安定になるため、正しい基準を持っておくことが重要だ。

フリーランス独立のタイミングを判断する3つの基準

副業収入が現職月収の50%以上になった：これが最低ラインの目安。できれば80〜100%になってから独立する
3ヶ月分の生活費を現金で保有している：フリーランスの収入は月によって波があるため、緊急時のバッファが必要
2〜3社以上の継続クライアントがいる：1社依存は会社員と変わらない。複数社から受注できる状態が安全

Webデザイナー・コーダーの収入成長モデル

時期	状況	月収目安
開始〜3ヶ月	学習中・初案件準備	0〜3万円
3〜6ヶ月	初案件受注・実績構築	3〜10万円
6ヶ月〜1年	継続案件・単価上昇	10〜25万円
1〜2年	専門特化・直接営業	25〜50万円
2年以上	ディレクション・外注活用	50万円〜

この成長モデルはあくまで目安だ。学習時間・案件の種類・専門特化のスピードによって変わる。ただし正しいロードマップで行動し続ければ、1年後には月20〜30万円は現実的な目標になる。

WordPressサイト制作で案件幅を広げる

HTML/CSSを習得した後、WordPressを使えるようになることで受注できる案件が一気に広がる。国内のWebサイトの約43%（世界では約65%）がWordPressで動いており、「WordPressで作ってほしい」という案件は常に需要がある。

WordPressは「テーマ」を使ってデザインを管理するため、HTML/CSSの知識があれば比較的スムーズに学習できる。特に「カスタムテーマの制作」や「既存テーマのカスタマイズ」は実務で頻繁に求められるスキルだ。

WordPress案件の種類と単価相場

案件種類	内容	単価目安	難易度
既存テーマのCSSカスタマイズ	フォント・色・レイアウトの調整	1〜5万円	★★☆☆☆
子テーマ制作	親テーマを継承したカスタマイズ	3〜8万円	★★★☆☆
LP・固定ページ制作	Gutenbergブロックエディタで実装	3〜10万円	★★☆☆☆
コーポレートサイト制作	トップ＋下層ページのフルカスタム	10〜30万円	★★★★☆
ECサイト（WooCommerce）	ショッピング機能の実装	15〜50万円	★★★★★

WordPressの基本ファイル構成を理解する

WordPressのテーマ開発で最低限理解しておくべきファイル構成は以下の通りだ。

my-theme/
├── style.css         # テーマの識別情報（必須）とスタイル
├── index.php         # すべてのテンプレートの最終フォールバック
├── header.php        # <head>〜<header>の共通部分
├── footer.php        # <footer>〜</body>の共通部分
├── functions.php     # テーマ設定・カスタム関数の登録
├── front-page.php    # フロントページのテンプレート
├── single.php        # 投稿記事のテンプレート
├── page.php          # 固定ページのテンプレート
├── archive.php       # カテゴリ・タグ一覧ページ
├── sidebar.php       # サイドバーの共通部分
├── 404.php           # 404エラーページ
└── assets/
    ├── css/
    │   └── main.css  # カスタムスタイルシート
    ├── js/
    │   └── main.js   # カスタムJavaScript
    └── images/       # テーマ画像素材

WordPressの開発では「テーマ階層（Template Hierarchy）」を理解することが重要だ。どのページでどのファイルが使われるかのルールを把握することで、意図通りのデザインを実装しやすくなる。

WordPressを学ぶ際の最も効率的な方法は「実際のサイトを模写・再現すること」だ。気に入ったサイトのレイアウトをWordPressで再現しようとすることで、テーマの仕組みとPHPの基礎が自然に身についていく。初めてのWordPressテーマ開発はUnderscoresなどのスターターテーマを使うと効率的だ。

functions.phpで使う基本的な設定コード

WordPressのfunctions.phpにはテーマの機能をカスタマイズするコードを記述する。以下は最低限必要な設定の例だ。

<?php
/**
 * テーマの基本設定
 */
function my_theme_setup() {
    // タイトルタグのサポート
    add_theme_support( 'title-tag' );
    // アイキャッチ画像のサポート
    add_theme_support( 'post-thumbnails' );
    // HTMLの幅・高さを自動出力しない（レスポンシブ対応）
    add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
    add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
    // ナビゲーションメニューの登録
    register_nav_menus( array(
        'primary' => 'メインメニュー',
        'footer'  => 'フッターメニュー',
    ) );
    // ブロックエディタのCSSをフロントにも適用
    add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

/**
 * スタイルシートとスクリプトの読み込み
 */
function my_theme_scripts() {
    // メインCSS
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // カスタムCSS
    wp_enqueue_style( 'my-theme-custom', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );
    // メインJS（jQueryに依存）
    wp_enqueue_script( 'my-theme-main', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

まとめ

未経験から3ヶ月で初案件を取る鍵は「設計→実装→営業」の順序を守ること
月1で基礎、月2で応用、月3でポートフォリオ＋提案活動に集中する
WithCode完済率84.7%が示す通り「続けられる仕組み」が最大の武器になる

3ヶ月後の自分を変えるために、まず今日の30分から始めよう。具体的な次のアクションは「VS Codeのインストール」と「最初のHTMLファイルを作ること」だ。この記事のロードマップを手元に置き、週単位のゴールを1つずつクリアしていけば、3ヶ月後には初案件の受注通知があなたのメールボックスに届くはずだ。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！