HTMLだけで受けられる副業｜コーディング案件の探し方と単価の考え方

2026年5月17日

朝比奈蒼

この記事のポイント

✓html 副業で受けられる案件の型
✓時間単価に直した単価の考え方を整理しました
✓初心者が最初の案件を取るまでのステップ

HTMLとCSSだけで副業はできるのか。結論から言うと、できます。ただし「HTMLが書けるから稼げる」という話ではなく、切り出された作業をどれだけ正確に早く仕上げられるかで評価が決まる領域です。html 副業で検索する方が知りたいのは、たいてい2つでしょう。どんな仕事が実際に募集されているのか、そして1件あたりいくらなのか。この記事ではその2点を軸に、募集の出どころ、案件の型、単価を時間あたりに直して考える方法、最初の1件を取るまでの手順を整理します。正直なところ、金額だけを見て判断すると失敗しやすい領域なので、時間の話も同じ重さで書きます。

HTMLだけの副業が成立する理由と、成立しない条件

まず市場の構造から押さえます。HTMLとCSSのコーディングは、Web制作の工程の中で最も分業しやすい部分です。デザインを作る人、コーディングする人、サーバーに載せる人、更新を続ける人。この分け方が業界に定着しているので、コーディングだけを外に出す発注が日常的に発生します。だから副業として引き受ける余地があります。

一方で、成立しない条件もはっきりしています。デザインを自分で作れることを前提にした案件、動きのある実装をJavaScriptで組む案件、サイトの表示速度や検索対策まで責任を持つ案件は、HTMLとCSSだけでは足りません。募集文に「デザインからお願いします」「WordPressのテーマを改修」と書かれていたら、それは別のスキルセットを求める案件です。

もう1つ、向き合っておくべき現実があります。静的なページを組むだけの作業は、テンプレートやノーコードの道具と競合しています。だから「言われた通りに組むだけ」の位置に留まると、単価が上がりません。この記事で単価の話を作業の切り出し方から説明するのは、そこが分かれ目だからです。発注する側が外に出したいのは、単純な作業ではなく「確認の手間が要らない仕上がり」です。

制作の依頼がどういう形で出てくるのかはLP制作・HTML/CSSコーディングのお仕事に依頼の内容と進め方を整理してあります。実際の発注文言を読むと、求められている粒度が具体的に見えてきます。

募集はどこに出ているのか

HTMLコーディングの募集が出る場所は、大きく4つに分かれます。

1つ目は仲介型のクラウドソーシングです。案件数が多く、実績がゼロの状態からでも応募できます。募集の内容は仕事のページに一覧で並びます。

HTML・CSSコーディングの仕事・案件一覧ページです。クラウドソーシング・アウトソーシングに強いランサーズでは、HTML・CSSコーディングの仕事情報の検索から納品、報酬の受け取りまで、すべて完結します。時間や場所にとらわれず、在宅や副業などさまざまな働き方を実現可能です。出典: lancers.jp

便利な反面、報酬から手数料が引かれます。年間で計算すると決して小さくない金額になるので、実績を作る場として使い、継続する取引は手数料のかからない形に移すのが合理的です。

2つ目は求人サイトです。企業が業務委託や副業可の求人として出すもので、稼働条件や歓迎するスキルが具体的に書かれています。求人サイトの検索結果を見ると、求める経験の範囲が読み取れます。

HTML/CSSコーディングのみの経験WordPressテーマ制作・修正のみ...<福利厚生>残業手当、通勤手当、リモートワーク手当、慶弔見舞金制度、資格取得支援、書籍購入補助制度、副業OK... 出典: 求人ボックス

注目すべきは「HTML/CSSコーディングのみの経験」という表現です。つまり、その範囲だけの経験でも応募できる募集は実在します。未経験歓迎、業界未経験歓迎と書かれた募集も一定数あります。

3つ目は制作会社との継続契約です。制作会社は案件の波が大きいので、忙しい時期だけ外に出す相手を探しています。1件通ると継続しやすく、同じ手順で作業できるので効率が上がります。

4つ目は身近なつながりです。知り合いの店のページ、所属している団体のサイト、前職の同僚からの相談。金額は大きくないことが多いものの、最初の実績としては十分に機能します。

実際に募集されている仕事の型

募集内容を型で分けると5つになります。

1つ目はデザインデータからのコーディングです。FigmaやAdobe XDのデータを受け取り、指定通りに組みます。スマートフォンとパソコンの両方に対応させるレスポンシブ対応が前提になっている案件がほとんどです。

2つ目はランディングページの制作です。1枚の長いページを組む仕事で、フォームの設置や計測タグの埋め込みが付くことがあります。単発で完結しやすく、副業と相性が良い型です。

3つ目は既存サイトの修正です。文言の差し替え、画像の入れ替え、崩れた表示の調整といった小さい依頼が積み上がります。1件の金額は小さいものの、継続依頼になりやすいのが特徴です。

4つ目はメールマガジン向けのHTML作成です。メールソフトごとの表示の違いに対応する必要があり、通常のWeb制作とは作法が違います。手間がかかるので、できる人が少なく、その分評価されやすい領域です。

5つ目はCMSへの組み込みです。WordPressなどの仕組みに合わせてテンプレートを分ける作業で、HTMLとCSSに加えてPHPの読み書きが必要になります。ここまで踏み込めると単価の帯が変わります。

自分がどの型を取るかは、手元の時間で決めてください。平日夜に少しずつ進められるのは3番目の修正案件、週末にまとめて作業したいなら1番目と2番目が合います。

単価は必ず時間あたりに直して考える

ここが本題です。提示される金額は「1ページあたり」「1件あたり」の形が多く、そのままでは高いのか安いのか判断できません。必ず時間あたりに直してください。

やり方は単純です。過去に自分が同じ規模のページを組んだときに何時間かかったかを記録しておき、提示額を所要時間で割ります。仮に1ページの募集で、着手から納品まで実質8時間かかったとします。手数料が引かれる場では、受け取る金額はさらに減ります。この計算を一度やっておくと、安すぎる募集に応募しなくなります。

所要時間を見積もるときに、見落としがちな工程が4つあります。デザインデータの確認と不明点の質問、画像の書き出しと軽量化、複数のブラウザと画面幅での表示確認、そして修正対応の往復です。実装そのものより、この4つの合計のほうが長くなる案件も珍しくありません。だから見積もりは実装時間の1.5倍前後を置くのが現実的です。

修正回数を決めずに受けるのは危険です。契約の時点で「初回納品後の修正は2回まで、それを超える場合は別途」と決めておきます。これを言うと嫌がられるのではないかと心配する方がいますが、経験上、この確認を嫌がる発注者はもともと揉める相手です。むしろ範囲を決める提案は、仕事に慣れている印として受け取られます。

職種全体の収入の分布を知りたい場合はソフトウェア作成者の年収・単価相場に統計の数字を整理してあります。自分の時間単価が市場のどのあたりかを確かめる目安になります。

初心者が最初の案件を取るまでのステップ

実績がゼロの状態から最初の1件を取るまでの手順を、4段階で書きます。

第1段階は、見せられる作品を3つ作ることです。架空のお店のページ、架空のサービスの1枚ページ、既存サイトを自分で組み直したもの。この3つがあると、応募のときに説明が要らなくなります。公開する場所は自分で借りたサーバーでも無料の公開サービスでも構いませんが、URLを開いて実物が見える状態にしてください。ファイルを送る形だと、見てもらえる確率が落ちます。

第2段階は、作業の速さを自分で測ることです。同じ規模のページを2回組んで、かかった時間を記録します。これをやっていない人は見積もりができないので、受注後に必ず苦しくなります。

第3段階は、小さい案件から応募することです。最初は金額より「納期を守って完了させた記録」を取りに行きます。応募文には、稼働できる時間帯、着手できる日、作品のURL、確認できるブラウザの種類を書きます。長い自己紹介は要りません。

第4段階は、納品後に次につなげることです。納品時に「今後、文言の修正や画像の差し替えが出たら対応できます」と一言添えます。この一言があるかどうかで、2件目が来るかどうかが変わります。制作の仕事は継続で成り立つので、ここを飛ばすのは損です。

副業を始める段取りそのものを本業との関係から整理したい方は副業フリーランスの始め方！本業と両立して年収を最大化する戦略に手順をまとめています。

見積もりの出し方と、最初の返信で書くべきこと

応募しても返事が来ないという相談の多くは、最初の返信の書き方でつまずいています。発注する側は複数の応募を並べて読むので、判断に必要な情報が揃っている人から順に検討します。

最初の返信に入れる項目は5つです。1つ目は所要時間の見込みです。「デザインデータを確認したうえで、実装3日、確認と修正に2日を見込みます」と書きます。2つ目は稼働できる時間帯です。平日の夜と週末しか動けないなら、そのまま書いてください。隠して受けると後で崩れます。3つ目は対応できる範囲です。レスポンシブ対応はできる、フォームの設置はできる、動きの実装は簡単なものまで、というように線を引きます。4つ目は確認できる環境です。手元にあるブラウザと実機の種類を並べます。5つ目は作品のURLです。

見積もりの金額は、この5項目を書いたあとに置きます。順番が大事で、金額を先に書くと金額だけで比較されます。何をどこまでやるかを先に示せば、金額は内容とセットで読まれます。

見積もりに幅を持たせるのも有効です。「デザインデータが完成している場合はこの金額、文言の調整もこちらで行う場合はこの金額」と2段で出すと、発注側が選べます。選択肢を出された相手は返信しやすくなるので、返事が来る率が上がります。

それから、質問は最初の返信でまとめて出してください。「対応するブラウザの範囲」「スマートフォンの最小幅」「原稿は確定しているか」「公開作業はどちらが行うか」。この4つは後で必ず論点になります。先に聞くと、段取りを分かっている人として扱われます。正直なところ、ここを聞かずに受けて後から膨らむパターンが一番多いです。

なお、金額を下げて受注を取るのは初回だけにしてください。一度安く受けると、その金額が次の基準になります。安く受ける代わりに、範囲を狭めるほうが後を引きません。

HTMLだけでは足りない周辺スキル

HTMLとCSSで案件は取れます。ただ、単価の帯を上げたいなら、周辺の3つを足すのが最短です。

1つ目はJavaScriptの基本です。タブの切り替え、アコーディオン、スライダーといったよくある動きを、ライブラリに頼りつつ自分で設置できるだけで、受けられる案件の幅が変わります。全部を書けなくてよいので、動く仕組みを読んで直せる状態を目指してください。

2つ目はWordPressです。国内の中小規模のサイトはこの仕組みで動いているものが多いので、テンプレートの構造を理解して修正できるだけで依頼が増えます。

3つ目は画像と表示速度の扱いです。画像を適切なサイズで書き出し、読み込みを遅らせる指定を入れる。この基本を押さえているだけで、納品物の評価が変わります。正直なところ、ここを雑に済ませる人が多いので、差がつきやすい部分です。

技術以外で評価されるのは、確認の丁寧さです。納品前に、文字の折り返し、画像が無いときの表示、リンク先の誤り、スマートフォンでの横スクロールの有無を自分で確かめる。この作業をやっている人は、発注側から「手戻りが少ない人」として記憶されます。

知識を体系的に確認したい方にはHTML5プロフェッショナル認定試験のような試験もあります。資格そのものが案件を呼ぶわけではありませんが、独学の抜けを埋める用途としては有効です。仕様を正確に理解しているかどうかは、コードの書き方に表れます。

よくある3つの勘違いを先に外しておく

この領域に入る人が最初に持ちやすい思い込みが3つあります。先に外しておくと、遠回りが減ります。

1つ目は「学習を終えてから応募する」という考え方です。コーディングの学習は終わりがありません。CSSの新しい指定は増え続け、対応すべき画面幅も変わります。完璧になるまで待つと、いつまでも応募しないことになります。実務で必要な水準は、デザイン通りに組めて、崩れたときに原因を探せることです。その水準に達したら、小さい案件で試すほうが伸びます。

2つ目は「案件数が多いサービスを選べば仕事が取れる」という考え方です。案件数と受注しやすさは別です。応募が集まる場所では競争が激しく、実績がない状態では埋もれます。むしろ募集が少ない場所で、条件が細かく書かれた案件に丁寧に応募したほうが通ります。数の多さは安心の材料にはなりますが、受注の材料にはなりません。

3つ目は「単価が安い案件で経験を積む」という考え方です。これは半分だけ正しいです。最初の1件か2件は、金額より記録を取るために受ける価値があります。ただし安い案件を続けると、作業に慣れるだけで単価が動きません。3件目からは、範囲を明確にして相応の金額を出す練習を始めてください。安い案件で忙しくなると、条件の良い案件に応募する時間が無くなります。これが一番もったいない状態です。

もう1つ添えると、学習の順番でつまずく人も多いです。CSSの設計手法や新しい道具から入るより、まず1枚のページを最後まで完成させて公開するほうが、身につく量が多くなります。完成させた経験の数が、そのまま見積もりの精度になります。

在宅で受けるときの時間と環境の設計

在宅でコーディングの副業を回すなら、環境の話を先に片付けたほうがいいです。

必要なのは4つです。パソコン、確認用のスマートフォン、安定した通信、そして作業の記録です。確認用の実機は重要で、エミュレータだけで済ませると実機特有の崩れを見落とします。手元にiPhoneとAndroidの両方が無い場合は、対応範囲を応募の段階で伝えてください。

時間の設計は、週に確保できる時間を先に決めてから受注量を決めます。順番を逆にすると必ず破綻します。目安として、週10時間を確保できるなら、1枚のランディングページを2週間で仕上げる契約は無理なく回せます。修正の往復に1週間は見ておいてください。

本業との関係では、就業規則の確認を忘れないでください。副業を認めている会社でも、届け出が必要な場合があります。ここを飛ばして揉めるのは避けたい種類の事故です。収入以外に何が積み上がるのかという整理は副業メリット: 収入アップ、スキルアップ、そして心の余裕を手に入れる方法にまとめてあります。判断に迷ったときは、相談を仕事にしている人もいます。キャリア・副業・人生相談のお仕事を見ると、そういう依頼の形があることが分かります。

避けたい募集と、契約で決めておくこと

募集文から危ない案件を見分ける方法を書きます。

避けたい特徴は5つです。1つ目は「簡単な作業です」と書いてあるのに範囲が示されていないもの。2つ目は、単価がページ数でも時間でもなく「一式」でしか書かれていないもの。3つ目は、修正回数に触れていないもの。4つ目は、デザインデータが用意されていないのにコーディングだけを依頼しているもの。これは実質デザインも頼まれます。5つ目は、支払いのタイミングが書かれていないものです。

契約で決めておくのは5点です。業務の範囲、納期、報酬額と支払期日、修正対応の回数、そして著作権の扱いです。2024年11月に施行されたフリーランス保護新法では、発注する側に取引条件を明示する義務があり、報酬は物やサービスを受け取った日から起算して60日以内に支払う義務があります。制度の詳細は公正取引委員会の案内で確認できます。

金額が小さい案件でも、やり取りは文字で残してください。口頭やビデオ通話だけで決めた内容は、後から確認できません。チャットの履歴でも構いません。記録があるだけで、揉めたときの立場がまったく変わります。

発注側は納品物のどこを見ているのか

発注する側が納品を受けたときに確認する箇所は、実はかなり限られています。ここを先に知っておくと、確認作業の優先順位が決まります。

最初に見られるのは、パソコンとスマートフォンで並べたときの見た目です。デザインデータと照らして、余白の量、文字の大きさ、画像の位置がずれていないか。とくに余白は目につきます。数値を拾わずに目分量で組むと、ここで必ず指摘が入ります。

次に見られるのは、文字数が変わったときの崩れです。実際の運用では、見出しが1行から2行に増えたり、商品名が想定より長くなったりします。デザインデータの文字数でしか確認していないと、運用が始まってから崩れます。納品前に、長い文字列を入れて確認しておいてください。

3つ目はリンクとフォームの動作です。リンク先の誤り、target属性の付け方、送信後の表示。数が多いので見落としが出やすく、ここを丁寧に確認している人は信頼されます。

4つ目は読み込みの速さです。画像を書き出したままの大きなサイズで置くと、表示に時間がかかります。発注側は数値では見ていなくても「重い」という体感は持ちます。画像の書き出しサイズを整えるだけで印象が変わります。

5つ目はコードの読みやすさです。後から別の人が触る前提なので、クラス名の付け方が一貫しているか、不要な指定が残っていないかを見られます。ここは即座に評価されないものの、継続の依頼が来るかどうかに効いてきます。

納品のときに、確認した項目を箇条書きで添えるのもおすすめです。「対応ブラウザ4種で確認済み、iPhoneとAndroidの実機で確認済み、長文時の折り返しを確認済み」と書くだけで、相手の確認作業が減ります。手間は5分ですが、次の依頼につながる効果はその何倍にもなります。

単価を上げる3つの道

同じHTMLの案件でも、単価には差があります。差の原因は技術の量ではなく、引き受ける範囲です。

1つ目の道は、工程を前に広げることです。デザインデータを受け取るだけでなく、文章の構成や画像の選定の相談にも乗ります。発注側の手間が減るので、金額の話がしやすくなります。

2つ目の道は、納品後を引き受けることです。公開後の修正、季節ごとのバナー差し替え、計測の設定確認。月ごとの契約に変えられると、収入の波が小さくなります。制作は単発だと毎月ゼロから営業することになるので、ここが一番効きます。

3つ目の道は、手数料の構造を変えることです。仲介型のサービスは便利ですが、報酬から一定割合が引かれます。継続する取引は、手数料0%で直接つながれる求人サイトに移すほうが手元に残ります。依頼する側から見ても、仲介料の分を制作の予算に回せるので、双方にとって都合がよい構造です。

この3つのうち、いちばん早く効くのは2つ目です。新規の獲得は時間がかかりますが、既存の相手に継続を提案するのは1通のメッセージで済みます。

確定申告と記録のつけ方

事務の話も避けずに書きます。給与を受け取っている人が副業で得た所得が年間20万円を超えると確定申告が必要になります。所得は売上ではなく、売上から必要経費を引いた金額です。制作に使う端末、書籍、通信費のうち業務に使った分は経費に入ります。手続きの詳細は国税庁の案内が一次情報です。

記録で大事なのは、売上と経費を月ごとに残すことです。年末にまとめてやろうとすると、どの入金がどの案件か分からなくなります。案件名、納品日、入金日、金額の4項目を並べた表を月に一度更新するだけで済みます。表計算での管理の型は副業確定申告売上管理スプレッドシート！2026年最新の時短術にまとめてあります。

もう1つ、作業時間も同じ表に記録してください。単価の判断に使えるだけでなく、次の見積もりの精度が上がります。これをやっている人とやっていない人では、1年後の時間単価に明確な差が出ます。

市場を長く見てきた立場からの観察

在宅と業務委託の市場を20年運営してきた立場から言えば、HTMLコーディングの副業で残る人と消える人の差は、技術の高さではありません。差が出るのは、納品のあとの振る舞いです。

運営者として見てきた限りでは、長く続く人ほど「この人に任せると楽だ」と思われる関係づくりに時間を使っています。具体的には、納品時に変更しやすい箇所と注意点を書き添える、修正の依頼に対して最初に所要時間を返す、できないことを早い段階で言う。どれも技術ではなく段取りの話です。発注側は、毎回説明し直す手間を嫌います。事情を知っている相手に頼むほうが早いので、同じ人に戻っていきます。

もう1つの観察は、手取りの構造です。額面の単価を上げる交渉は、相手の予算という天井にぶつかります。ところが中間のマージンが乗らない直接の取引なら、同じ額面でも手元に残る金額が変わります。依頼する側も同じ予算でより多く頼めるので、双方が得をします。20年見てきて、この構造に気づいた人は、単価交渉に使っていた労力を「誰と直接つながるか」に移していきます。

だからHTMLの副業を始めるなら、順番はこうです。まず作品を3つ作り、小さい案件で納期を守った記録を取る。次に所要時間を測り、時間単価で判断できる状態にする。そして継続の相談を自分から出す。ここまで来ると、案件を探す時間が減り、選ぶ立場に変わります。技術の勉強は続けるべきですが、単価を動かすのは技術より段取りだというのが、この市場を見てきた実感です。