【2024年版】Web制作で10万円稼ぐ【最強】ロードマップ
今回はWeb制作の学習を進める上で必要となる「ロードマップ」について、ロードマップ自体の説明から作成方法まで徹底的に解説していきます。
Web制作会社が完全監修しているものになりますので、皆さんの今後の学習に役立つ内容になっています。
しっかりと熟読して「副業」「フリーランス」への第一歩を踏み出しましょう！
最後にはロードマップの作成テンプレートもございますので、ぜひご利用ください。
目次
ロードマップについて
ロードマップとは
ロードマップとは、現状をスタート地点に設定し、実現したい将来や達成したい目標をゴールに設定した「計画表」を指します。スタートからゴールまでの間に小さな目標を時系列に設定していくことで、達成したいゴールまでに必要な要素を整理・可視化することに役立ちます。プログラミングを本格的に学習していく前に、「ロードマップ」を作成することをおすすめします。今回は、「月１０万円稼ぎたい」という方のロードマップの一例を作成します。
※ あくまで一例ですので、目標を絶対に達成するという保証をするものではありません。
ロードマップを作成する際には以下の要素を組み込みます。
- 目標を明確にする
最終的に達成したい目標を明確にします。「お金を稼ぐ」といった漠然とした、抽象的な目標ではなく「10万円を稼ぐ」といったように、設定する目標をより具体的にすることで、ロードマップを作成しやすくなります。 - 目標の達成時期
目標を達成したい時期を明確にします。達成時期に関しても「来年まで」や「本業が落ち着くまで」といった抽象的な時期ではなく、「6ヶ月後」などのように、明確に設定しましょう。 - 現状の把握
自分の現状を客観的に分析します。例として、「プログラミングスキルとしては、ProgateでHTML/CSSの基礎文法を学習」など具体的に分析しましょう。
しかし、こちらの記事をご覧いただいている方の中には、そもそもWeb制作で副業をするのに必要な知識が分からないから、現状を分析できないという方もいらっしゃると思います。
次章以降で必要な知識についても解説しているので、しっかりと熟読し、具体的に分析しましょう。 - 問題を洗い出す
現状の分析した結果と達成したい目標を比較して、何をする必要があり、どのようなことが問題となっているかを洗い出します。そして洗い出した問題を分析し、そのための解決策を検討します。
例として、
課題：Sassは必要性を理解していなかったため、インプット学習から始める必要がある。
解決策：入会予定のプログラミングスクールカリキュラムに、Sassがあるためそちらで学習する。
上記のように、解決策までセットで記載するようにしましょう。WithCodeでは、Web制作を副業で行うための必須のスキルを全て学習することができます。 - 時系列で計画を練る
どの順番でどの問題から着手していくのかを時系列で考えていきます。目標達成したい時期から逆算し、どのタイミングで何をするべきなのかを考えます。こちらは、ご自身でカレンダーアプリに登録したり、エクセルやパワーポイントでスケジュールを組むことを推奨します。WithCodeでは、一日単位まで細分化したスケジュール表で管理することができます。
学習ロードマップ
「月10万円稼ぎたい」という目標を例に挙げ、どのような計画で達成させていくかについて、ロードマップをご紹介しながら説明していきます。
- 基礎知識のインプット
- コーディング環境の設定
- HTML/CSSのインプット
- デザインツールのインプット
- デザイン/コーディングのアウトプット
- Sassのインプット
- Sassのアウトプット
- JavaScript/jQueryのインプット
- JavaScript/jQueryのアウトプット
- WordPressのインプット
- WordPressのアウトプット
- フリーランス（副業）
基礎知識のインプット
まずは、IT業界で常識となる知識に関してインプットしていきましょう。
クライアントとの打ち合わせや面接の場面で、一般常識とされている知識を理解していないと「信用」を得ることができません。また、言語の学習を進めていく中でも解説の用語が理解できないと、手戻りが発生します。
実際に言語の学習をスタートする前に必ず学習するようにしましょう。
WithCodeでは、「Webについて」や「SEOについて」など、プログラミング学習を進める上で必須の用語を図解付きで網羅しています。
コーディング環境の設定
コーディングするためのエディタの環境を設定していきましょう。
エディタ（editor）とは、「編集者」という意味を持ちます。しかしながら、IT業界においてエディタというのは、人を表すのではなくテキストデータ（文字/ファイル/データなど）の編集を行うためのソフトのことを指します。エディタは主に、ファイルを作成したり、テキストデータの入力や編集、保存するために使用されます。
WithCodeでは、「VS Code」を用いてコーディングしやすい環境を構築していきます。
VS Codeは他エディタに比べて軽量であることやコーディングしやすくする拡張機能が充実しているため、多くのユーザーに愛用されています。
こちらのリンク（https://visualstudio.microsoft.com/ja/）からダウンロードすることができます。
他にも、「サクラエディタ」「WinMerge」「秀丸エディタ」など様々なエディタが存在します。ご自身のPC環境・目的に沿って最適なエディタを選びましょう。
HTML/CSSのインプット
コーディング環境が設定できた後は、HTML/CSSをインプットしていきましょう。
HTML/CSSは「マークアップ言語」と呼ばれ、厳密にはプログラミング言語ではありませんが、プログラミング学習の入り口としてHTML/CSSを学習すること自体は間違っていません。なぜならば、HTML/CSSはWebページなどを作成する際に用いられており、ユーザーが目にする部分をコーディングします。そのため、変化がダイレクトでわかるため、変化が目に見えてわかりやすいという特徴があります。また、HTML/CSSは厳密にはプログラミング言語ではないため、数学的な処理を記載する必要がない点も学習難易度が低い理由です。
言い換えれば、HTML/CSSのマスターなくして多言語を習得していくことはほぼ不可能と言えます。フロントエンドがメインとなるWeb制作において、HTML/CSSの記述が7~8割を占めるため、必ず習得する必要があります。
HTMLとは
HTMLとは、「Hyper Text Markup Language」の略称で、Web上の文字を記述するためにマークアップしていく言語です。そして、Webページのコンテンツが含まれている「テキスト形式のファイル」はHTMLで表示されています。一般的な文書ソフトでは、フォントのサイズや配置位置といった表示方法を指定して、どれが見出しでどれが本文かを区別します。しかし、HTMLでは表示方法は一切指定しません。HTMLは「見出し」「段落」などの文書を構成している要素に印を付け、それぞれが何を示しているかを区別するものとなります。
例えば、以下のようなHTMLタグを使って「WithCode」と表示するページを作成することができます。
<!DOCTYPE html>
<html>
<head>
<title>WithCode</title>
</head>
<body>
<h1>WithCode</h1>
</body>
</html>Webページ上では下記のように表示されます。
実行結果
CSSとは
CSSは、HTMLで表したWebページの各要素に対し、どのように表示するかを指定する言語です。Webページのレイアウトを整えるにはCSSを使用します。HTMLではどこからどこまでが（文書の構成要素として）何であるかを示し、そのHTMLで示された各範囲（要素）の表示指定を行うのがCSSの役割です。この場合のHTMLの言語はマークアップ言語と言い、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ページを作成しながら、現役フリーランスがフィードバックする実践的なカリキュラムとなっております。
デザインツールのインプット
HTML/CSSのインプットができた後は、デザインカンプ（モックアップ）を作成するためのツールの使用方法を学習しましょう。
デザインカンプ（モックアップ）とは、制作物においてデザインやレイアウトを含めた仕上がりを具体的に示すために作られる完成見本のことです。デザインカンプはサイトの目的に合わせて作成します。
Web制作において、デザインの比重は非常に高いものになりますので、スムーズに扱えるレベルまでマスターしておきましょう。
デザインカンプを作成する代表的なツールとしては、「Figma(https://www.figma.com/ja/)」が多く使用されています。
その他には、「Adobe XD(https://helpx.adobe.com/jp/support/xd.html)」が挙げられます。
クライアントからの指示や現場で使用されているツールに対応できるようにしておきましょう。
※ 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での環境構築手順を全て画像付きで解説していますので、ご安心ください。
Sassのアウトプット
Sassの環境構築、インプットが終了した後は、実際にSassを記述しながら知識を定着させていきましょう。
Sass特有のネストの書き方や変数/引数などを意識することが重要となります。
徐々に慣れてきたら、「コーディングスピード」が身に付いてくるはずです。
WithCodeでは、実際に自分がCSSで記述したホームページをSassで置き換えるという課題を通じ習熟度を増やすカリキュラムとなっております。
JavaScript/jQueryのインプット
この段階で、お馴染みの「JavaScript」と「jQuery」を学習していきます。
独学で学習を進めている方はJavaScriptとjQueryを比較的早い段階で学習してしまう傾向がありますが、その段階での学習は推奨しません。
プログラミング知識のベースが整った後に学習しないと、JavaScriptとjQueryがどのような言語であるのかを理解できないはずです。
ここでは、JavaScriptとjQueryの違いを確認しながら基礎的な文法からインプットしていきましょう。
JavaScriptとは、Webサイトを表示するためにフロント側で動くプログラミング言語です。動的なページを作成する言語として紹介されることが多いですが、できることの幅が非常に広く、アプリケーションやゲーム開発、サーバーサイドで動作するプログラムも実装が可能となっています。
jQueryとは、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では、卒業テストで一定以上の点数を取ると、実案件を提供する案件サポートを行っております。これにより、公開可能な実績を作ることにつながり、「学習」だけでなく「稼ぐ」までを徹底的にサポートいたします。
クラウドソーシングの登録
公開可能な実績をポートフォリオ内に掲載した後は、クラウドソーシングサイトに登録しましょう。
クラウドソーシングとは、企業がインターネット上で不特定多数に業務を発注する業務形態です。
下記に有名なクラウドソーシングのサイトを例として取り上げていますので、公開されている案件概要や倍率、単価感などを比較検証してみてください。
- クラウドワークス：https://crowdworks.jp/
- ランサーズ：https://www.lancers.jp/
- ココナラ：https://coconala.com/
- ビズシーク：https://www.bizseek.jp/
- クラウディア：https://www.craudia.com/
営業活動
営業活動を始めるにあたり、クラウドソーシングサイトの下記項目に関して記載しましょう。
- プロフィール
- 提案書（提案文）
上記項目を記載する際には、「クライアントの視点に立つ」という意識が重要になります。
ネット上でやり取りを行うクラウドソーシングでは、クライアントは応募者の性格やスキルを詳細に把握することは難しく、応募者の情報はプロフィールや提案文からでしか判断することができません。
クライアントに安心して仕事を任せてもらえる信頼感や安心感、スキルなど様々な観点を考慮する必要があります。
プロフィールは、実績や稼働可能時間を必ず記載しましょう。また、可能な限り端的に論理的に記載しましょう。なぜならば、クラウドソーシングサイトでは、担当者は複数の応募を比べ発注者を選定することが多いです。そのため冗長なプロフィールは読まれない可能性が高いです。また、相手側の視点に立っていないという印象を与えてしまいかねません。
提案文には、「クライアントの要望や状況」「対応業務」を改めて記載しましょう。また、案件に対する自身の強みやその根拠（実績等）を記載し、相手からの信頼を得ることを心掛けましょう。
+α
上記スキルでWeb制作の案件を獲得し、「月10万円を稼ぐ」という目標は達成できるはずです。
営業活動を行いながら更なるスキルの向上を目指して下記スキルを学習することで、より幅の広い案件を請け負うことができます。
- Photoshop
Photoshop（フォトショップ）とは、正式名称Adobe Photoshop（アドビ フォトショップ）といい、Adobe IllustratorやAdobe After Effectsなどのデザインツールで知られるAdobe社が提供する写真編集ソフトです。写真の加工や編集をする際に使用されることが多いです。また、幅広いユーザーがいるため、使用方法や便利な使い方が検索でヒットしやすいのも魅力です。 - Illustrator
Illustrator（イラストレーター）とは、正式名称Adobe Illustrator（アドビイラストレーター）といい、こちらもAdobe社が提供するツールです。テキストと画像を組み合わせてデザインを作成できるアプリです。PhotoshopとIllustratorの違いとして、Illustratorは「ロゴ」や「デザインカンプ資料」などを作るのに長けているのに対して、Photoshopは「画像加工・合成」「描画」などに向いています。 - Wix
Wixとは、先ほど説明したWordpressと同じくCMSの一つです。HTML/CSSなどの専門的なプログラミング知識がなくても、テンプレートを利用し、ドラック＆ドロップで手軽にWebサイトを制作できるのが魅力です。 - Webflow
Webflowとは、ここまでで出てきたWordpress・Wixと同じくCMSの一つです。特徴としては、多くのテンプレートが公開されており、デザインは基本的に自由に変えることができることに加えて、そのほとんどをドラッグ＆ドロップ＋クリックで設定することができます。また、外部ツールとの連携も豊富で、多機能なサイトを作ることもでき、スクリプトタグなどコーディングも可能なためカスタマイズ性も高いです。 - Studio
こちらもCMSの1つです。特徴としては、日本語に対応している点やテンプレートのデザイン性の高さがあります。しかし、他のCMSと比べると実装できる機能が少ない点がデメリットとも言えます。 - Shopify
Shopifyとは、簡単にECサイトを開設できる、定期課金型のECプラットフォームです。ECサイトのテンプレート、決済手段、ホスティングサービスをパッケージ化し、サブスクリプションサービスとして提供しています。これから事業を拡大していきたい事業者に向いています。 - BASE
BASEとは、ショップ開設数180万店舗を突破した、ネットショップ作成サービスです。BASEではネットショップのサイトデザイン・決済機能・ショップ運営に必要な機能など、ネットショップをはじめるのに欲しい機能がそろっています。費用を抑えてECサイトを運営したい方に向いています。 - STORES
STORESとは、SNS感覚で手軽にネットショップを開設できるプラットフォームです。PCだけではなくスマホでの制作も対応しているので、PCを持っていないという方でも気軽に始めることができます。個人でECサイトを開設したい方に向いています。
まとめ
今回は、ロードマップの説明から、「10万円」を稼ぐための具体的なロードマップ作成方法について解説しました。
WithCodeでは、ロードマップで紹介した内容を余すことなく高い質で学習できる環境を整えています。
特に案件サポートなどを通じて、最終目標である「稼げる人材」を育成するという点に強みを持っていますので、副業・フリーランスに興味を持っている方は無料カウンセリングで気軽にご相談ください。
WithCodeを体験できる体験コース公開中！
体験コースの内容
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。体験コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
