コーダーの副業で最初の案件を受けるまで｜HTMLとCSSの実力の見せ方

2026年2月12日

＠SOHO編集部

この記事のポイント

✓コーダーの副業で最初の案件を受けるまでの道のりを
✓副業で募集されやすい案件の種類
✓HTMLとCSSの実力を伝える作品の作り方

コーダーの副業は、デザインのデータをもとにHTMLとCSSでウェブページを組み立てる仕事を、本業の合間に受ける働き方です。パソコンが1台あれば在宅で取り組め、作業の時間も自分で決めやすいため、ウェブ制作を学んだ人や、本業でウェブに関わっている会社員から関心を集めています。

一方で、副業で受けられる案件は、フリーランス向けの案件に比べて数が限られ、「実務経験が何年以上」という条件が付いていることも少なくありません。学習を終えたばかりの人が最初の1件を受けるまでには、実力を相手に伝える工夫が必要です。この記事では、副業で募集されやすい案件の種類、HTMLとCSSの実力を伝える作品の作り方、応募文と見積もりの出し方、納品前の確認、契約と勤め先の副業の決まりまで、最初の案件を受けるまでの道のりを順に説明します。

コーダーの仕事とは何をする仕事か

コーダーは、デザイナーが作ったデザインのデータをもとに、HTMLとCSS、必要に応じてJavaScriptを書いて、ブラウザで表示できるウェブページに組み立てる仕事です。デザインのデータは、FigmaやAdobe XD、Photoshopなどで作られていることが多く、コーダーはそこから文字の大きさや色、余白の幅を読み取って、コードに置き換えていきます。

HTMLは、ページの文章や画像、見出しなどの構造を表す言語です。CSSは、その構造に色や大きさ、配置などの見た目を付ける言語です。JavaScriptは、ボタンを押したときに表示を切り替えるなど、ページに動きを付けるための言語です。

コーダーの仕事で求められるのは、デザインのとおりに表示することだけではありません。スマホやパソコンなど画面の大きさが違っても崩れずに表示されること、検索エンジンや読み上げのソフトが内容を正しく理解できる構造になっていること、表示の速度が遅くならないこと、あとから別の人が修正しやすいコードになっていることも、仕事の質として見られます。

ウェブ制作の基本を体系的に学び直したい場合は、Mozillaが公開しているMDN Web Docsのウェブ開発の学習のページが、HTMLとCSSの基礎から順に学べる資料としてよく使われています。

副業で募集されやすい案件の種類

コーダーの副業で募集されやすい案件には、いくつかの型があります。それぞれ、求められる力と作業の量が違います。

ランディングページのコーディング

1枚の縦に長いページで商品やサービスを紹介する、ランディングページ（LP）のコーディングです。デザインのデータが1枚で完結していることが多く、作業の範囲が分かりやすいため、副業の案件として多く見られます。スマホとパソコンの両方で崩れずに表示する力が求められます。

既存のサイトの修正と更新

すでに公開されているサイトの文章の差し替え、画像の入れ替え、新しいページの追加などです。作業の量は小さいことが多いものの、ほかの人が書いたコードを読み解き、全体を崩さずに修正する力が求められます。

WordPressのテーマの修正

WordPressで作られたサイトのデザインの修正や、ページのテンプレートの作成です。HTMLとCSSに加えて、PHPのテンプレートの基本的な書き方の理解が必要になります。

メールマガジンのHTML

メールで送るHTMLの作成です。メールソフトによって表示のされ方が大きく違うため、ウェブページとは違う書き方の決まりがあります。慣れると継続して依頼を受けやすい分野です。

バナーや部品の組み込み

サイトの一部に新しいバナーやフォームの部品を組み込む作業です。小さな作業ですが、短い納期で依頼されることが多く、対応の速さが評価されます。

最初の案件としては、作業の範囲がはっきりしているランディングページのコーディングや、既存のサイトの小さな修正が取り組みやすいでしょう。

副業の案件が少なく感じる理由

コーダーの副業を探し始めると、思っていたより案件が少ないと感じる人が多くいます。その理由を知っておくと、探し方を工夫できます。

コーダーの副業について解説している記事では、次のように説明されています。

実際、フリーランス向けの案件に比べると、会社員でも取り組める副業案件は市場にあまり出回らないので、案件探しに苦労するかと思います。出典: hiraku-agent.com

理由の1つは、平日の日中に連絡が取れることを条件にする依頼主が多いことです。ウェブ制作の現場では、デザイナーやディレクターとのやり取りが頻繁に発生するため、本業の勤務時間中に返信できない副業の人は選ばれにくくなります。

もう1つの理由は、即戦力が求められることです。同じ記事でも、副業やフリーランスの人には実務の経験が問われやすいと書かれています。

なぜなら、フリーランスや副業ワーカーは即戦力として現場に期待されており、必須条件として「実務経験3年以上」のような実務経験を問われるからです。出典: hiraku-agent.com

ただし、すべての案件が実務経験を条件にしているわけではありません。小さな会社や個人の事業者からの依頼、クラウドソーシングの小さな案件の中には、作品を見て判断してくれる依頼主もいます。実務経験がない段階では、こうした依頼主に「この人なら任せられる」と思ってもらえる作品を用意することが、最初の1件への近道になります。

HTMLとCSSの実力を伝える作品の作り方

実務経験が浅いコーダーにとって、作品は実力を伝えるほぼ唯一の手段です。どんな作品を、どう見せればよいかを整理します。

作品は3つあればよい

作品の数は多ければよいわけではありません。種類の違う作品が3つほどあれば、実力は十分に伝わります。たとえば、次のような組み合わせです。

ランディングページ（スマホとパソコンの両方に対応したもの）
複数のページからなる小さな会社のサイト（共通の部品を使い回したもの）
動きのあるページ（メニューの開閉や画像の切り替えなど、JavaScriptを使ったもの）

デザインのデータから組み立てた作品を入れる

依頼主が知りたいのは、渡したデザインのデータを、その通りにコードにできるかどうかです。自分でデザインも考えた作品だけでは、その力が伝わりにくいことがあります。練習用に公開されているデザインのデータや、知人のデザイナーに作ってもらったデータから組み立てた作品を入れておくと、実務に近い力を示せます。

公開されたサイトを真似て作る練習の扱い

既存のサイトの見た目をそっくり真似て作る練習は、コーディングの力を伸ばすうえで効果があります。ただし、他人のサイトのデザインや画像、文章には権利があります。練習として作ったものを、そのまま自分の作品として公開したり、営業に使ったりすることは避けてください。作品として見せるなら、デザインも素材も自分で用意したもの、または使ってよいと許可されたものに限ります。

コードも見せる

作品の見た目だけでなく、コードも見てもらえるようにしておくと評価が上がります。コードを公開する場所に置いて、URLを作品の紹介に添えます。見出しの順番が正しいか、意味に合ったタグを使っているか、クラスの名前の付け方に決まりがあるか、といった点は、コードを見ればすぐに伝わります。

作品ごとに説明を添える

作品ごとに、作った目的、かかった時間、使った技術、工夫した点を短く書き添えます。「スマホの画面で文字が小さくならないよう、画面の幅に合わせて文字の大きさを変えた」のように、具体的な工夫を書くと、依頼主は仕事の進め方を想像しやすくなります。

作品の質を上げる確認の項目

作品を公開する前に、次の項目を確かめておくと、実務の目線で見ても安心できる作品になります。

スマホ、タブレット、パソコンの画面の幅で崩れずに表示されるか
主なブラウザ（Chrome、Safari、Edge、Firefox）で表示が同じか
見出しの順番が正しく、意味に合ったタグを使っているか
画像に代わりの文章（alt属性）を付けているか
画像の大きさが重すぎず、ページの表示が遅くないか
リンクやボタンが、キーボードの操作でも選べるか
HTMLの文法の誤りがないか

最後の文法の確認には、W3Cが提供しているHTMLの検証のサービスなどを使う方法があります。誤りを直しておくと、表示の崩れを防げるだけでなく、コードを見た依頼主に丁寧さが伝わります。

使う道具とそろえる環境

コーダーの副業を始めるときにそろえておきたい道具と環境を整理します。多くは無料で使えるもので始められます。

コードを書くエディタ

コードを書くためのエディタは、無料で使えるものが広く使われています。入力の補完や、コードの整形、誤りの表示などの機能があると、作業の速さと正確さが上がります。

デザインのデータを開く道具

依頼主から渡されるデザインのデータは、FigmaやAdobe XD、Photoshopなどで作られています。Figmaはブラウザで開けるため、データを共有してもらえば、文字の大きさや色、余白の値を確かめられます。Adobeの製品で作られたデータを渡される場合は、開くための環境が必要になることがあるので、応募の前に確かめておきます。

表示を確かめる環境

作ったページは、複数のブラウザと画面の大きさで確かめる必要があります。ブラウザの開発者向けの機能を使うと、スマホの画面の幅での表示をパソコンの上で確かめられます。ただし、実際のスマホでしか起きない表示の崩れもあるので、手元のスマホでも確かめる習慣をつけてください。

コードの変更の履歴を残す仕組み

コードの変更の履歴を残す仕組みを使うと、修正の前の状態にいつでも戻せます。依頼主によっては、この仕組みを使って納品することを求められることもあります。使い方に慣れておくと、受けられる案件の幅が広がります。

1週間の作業の組み立て方

副業のコーディングは、本業の合間の限られた時間で進めることになります。1週間の作業の組み立て方を、平日の夜と週末に作業する場合の例で考えてみます。

平日の夜は、1日1〜2時間を目安にします。この時間は、依頼主との連絡、小さな修正、表示の確認など、短い時間で区切れる作業にあてます。まとまった集中が必要な新しいページのコーディングは、週末の午前など、数時間を続けて取れる時間にあてます。

納期は、依頼主が示した日より数日早い日を自分の締め切りにしておきます。本業の急な残業や体調不良があっても、納期を守れるようにするためです。副業で信頼を失う理由のほとんどは、納期の遅れと連絡の途絶えです。作業が遅れそうなときは、遅れが分かった時点で依頼主に伝え、新しい見込みを示してください。

副業の案件の探し方

副業のコーダーの案件は、探す場所によって性格が違います。いくつかの場所を組み合わせて探すと、最初の1件に出会いやすくなります。

クラウドソーシングと在宅ワークの仲介サイト

小さな修正やバナーの組み込み、ランディングページのコーディングなど、範囲の小さな案件が多く見つかります。作品を見て判断してくれる依頼主もいるため、実務経験が浅い段階の入り口になります。依頼主の過去の評価や、依頼の文章の具体さを見て、やり取りしやすそうな相手を選びます。

副業向けの求人や案件の紹介サービス

会社員の副業を前提にした案件を紹介するサービスもあります。週に数時間から関われる案件が中心ですが、実務経験を条件にするものが多い傾向があります。

知り合いや地域のつながり

知り合いの店や小さな会社、地域の団体からの依頼は、最初の実績として価値があります。サイトの文章の更新や、小さなページの追加など、困っている人の手伝いから始めると、実際の依頼主とのやり取りを経験できます。知り合いからの依頼でも、作業の範囲と報酬、納期は文字で残しておきます。

自分の紹介ページからの依頼

作品をまとめた紹介ページを公開しておくと、検索や知人の紹介を通じて、依頼主から直接相談が来ることがあります。紹介ページには、作品の一覧、対応できる作業の範囲、作業できる時間帯、連絡の方法をまとめておきます。料金の目安を載せておくと、依頼主は相談するかどうかを判断しやすくなります。最初は相談が少なくても、作品と実績が増えるにつれて、紹介ページそのものが営業の役割を果たすようになります。

制作会社の外注

ウェブ制作の会社が、忙しい時期にコーディングを外部に頼むことがあります。一度信頼を得ると継続して依頼を受けやすい一方で、平日の日中の連絡を求められることが多いので、副業で対応できる範囲を最初に伝えておきます。

よくある失敗と防ぎ方

副業のコーダーが最初の数件でつまずきやすい点と、その防ぎ方を整理します。

作業の量を少なく見積もった

スマホの画面の幅への対応や、ブラウザごとの表示の確認は、思ったより時間がかかります。見積もりのときに、確認と修正の時間を必ず含めておきます。

デザインのデータにない部分を推測で作った

スマホの画面のデザインがない、文字が長くなったときの表示が決まっていない、といった部分を推測で作ると、作り直しになりがちです。データにない部分は、作業の前に確かめます。

本業が忙しい時期と納期が重なった

本業の繁忙期を考えずに案件を受けると、納期に間に合わなくなります。受ける前に本業の予定を確かめ、忙しい時期は新しい案件を控えます。

連絡が途絶えた

作業に集中するあまり、依頼主からの連絡に何日も返信しないと、依頼主は不安になります。作業が進んでいなくても、連絡を受け取ったことと、いつ返事ができるかだけはすぐに伝えます。

応募文の書き方

案件に応募するときの文章は、依頼主が「この人に頼んで大丈夫か」を判断する材料になります。次の項目を入れておくと、判断してもらいやすくなります。

依頼の内容を読んだうえでの理解（何を作る案件で、どこが大切だと考えたか）
関係する作品のURL（その案件に近いものを1〜2つ）
作業できる時間帯と、連絡に返信できる時間帯
納期の見込み
確かめたいこと（デザインのデータの形式、対応するブラウザ、画像の素材の有無など）

副業であることは隠さずに伝えます。「平日は夜20時以降と土日に作業でき、連絡には平日の昼休みと夜に返信します」のように、具体的に書くと、依頼主は進め方を組み立てやすくなります。連絡の時間帯が限られることを先に伝えておけば、あとで行き違いになることを防げます。

応募の文章は、ひな型を作っておき、案件ごとに1の理解と5の質問を書き換えて使うと効率が上がります。分かりやすく礼儀正しい文章を書く力は、コーダーにとっても仕事を得る力になります。

見積もりの出し方

依頼主から見積もりを求められたときは、作業の範囲を細かく分けて、それぞれにかかる時間から考えます。

作業を分けて時間を見積もる

ランディングページなら、たとえば次のように作業を分けます。

デザインのデータの確認と素材の書き出し
パソコンの画面の幅でのコーディング
スマホの画面の幅への対応
動きの部分（JavaScript）の実装
主なブラウザでの表示の確認
修正の対応

最初のうちは、自分が作業にかかる時間を正確に見積もるのが難しいので、作品を作ったときにかかった時間を記録しておくと役立ちます。

修正の回数と範囲を決めておく

見積もりには、修正に何回まで応じるか、どこまでを修正とするかを書いておきます。デザインそのものの変更は修正に含めず、別に見積もる、といった線を引いておくと、作業が際限なく増えることを防げます。

安すぎる見積もりを避ける

最初の案件を受けたいあまりに、極端に安い金額で見積もる人がいます。しかし、安い金額で受けると、時間あたりの収入が低くなり、本業との両立も苦しくなります。また、次の案件でも同じ金額を求められやすくなります。相場を調べたうえで、自分の作業時間に見合った金額を出してください。デザインやウェブ制作の仕事の収入の目安は、デザイナーの年収・単価相場でも確かめられます。

納品の前に確かめること

納品の前には、作品の質を上げる確認の項目に加えて、次の点を確かめます。

デザインのデータと見比べて、文字の大きさ、色、余白にずれがないか
依頼主から指定されたブラウザと端末で表示を確かめたか
リンク先のURLが正しいか
フォームがある場合、送信のテストをしたか
ファイルの名前やフォルダの構成が、依頼主の指定どおりか
不要なファイルやコメントが残っていないか

確認した内容を一覧にして納品のときに添えると、依頼主の確認の手間が減り、信頼につながります。

あわせて、あとから別の人が修正するときのための短い説明を添えると、さらに喜ばれます。どのファイルがどのページに当たるのか、色や文字の大きさをまとめて指定している場所はどこか、画像を差し替えるときの手順はどうか、といった内容です。依頼主の社内の担当者が自分で小さな修正をするときに、この説明が役立ちます。説明を丁寧に書ける人は、次の修正の依頼も任されやすくなります。報告や説明の文章を整える力を体系的に身につけたい場合は、ビジネス文書検定で試験の内容と仕事での生かし方を確かめられます。

契約で確かめること

副業で業務委託の案件を受けるときは、契約の内容を書面やメッセージで残しておくことが大切です。

2024年11月1日に施行されたフリーランス・事業者間取引適正化等法（フリーランス法）は、個人で働くフリーランスに仕事を発注する事業者に対して、取引の条件を明示すること、成果物を受け取った日から原則60日以内に報酬を支払うことなどを定めています。厚生労働省は、この法律の概要を次のように説明しています。

個人で働くフリーランスに業務委託を行う発注事業者に対し、業務委託をした際の取引条件の明示、給付を受領した日から原則60日以内での報酬支払、ハラスメント対策のための体制整備等が義務付けられます。出典: 厚生労働省フリーランス・事業者間取引適正化等法

副業で個人として仕事を受ける場合も、この法律で守られる立場になりえます。契約の前に、作業の内容、報酬の額、支払いの期日、納期、修正の範囲が示されているかを確かめてください。

また、作ったコードの権利をどちらが持つかも確かめておきます。納品したコードの権利を依頼主に渡す契約が一般的ですが、作品として自分の紹介ページに載せてよいかは、依頼主の許可が必要です。公開してよいかを契約のときに聞いておくと、実績として使えるかどうかが分かります。

勤め先の副業の決まりを確かめる

会社員がコーダーの副業を始めるときは、勤め先の就業規則を必ず確かめてください。

厚生労働省の副業・兼業の促進に関するガイドラインは、企業の対応について次のように書いています。

裁判例を踏まえれば、原則、副業・兼業を認める方向とすることが適当である。出典: 厚生労働省副業・兼業

一方で、同じガイドラインでは、仕事に支障がある場合、会社の秘密が漏れる場合、会社と競合して利益を害する場合、会社の名誉や信用を損なう場合などには、副業を禁止または制限できるとされています。本業がウェブ制作の会社で、副業でも同じようなウェブ制作の仕事を受ける場合は、競合に当たらないかがとくに問題になります。本業の取引先から直接仕事を受けることも、トラブルのもとになりやすいので避けてください。

届け出が必要な会社では、副業の内容と作業の時間を届け出たうえで始めます。

副業の収入と税金

業務委託で受けた報酬は、事業所得や雑所得として扱われます。会社員の場合、給与以外の所得が年間20万円を超えると、所得税の確定申告が必要になります。所得とは、報酬から仕事に必要な経費を引いた額のことです。コーダーの副業では、作業に使うソフトの利用料、素材の購入費、通信費の一部などが経費になりえます。

20万円以下でも、住民税の申告は別に必要になることがあります。住んでいる市区町村の窓口で確かめてください。報酬を受け取ったら、日付、依頼主、金額、かかった経費を記録しておくと、申告のときに慌てずに済みます。

実務経験が浅い人が実績を積む順番

ここまでの内容を踏まえて、実務経験が浅い人が最初の案件を受け、実績を積んでいく順番を整理します。

種類の違う作品を3つ作り、コードも見られるように公開する
小さな修正やバナーの組み込みなど、範囲の小さな案件に応募する
最初の数件は、納期より早く、丁寧な確認の一覧を添えて納める
依頼主の許可を得て、納品した仕事を実績として紹介ページに載せる
ランディングページなど、範囲の大きな案件に応募の幅を広げる
同じ依頼主から継続して依頼を受けられる関係を作る

もう1つの道として、先にウェブ制作の会社に就職し、会社員として数年の実務経験を積んでから副業を始める方法もあります。会社の中で、デザイナーやディレクターとのやり取り、複数の人で同じコードを扱う進め方、納期の管理を経験しておくと、副業で受けたときにも同じ進め方で仕事ができます。実務経験を条件にした案件にも応募できるようになり、受けられる案件の幅が大きく広がります。

転職してから副業を始めるか、小さな案件から実績を積むかは、本人の状況によって変わります。どちらの道でも、作品と確認の丁寧さで信頼を積み上げることが、次の仕事につながる点は同じです。

依頼主とのやり取りで信頼を得る

コーディングの技術と同じくらい、依頼主とのやり取りの丁寧さが、次の依頼につながります。

作業を始める前に、分からない点はまとめて質問します。デザインのデータに、スマホの画面の幅のデザインがない、ボタンを押したときの動きが決まっていない、といった点は、推測で作業を進めず、先に確かめます。推測で作って作り直しになると、依頼主にも自分にも負担がかかります。

作業の途中では、進み具合をこまめに伝えます。「パソコンの画面の幅のコーディングが終わり、明日からスマホの対応に入ります」と伝えるだけで、依頼主は安心して待てます。副業で連絡の時間帯が限られる場合はとくに、こうした報告が信頼の支えになります。

納品のあとに修正の依頼が来たら、すぐに受け取ったことを伝え、いつまでに対応できるかを示します。修正の範囲が見積もりのときの約束を超える場合は、その旨を丁寧に伝え、追加の費用を相談します。

生成AIとの付き合い方

最近は、生成AIを使ってHTMLやCSSのコードを書かせることもできるようになりました。コーダーの副業でも、AIを上手に使うと作業の速さを上げられます。

ただし、AIが書いたコードが、デザインのとおりに表示されるとは限りません。意味に合わないタグを使っていたり、ほかのブラウザで崩れたりすることもあります。AIの出力は下書きとして使い、最後は自分で表示とコードを確かめる必要があります。依頼主から預かったデザインのデータや、公開前の情報をAIのサービスに入力してよいかは、依頼主の決まりを確かめてから判断してください。

AIを業務に取り入れる力は、これからのコーダーにとって強みになります。AIを仕事に生かす支援の仕事については、AIコンサル・業務活用支援のお仕事で紹介しています。

コーダーから広がる仕事

コーダーの副業で経験を積むと、そこから広がる仕事があります。

1つは、デザインも含めて受ける道です。コーディングの経験があるデザイナーは、実装しやすいデザインを作れるため、制作の現場で重宝されます。デザインの仕事の収入や働き方については、Webデザイナー年収のリアル：30代フリーランスが語る稼ぎ方とキャリアパスで紹介しています。

もう1つは、JavaScriptを深めて、ウェブアプリケーションの画面を作る仕事に進む道です。画面の部品を組み合わせて動きのあるアプリケーションを作る仕事は、コーディングの延長にあります。アプリケーション開発の仕事の中身は、アプリケーション開発のお仕事で確かめられます。

ほかにも、WordPressなどの仕組みでサイトを作る仕事、サイトの表示の速度や読みやすさを改善する仕事など、コーディングの力を土台にした仕事は幅広くあります。

在宅ワークの市場を長く見てきた立場から

在宅ワークとフリーランスの仲介を2004年から続けてきた運営者として見てきた限りでは、副業のコーダーで長く依頼が続く人は、技術の高さだけで選ばれているわけではありません。納期を守る、返信が速い、確認の一覧を添えて納品する、といった基本を、毎回変わらずに続けている人が、「次もこの人に」と指名されています。小さな案件を丁寧に積み重ねた人ほど、のちに大きな案件を任される傾向があります。

依頼主と直接やり取りできる場で仕事を受けると、仲介の手数料が乗らないため、同じ予算でも依頼主はより多くを頼めて、受ける側の手取りも厚くなります。手数料0%で直接取引できる場は、継続して同じ依頼主から仕事を受ける関係を作るうえで、双方にとって意味があります。

よくある質問

Q. コーダーの副業は未経験でも始められますか？

始められますが、実務経験を条件にする案件が多いため、最初の1件を受けるまでに工夫が必要です。種類の違う作品を3つほど作り、コードも見られるように公開しておくと、作品を見て判断してくれる依頼主から仕事を受けやすくなります。最初は範囲の小さな修正やバナーの組み込みから始めるのが近道です。

Q. コーダーの副業の作品は何を作ればよいですか？

スマホとパソコンの両方に対応したランディングページ、複数のページからなる小さな会社のサイト、JavaScriptで動きを付けたページの3種類がそろうと、実力が伝わりやすくなります。デザインのデータから組み立てた作品を入れると、依頼主が求める力を示せます。他人のサイトを真似た練習の作品は公開しないでください。