LP制作・コーディングの副業で稼ぐには?案件獲得のコツと相場

河野 あかり
河野 あかり
LP制作・コーディングの副業で稼ぐには?案件獲得のコツと相場

この記事のポイント

  • LP制作・コーディングの副業で稼ぐための方法を徹底解説
  • コーディングの単価相場
  • 必要なスキルセットまで

本業はメーカーの事務職。でも昔からWebに興味があって、独学でHTML/CSSを学んだのがきっかけで、LP制作の副業を始めました。最初の頃は、簡単なバナー修正で3,000円ほどの収入でしたが、LP制作のスキルを身につけた今では、月に2〜3件のLP案件をこなし、副収入は月10万円ほど。多い時には20万円を超えることもあります。ここでは、私が実際に経験したことをベースに、未経験からでも実践できるLP制作の副業の始め方と、月10万円を安定して稼ぐための案件獲得のコツを具体的にお話しします。

LP制作の副業が人気の理由

LP(ランディングページ)とは、広告やSNSから流入したユーザーに対して、商品購入や問い合わせなどのアクションを促すことに特化した、1枚ものの縦に長いWebページです。企業の売上に直接貢献する重要な役割を担うため、常に高い需要があります。

LP制作が副業として特に人気なのには、大きく3つの明確な理由があります。

1. 案件単価が高い

LP制作の最大の魅力は、その収益性の高さです。1ページの制作でありながら、報酬は3万〜15万円が一般的で、スキルや案件内容によっては30万円を超えることも珍しくありません。なぜなら、LPは企業の売上やリード獲得に直結する「Web上の営業マン」だからです。例えば、制作費10万円のLPが、月に100万円の売上を生み出す可能性を秘めています。クライアントにとって費用対効果が非常に高いため、優秀な制作者には惜しみなく投資がされます。そのため、スキルを磨けば効率よく高収入を目指せるのです。

2. 制作スキルが体系化されている

LPには、コンバージョン(成果)を最大化するための「型」が存在します。これは「セールスライティング」の構成要素をWebページに落とし込んだもので、多くの成功事例から導き出された王道の流れです。

代表的な構成は以下の通りです。

  • ファーストビュー(ヘッドコピー・キャッチコピー): ページを開いて最初の3秒で、ターゲットの心をつかむ最も重要な部分。「誰のための」「どんな悩みを解決する」サービスなのかを端的に伝えます。
  • 共感・問題提起: ターゲットが抱える具体的な悩みや不安を提示し、「そうそう、それで困ってるんだよ」と共感を呼び起こします。
  • 解決策の提示: 悩みを解決する手段として、自社の商品やサービスを紹介します。ここで初めて、具体的な解決策が登場します。
  • ベネフィット(得られる未来): 商品を使うことで、顧客の生活やビジネスがどう変わるのか、具体的な未来像を描写します。
  • 実績・信頼性(社会的証明): 「お客様の声」「導入事例」「メディア掲載実績」「専門家の推薦」など、第三者からの評価を提示して信頼性を高めます。
  • 他社との違い・強み: 競合と比較して、なぜこの商品が優れているのかを明確に伝えます。
  • クロージング(CTA): Call To Actionの略。申し込みボタンや問い合わせフォームを設置し、ユーザーに行動を促す最終的な後押しをします。

この「型」に沿ってコンテンツを配置していけば、未経験者でも一定水準のクオリティを保ったLPを制作できます。スキルが体系化されているため、学習のゴールが見えやすく、テンプレート的に制作を進められるのが大きな利点です。

3. 1案件が短期間で完結する

Webサイト全体の構築と違い、LPは1ページで完結するため、プロジェクト期間が比較的短いのが特徴です。多くの場合、1〜2週間程度で納品まで完了します。

例えば、コーディングのみの案件であれば、3〜5営業日で納品することも可能です。この短期集中型の働き方は、本業のスケジュールと調整しやすく、副業として非常に取り組みやすいと言えます。「今月は忙しいから1件だけ」「来月は余裕があるから3件受けよう」といった柔軟な働き方ができるのも、LP制作ならではの魅力です。

LP制作に必要なスキル

LP制作を始めるために、特別な才能は必要ありません。正しい手順でスキルを習得すれば、誰でもプロとして活躍できる可能性があります。必要なスキルは大きく「コーディング」「デザイン」「マーケティング」の3つに分けられます。

コーディング系のスキル

まずはWebページを形にするための技術です。これがなければ始まりません。

  • HTML/CSS:LP制作の根幹をなす言語です。HTMLで文章構造を作り、CSSでデザインを整えます。特に、PC、タブレット、スマートフォンなど、あらゆるデバイスで表示を最適化する「レスポンシブ対応」は必須スキルです。現代ではアクセスの7割以上がスマートフォンからと言われており、この対応ができないと案件獲得は困難です。

  • JavaScript:ページに動きをつけるためのプログラミング言語です。LP制作においては、高度なプログラミングは不要で、「スムーススクロール」「アコーディオンメニュー(Q&Aなどで使用)」「モーダルウィンドウ(画像クリックで拡大表示など)」といった簡単なインタラクションが実装できれば十分です。jQueryというライブラリを使えば、短いコードでこれらの機能を実装できます。

  • Sass/SCSS:CSSをより効率的に書くための拡張言語です。変数を使って色やフォントサイズを管理したり、コードを部品化して再利用したりできるため、開発スピードが格段に上がります。必須ではありませんが、知っていると作業時間が大幅に短縮され、大規模なLPでも管理が楽になります。

  • WordPressの知識:クライアントが自分でブログ記事のようにLPの一部(お知らせやお客様の声など)を更新したい、という要望は少なくありません。WordPressを組み込むことで、こうした要望に応えられ、案件単価も5万円以上アップすることが期待できます。

デザイン系のスキル(あると強い)

コーディングだけでなく、デザインもできれば受注できる案件の幅が広がり、単価も大きく向上します。

  • Figma/XD:Webデザインツールです。これらを使って、コーディング前にLPの完成図である「デザインカンプ」を作成します。デザインからコーディングまでワンストップで受けられると、クライアントとのやり取りもスムーズになり、単価も2倍以上になることがあります。まずはFigmaの無料プランから触ってみるのがおすすめです。

  • 配色・タイポグラフィの基礎:デザインの根幹をなす知識です。たとえデザイナーからカンプを受け取ってコーディングに専念する場合でも、「信頼感を与える青系の配色」「高級感を出す明朝体フォント」といったデザインの意図を理解していると、より正確な実装ができます。ターゲット層に合わせたデザイン(例:若者向けならポップな配色、シニア向けなら文字を大きくするなど)を提案できると、クライアントからの信頼も厚くなります。

マーケティングの知識(差別化ポイント)

ただ言われた通りに作るだけでなく、LPの目的である「コンバージョン率(CVR)を高める」という視点を持つことで、他の制作者と大きく差別化できます。

「CVRを1%改善できるLPを制作します」と提案できるだけで、単なるコーダーから「売れるLPを作れるマーケティングパートナー」へと昇格できます。

  • ABテストの知識: 例えば、ボタンの色を「緑」と「オレンジ」の2パターン用意してどちらがよりクリックされるかを検証する手法です。Google Optimizeなどのツールを使えば実装できます。
  • ヒートマップの知識: Microsoft ClarityやHotjarといったツールを導入すれば、ユーザーがページのどこを熟読し、どこで離脱しているかが視覚的にわかります。そのデータをもとに「よく読まれている部分の情報を充実させる」「クリックされていないボタンを削除する」といった具体的な改善提案が可能になります。
  • SEOライティングの観点: LPは広告流入がメインですが、サービス名での指名検索時に公式サイトとして上位表示されることも重要です。ページのタイトルや見出しにキーワードを適切に配置する基礎的なSEO知識があれば、クライアントに提供できる価値はさらに高まります。

未経験から始めるLP制作学習ロードマップ

「スキルは分かったけど、何から手をつければ…」という方のために、私が実践した3ヶ月で副業デビューを目指す学習ロードマップをご紹介します。

1ヶ月目:基礎固めと模写コーディング

  • 目標: HTML/CSS/JavaScriptの基本をマスターし、簡単なWebページを自力で作れるようになる。
  • やること:
    1. Progate / ドットインストール: HTML/CSS、JavaScriptの基礎コースをそれぞれ2〜3周する。完璧に理解できなくてもOK。まずは全体像を掴むことが重要です。
    2. 簡単なサイトの模写: 企業のシンプルなコーポレートサイトなどを選び、見た目そっくりにコーディングします。最初は答えを見ながらでも構いません。この段階でレスポンシブ対応までできれば理想的です。

2ヶ月目:実践スキルとデザイン入門

  • 目標: 実在するLPを模写し、デザインツールにも触れる。
  • やること:
    1. LPの模写コーディング: 「LP ギャラリー」などで検索して出てくる、クオリティの高いLPを2〜3つ模写します。ここでは、ピクセルパーフェクト(1pxのズレなく再現すること)を目指し、レスポンシブ対応も完璧に行います。
    2. Figmaの基本操作学習: YouTubeのチュートリアル動画などを見ながら、Figmaの基本的な使い方を学びます。図形やテキストの配置、色の変更などができればOKです。
    3. Sass/SCSSの導入: 模写コーディングでSassを使ってみましょう。効率の良さを体感できるはずです。

3ヶ月目:ポートフォリオ制作と営業準備

  • 目標: 自分の作品集(ポートフォリオ)を完成させ、案件獲得の準備を整える。
  • やること:
    1. オリジナルLPの制作: 架空のサービス(例:オンラインヨガ教室、高級食パン専門店など)を想定し、オリジナルのLPを3つ制作します。デザインからコーディングまで全て自分で行うことで、総合的なスキルが身につきます。それぞれ違う業種のものを作ると、対応力の幅広さを示せます。
    2. ポートフォリオサイトの作成: 制作した3つのLPを掲載する簡単なWebサイトを作ります。制作物のURL、担当範囲(デザイン/コーディング)、制作期間、工夫した点を記載します。
    3. クラウドソーシングサイトへの登録: @SOHOなどのサイトに登録し、プロフィールを充実させます。ポートフォリオサイトのURLは必ず記載しましょう。

このロードマップをやり遂げれば、未経験からでも自信を持って最初の案件に応募できるスキルが身についているはずです。

LP制作の単価相場

LP制作の報酬は、担当する業務範囲によって大きく変動します。自分のスキルレベルに合わせて、どのタイプの案件を狙うか戦略を立てましょう。

案件タイプ 単価相場 作業内容 必要なスキル
コーディングのみ 3万〜8万円 デザインカンプをもとにHTML/CSSで実装する。LP制作の入門として最適。 HTML/CSS, JavaScript, レスポンシブ対応
デザイン+コーディング 8万〜20万円 デザインからコーディングまで一貫して対応する。クライアントとのやり取りも増えるが、その分高単価。 デザインツール(Figma), デザイン基礎, コーディング全般
コピーライティング込み 15万〜30万円 LPの文章(コピー)、デザイン、実装をすべて担当する。マーケティング知識が必須。 マーケティング知識, コピーライティング, デザイン, コーディング
修正・改善案件 1万〜5万円 既存LPの部分修正やABテスト用のバリエーション作成。短時間で終わる案件が多い。 既存コードの読解力, 各スキル

私の場合、最初は「コーディングのみ」の案件を3万円で受けていました。実績を積む中でデザインスキルを身につけ、今では「デザイン+コーディング」の案件を10万〜15万円で安定して受注しています。まずはコーディングのみで実績を作り、徐々に担当範囲を広げて単価を上げていくのが王道のキャリアパスです。

案件獲得のコツ

スキルを身につけても、案件が取れなければ収入には繋がりません。ここでは、私が実践して効果があった4つのコツをご紹介します。

コツ1:業界を絞ってポートフォリオを作る

「なんでも作れます」というアピールは、誰にも響きません。「LP制作できます」よりも「効果の出る美容クリニック向けLPが得意です」と専門性を示すほうが、クライアントの心に響きます。特定の業界に絞ることで、その業界特有のデザインや言い回しに詳しくなり、質の高い提案が可能になります。

私は最初、独学時代に作った健康食品の架空LPを参考に、同じ健康食品ジャンルの案件に絞って応募しました。ポートフォリオとして3つの健康食品系LP(うち2つは架空)を提示したところ、「まさにこういう雰囲気のものを探していたんです」とクライアントから言ってもらえる確率が格段に上がりました。

コツ2:提案時にワイヤーフレームを添付する

クラウドソーシングサイトでは、1つの案件に20人以上の応募者が集まることも珍しくありません。その他大勢から一歩抜け出すために、提案文に簡単なワイヤーフレーム(ページ構成のラフ案)を添付するのが非常に効果的です。

手書きのスケッチをスマホで撮ったものでも、Figmaなどで5分程度で作った簡単なものでも構いません。「この人は案件の意図をしっかり理解して、具体的な制作イメージを持ってくれている」とクライアントに感じてもらうことができ、採用率が劇的に上がります。これは、他の応募者がやっていないからこそ、強い差別化になるのです。

コツ3:納品後のフォローを提案する

LPは作って終わりではありません。公開後に効果を測定し、改善していくことが重要です。そこで、「納品後1ヶ月間、テキストや画像の軽微な差し替えを無料で対応します」「ご希望であれば、ヒートマップを導入して改善提案も可能です」といった、納品後のフォローを提案してみましょう。

この一言があるだけで、クライアントは安心して発注できますし、制作者への信頼感が生まれます。そして、この小さなフォローがきっかけで「次のLPもお願いしたい」「サイト全体の運用も任せられないか」といった、リピート受注や長期契約につながるケースは本当に多いのです。

コツ4:制作スピードを武器にする

クライアント、特に広告運用を行う代理店などにとって、納期の速さは非常に大きな価値を持ちます。広告キャンペーンの開始時期に合わせて、LPをスピーディーに用意したいというニーズは常に存在します。

私は、よく使うセクション(お客様の声、FAQ、料金表、CTAボタンなど)のコードを「コードスニペット」としてテンプレート化しています。これにより、毎回ゼロから書く必要がなくなり、制作スピードが30%以上向上しました。提案文に「最短5日で高品質なLPを納品できます」と具体的に書けるようになると、高単価な急ぎの案件を獲得しやすくなります。

副業LP制作者の1週間のスケジュール

参考までに、私が本業と両立しながら、10万円のLP案件(デザイン+コーディング)を進める際のリアルなスケジュールを紹介します。

  • 月曜日(夜):クライアントとオンラインでキックオフミーティング。要件の確認と詳細なヒアリングを行います(30分〜1時間)。ここで方向性を固めるのが最重要。

  • 火〜水曜日(夜):本業後、デザインを作成。1日2時間ほど集中して作業。Figmaでファーストビューから作り始め、全体の構成を整えていきます。通勤中に参考デザインを探すなど、スキマ時間も活用します。

  • 木曜日(夜):クライアントにデザインの初稿を提出し、フィードバックをもらいます。修正があればこの日のうちに対応します。

  • 金曜日(夜)〜土曜日(終日):承認されたデザインをもとにコーディング作業。金曜の夜に2時間、土曜日に4〜6時間ほど集中して実装を進めます。テンプレート化したコードを使い、効率的に進めます。

  • 日曜日(午前):最終的なテストと動作確認。レスポンシブ表示の崩れがないか、リンクは正しいか、フォームは正常に動作するかなどを入念にチェックし、問題がなければサーバーにアップロードして納品完了です。

このペースなら、平日の作業時間を抑えつつ、週末に集中して取り組むことで、月に2〜3件のLP案件を無理なくこなすことが可能です。

失敗談から学んだこと

正直に言うと、初めてクラウドソーシングで受注した3万円の案件では大失敗をしました。クライアントの「いい感じにお願いします」という言葉を鵜呑みにし、要望を細かく確認せずに制作を進めてしまったのです。その結果、提出したデザインを見て「イメージと全然違う」と言われ、3回も全面的に作り直すことに。最終的に納品はできましたが、かかった時間を時給換算すると500円を切っていたと思います。

この苦い経験から、制作に入る前のヒアリングに最も時間をかけるという教訓を得ました。今では、以下のような項目をまとめたヒアリングシートを作成し、必ず最初にクライアントと認識を合わせるようにしています。

  • 事業の目的: このLPで何を達成したいか?(商品販売、問い合わせ獲得、リスト収集など)
  • ターゲット顧客: どんな悩みを持つ、どんな人に見てもらいたいか?(年齢、性別、職業、興味など)
  • デザインの方向性: 参考にしてほしいサイトのURLを3つ以上。逆に、NGなデザインの雰囲気。
  • 色の系統: メインカラー、アクセントカラーの希望。
  • 素材の有無: 使用したいロゴ、写真、テキスト原稿はあるか。

このチェックリストを使うようになってから、手戻りはほぼゼロになり、クライアントの満足度も格段に上がりました。

よくある質問

Q. 構築代行とWeb制作(コーディング)の違いは何ですか?

Web制作は、Webデザイナーが作成したオリジナルのデザイン画を元に、HTMLやCSSを用いてゼロからブラウザ上に組み上げる作業を指すことが多いです。一方、構築代行は「すでにあるWordPressのテーマという枠組み」を使って、クライアントの要件に合わせてパズルのように組み立て、カスタマイズしていく作業です。ゼロから作らない分、工数が圧縮でき、短納期で低コストな提案が可能になります。

Q. 複数のスキルがある場合、ポートフォリオは分けるべきですか?

基本的には「1つの強み」に特化したポートフォリオが好まれます。もし「デザイナー」と「ライター」の両方で活動したいなら、それぞれ別のページを作るか、ターゲットとするクライアントに合わせて提出するPDFの内容を分けるのが賢明です。

戦略的なポートフォリオが完成したら、あとは実践の場に出るだけです。2026年のフリーランス市場には、あなたのスキルを必要としている企業が数多く存在します。

手数料という「見えないコスト」を排除し、クライアントと対等なパートナーシップを築ける環境がここにはあります。バンコクの空の下でパソコンを叩きながら、私は確信しています。正しい準備と場所選びさえ間違えなければ、フリーランスとしての自由な人生はすぐそこにあるんですよ、これが。

Q. 案件獲得のために、実績を少し盛って話しても大丈夫ですか?

絶対にやめてください。嘘はプロジェクトが始まってから必ず露呈します。実績が少ない場合は、正直に伝えた上で「その分、誰よりもリサーチに時間をかけます」「不明点は即座に学習してキャッチアップします」といった熱意と学習能力でカバーしましょう。信頼を失うのが一番のコストです。

@SOHOでキャリアを加速させよう

@SOHOなら、あなたのスキルを求めているクライアントと手数料無料で直接つながれます。

@SOHOで関連情報をチェック

お仕事ガイド

年収データベース

資格ガイド

河野 あかり

この記事を書いた人

河野 あかり

AIツール研究家・元UI/UXデザイナー

UI/UXデザイン会社を経て、AIとデザインの融合に注力。Figma AI、Midjourney、GitHub Copilotなど最新AIツールの実践的な活用法を発信しています。

@SOHOで仕事を探してみませんか?

手数料0%・登録無料のクラウドソーシング。フリーランスの方も企業の方も、今すぐ始められます。

関連記事

カテゴリから探す

クラウドソーシング入門

クラウドソーシング入門

クラウドソーシングの基礎知識・始め方・サイト比較

副業・在宅ワーク

副業・在宅ワーク

副業・在宅ワークの始め方と対象者別ガイド

フリーランス

フリーランス

フリーランスの独立・営業・実務ノウハウ

お金・税金

お金・税金

確定申告・節税・経費・ローンなどお金の知識

スキルアップ

スキルアップ

プロフィール・提案文・単価交渉などのテクニック

比較・ランキング

比較・ランキング

サービス比較・おすすめランキング

最新トレンド

最新トレンド

市場動向・法改正・AIなど最新情報

発注者向けガイド

発注者向けガイド

クラウドソーシングで外注・人材探しをする企業・個人向け

転職・キャリア

転職・キャリア

転職エージェント・転職サイト比較・キャリアチェンジ

看護師

看護師

看護師の転職・副業・フリーランス・キャリアガイド

薬剤師

薬剤師

薬剤師の転職・副業・キャリアパスガイド

保険

保険

生命保険・医療保険・フリーランスの保険設計

採用・求人

採用・求人

無料求人掲載・採用コスト削減・人材募集の方法

オフィス・ワークスペース

オフィス・ワークスペース

バーチャルオフィス・コワーキング・レンタルオフィス

法律・士業

法律・士業

契約トラブル・士業独立開業・フリーランス新法

シニア・50代

シニア・50代

シニア世代のキャリアチェンジ・副業・年金

セキュリティ

セキュリティ

サイバーセキュリティ・脆弱性対策・情報保護

金融・フィンテック

金融・フィンテック

暗号資産・決済・ブロックチェーン・金融テクノロジー

経営・ビジネス

経営・ビジネス

経営戦略・ガバナンス・事業承継・知財

ガジェット・機材

ガジェット・機材

フリーランスに役立つPC・デバイス・周辺機器

子育て×働き方

子育て×働き方

子育てと在宅ワークの両立・保育園・時間管理