※本記事にはアフィリエイト広告が含まれます。
HTML/CSSを学び始めたのは24歳の冬だった。仕事は地方の印刷会社のデザイン補助で、チラシの版下作業が中心。「Webもできたら仕事が増えるかもしれない」という思いで独学を始めた。
最初の月収は0円だった。当たり前だ。勉強しながら案件を取りにいくのではなく、「まず作れるようになってから」と思っていたから。でも「まず作れるようになる」には、実案件がないと先に進めない部分もある。その矛盾に気づくまでに半年かかった。
この記事は、HTML/CSSの独学から月収5万円に到達するまでの道のりを、時系列で正直に書いたものだ。
0〜3ヶ月目：学習期間——何を使って学んだか
最初に使ったのはProgateだ。HTML・CSSのコースを2周した。次にUdemyの「【HTML/CSS】20時間で理解するWeb制作入門講座」を購入（セール時2000円以下）。このUdemy講座でポートフォリオサイトっぽいものを1本作った。
並行して「コーポレートサイト 模写」で検索して、既存サイトをそっくりそのまま自分でコーディングする「模写コーディング」を20本こなした。これが技術力を上げる上で最も効果的だったと今でも思っている。
3ヶ月後には以下のものが作れるようになっていた。
- HTMLの基本構造（head・body・semantic要素）
- FlexboxとGridを使ったレイアウト
- レスポンシブデザイン（media query）
- CSS変数とBEMクラス命名規則
- Figmaのデザインデータを見ながらのコーディング
4ヶ月目：初めての受注——クラウドワークスで最初の案件
クラウドワークスに登録して最初の1ヶ月、全く受注できなかった。プロフィールを埋めて、案件に30件以上応募したが全滅だった。理由は明確だった。「実績ゼロ」だ。
作戦を変えた。応募するのをやめて、「自分のポートフォリオサイトを作ること」に集中した。1週間で5ページ構成のポートフォリオサイトを作り、GitHubで公開してクラウドワークスのプロフィールにURLを掲載した。また、過去に模写コーディングした20本もスクリーンショット付きでポートフォリオに掲載した。
そこから2週間後、最初の案件が来た。LP（ランディングページ）1本を制作する案件で、報酬は8000円だった。
最初の実案件——LP制作8000円の体験
クライアントは化粧品を販売している個人事業主で、新しい商品のLPが欲しいという依頼だった。Figmaのデザインデータはなく、「参考サイトとほしいセクション一覧を書いたメモ」だけが渡された。
デザインから自分で起こしてコーディングするという想定外の作業で、納品まで5日かかった（見積もりは3日と言っていた）。時給換算すると400円以下だったが、「実際に使われるWebページを作った」という体験の価値は金額以上だった。クライアントから「思っていたより良くできた」と言ってもらえた。
この案件をポートフォリオに追加したことで、次の受注につながった。
月収推移と案件単価の変化
| 時期 | 月収 | 主な案件 |
|---|---|---|
| 4ヶ月目 | 8000円 | LP制作1本（初案件） |
| 5〜6ヶ月目 | 1〜2万円 | LP・コーポレートサイト修正案件 |
| 7〜9ヶ月目 | 2〜3万円 | LP制作2〜3本/月 |
| 10〜12ヶ月目 | 3〜5万円 | LP + コーポレートサイト新規 |
月5万円を超えたのは活動開始から10ヶ月後だった。「早く稼ぐには初月から受注を取りにいくべきだった」という後悔はある。
ランサーズも並行利用——プラットフォームの使い分け
クラウドワークスに加えてランサーズにも登録した。ランサーズは企業からの案件がやや多い印象で、単価は似たようなものだが、継続案件になりやすいケースがあった。
自分のケースでは、ランサーズで受注したEC系の会社からのLP制作案件が継続になって、月1〜2本の発注をもらえる関係になった。これが収入の安定化に大きく貢献した。
クラウドワークス・ランサーズどちらか1つではなく両方登録することをすすめる。案件の傾向や得意なクライアント層が微妙に違う。
月5万円達成時のポートフォリオ構成
月5万円を達成した時点でのポートフォリオに含まれていたもの。
- 自分のポートフォリオサイト（5ページ、PC/SPレスポンシブ対応）
- 実際に公開されているLP 3本（クライアントから掲載許可をもらう）
- コーポレートサイト模写 10本（架空企業向け）
- 架空のLP 2本（練習で制作したもの）
「実際に公開されているもの」があると、評価が全然違う。クライアントからの掲載許可は最初に契約段階で「ポートフォリオへの掲載可否」を確認しておくとスムーズだ。
単価を上げるために意識したこと
提案文の改善
最初の頃、提案文は「〇〇ができます、よろしくお願いします」という内容だった。これを「クライアントが何を求めているか、自分がどう貢献できるか」を具体的に書く文に変えた。「参考サイトのレイアウトに近いコーディングが得意です」「スマートフォン表示の最適化に力を入れています」など。
コミュニケーション速度
返信は30分以内を心がけた。フリーランス初心者にとって最も簡単に差別化できる点だと今でも思っている。クライアントから「返信が早くて助かる」と言われることが増え、リピート率が上がった。
HTML/CSSだけで稼ぐ限界と次のステップ
月5万円は達成したが、その壁を超えるためにはWordPressの実装スキルが必要だと感じた。多くの案件がWordPressでのサイト構築を求めており、HTML/CSSだけでは対応できない仕事が出てきたからだ。
月5万円の達成後、PHP・WordPressのカスタマイズを学び始めた。そちらの話は別の機会に書くが、HTML/CSSをしっかり固めておいたことがWordPressの習得スピードを上げてくれた。基礎があれば次のステップに進む時間は短縮できる。
HTML/CSSは「Webを作る仕事」への入口だ。そこから稼げるようになるまでの最短ルートは、「模写コーディングでスキルを磨き、ポートフォリオを作り、実案件を取りに行く」この順番だと、自分の経験から言える。
