【2025年版】Webデザイン・Web制作で10万円稼ぐ《超最強》ロードマップ！｜稼ぎたい方へ送る教科書
生徒ペン博士！Web制作、Webデザインで10万円稼げるって本当ですか？
副業でそこまで行けたら夢みたいなんですけど。
ペン博士おぉ、それは十分可能じゃ！だが、自己流でやると遠回りになることも多い。
今回は実現のための《超最強ロードマップ》を解説するぞ！
生徒はい！お願いします！
今回はWeb制作の学習を進める上で必要となる「ロードマップ」について、ロードマップ自体の説明から作成方法まで徹底的に解説していきます。
Web制作会社が完全監修しているものになりますので、皆さんの今後の学習に役立つ内容になっています。
しっかりと熟読して「副業」「フリーランス」への第一歩を踏み出しましょう！
最後にはロードマップの作成テンプレートもございますので、ぜひご利用ください。
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【副業初心者必見】「月5万円」を最速で達成！会社員を辞め、完全にフリーランスへ転向！？
ペン博士！最近、「副業で月5万円」ってよく聞くんですけど、本当にそんなに早く達成できるもんなんですか？ 良い質問じゃな。実はな、ワシのスクールに通っていた受講…
堀さんの主な制作実績はこちら
目次
ロードマップについて
ペン博士まずはロードマップについて説明するぞ！
ロードマップとは
ロードマップとは、現状をスタート地点に設定し、「実現したい将来」や「達成したい目標」をゴールに設定した「計画表」を指します。スタートからゴールまでの間に小さな目標を時系列に設定していくことで、ゴールまでに必要なタスクを整理・可視化することに役立ちます。
Webデザインやプログラミングを本格的に学習していく前に、「ロードマップ」を作成することをおすすめしています。今回は、「月10万円稼ぎたい」という方のロードマップの一例をご紹介していきます。
※ あくまで一例ですので、目標を絶対に達成するという保証をするものではありません。
ロードマップを作成する際には以下の要素を組み込みます。
- 目標を明確にする
最終的に達成したい目標を明確にします。「お金を稼ぐ」といった漠然とした、抽象的な目標ではなく「10万円を稼ぐ」といったように、設定する目標をより具体的にすることで、ロードマップを作成しやすくなります。
・例）「10万円を稼ぐ」 - 目標の達成時期
目標を達成したい時期を明確にします。達成時期に関しても「来年まで」や「本業が落ち着くまで」といった抽象的な時期ではなく、「6ヶ月後」などのように、明確に設定しましょう。
・例）「6ヶ月後までに達成する」 - 現状の把握
自分の現状を客観的に分析します。そもそも「副業をするのに必要な知識が分からない」といった方もいらっしゃると思います。次章以降で必要な知識について詳細に解説しているので、しっかりと熟読して分析に活かしましょう。
・例）「HTML/CSSの概念は理解できている」 - 問題を洗い出す
現状の分析した結果と達成したい目標を比較して、何をする必要があり、どのようなことが問題なのかを洗い出します。そして洗い出した問題を分析し、そのための解決策を検討します。
・例）
「課題：実際にコーディングしたことはない」
「解決策：インプット後に模写サイトに挑戦してみる」 - 時系列で計画を練る
どの順番でどの問題から着手していくのかを時系列で考えていきます。目標を達成したい時期から逆算し、どのタイミングで何をするべきなのかを考えます。こちらは、スプレッドシートやエクセル、パワーポイントでスケジュールを組むことを推奨します。
・例）
「2025年2月：HTML/CSSの復習
2025年3月：模写サイトの挑戦 etc…」
学習ロードマップ
ペン博士次は学習ロードマップについて説明するぞ！
「月10万円稼ぎたい」という目標を例に挙げ、どのような計画で達成させていくかについて、ロードマップをご紹介しながら説明していきます。
- 基礎知識のインプット
- コーディング環境の設定
- HTML/CSSのインプット
- デザインツールのインプット
- デザイン/コーディングのアウトプット
- Sassのインプット
- Sassのアウトプット
- JavaScript/jQueryのインプット
- JavaScript/jQueryのアウトプット
- WordPressのインプット
- WordPressのアウトプット
- フリーランス（副業）
基礎知識のインプット
まずは、Webデザイン・プログラミングを学習する上で常識となる知識をインプットしていきましょう。
クライアントとの打ち合わせや面談の場面で、一般常識とされている知識を理解していないと「信用」を得ることができません。また、言語の学習を進めていく中でも解説の用語が理解できないと、手戻りが発生します。
ペン博士言語の学習をスタートする前に必ず学習するのじゃぞ！
コーディング環境の設定
コーディングするためのエディタの環境を設定していきましょう。
エディタ（editor）とは、「編集者」という意味を持ちます。しかしながら、IT業界においてエディタというのは、人を表すのではなくテキストデータ（文字/ファイル/データなど）の編集を行うためのソフトのことを指します。エディタは主に、ファイルを作成したり、テキストデータの入力や編集、保存するために使用されます。
WithCodeでは、「VS Code」を用いてコーディングしやすい環境を構築していきます。
VS Codeは他エディタに比べて軽量であることやコーディングしやすくする拡張機能が充実しているため、多くのユーザーに愛用されています。
下記のURLからダウンロードできますのでぜひご活用ください。
他にも、「Sublime Text」「Atom」「Vim」など様々なエディタが存在します。ご自身のPC環境・目的に沿って最適なエディタを選びましょう。
- Sublime Text：https://www.sublimetext.com/
- Atom：https://atom.softonic.jp/
- Vim：https://vimdoc.sourceforge.net/
HTML/CSSのインプット
コーディング環境が設定できた後は、HTML/CSSをインプットしていきましょう。
HTMLとCSSは「マークアップ言語」と呼ばれ、厳密にはプログラミング言語ではありません。しかし、Web制作の入り口としては最適です。
学習すると以下のメリットがあります。
目に見える成果がすぐわかる
→ 書いたコードがそのまま画面に反映されるので、達成感が得やすいです。
難しい計算処理が不要
→ 数学が苦手でも問題なし。直感的に進められます。
Web制作の大半を網羅できる
→ フロントエンド開発では、作業の7〜8割をHTML/CSSが占めるとも言われているため、HTML/CSSのマスターなくして多言語を習得していくことはほぼ不可能と言えます。
HTMLとは
HTMLとは、「Hyper Text Markup Language」の略称で、Web上の文字を記述するためにマークアップしていく言語です。そして、Webページのコンテンツが含まれている「テキスト形式のファイル」はHTMLで表示されています。
一般的な文書ソフトでは、フォントのサイズや配置位置といった表示方法を指定して、どれが見出しでどれが本文かを区別します。しかし、HTMLでは表示方法は指定しません。
HTMLは「見出し」「段落」などの文書を構成している要素に印を付け、それぞれが何を示しているかを区別するものとなります。
例えば、以下のようなHTMLタグを使って「WithCode」と表示するページを作成することができます。
<!DOCTYPE html>
<html>
<body>
<h1>WithCode</h1>
</body>
</html>Webページ上では下記のように表示されます。
実行結果
HTMLについては詳しく知りたい方はこちらからご覧ください。
あわせて読みたい
【プログラミング初心者必見】今さら聞けない！HTML とは？基礎知識から使い方まで徹底解説
ペン博士！最近プログラミングに興味があるのですが、そもそも「HTML」って何なのかよくわかりません。 HTMLはWebページの骨組みを作る基本中の基本の言語じゃ！今から…
CSSとは
CSSは、HTMLで表したWebページの各要素に対し、どのように表示するかを指定する言語です。Webページのレイアウトを整えるにはCSSを使用します。HTMLではどこからどこまでが（文書の構成要素として）何であるかを示し、そのHTMLで示された各範囲（要素）の表示指定を行うのがCSSの役割です。
CSSのような言語はスタイルシート言語と呼ばれています。
以下、HTMLをCSSで装飾したコードの例となります。
<h1>WithCode</h1>
<p>【WithCode(ウィズコード)】Web制作会社が開発した実践的なカリキュラム。卒業後からWeb制作会社の案件を担当しながら稼ぐ環境を提供する唯一のプログラミングスクールです。</p>h1 {
font-size: 24px;
color: red;
}
p {
font-size: 16px;
color: blue;
}Webページ上では下記のように表示されます。
実行結果
WithCodeでは、HTML/CSSそれぞれのカリキュラムだけでなく、実際にWebページを作成しながら、現役フリーランスがフィードバックする実践的なカリキュラムとなっております。
CSSについて詳しく知りたい方はこちらからご覧ください。
あわせて読みたい
【初心者必見】今さら聞けない！CSSとは？HTMLとの違いから使い方まで徹底解説!!
ペン博士！HTMLは少しわかってきたんですけど、よく『CSS』って言葉も聞くんです。これって何なんですか？ お、いいところに気づいた。CSSは、Webページの見た目を整え…
デザインツールのインプット
HTML/CSSのインプットができた後は、デザインカンプ（モックアップ）を作成するためのツールの使用方法を学習しましょう。
デザインカンプ（モックアップ）とは、制作物においてデザインやレイアウトを含めた仕上がりを具体的に示すために作られる完成見本のことです。デザインカンプはサイトの目的に合わせて作成します。
Web制作において、デザインの比重は非常に高いものになりますので、スムーズに扱えるレベルまでマスターしておきましょう。
デザインカンプを作成する代表的なツールとしては、「Figma」が多く使用されています。
その他には、「Adobe XD」が挙げられます。
クライアントからの指示や現場で使用されているツールに対応できるようにしておきましょう。
※ Adobe XDは単体でのダウンロードができなくなっているので、現場ではFigmaが使用される場面が多くなっています。
WithCodeでは、「Figma」「AdobeXD」の２つのツールについて、基本的な機能から上記2ツールを使用したデザインカンプの作成までを盛り込んだカリキュラムになります。
デザインコーディングのアウトプット
HTML/CSSとデザインツールの扱い方をインプットした後は、インプットした知識をアウトプットしていきましょう。このアウトプットの段階では、CSS設計などを意識しながらコーディングしていくことが重要になります。
初期段階では、非常にシンプルなものでも大丈夫です。例として、ご自身のポートフォリオを作成してみても良いでしょう。
ポートフォリオとは、日本語に直訳すると「紙ばさみ」「折りかばん」「書類入れ」という意味です。つまり「書類を運ぶためのケース」のことを表し、個々の書類を別々に扱うのではなく、書類全体をひとつの物として扱うという意味を持っています。
現代では、主に「金融・投資系」「教育系」「クリエイター系」で、それぞれ慣用的に異なる意味を持つ言葉として定着しています。Web制作の分野ではクリエイター系に当てはまり、「作品集」であり、ご自身の職種（あるいは転職希望職種）における実績や力量を評価してもらうために作成する資料となりますので覚えておきましょう。
また、デザインに関しては様々なサイトを見ながらインプットしたデザインツールを使用してデザインカンプを作成してみましょう。
このアウトプットを通じて、HTML/CSSやデザインツールの知識を定着させていきます。
ペン博士WithCodeでは、ランディングページやホームページを何度も実践形式で作成することにより、デザイン/コーディングスキルを向上させるカリキュラム構成となっておるのじゃ！
Sassのインプット
HTML/CSSが8~9割定着した後は、Sassに関して学習していきましょう。
Sassとは、CSSの拡張言語でメンテナンス性が向上することに加え、コーディングスピードを上げることができます。一方で、デメリットとしては「環境構築（コンパイル）が必要になる」という点が挙げられます。WithCodeでは、「DartJS Sass Compiler and Sass Watcher(https://marketplace.visualstudio.com/items?itemName=codelios.dartsass)」での環境構築手順を全て画像付きで解説していますので、ご安心ください。
Sassのアウトプット
Sassの環境構築、インプットが終了した後は、実際にSassを記述しながら知識を定着させていきましょう。
Sass特有のネストの書き方や変数/引数などを意識することが重要となります。
徐々に慣れてきたら、「コーディングスピード」が身に付いてくるはずです。
ペン博士WithCodeでは、実際にご自身がCSSで記述したホームページをSassで置き換えるという課題を通じ習熟度を増やすカリキュラムとなっておるぞ！
JavaScript/jQueryのインプット
この段階で、お馴染みの「JavaScript」と「jQuery」を学習していきます。
独学で学習を進めている方はJavaScriptとjQueryを比較的早い段階で学習してしまう傾向がありますが、その段階での学習は推奨しません。
なぜなら、プログラミングの基礎が固まっていない状態で学んでも、「何をするための言語なのか」が理解しづらいからです。
ここでは、JavaScriptとjQueryの違いを確認しながら基礎的な文法からインプットしていきましょう。
JavaScriptとはWebページを「動的」にするためのフロントエンド言語です。
ただし、それだけではありません。実際には次のような用途に使えます。
ボタンやメニューの動作などのインタラクション
Webアプリケーションやゲーム開発
サーバーサイド（Node.js）での処理
幅広い用途に対応できる非常に柔軟な言語です。
jQueryは、JavaScriptでよく使われる処理を簡潔に書けるようにした「ライブラリ」です。
特徴としては以下の通りです。
JavaScriptより短いコードで実装可能
視覚的にも分かりやすい記述が多く、初心者でも扱いやすい
JavaScriptについて詳しく知りたい方はこちらからご覧ください。
あわせて読みたい
【初心者必見！】JavaScriptとは？ 現場で使用頻度の高いメソッドも詳しく紹介！
ペン博士！ Web制作を学習するときに「JavaScript」ってよく聞くんですけど、これって何ですか？ おぉ、JavaScriptに興味を持ったのはとてもいい兆しじゃ！JavaScriptは…
JavaScript/jQueryのアウトプット
基礎的な文法がインプットできた後は、Web制作で使用されているプログラムを確認しながら、Webページに動きを加えていきましょう。
文法がしっかりと理解できている状態であれば、それぞれのプログラムが「何を実行しているものなのか」を理解できるはずです。
また、jQueryには多くのプラグインが存在しているので、ご自身で調べながら実装してみても良いかと思います。
プラグインとは、「拡張機能」のことで、WebブラウザやCMSなどに機能を追加し、使いやすくするためのプログラムがプラグインです。例えば、「Google Chrom」にも、検索結果の一覧ページに各ページのプレビュー画像を表示したり、全画面のスクリーンショットを撮れるようにしたりなど、様々なプラグインがあります。
jQuery プラグイン一覧：
https://goworkship.com/magazine/jquery-plugin/
WordPressのインプット
Web制作の集大成とも言えるWordPressの学習に入っていきます。
WordPressはPHPで構築されているCMS（Contents Management System）となるためPHPの基礎的な文法を学習する必要があります。
PHPとは、PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。特徴として、HTMLの中に埋め込む形で記述することができます。主に、問い合わせフォームや掲示板などユーザーのアクションにより表示内容が変わるWebサイトで使用されています。
CMSとは、Webサイトを運営するにあたって、HTMLやCSSの書き換えなど面倒で手間のかかる作業をしなくても、管理画面を通して記事や画像を登録・更新できるシステムのことを指します。Webサイトの中のリンクやナビゲーション、新着情報なども簡単に更新できるようになるため、Webサイト運営のコストを下げることができます。
ただ、WordPressで使用するPHPに関しては、主にテンプレートタグというものを使用するため、Laravelなどのフレームワークを使用するWeb開発と比べ、詳細な部分までの理解は必要ありません。テンプレートタグを扱えることを目標に学習していきましょう。
テンプレートタグとは、WordPressで定義されたPHPの関数です。例えば、ブログサイト内にて、新しく投稿された順に記事をリスト形式で自動で表示させるなどの処理を自動化してくれるのがテンプレートタグとなります。
WordPressのアウトプット
インプットしたWordPressやPHPに関する知識を活かして、コーディングしたサイトをPHPで書き換える方法を学習していきましょう。
実際に案件となるのは、
- 既存テーマをアレンジするもの
- コーディングしたファイルをオリジナルテーマとしてWordPressに組み込むもの
が大半を占めてきます。この部分は、開発に近い学習にはなりますのでレベルは上がりますが、しっかり理解していくようにしましょう。
また、WithCodeでは、上記加えてWordPressでECサイトを構築する方法まで詳細に学んでいきます。
目標別ロードマップ（フリーランス）
フリーランスで活動する手順としては、以下になります。
- ポートフォリオの作成
- クライアントワークの学習
- 公開可能な実績の作成
- クラウドシーシングの登録
- 営業活動
- +α
ポートフォリオのブラッシュアップ
クライアントはその方が持つポートフォリオを見た後に「仕事を任せられるかどうか」を判断します。
そのため、より魅力的に映るポートフォリオを作成するようにしましょう。
Web制作の学習の中で、習得したJavaScriptやjQuery、WordPressなどの知識を積極的にポートフォリオに反映させていきましょう。
ポートフォリオの中で主に見られる事項は下記になります。
- 成果物の質
- 成果物における担当箇所・業務
- 使用可能なツール
- ポートフォリオ自体の完成度
これらの点を意識しながらポートフォリオをブラッシュアップさせていきましょう。
クライアントワークの学習
クライアントワークとは、クライアント（依頼主・顧客・取引先）からの依頼を受け、目的・要望に沿った成果物を決められた期間内に作成し、納品することです。流れとしては、
- 営業活動
- ミーティング・ヒアリング
- 提案
- 作成
- 納品
といった流れになります。自主制作とは異なり、契約に基づいて行う業務になります。
座学では学ぶことが難しいものになりますが、クライアントワークに関しては下記項目を意識して学習していきましょう。
- 打ち合わせの進め方
- 要件定義
- 情報設計
- 案件の流れ
- 検証・デバッグ
- 検収・納品
公開可能な実績の作成
クライアントワークに関して学習し終えた後は、3~5件ほど公開可能な実績作りを始めていきましょう。
クライアントはポートフォリオ内に掲載している実績を確認して、その方が持つスキルレベルを判断します。
そのため、この段階では自らの人脈や簡単な営業活動を通じて、無料でも良いので実案件に取り組んでみましょう。
※ 練習用のサイトを実績として掲載している方も見受けられますが、練習用のサイトではスキルレベルを判断できないため、基本的には「実案件」を掲載するようにしましょう。
特に学習後からの初案件が獲得できないケースが非常に多いです。WithCodeでは、実案件を提供する案件サポートを行っております。これにより、公開可能な実績を作ることにつながり、「学習」だけでなく「稼ぐ」までを徹底的にサポートしております。
クラウドソーシングの登録
公開可能な実績をポートフォリオ内に掲載した後は、クラウドソーシングサイトに登録しましょう。
クラウドソーシングとは、企業がインターネット上で不特定多数に業務を発注する業務形態です。
ペン博士下記に有名なクラウドソーシングのサイトを例として取り上げているので、公開されている案件概要や倍率、単価感などを比較検証してみるのじゃ。
1. クラウドワークス
公式サイト：https://crowdworks.jp/
2. ランサーズ
公式サイト：https://www.lancers.jp/
3. ココナラ
公式サイト：https://coconala.com/
4. クラウディア
公式サイト：https://www.craudia.com/
営業活動
営業活動を始めるにあたり、クラウドソーシングサイトの下記項目に関して記載しましょう。
- プロフィール
- 提案書（提案文）
上記項目を記載する際には、「クライアントの視点に立つ」という意識が重要になります。
ネット上でやり取りを行うクラウドソーシングでは、クライアントは応募者の性格やスキルを詳細に把握することは難しく、応募者の情報はプロフィールや提案文からでしか判断することができません。
クライアントに安心して仕事を任せてもらえる信頼感や安心感、スキルなど様々な観点を考慮する必要があります。
プロフィール作成のポイント
実績や稼働可能時間は必ず記載
→ いつ・どれだけ対応できるかを明確にします。
端的で論理的にまとめる
→ 長すぎる文章は読まれにくく、選考から外れる可能性があります。
読み手（クライアント）の視点を意識
→ 自分本位な記述ではなく、相手にとって分かりやすい説明しましょう。
提案文の書き方のコツ
クライアントの要望や背景を的確に反映
→ 募集内容を読み込み、「何を求めているか」を文章に反映させます。
対応可能な業務内容を具体的に記載
→ どの作業ができるのか明確にしましょう。
自分の強みと実績を添える
→ どんな経験があるか、それがどう案件に役立つかを説明します。
+α
上記スキルでWeb制作の案件を獲得し、「月10万円を稼ぐ」という目標は達成できるはずです。
営業活動を行いながら更なるスキルの向上を目指して下記スキルを学習することで、より幅の広い案件を請け負うことができます。
Webデザインのおすすめツール8選
ペン博士ここではWebデザインのおすすめツールを紹介するぞ！
1. Photoshop
Photoshop（フォトショップ）とは、正式名称Adobe Photoshop（アドビ フォトショップ）といい、Adobe IllustratorやAdobe After Effectsなどのデザインツールで知られるAdobe社が提供する写真編集ソフトです。写真の加工や編集をする際に使用されることが多いです。また、幅広いユーザーがいるため、使用方法や便利な使い方が検索でヒットしやすいのも魅力です。
2. Illustrator
Illustrator（イラストレーター）とは、正式名称Adobe Illustrator（アドビイラストレーター）といい、こちらもAdobe社が提供するツールです。テキストと画像を組み合わせてデザインを作成できるアプリです。PhotoshopとIllustratorの違いとして、Illustratorは「ロゴ」や「デザインカンプ資料」などを作るのに長けているのに対して、Photoshopは「画像加工・合成」「描画」などに向いています。
3. Wix
Wixとは、先ほど説明したWordpressと同じくCMSの一つで、ノーコードと呼ばれるサービスです。HTML/CSSなどの専門的なプログラミング知識がなくても、テンプレートを利用し、ドラック＆ドロップで手軽にWebサイトを制作できるのが魅力です。
4. Webflow
Webflowとは、ここまでで出てきたWordpress・Wixと同じくCMSの一つで、ノーコードと呼ばれるサービスです。特徴としては、多くのテンプレートが公開されており、デザインは基本的に自由に変えることができることに加えて、そのほとんどをドラッグ＆ドロップ＋クリックで設定することができます。また、外部ツールとの連携も豊富で、多機能なサイトを作ることもでき、スクリプトタグなどコーディングも可能なためカスタマイズ性も高いです。
5. Studio
StudioもCMSの1つで、ノーコードと呼ばれるサービスです。特徴としては、日本語に対応している点やテンプレートのデザイン性の高さがあります。しかし、他のCMSと比べると実装できる機能が少ない点がデメリットとも言えます。
6. Shopify
Shopifyとは、簡単にECサイトを開設できる、定期課金型のECプラットフォームです。ECサイトのテンプレート、決済手段、ホスティングサービスをパッケージ化し、サブスクリプションサービスとして提供しています。これから事業を拡大していきたい事業者に向いています。
7. BASE
BASEとは、ショップ開設数180万店舗を突破した、ネットショップ作成サービスです。BASEではネットショップのサイトデザイン・決済機能・ショップ運営に必要な機能など、ネットショップをはじめるのに欲しい機能がそろっています。費用を抑えてECサイトを運営したい方に向いています。
8. STORES
STORESとは、SNS感覚で手軽にネットショップを開設できるプラットフォームです。PCだけではなくスマホでの制作も対応しているので、PCを持っていないという方でも気軽に始めることができます。個人でECサイトを開設したい方に向いています。
生徒ペン博士、ここまで学習の流れがすごくよく分かりました！
思ったよりも地道な道のりなんですね。
ペン博士うむ。華やかに見えるWebの世界も、最初は土台作りが何より大切じゃ！
焦らず、一歩ずつ進めば必ず形になるぞ。
生徒はいっ！目標はまず月5万円…その先の10万円、絶対達成してみせます！
ペン博士それでこそ未来のクリエイターじゃ！
困ったらまたいつでも聞きに来なさい。
まとめ
今回は、ロードマップの説明から、「10万円」を稼ぐための具体的なロードマップ作成方法について解説しました。
WithCodeでは、ロードマップで紹介した内容を余すことなく高い質で学習できる環境を整えています。
特に案件サポートなどを通じて、最終目標である「稼げる人材」を育成するという点に強みを持っていますので、副業・フリーランスに興味を持っている方は無料カウンセリングで気軽にご相談ください。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
