「Web制作を始めるには何から始めればいいの?」
「事前準備やなるための方法を教えて!」
副業でWeb制作を目指すには何から始めて何を準備すればいいのかわからない方も多いのではないでしょうか。副業でWeb制作を始めるには必要な準備がたくさんあります。
そこで、この記事では副業でWeb制作を始めるために必要な準備について詳しく解説していきます。副業で必要なスキルやWeb制作の案件事例、案件を獲得するまでのロードマップを紹介していますので、ぜひ参考にしてください。
■この記事は以下の内容が書かれています
- 副業でWeb制作を始める前に準備しておきたいこと
- Web制作を副業で行うための必要なスキル
- 副業のWeb制作に求められる案件例
■この記事でわかること
- 副業としてWeb制作を始める前に準備しておきたいこと
- Web制作の案件が獲得できるまでのロードマップ
- クライアントから信頼されるWeb制作者になる方法
それでは早速スタートします。

\初心者におすすめのプログラミングスクール3選!/
![]() DMM WEBCAMP | ![]() レバテックカレッジ | ![]() | |
|---|---|---|---|
| 特徴 | 転職成功率98.8% 約8,000人のIT人材を輩出 マンツーマン指導 | 大学生/大学院生の就活まで支援 全く経験がない人でもOK オンラインなら24時間 | 即戦力のWebエンジニアになれる Rubyアソシエーションの 認定教育機関 |
| 学べる言語 | HTML/CSS JavaScript・jQuery Ruby etc… | HTML/CSS・JavaScript SQL・PHP Ruby/Ruby on Rails etc… | HTML/CSS Ruby・SQL JavaScript |
| 補助金 | あり | なし | あり |
| 分割払い | あり | あり | あり |
| 転職サポート | あり | あり | あり |
| 返金保証 | あり | あり | なし |
| 無料体験 | あり | なし | なし |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 料金 | 329,350円(税込)〜 ※補助金適用後 | 月額29,800円(税込) | 165,000円(税込)〜 ※補助金適用後 |
| SHIFT TERAS CAMPUS
| レバテックカレッジ
|
副業で行うWeb制作とは?仕事内容と案件の種類

まずは副業で行うWeb制作とは何か解説します。
副業のWeb制作は、本業の合間にWebサイトやWebページの制作を請負、見た目・色合い・イラスト・フォント・アニメーション素材などを活用し、Web上にサイトを制作することです。
パソコンとネット環境があればできるため、会社員でもスキルを身につければ始めやすい副業として人気があります。ただし、Web制作といっても仕事内容は幅広く、案件の種類によって必要なスキルや報酬も大きく変わります。Web制作の仕事内容はWebサイトのコーディング以外にも企画設計やデザインなども担当することもできるため、さまざまなスキルが必要です。

Web制作とはWebサイトを作る仕事
Web制作とは、企業や個人が求めるWebサイトをコーディングして形にしていく仕事です。見た目を整えるだけでなく、閲覧者が使いやすい構造を検討したり、ブラウザ上で正しく動くように仕上げるところまでをします。
| 工程 | 主な内容 |
|---|---|
| ヒアリング | サイトの目的や案件の要件を確認する |
| デザインの共有 | ページの骨組みやレイアウトを確認する |
| コーディング | デザインからHTML/CSS/JavaScriptでコーディング |
| テスト | 表示確認、修正をする |
| 公開 | 問題がなければ、サーバーへ公開する |
店舗の紹介サイトを作る場合、依頼主の来店を増やしたいなどの目的などをヒアリングし、ページ構成を考え、デザインを作成し、HTMLやCSSでコーディングして公開します。一人でこれらをすべて行うこともありますが、Web制作のほとんどはコーディングの一部だけを請け負うことが多いです。
副業では、コーディングだけ、WordPressの設定だけといった工程単位の案件も多く、得意な部分から挑戦できます。自分も最初は、1ページだけの簡単な修正作業から始め、少しずつ受けられる範囲を広げていきました。最初から全部できなくても問題はなく、徐々にいろんなことに挑戦していけば良いです。
WebデザインとWeb制作の違い
WebデザインとWeb制作は混同されやすい言葉ですが、担当する範囲が異なります。WebデザインはWeb制作の一工程であり、Web制作のほうが広い範囲を担当します。
| 項目 | Webデザイン | Web制作 |
|---|---|---|
| 範囲 | 見た目・レイアウトの設計 | 企画から公開までの全工程 |
| 主なツール | Figma Photoshop Illustrator | エディタ(vs codeなど) WordPress 各種デザインツール |
| 必要なスキル | 配色・構成・UI/UXの知識 | デザイン・コーディング・運用知識 |
| 成果物 | デザインカンプ | 公開されたWebサイト |
Webデザインは、サイトの見た目やレイアウト、配色、ボタンの配置など、ユーザーが目にする部分を設計する仕事です。主にPhotoshopやFigmaといったツールを使い、デザインカンプを作ります。一方のWeb制作は、そのデザインをもとにコーディングを行い、CMSの導入や公開作業までを含む全体を指します。
実際の案件では「デザインだけ」「コーディングだけ」と分業されることも多く、募集要項をよく読まないと認識がずれることもあります。私も以前、「Web制作」と書かれた案件がデザイン込みだと知らず、見積もりを見直した経験があります。応募前に作業範囲を確認する習慣が大切です。
副業でできるWeb制作の主な仕事
副業で受けやすいWeb制作の仕事には、いくつか種類があります。仕事を選ぶときはスキルや使える時間を考えながら、無理のない案件を選ぶようにしましょう。
| 案件の種類 | 難易度 | 特徴 |
|---|---|---|
| サイトの修正・更新 | 文言や画像の差し替えなど。初心者向け | |
| コーディング | デザインをHTML/CSSで実装。案件数が多い | |
| WordPressサイト制作 | テーマ設定やカスタマイズが中心 | |
| LP・バナーデザイン | デザインスキルが必要。単価は案件次第 | |
| サイト一括制作 | 企画から納品まで担当。高単価だが責任も大きい |
Web制作の代表的な仕事は以下のとおりです。
- HTML/CSSでページを作るコーディング
- WordPressを使ったサイト構築
- 既存サイトの修正や更新
- バナー・LPのデザイン制作
とくにコーディング案件は、デザインデータを渡されて実装するだけの形式も多く、初心者が最初に実績を作りやすい分野です。
一方、ホームページ全体を一括で受ける案件は、ヒアリングや納期管理も必要になるため、経験を積んでからのほうが安心です。自分も、まず単発の修正案件や1ページだけの比較的簡単な案件で信頼を得て、そのあとに難易度を高くして、継続案件へつなげていきました。副業では本業との両立が前提なので、納期に余裕がある案件を選ぶことも失敗を防ぐコツです。
副業Web制作はどのくらい稼げる?
副業Web制作の収入は、スキルや案件の種類、かけられる時間によって大きく異なります。目安としては、初心者のうちは月数千円〜3万円程度、経験を積んで継続案件を持てるようになると月5万〜10万円以上を目指せるといわれています。
| レベル | 月収の目安 | 特徴 |
|---|---|---|
| 初心者(〜半年) | 数千円〜3万円 | 修正・更新、簡単なコーディング |
| 中級(半年〜1年) | 3万円〜10万円 | LP制作、WordPress構築 |
| 上級者(1年以上) | 10万円以上 | サイト一括制作、継続案件 |
単価の相場は、簡単な修正で数千円、LPのコーディングで1万〜5万円前後、WordPressを使ったサイト制作で10万円以上になることもあります。ただし、これらはあくまで目安であり、最初から安定して稼げるわけではありません。自分も、最初の数か月は作業時間のわりに収益が少なく、時給に換算すると続ける意味があるのかと考えるほど厳しい時期がありました。
収入を伸ばすには、実績をポートフォリオにまとめる、丁寧なやり取りで継続案件につなげる、得意分野を絞って単価を上げるといった工夫が必要です。
副業Web制作を始める前に決めておきたい3つのこと
副業でWeb制作を始める前に、勢いだけでスタートしてしまうと、方向性がぶれてしまい、うまく進めることができません。なおかつ、本業に支障が出たりすることがあります。そうならないためにも、事前に以下の方向性を整理しておきましょう。
- 副業でWeb制作をする目的を決める
- 月いくら稼ぎたいのか目標を決める
- 週に何時間Web制作に使えるか確認する
ここでは、副業Web制作を始める前に決めておきたい3つのポイントを紹介します。目的、目標収入、使える時間の3つを明確にしておくことで、案件選びやスケジュール管理がぐっとやりやすくなります。自分も最初にこれらを整理せずに始めてしまい、途中で方向性がぶれた経験があります。同じ失敗をしないためにも、始める前にしっかり準備しておきましょう。
そもそも自分が副業Web制作に向いているのか知りたい方は、向いている人の特徴や始め方も確認してみましょう。

副業でWeb制作をする目的を決める
まず最初に整理したいのがなぜ副業でWeb制作をするのかという目的です。目的が曖昧なままだと、案件選びの基準がぶれたり、モチベーションが続かなかったりする原因になります。
| 目的の例 | 選びやすい案件・行動 |
|---|---|
| 収入を増やしたい | 単価の高いコーディング・制作案件 |
| 将来独立をしたい | 一括制作案件で経験を積む |
| スキルを身につけたい | 学びの多い案件、勉強も並行 |
| 新しいことに挑戦したい | 小規模案件からまず経験する |
目的は人によってさまざまです。目的によって選ぶべき案件や学ぶべきスキルも変わってきます。収入重視なら単価の高い案件を優先し、スキルアップ重視なら学びの多い案件をあえて選ぶといった判断ができるようになります。
自分の場合、最初は収入を増やしたいという気持ちだけで始めましたが、続けるうちに将来は独立したいという目的に変わっていきました。目的は途中で変化しても構いません。大切なのは、今の自分がなぜ取り組むのかを一度言葉にしておくことです。
月いくら稼ぎたいのか目標を決める
次に決めておきたいのが、月にいくら稼ぎたいかという具体的な目標収入です。なんとなく稼げたらいいという状態では、案件の選び方や時間の使い方が明確になりませんし、モチベーションも上がってきません。
目標収入は、できるだけ具体的な金額で設定するのがおすすめです。たとえば「月3万円」「月10万円」のように数字で決めると、必要な案件数や単価が逆算できます。月3万円であれば、単価1万円の案件を月3件こなすイメージが立ちますし、月10万円を目指すなら、継続案件を複数持つ必要があるとわかります。
| 目標の収入 | 必要な案件イメージ |
|---|---|
| 1万〜3万円 | 単価数千円〜1万円の案件を数件 |
| 3万〜5万円 | LPコーディングなどを月数件 |
| 5万〜10万円 | 継続案件+単発案件の組み合わせ |
| 10万円以上 | 高単価案件・複数の継続クライアント |
注意したいのは、最初から高すぎる目標を掲げないことです。副業は本業と両立する働き方のため、無理な目標は無茶な働き方になってしまい、副業を続けても辛いだけになります。最初は月5万円を目標にしておき、実際に取り組むなかで時間が足らない、目標が厳しそうだと感じたら、目標を月2万円に見直しても良いです。
週に何時間Web制作に使えるか確認する
最後に確認しておきたいのが、1週間のうちどれくらいの時間をWeb制作の作業ができるかです。時間の見積もりが甘いと、納期に追われたり本業に影響が出たりします。
| 週の作業時間 | 取り組みやすい案件 |
|---|---|
| 〜5時間 | 簡単な修正・更新作業 |
| 5〜10時間 | 小規模なコーディング案件 |
| 10〜20時間 | LP制作、WordPress構築 |
| 20時間以上 | サイト一括制作、複数案件の並行 |
まずは、平日・休日それぞれの生活リズムを振り返り、無理なく作業に充てられる時間帯を洗い出しましょう。通勤時間や休憩時間、就寝前の1時間など、細切れの時間でも積み重ねれば作業時間になります。目安として、週5時間程度なら簡単な修正案件、週10時間以上確保できればコーディングやWordPress構築といった案件にも挑戦しやすくなります。
自分は1週間に15時間前後の作業時間を確保できる見込みがあり、平日は本業後の2時間、休日にまとめて3〜4時間という形で、無理のない範囲から始めました。最初から詰めすぎると、本業にも私生活にも支障が出てしまいます。継続できるペースを見つけることが、副業を長く続ける一番のコツだと感じています。
副業のWeb制作案件を始める前に準備すべきもの

副業でWeb制作を始める場合は自宅で作業を行うため、Web制作を行うための環境が必要です。Web制作の実案件を獲得する前に以下の準備をしましょう。
- パソコン
- インターネット環境
- ディスプレイ
- レンタルサーバー
- 制作・デザインツール
- 案件管理・コミュニケーションツール
- 確定申告用の会計ソフト
それぞれ、詳しく解説をしていきます。
パソコン
Web制作を副業で行う場合は、サイト制作を行うためのパソコンを準備しましょう。Web制作では、HTML・CSS・JavaScriptのコーディング、WordPress、ブラウザでの表示確認などを行います。動作が重くならないためにも必要最低限として以下のスペックのパソコンは準備しておきたいです。
| 項目 | 副業Web制作におすすめのPCスペック |
|---|---|
| CPU | Core i5 / Ryzen 5 / Apple Mシリーズ相当以上 |
| メモリ | 16GB |
| ストレージ | SSD 512GB |
| グラフィックボード | 内蔵のもので十分 |
| OS | Windows / macOSどちらでもOK |
上記のスペックを満たしているパソコンであれば、あとは好みなのでWindows、Macどちらでも構いません。コーディングを行うためにVS Codeを使用している方が多く、複数のOSで使用できるので、操作しやすいパソコンを選ぶと良いでしょう。
- iPhone・iPadとの連携を重視する
- デザイン制作も行いたい
- ノートパソコンを持ち運びたい
- macOSを使い慣れている
- パソコン本体の価格を抑えたい
- 幅広い機種から選びたい
- Windowsに慣れている
- Web制作以外でもWindowsを使いたい
必須ではありませんが、副業でWeb制作をするなら24インチ程度の外部ディスプレイを用意しておくと良いでしょう。詳しくは後ほど解説します。
インターネット環境
Web制作では、単純に通信速度が速いことだけを重視するのではなく、以下のことも考えて選定するといいです。
- 通信が安定している
- 速度が極端に低下しない
- Wi-Fiが途切れにくい
- オンライン会議が安定する
なので、副業でWeb制作をするなら以下のスペックは準備しておきたいです。
| 項目 | 推奨 |
|---|---|
| 回線 | 光回線 |
| 最大通信速度 | 1Gbps以上 |
| 接続 | Wi-Fi 6/6E/7または有線LAN |
| Web制作 | 1Gbpsクラスで十分 |
| オンライン会議 | 安定した通信を優先 |
| 大容量ファイル | 光回線がおすすめ |
クライアントとの打ち合わせでZoomなどのオンライン会議を使うこともあるため、通信速度が速いものを選ぶより安定性を重視するのがおすすめです。
ディスプレイ
Web制作を行うにはノートパソコンの画面だけでは効率が悪いです。まだ、勉強をしている段階であれば問題ないですが、本格的に案件受注をするのであれば必ずモニターは購入しましょう。
Web制作の仕事では、デザインデータ、コードエディタ、Webブラウザの3つを同時に画面上に出して作業します。大画面のモニターもしくは23インチのディスプレイを2つ並べてデュアルディスプレイにすることをおすすめします。作業効率が格段に上がり、より短時間で案件をおわらせることができます。
ディスプレイはAmazonや楽天で状態のいい中古品があるので、予算と相談して選定をしましょう。Web制作を行う作業環境をどうすればいいか悩んでいる方は、以下の記事で私の実際の作業スペースのレイアウトを紹介していますので、ぜひ参考にしてください。

レンタルサーバー
Web制作ではクライアント側のWordPressを使って設定を行う案件が頻繁にあります。
案件を受注してから初めて操作をするのは、とても効率が悪くおすすめしません。あらかじめ操作になれておくためにも自分のサーバーを持って、練習しておくことを強く推奨します。
数多くあるレンタルサーバー選びは、国内最速の「ConoHa WING」か国内シェアNo.1の「エックスサーバー
」のどちらかを選ぶといいでしょう。

制作・デザインツール
| ツール | 主な用途 | おすすめ度 | 初心者 |
|---|---|---|---|
| VS Code | HTML・CSS・JavaScript・PHPなどのコーディング | ★★★★★ | ◎ |
| Figma | Webデザイン・ワイヤーフレーム・UI制作 | ★★★★★ | ○ |
| Canva | バナー・画像・資料作成 | ★★★★☆ | ◎ |
| Photoshop | 画像加工・Webデザイン | ★★★★☆ | △ |
| Illustrator | ロゴ・イラスト・ベクター制作 | ★★★☆☆ | △ |
Web制作をするなら最優先で導入したいのが、VS Code(コードエディター)です。HTML・CSS・JavaScriptなどのコードを書くために使用します。VS CodeはMicrosoftが提供しており、Windows・macOS・Linuxで利用できます。公式にもWeb開発を含むさまざまな開発用途で利用できるエディターとして案内されています。
Figmaはデザイン関連の知識を持っておきたい人は導入しておくのをおすすめします。デザインの共有や、修正・コメントをすることができるので、将来的に仕事の幅を広げたい方は導入を検討しましょう。
案件管理・コミュニケーションツール
まず、案件管理をするならNotionがおすすめです。自分が取り組まなければいけない案件を一覧化できて、進捗状況や納期の設定などが一目でわかるようになります。
- 案件一覧
- クライアント情報
- 納期
- タスク
- 制作状況
- 打ち合わせメモ
- 提案文
- 見積金額
- URL
- パスワード管理以外の各種情報
クライアントとのやりとりをするのに使用するツールとして多いのが、Slack、ChatWorkの2つです。どちらも無料で登録ができます。どちらもファイルの共有やチャネルごとに案件管理ができます。自分の好きなツールを選ぶのではなく、クライアントが指定したツールを使えるように入れておきましょう。
確定申告用の会計ソフト
個人として副業をしていく場合、以下の条件に該当する方は確定申告が必要です。
- 1年間の所得が48万円を超える個人事業主・フリーランス
- 副業で得た1年間の所得が20万円を超える会社員
確定申告は作成する書類やお金の計算が面倒そうと感じる方もいるでしょう。しかし、今では面倒な事務作業は全てソフトが行ってくれます。
私も確定申告をはじめて行なった時は書類の整理からお金の計算ととても大変な思いをしました。
しかし、クラウド会計ソフトのfreeeを使うことで簡単に確定申告できて、「こんな簡単にできるんだ」と感動をしたのを覚えています。
なかでもおすすめなのがクラウド会計ソフトシェアNo.1のクラウド記帳代行で会計を自動化【freee会計】 です。
銀行口座やクレジットカードの明細データを自動取得- 確定申告の書類作成はステップに沿って行うだけ
- 税務署に並ばずに書類作成〜申告まで全てオンラインで完結
- 見積書・請求書などの書類作成も簡単(インボイスにも完全対応)
会計作業や確定申告はやればやるほど面倒なことがおこるので、早い段階で導入するのをおすすめします。
初心者が副業Web制作で身につけるべきスキル

ここでは、副業でWeb制作を始め案件を獲得できる最低限必要なスキルを紹介していきます。すべてのスキルを最初から完璧に身につける必要はありません。案件獲得に直結するスキルから優先的に学んでいきましょう。
- HTML/CSS
- JavaScript
- WordPress
- Webデザイン
- レスポンシブ対応
- サーバー・ドメインの基礎知識
- SEOの基礎知識
- クライアントとのコミュニケーション
- 案件獲得に向けた営業力
- 全てのスキルを完璧にする必要はない
ここでは、初心者が身につけるべき代表的なスキルを、実際の案件獲得につながりやすい順に整理して解説します。効率よくスキルアップしたい方は、ぜひ参考にしてください。
Web制作を独学で学び、スキルを身につける方法については、こちらの記事で詳しく解説しています。

HTML・CSS
Web制作は、Webサイトを作るためにコーディングは必須スキルです。もっとも優先度高く習得したいのが、HTML/CSSです。
| 項目 | 学ぶ内容の例 |
|---|---|
| HTML | 見出し・段落・リンク・画像などの構造 |
| CSS | 配色・フォント・余白・レイアウト |
| 学習方法 | サイト模写、無料学習サイト、書籍 |
HTMLはページの骨組みを作る言語で、見出しや段落、画像、リンクなどを配置します。CSSはその見た目を整える言語で、色やフォント、余白、レイアウトなどを調整します。この2つを組み合わせることで、シンプルなWebページなら一人で作れるようになります。
副業案件においても、デザイン通りにHTML/CSSでコーディングしてくださいという案件は非常に多く、実績を作りやすい分野です。自分も、最初に学んだのはHTML/CSSで、練習として以下のサイトから複数模写しました。
まずは、真似でそうなデザインを選んで、自力でコーディングをしていきます。わからないところは調べながらコーディングをしていきましょう。ある程度完成したところで、模写したページと自分で作成したページを表示比較させて確認します。この際、デザインやレイアウトが元のサイトと一致しているか、動作に問題がないかをチェックします。
JavaScript
HTML/CSSがある程度書けるようになったら、次に学びたいのがJavaScriptです。これは、Webページに動きやインタラクションを加えるためのプログラミング言語です。
| レベル | できるようになること |
|---|---|
| 基礎 | ボタンの開閉、簡単なアニメーション |
| 実務レベル | フォームバリデーション、スライダー実装 |
| 応用 | API連携、動的なコンテンツ表示 |
たとえば、ボタンを押したときにメニューが開く、スクロールに合わせて要素がふわっと表示される、フォームの入力チェックを行うといった動作は、JavaScriptによって実現されています。最近のホームページを見ると静的なページだけでなく、こうした動きのあるサイトが増えているので、JavaScriptで実装できると、対応できる案件の幅が大きく広がります。
ただし、JavaScriptは奥が深い言語でもあるため、最初からすべてを理解しようとする必要はありません。まずはよく使われる動きが何かを理解して実装できるレベルを目指していきましょう。自分も、最初は既存のコードを参考にしながら、ハンバーガーメニューやスライダーなど、よくある動きからマネてました。案件でも簡単なアニメーションを追加してほしいという依頼は多く、基本的な実装ができるだけでも十分に案件を獲得できます。無理に高度な内容へ進まず、実務でよく使う範囲から着実に身につけていきましょう。
WordPress
WordPressはCMS(コンテンツマネジメントシステム)と呼ばれるシステムの一部で、多くの方が利用しています。Web制作の仕事ではクライアントの要望に合わせてサイト構築をしたり、デザインを変更したり、新機能を追加するなどをおこないます。
副業案件でも「WordPressでのサイト構築・修正」という依頼は非常に多く、習得しておくと案件の選択肢が大きく広がります。
WordPressは、専門的なコーディング知識がなくてもWebサイトを構築・更新できます。テーマの設定やプラグインの導入、固定ページ・投稿の編集など、基本操作を覚えるだけでも更新代行のような案件を受けられるようになります。さらに、HTML/CSSの知識と組み合わせれば、既存テーマのカスタマイズや、オリジナルデザインを反映させる作業にも対応できます。
案件獲得の観点では、まずWordPressの基本操作ができるというだけでも需要があります。企業のブログ更新やちょっとした修正作業は、専門知識がなくても任せられる案件として多く募集されているためです。自分も、ブログ運営をしているのでWordPressの管理画面操作には慣れているので、更新系の継続案件を受注できるようになりました。ゼロからテーマを自作するスキルは後回しにしても構いません。まずは、触れて操作の感覚を持っておくことから始めるのがおすすめです。

Webデザイン
Webデザイナーを副業として行いたい場合、下記の3つのツールは使えるようにしましょう。
Webデザインは、サイトの見た目やユーザーの使いやすさを設計するスキルです。コーディングとあわせて習得すると、対応できる案件の幅が広がり、単価アップにもつながりやすい分野です。
Webデザインでは、配色やフォント、レイアウトのバランスに加え、ユーザーが迷わず操作できるUI(見た目の使いやすさ)や、快適に使えるUX(体験のしやすさ)の視点も求められます。FigmaやPhotoshopといったツールを使い、デザインカンプを作成するのが一般的な流れです。
ただし、デザインは奥が深く、センスや経験が問われる分野でもあるため、コーディングに比べると習得までに時間がかかりやすい傾向があります。案件獲得を急ぐ段階であれば、まずは既存デザインを忠実にコーディングする力を優先し、デザインは並行して少しずつ学んでいく進め方でも問題ありません。
最初はデザインを他の人にお任せし、コーディングに専念することで案件をこなしながら、徐々に配色やレイアウトの基礎を学んでいきました。将来的に単価の高い案件やLP制作案件を狙うなら、デザインスキルは着実に伸ばしておきたいです。
レスポンシブ対応
レスポンシブ対応とは、パソコン・タブレット・スマートフォンなど、画面サイズの異なるデバイスでも見やすく表示されるように調整する技術です。現在ではほぼすべての案件で必須のスキルとなっています。
| デバイス | チェックポイント |
|---|---|
| スマートフォン | 文字サイズ、タップのしやすさ、余白など |
| タブレット | レイアウトの崩れ、画像サイズ |
| パソコン | 全体のバランスや余白の使い方 |
具体的には、CSSのメディアクエリという機能を使い、画面幅に応じてレイアウトやフォントサイズ、要素の配置を切り替えます。スマートフォンからのアクセスが多い現在、レスポンシブ対応ができないと、案件そのものを受けられない場合もあるので、身に付けておきたいスキルです。
学習の順番としては、HTML/CSSの基礎を身につけると同時に取り組みましょう。ゼロから別のスキルとして学ぶというより、HTML/CSSの延長として習得できる範囲のため、比較的早い段階で対応できるようになります。最初の案件でスマホ表示が崩れていると指摘を受けた経験があり、それ以降は必ずスマホ・タブレット表示を確認しながらコーディングするようにしています。案件のクオリティに直結する部分であり、対応できるかどうかで信頼度も変わってくるため、早めにしっかり押さえておきたいスキルです。
サーバー・ドメインの基礎知識
Webサイトを公開するためには、サーバーとドメインの仕組みを理解しておく必要があります。専門的な知識をすべて覚える必要はありませんが、基礎を知っておくと対応できる作業の幅が広がります。以下に基礎となる用語を紹介します。
| 用語 | 意味 |
|---|---|
| サーバー | サイトデータを保管・公開する場所 |
| ドメイン | サイトの住所 |
| DNS設定 | ドメインとサーバーをつなぐ設定 |
サーバーとは、Webサイトのデータを保管し、インターネット上に公開するための場所です。ドメインは「shoceed.com」のような、サイトの住所にあたる部分を指します。案件によっては、サーバーの契約やドメインの取得、WordPressのインストール作業まで任されることがあり、この基礎知識がないと対応できません。
とはいえ、いきなり複雑な設定まで理解する必要はなく、まずはサーバーとドメインの違い、よく使われるレンタルサーバーの種類、独自ドメインの取得方法といった基本を押さえるところから始めれば十分です。自分も、最初は用語の意味すら曖昧でしたが、実際に自分のサイトを一つ運用してみることで、感覚的に理解できるようになりました。案件でいきなり求められることは少ないものの、任される作業の幅を広げる意味でも、優先度は中程度として押さえておきたい知識です。

SEOの基礎知識
SEO(検索エンジン最適化)とは、Webサイトが検索結果で上位に表示されやすくなるように調整する取り組みです。制作したサイトが多くの人に見てもらえるようにするための、実務でも重視されるスキルの一つです。
- ページの表示速度
- 見出しタグの適切な使い方
- 画像のalt属性の設定
- 内部リンクの構造 etc…
コーディングの段階から意識できるポイントが数多くあります。クライアントの多くはサイトを作って終わりではなく集客につながるサイトを求めているため、SEOの基礎知識があると提案の幅が広がります、競合に勝って案件を勝ち取れるようになります。
学ぶ優先度としては、HTML/CSSやWordPressの基礎を身につけたあとに取り組むのが良いでしょう。専門的なSEO対策は奥が深い分野ですが、まずは正しいタグの使い方、表示速度への配慮といった基本的な部分から意識するだけでも十分な差別化になります。制作スキルにSEOの視点を加えることで、単なる作業者から一歩進んだ提案ができるようになります。
クライアントとのコミュニケーション
技術的なスキルと同じくらい重要なのが、クライアントとのコミュニケーション力です。どれだけ技術力が高くても、要望を正しく理解できなければ、案件を継続的に受注することは難しいです。
- 依頼内容を正確に理解するためのヒアリング力
- 進捗状況をこまめに報告する連絡力
- 修正依頼にも柔軟に対応する姿勢
上記の対応力はよく求められます。とくに副業の場合、対面での打ち合わせが難しく、チャットやメールでのやり取りが中心になるため、文章で誤解なく伝える力が必要です。
| 意識したいポイント | 理由 |
|---|---|
| 早めのレスポンス | 信頼感の向上、継続受注につながる |
| こまめな進捗管理 | 認識のずれを防ぐ |
| 丁寧な言葉遣い | 円滑なやりとり、トラブル防止 |
案件獲得や継続受注の観点では、実はこのコミュニケーション力が大きく影響します。技術力が同程度のライバルが多い中、レスポンスが早く、報連相がしっかりしているというだけで、次の案件につながります。私自身も、技術力よりもむしろ丁寧なやり取りを心がけたことで、継続案件を任せてもらえるようになった経験があります。スキルの習得と並行して、早い段階から意識しておきたいです。
案件獲得に向けた営業力
Web制作を副業でおこなうなら、案件獲得のためには営業力が必要です。
ただ、コーディング技術やスキルが優れていても、それをクライアントにアピールしなければ案件を獲得できません。単に自分を売り込むのではなく、「共に仕事をしたい」「案件を依頼したい」と思ってもらえるような営業をしなければいけません。
| 営業したいポイント | 内容 |
|---|---|
| プロフィールを作成する | 得意分野・実績を具体的に記載 |
| 競合とは違う提案文 | 相手の課題に寄り添った内容を意識 |
| ポートフォリオの充実化 | 実績がない場合は自主制作でも可 |
特にWeb制作の分野では、自分のスキルや作品を効果的にアピールし、クライアントのニーズを理解して提案するすることが必須です。具体的には、ポートフォリオの作成やSNS・ブログを活用した情報発信などの工夫が必要になるでしょう。
クライアントとの関係を築くためには、迅速な対応や前向きなコミュニケーションもあるといいでしょう。このように、Web制作を副業で行うためには、技術力と同じくらい営業力も重要です。はじめのうちは応募をしても断られることが多いですが、そこは良い経験をしているとプラスに捉え、営業活動を続けていきましょう。
すべてのスキルを完璧にする必要はない
ここまでさまざまなスキルを紹介してきましたが、これらすべてを完璧に習得してから案件に挑戦する必要はありません。むしろ、完璧を目指しすぎると、副業を始める大きなハードルになってしまいます。
実際の案件では、HTML/CSSの基礎ができていれば対応できる仕事も多く、JavaScriptやSEOなどは案件をこなしながら少しずつ身につけていけば良いです。大切なのは案件獲得に直結する範囲から優先して学び、実際の案件を通じて足りない部分を補っていくという考え方です。完璧にできるまで待っていると、いつまでも一歩を踏み出せなくなってしまいます。
自分も、最初はHTML/CSSとWordPressの基本操作しかできない状態で1ページのトップページの作成案件に挑戦しましたが、実務を通じてJavaScriptやSEOの知識を少しずつ吸収していきました。すべてを学び終えてから始めるのではなく、今のスキルでできる案件から動き出し、実践のなかで学びを深めていくことが、副業Web制作を継続するうえで最も重要だと感じています。まずは一歩踏み出すことを意識してみてください。
初心者はコーディングとWordPress・ノーコードのどちらから始めるの?
副業Web制作を始めようとしたとき、多くの初心者がつまずくのが何から手をつければいいのかという問題です。
- HTML・CSSから始める場合
- WordPressから始める場合
- ノーコードから始める場合
選択肢は大きく分けて、HTML・CSSによるコーディング、WordPressの操作、そしてノーコードツールの3つがあります。それぞれ学習の難易度や身につくスキル、対応できる案件の種類が異なるため、自分の目的や活動できる範囲でできる方法を選んでいきましょう。ここでは、3つの学習方法の特徴と、それぞれにおすすめの学習ツールを紹介しながら、初心者がどこから始めるべきかを解説します。
HTML・CSSから始める場合
HTML・CSSからのスタートは、Web制作の基礎をしっかり固めたい人におすすめの方法です。コーディングの仕組みを根本から理解できるため、将来的にJavaScriptやWordPressのカスタマイズへとステップアップしやすいです。
| 学習ツール | 特徴 |
|---|---|
| Progate | スライド形式でHTML/CSSの基礎を学べる |
| ドットインストール | 短い動画でコードの書き方を学べる |
| MDN Web Docs | 実務でも使えるHTML/CSSのリファレンス |
HTMLとCSSは、いわばWeb制作の「共通言語」です。この2つを理解していれば、WordPressのテーマ編集やノーコードツールで思い通りにいかない部分を自分で調整できるようになります。もっとも応用の効く学び方です。ただ、覚えることが多く、最初は見た目に反映されるまで時間がかかるため、苦しい期間が続くかもしれません。
学習方法としては、まず無料の学習サイトでコードの書き方に慣れ、その後に簡単なサイトを模写して実践力を養うのが良い方法です。初心者向けに体系立てられた「Progate」や「ドットインストール」、実務でも辞書代わりに使える「MDN Web Docs」はおすすめです。自分も、最初はProgateやドットインストールでHTML/CSSの基礎を一通り学んだあと、既存サイトの模写を繰り返して、独学でも実務レベルのコーディング力を身につけることができました。時間はかかりますが、基礎を積み上げるのはとても大切なので丁寧に実践していきましょう。
WordPressから始める場合
WordPressから始める方法は、実際に動くサイトを早く作ってみたいという人に向いています。コーディングの知識がなくても、テーマとプラグインを組み合わせることで、見栄えの整ったサイトを比較的短期間で作成できます。
| 学習ツール | 特徴 |
|---|---|
| 自分用ブログの開設 | 実践しながら操作を覚えられる |
| WordPress サポートページ (HelpHub) | 公式の操作マニュアル |
| YouTube解説動画 | テーマ設定やプラグイン導入を視覚的に学べる |
WordPressは世界中の多くのWebサイトで採用されているCMSで、副業案件でもWordPressでのサイト構築・更新という依頼が非常に多くあります。管理画面の操作に慣れれば、ブログの更新代行のような案件から始められ、実績作りとしてはハードルが下がります。ただし、テーマやプラグインに頼る部分が大きいため、細かいデザイン調整や独自機能の追加をしたい場合は、HTML・CSSの知識が必要になる場面も出てきます。
学習方法としては、まず自分用のブログや練習サイトを一つ立ち上げ、実際に触りながら覚えるのが一番良いです。レンタルサーバーとドメインを取得し、WordPressをインストールするところから始めてみましょう。学習コンテンツとしては、公式のWordPress Codex(日本語版)や、YouTubeにたくさんアップされている実践的な解説動画が参考になります。私自身も、2020年に自分のブログをWordPressで開設したことがきっかけで操作に慣れ、そこから副業案件につなげることができました。
WordPressの始め方は以下の記事で解説をしていますので、ぜひ参考にしてみてください。

ノーコードから始める場合
ノーコードツールは、コードを一切書かずにWebサイトを作成できるサービスです。
とにかく早く、視覚的にサイトを作ってみたいという人やデザイン重視でサイトを作りたい人に向いています。代表的なノーコードツールには、STUDIOやWix、Webflowなどがあり、ドラッグ&ドロップの操作だけでデザイン性の高いサイトを作成できます。コーディングの知識がなくても直感的に操作できるため、学習コストが低く、早い段階で一つのサイトを完成させることができます。一方で、案件によってはノーコード対応可という条件が付いていることもあり、コーディング案件に比べると対応できる仕事の幅がやや狭くなるのは難点です。
学習方法としては、まず無料プランで実際にツールを触ってみて、テンプレートを使いながら1サイト完成させてみましょう。多くのノーコードツールには公式のチュートリアルが用意されているため、それに沿って進めるだけでも基本操作は十分に習得できます。特にSTUDIOは日本語対応かつデザインの自由度が高く、副業案件でも需要が増えている分野です。
初心者はどの方法を選べばいい?
3つの方法を紹介しましたが、結論としてどれが正解ということはなく、挑戦してみたい分野を選ぶようにしましょう。将来的に対応できる案件の幅を広げたいならHTML・CSS、早く実績を作りたいならWordPress、まず形にする成功体験を得たいならノーコードが向いています。
それぞれの方法は、対立するものではなく、組み合わせて学べます。たとえば、ノーコードでサイトの完成イメージをつかんでからHTML・CSSを学ぶ、WordPressを触りながら並行してコーディングの基礎を学ぶといった進め方でも問題ありません。大切なのは、完璧な順番にこだわりすぎず、まず一つの方法で手を動かしてみることです。
ちなみに自分は、WordPressでのブログ運営から始め、その後HTML・CSSを学んでコーディング案件に挑戦するという順番で活動してきました。振り返ると、どの方法から始めても、続けていれば必ず次のステップにつながると感じています。
独学だけでなくスクールで効率よく学びたい方は、自分に合ったプログラミングスクールの選び方も確認してみてください。

副業Web制作で狙える案件と仕事内容

ここまで副業Web制作の仕事内容や必要なスキルや知識について解説しましたが、これらのスキルや知識をどのように習得すればいいのか悩んでいる方もいるでしょう。
ここからは、副業でWeb制作を始めることを目指している方に向けて代表的な8つの案件を取り上げ、それぞれの仕事内容と、難易度・作業量・単価の目安、必要なスキルをまとめて解説します。
- Webサイト制作
- LP(ライティングページ)制作
- WordPress構築
- WordPressの修正・カスタマイズ
- コーディング
- バナー・画像制作
- Webサイトの更新
- 保守・運用
それぞれ、詳しく解説をします。
| 案件タイプ | 難易度 | 作業量の目安 | 単価相場 | 必要なスキル |
|---|---|---|---|---|
| Webサイト制作 | 1ページ:10時間〜20時間 | 100,000円〜 | HTML/CSS、デザイン、WordPress、ヒアリング力 | |
| LP制作 | 1ページ:7時間〜 | 30,000円〜 | HTML/CSS、デザイン 構成力 | |
| WordPress構築 | 設定のみ: 10時間〜 カスタム含む: 20時間〜 | 50,000円〜 | WordPress操作、HTML/CSS | |
| WordPress修正・ カスタマイズ | 〜10時間 | 3,000円〜 | HTML/CSS、WordPress操作、PHP(応用) | |
| コーディング | 〜10時間 | 10,000円〜 | HTML/CSS、 JavaScript(応用) | |
| バナー・画像制作 | 1〜2時間 | 1,000〜5,000円 | Photoshop、Canvaなどの デザインツール | |
| Webサイトの更新 | 2〜3時間 | 1,000〜5,000円 | 基本操作、CMSの知識 | |
| 保守・運用 | 2〜3時間 | 5,000円〜 | サーバー知識、 セキュリティの基礎 |
Webサイト制作
Web制作を副業で始めるなら多くの依頼があるWebサイトの制作です。
必要なスキルもデザインからHTML/CSSを用いたコーディング、JavaScriptやPHPなどのプログラミング、CMS(コンテンツ管理システム)の設定と範囲が広いです。そのため、単価も高くなりやすい傾向にあります。制作ページ数によって報酬や作業時間が変わりますが、はじめて案件を受注するならホームページの改修で1ページから行える案件を受注してみましょう。
経験が浅い方が取り組むにはややハードルが高いかもしれませんが、その分、クライアントが納得する成果を出せば収入面での大きなメリットがあります。
| 難易度 | |
|---|---|
| 作業量 | 1ページ:10時間〜 |
| 単価 | 100,000〜500,000円 |
| 必要なスキル | HTML/CSS、デザイン、WordPress、ヒアリング力 |
LP(ライティングページ)制作
LP(ライティングページ)とはユーザーが広告などのリンクをクリックしたときに表示される、1枚の縦に長いWebページのことで、制作規模としても少なくWeb制作を始めやすい案件です。
Webサイトの目的はさまざまで「企業案内・商品紹介」「認知拡大」「企業ブランディング」と企業によりますが、ランディングページは、どんな企業のLPであっても、目的はコンバージョン達成に絞られています。
ランディングページはユーザーが知りたい情報を1ページに集約して商品の販促や資料請求、サービスの申し込みなど、売上に関わるものが多く、どのような内容で制作をするのか、クライアントと相談をしながら制作をしていきます。
| 難易度 | |
|---|---|
| 作業量 | 1ページ:7時間〜 |
| 単価 | 30,000円〜 |
| 必要なスキル | HTML/CSS、デザイン、構成力 |
WordPress構築
Web制作の案件として多くあるのがWordPressを使ったWebサイト・ブログデザインの構築の案件です。
WordPressはCMSと呼ばれるツールで、ブログをやっている方が使うイメージがありますが、カスタマイズ性が高いことから、Webサイトとして使うクライアントさんが多くいます。WordPressにあるテーマをもとにデザイン変更や設定をしてほしいという案件や大幅にデザインを変更して独自の機能を追加してほしいなど案件の難易度も単価も違います。
デザイン変更は行わずWordPressの構築・初期設定のみを依頼される場合もあり、個人が依頼を出しているケースも多数あるので、案件受注できる範囲も広がるためにもWordPressの操作になれておくことをおすすめします。
| 難易度 | |
|---|---|
| 作業量 | 設定のみ:10時間〜、カスタム含む:20時間〜 |
| 単価 | 50,000円〜200,000円 ※案件範囲が広いため単価も広い |
| 必要なスキル | WordPress操作、HTML/CSS |
WordPressの修正・カスタマイズ
WordPressの修正・カスタマイズは、すでに公開されているWordPressサイトに対して、デザインの一部変更や機能追加、不具合の修正などを行う案件です。新規構築に比べて作業範囲が限定的なため、初心者でも挑戦しやすい分野です。
具体的な仕事内容としては、以下の修正依頼の対応が多い印象です。
- お問い合わせフォームの項目を増やしてほしい
- スマホ表示が崩れているので直してほしい
- 特定のページだけデザインを変更してほしい
既存のコードを読み解く力が必要になるため、ゼロから作るのとは違った難しさがありますが、作業範囲が明確な分、見積もりも立てやすいです。簡単な修正であればHTML/CSSの知識で対応でき、動的な機能追加になるとJavaScriptの知識が必要になる場合もあります。
単価は内容によって幅広く、簡単な文言修正で数千円、機能追加を伴うカスタマイズでは1万〜3万円程度になることが多いです。自分も最初の修正案件は「問い合わせページを追加してほしい」という小さな依頼でしたが、丁寧に対応したことで、その後の継続修正依頼につながりました。小さな案件でも真摯に対応することが、次の仕事につながる好例だと感じています。
| 難易度 | |
|---|---|
| 作業量 | 〜10時間 |
| 単価 | 3,000円〜 |
| 必要なスキル | WordPress操作、HTML/CSS、PHP |
コーディング
コーディングは、すでに完成しているデザインをもとに、HTML/CSS(必要に応じてJavaScript)でWebページとして実装する案件です。デザインを考える必要がないぶん、デザインスキルに自信がない人でも挑戦しやすい分野です。
依頼者からFigmaやPhotoshopのデザインデータを受け取り、指定されたとおりに忠実にコーディングしていくのが基本的な流れです。ピクセル単位での再現性やスマートフォン・タブレットでも崩れないレスポンシブ対応が求められるため、正確さと丁寧さが必要です。動的表現が必要な場合は、JavaScriptの基礎知識も求められます。
単価は、ページ数やデザインの複雑さによって変動し、シンプルな1ページで1〜3万円前後、複数ページや動的要素を含む場合は5万円程度になることもあります。自分もはじめは、1ページのコーディング案件は受領し、Web制作のなかでも受注しやすい分野でした。最初は慣れない部分も多かったですがデザイン通りに正確に再現することを積み重ねるうちに、少しずつ単価の高い案件を任せてもらえるようになりました。
| 難易度 | |
|---|---|
| 作業量 | 〜10時間 |
| 単価 | 10,000円〜200,000円 ※案件範囲が広いため単価も広い |
| 必要なスキル | WordPress操作、HTML/CSS、JavaScript |
バナー・画像制作
バナー・画像制作は、広告バナーやSNS投稿用の画像、サイト内で使用するアイキャッチ画像などを作成する案件です。1点あたりの単価は低めですが、作業時間が短く、デザインツールの基本操作ができればすぐに挑戦できる手軽さが魅力です。
主な作業は、指定されたサイズ・文言・雰囲気に沿って、Photoshopやillustrator、Canvaなどのツールでデザインを作成します。文字の見やすさ、配色のバランス、ブランドイメージとの統一感などが求められますが、参考デザインも豊富にあったりするので、参考にすることで1点あたりの作業時間は数十分〜数時間程度と短く、本業の合間にもこなしやすい案件です。複数枚セットでの依頼も多く、まとめて受注できれば効率よく収入につなげられます。
単価は1点あたり1,000〜5,000千円程度が相場で、複雑なデザインやシリーズ物の場合はそれ以上になることもあります。本格的なデザインスキルを身につける前の入り口としてもおすすめです。
| 難易度 | |
|---|---|
| 作業量 | 1〜2時間 |
| 単価 | 1,000円〜5,000円 |
| 必要なスキル | Photoshop、Canvaなどのデザインツール |
Webサイトの更新
Webサイトの更新は、すでに運用されているサイトの文章差し替えや画像の入れ替え、新着情報の追加など、軽微な作業を継続的に行う案件です。技術的な難易度が低く、Web制作未経験の方でも始めやすい入門的な案件です。
多くの場合、WordPressなどのCMSの管理画面から、指定されたテキストや画像を差し替える、新しい記事を投稿するといった作業が中心になります。コーディングの知識がなくても対応できることが多く、まずは何かWeb制作に関わる仕事をしてみたいという方の最初の一歩として適しています。単発ではなく、月数回の継続依頼として発生することも多いです。
単価は1件あたり1,000〜5,000円程度と低めですが、継続案件になりやすく、安定した副収入源として確保しやすいです。私自身も、副業を始めたばかりの頃はこうした更新作業も案件受注をしていました。実績ゼロの状態から動き出すには、心理的ハードルの低い案件です。
| 難易度 | |
|---|---|
| 作業量 | 2〜3時間 |
| 単価 | 1,000円〜5,000円 |
| 必要なスキル | CMSの知識 |
保守・運用
保守・運用は、公開済みのWebサイトが安定して動き続けるように、サーバーの管理やセキュリティ対策、バックアップ、プラグインのアップデートなどを継続的に行う案件です。
制作系の案件とは異なり、月額契約での継続収入につながりやすい印象です。具体的な業務としては以下です。
- WordPressやプラグインのバージョンアップ対応
- 不具合発生時の調査・修正
- セキュリティ面のチェック
- 定期的なバックアップ作業
目立つ作業ではないものの、サイトが止まってしまうとクライアントの事業に直接影響するため、地味ながら責任の重い仕事でもあります。基本的なサーバー・セキュリティの知識に加え、何かトラブルが起きた際に落ち着いて対応できる力も求められます。
単価は月額契約が中心で、サイト規模に応じて月5千〜3万円程度が相場です。一件あたりの単価は高くありませんが、複数のサイトを掛け持ちすることで、安定した継続収入を積み上げやすいです。ただ、自分は保守・運用の案件受注はしたことありません。
| 難易度 | |
|---|---|
| 作業量 | 2〜3時間 |
| 単価 | 5,000円〜 |
| 必要なスキル | サーバー知識、セキュリティの基礎 |
副業Web制作の案件を獲得する5つの方法

Web制作を副業で始めたいけど、何からはじめればいいのかわからない方もいるでしょう。そこで、これから副業でWeb制作の案件が受注できるまでの流れを紹介します。
- クラウドソーシング
- Web制作会社への営業
- SNSから集客
- 知人・友人からの紹介
- エージェントを利用する
私自身が実際に実践をして副業で案件が取得できるようになった方法ですので、ぜひ参考にしてください。
| 方法 | 初心者 | 案件数 | 営業難易度 | 特徴 |
|---|---|---|---|---|
| クラウドソーシング | ◎ | 多い | ★★☆ | 実績作り向き |
| SNS | ○ | ― | ★★★ | 発信から集客 |
| 直接営業 | ○ | ― | ★★★ | 企業へ直接提案 |
| 紹介 | ◎ | ― | ★☆☆ | 信頼を得やすい |
| エージェント | △ | ― | ★★☆ | 経験者向き |
副業Web制作で稼げるのか、案件を獲得するにはどうすればよいのかなど、初心者が抱えやすい疑問はこちらの記事で解説しています。

クラウドソーシング
クラウドソーシングは、副業Web制作を始める人にとって、最も手軽に案件を探せる方法です。クラウドワークスやランサーズ、ココナラといったサービスに登録するだけで、すぐに案件検索を始められます。
- クラウドワークス
- ランサーズ
- ココナラ
- クラウディア
- Anycrew
これらのサイトには、簡単な修正作業から本格的なサイト制作まで、幅広いレベルの案件が日々掲載されています。実績がない初心者でも、単価の低い案件や短期の修正作業から挑戦しやすく、一つずつ実績を積み重ねることで、徐々に高単価案件へとステップアップしていけます。一方で、応募者が多く競争率が高いこと、システム手数料が発生することには注意が必要です。
案件を獲得するコツは、プロフィールを具体的に作り込み、提案文で相手の課題に寄り添う姿勢を示すことです。自分も最初は、どんな提案文がいいのかわからず試行錯誤しながらだったので、なかなか採用されませんでしたが、過去の制作物やポートフォリオを提案文に添えるようにしてから、徐々に返信をもらえるようになりました。実績が少ない段階こそ、プロフィールと提案文の質で差をつける必要があります。
Web制作会社への営業
Web制作会社への営業は、自ら積極的にアプローチして仕事を獲得する方法です。クラウドソーシングに比べて手間はかかりますが、継続的なパートナーシップにつながりやすく、長期的に見ると安定した収入源になりやすいです。
Web制作会社の外注先として、コーディングやデザインの一部工程を請け負います。制作会社は繁忙期に外部のパートナーを探していることが多く、コーディングだけ対応できる人を求めている場合もあります。問い合わせフォームやメールで、自分のスキルと対応可能な業務、ポートフォリオを添えて連絡してみましょう。
営業というとハードルが高く感じられるかもしれませんが、まずは数社にメールを送ってみることから始められます。断られることも多いため、一定数の打診を前提に、根気強く続けます。私自身、最初のうちは数十件以上送っても返信すらもらえませんでしたが、やっと面談のチャンスをもらっても採用されるまでにとても時間がかかりました。対応可能な業務を明確に伝えるよう工夫したり、自分を採用することのメリットを一覧化するなどアピール材料を集約することで契約してくれる制作会社が見つかりました。
SNSから集客
SNSからの集客は、X(旧Twitter)やInstagramなどを活用し、自分の活動を発信することで案件を受注する方法です。受注までに至るまで時間がかかりますが、チャンスを自分から作っていくには行動をしていく必要があります。
集客方法は、クラウドソーシングと変わらないです。
- 制作実績の紹介
- 副業の進捗状況
- 最近の状況
- Web制作に関する知識の発信
- フォロワーとの関係性を築く
継続的に投稿していきます。SNS経由の依頼は、すでに発信内容を見て興味を持った状態で連絡が来ることが多いため、価格交渉や信頼構築がスムーズに進められます。一方で、フォロワーが増えるまでには時間がかかり、すぐに収入につながる方法ではないのは理解しておきましょう。
発信を続けるコツは、完璧な投稿を目指さず、自分のありのままの活動報告を継続することです。自分も、最初はフォロワーもほとんどいない状態からのスタートでしたが、副業の進捗や実績をこまめに発信し続けることで、少しずつ反応をもらえるようになり、DM経由での相談も増えていきました。
知人・友人から紹介
知人・友人からの紹介は、すでに人となりを知ってもらえている状態からスタートできるため、初めての取引でも安心して任せてもらいやすいというメリットがあります。
身近な知人が個人事業主をしていたり、勤めている会社でWebサイトの刷新を検討していたりする場合、Web制作ができると知ってもらえているだけで、声をかけてもらえる可能性があります。普段から自分の活動をSNSや会話のなかでさりげなく伝えておくと、紹介につながりやすいです。ただし、知人関係だからこそ、金銭面や納期の取り決めを曖昧にせず、通常の案件と同様にきちんと契約条件を明確にしておきましょう。
自分は、案件を紹介してもらえる知人が身近にいなかったため、知人・友人からの紹介の機会はありませんでした。本業の職種と副業の職種が全く違うというのも理由ですが、クラウドソーシングサイトを利用して案件を受注するのがメインでした。
エージェントを利用する
エージェントの利用は、Web制作系のフリーランス向けエージェントに登録し、自分のスキルに合った案件を紹介してもらう方法です。案件を探す手間が省けるうえ、単価交渉や契約周りのサポートを受けられるので、案件に集中できます。
エージェントは、企業からの発注ニーズとフリーランスのスキルをマッチングしてくれるサービスで、登録時にスキルシートや経歴を提出し、面談を通じて希望条件をすり合わせたうえで案件を紹介してもらう流れが一般的です。クラウドソーシングに比べて単価が高めの案件を紹介してもらえることも多く、ある程度の実績が積み上がった中級者以降におすすめの方法です。一方で、エージェントによっては一定の実務経験を登録条件としている場合もあり、完全な初心者にはハードルが高いこともあります。
利用する際は、複数のエージェントに登録して比較検討するのがおすすめです。自分はまだエージェント経由の案件はありませんが、実績が増えてきた段階で、案件獲得の選択肢の一つとして検討しています。
クラウドソーシング以外の方法でWeb制作案件を探したい方は、副業Web制作におすすめのエージェントも参考にしてください。

案件獲得前に作っておきたいポートフォリオ
副業Web制作で案件を獲得するうえで必ず準備しておきたいのが、自分のスキルを証明するポートフォリオです。
実績が少ない初心者ほど、ポートフォリオの有無が案件受注率を大きく左右します。実績がまだない場合でも、オリジナルのサイトを自主制作すれば十分なアピール材料になります。ここでは、ポートフォリオがなぜ必要なのか、何を掲載すべきか、どのように作ればよいかを具体的に解説します。見た目の良さだけでなく、スマホ対応や担当範囲の明記といった実務的な視点も盛り込みながら、案件獲得につながるポートフォリオの作り方を紹介します。
ポートフォリオが必要な理由
ポートフォリオが必要なのは、クライアントがこの人に任せて大丈夫かを判断する材料が、実績以外に判断がつかないからです。文章だけで対応できますと伝えても、実際のレベルがどうなのかは伝わりにくいです。
副業・フリーランスの世界では、経歴書や資格よりも実際に何を作れるのかが重視される傾向があると自分は思います。ポートフォリオがあれば、コーディングの正確さやデザインセンス、レスポンシブ対応のレベルなどを、クライアントが一目で確認できます。逆にポートフォリオがない状態では、どれだけスキルを文章でアピールしても、信頼性の面で他の応募者には負けます。
案件獲得の競争率が高いクラウドソーシングでは、提案文とあわせてポートフォリオのリンクを添えるだけで、採用率が大きく変わります。自分も、ポートフォリオを用意する前後では、クライアントからの返信率が明らかに違ったと感じます。実績がまだ少ない段階こそ、言葉より先に見てもらうことを意識して、営業活動をしていきましょう。
実績がない場合は架空サイトを作る
実績がないからポートフォリオが作れないと悩むのではなく、架空のサイトを自主制作すればポートフォリオとして十分に活用できます。
クライアントが見ているのは、実在の案件がどうだったかというよりもどの程度の制作ができるかを確認しています。架空サイトを作るときは、実在しそうなテーマを設定すると、よりリアルな制作物ができます。たとえば、カフェや美容室、事務所、個人ブログなど、実際に需要のありそうな業種を想定し、ヒアリングから公開までの流れを一人で疑似体験してみるのがおすすめです。構成、コーディング、レスポンシブ対応まで一通り手がけることで、実務さながらのスキルを示せます。
架空サイトとはいえ、手を抜かずに本番同様のクオリティで仕上げます。自分もポートフォリオのための架空サイトとしてカフェやキャンプなどのサイトを制作しました、実在する店舗の情報を参考にしながら構成から検討したことで、反応は良かったと感じます。架空のサイトであっても、本気で取り組んだ制作物は、実績の代わりとして十分に通用しますよ。
未経験からWeb制作を学び、ポートフォリオ制作や案件獲得に進むまでの具体的な手順はこちらの記事で紹介しています。

ポートフォリオに掲載する項目
ポートフォリオは、ただ制作物を並べるだけでは良い効果が得られません。クライアントが知りたい情報を整理して掲載することで、初めて判断材料として扱ってくれます。
最低限掲載しておきたい項目は、以下のとおりです。
- プロフィール(経歴・得意分野)
- 制作実績(サイトのスクリーンショットやリンク)
- 各実績での担当範囲
- 使用できる技術やツール
- 問い合わせ先
とくにクライアントはどんな人物か、何が得意か」を重視するため、プロフィール部分は丁寧に書き込んでおくとよいでしょう。また、制作実績は数より質を意識し、自信を持って見せられるものを厳選して掲載していきます。掲載項目が整理されていないポートフォリオは、見る側にとって分かりにくく、せっかくの制作物も正当に評価されません。
制作実績で「何を担当したか」を明記する
制作実績を掲載するときに、見落とされがちですが自分がその制作のどこを担当したのかははっきりしておきましょう。制作物を見せるだけでは、デザインから担当したのか、コーディングのみだったのかが伝わらず、スキルを誤解されてしまう可能性があります。
たとえば、デザインは他の人が担当し、自分はコーディングのみを行った場合、それを明記しないとデザインもできる人と誤って判断され、あとでミスマッチにつながります。逆に、ヒアリングから公開まで一人で手がけた案件であれば、その旨をしっかりアピールすることで、対応できる業務の幅広さを伝えられます。
この工夫は、クライアントとの認識のズレを防ぐだけでなく、自分の得意分野を的確に伝える効果もあります。自分も以前は、担当範囲を明記していなかったために、デザインの相談を受けて対応に困った経験があります。それ以降は、実績ごとに担当工程を一覧化するようにしたことで、問い合わせ内容と自分の対応範囲のミスマッチが大幅に減りました。
スマホ表示も確認する
ポートフォリオに掲載する制作実績は、パソコンでの見た目だけでなく、必ずスマートフォン対応した制作サイトを掲載しましょう。現在のWeb制作案件では、レスポンシブ対応がほぼ必須条件となっているため、スマホ表示が崩れていると、それだけでスキル不足と判断されるリスクがあるからです。
ポートフォリオ用だけではなく常日頃から以下を意識してみてください。
- 文字サイズが適切か
- 画像が画面からはみ出していないか
- ボタンがタップしやすい大きさになっているか
- 余白のバランスが崩れていないか
確認することはこれだけではないですが、実機やブラウザの検証ツールで確認します。パソコンでは綺麗に見えていても、スマホで表示すると崩れていることは意外と多く、確認を怠ると制作実績全体の印象を下げてしまいます。クライアントの多くは、ポートフォリオを見る際にスマホでアクセスします。そのため、ポートフォリオサイト自体のレスポンシブ対応はもちろん、掲載している制作実績のスクリーンショットについても、スマホ表示のキャプチャを併記しておきましょう。自分は必ずパソコン・タブレット・スマホの3パターンで表示確認をしてから公開するようにしています。
ポートフォリオ自体をWordPressで作る
ポートフォリオサイト自体をWordPressで制作することは、技術力のアピールとにつながるのでおすすめの方法です。単に実績を並べるだけでなく、このポートフォリオ自体が制作実績の一つとして役立つからです。
WordPress案件への対応力を示す意味でも説得力があり、WordPressでの構築・カスタマイズができることの証明にもなります。テーマは無料のものでも十分で、まずは公開してみて、少しずつ改善していけば問題ありません。
HTML/CSSのみで静的サイトとして作る方法もありますが、WordPressで作成しておけば、ブログ機能を使って制作過程や学習記録を発信することもでき、SNSからの集客や信頼構築にもつなげやすくなります。自分もWordPressでブログ運用をしておりポートフォリオとして役立てています。実績の追加だけでなく、副業に関する気づきを記事として発信することで、問い合わせのきっかけになったこともあります。制作スキルの証明と発信の場を兼ねられる点で、WordPressでの制作はぜひやっておきたいことです。
副業Web制作の営業で準備するもの
案件を獲得するためには、ポートフォリオと同じくらい営業の準備はしっかりやっておきたいです。
適当に提案文を送ったり、契約料金が曖昧なまま打診したりすると、契約がうまくいかずせっかくつかんだ機会を逃してしまいます。事前に営業文・料金表・対応範囲・納期・稼働時間・返信対応の目安を整えておくことで、クライアント側も計画が組みやすくなり、さらには安心感を与えスムーズな受注につなげられます。
- 営業文・提案文を用意する
- 料金表作る
- 対応できる業務範囲を決める
- 納期の目安を決める
- 週の稼働時間を決める
- 返信できる時間帯を決める
ここでは、副業Web制作で営業活動を始める前に準備しておきたい上記6つの項目を解説します。
営業文・提案文を用意する
営業文・提案文は、クライアントとの最初の接点になります。どれだけスキルがあっても、提案文が相手に響かなければ、どの人にお願いするか選定してもらえる土俵にすら立てません。
クライアントの目にとまる提案文の基本構成は、以下を意識します。
- 簡単な自己紹介
- 相手の募集内容への理解を示す一言
- 自分が対応できる具体的な内容
- 過去の実績やポートフォリオへの提示
- 丁寧な結びの言葉
とくに大事にしたいことは、テンプレートをそのまま使い回すのではなく、募集内容を理解できているか示すことです。とにかく多くの案件に応募するよりも、一件ごとに丁寧にカスタマイズするほうが、結果的に採用率は高まります。
あらかじめ基本となる提案文のテンプレートを作成しておき、案件ごとに文言を調整できるようにしておくと、営業活動の効率も上がります。自分も最初は定型文をそのまま使い回していましたが、返信率がなかなか伸びませんでした。募集文の内容に関わる一文を加えるよう意識してから、返信をもらえる確率が上がった感じがしました。
料金表を作る
料金表をあらかじめ用意しておくことは、クライアントとのやり取りをスムーズにし、価格交渉の手間を減らすうえで効果的です。案件ごとに毎回見積もりを一から考えていると、時間がかかるだけでなく、価格にばらつきが出てしまい、自分自身が損をしてしまいます。
料金表には、コーディング1ページあたりの単価、LP制作の基本料金、WordPress構築の目安、修正作業の時間単価など、よくある依頼内容を項目ごとに整理しておくとよいでしょう。
| 項目 | 料金目安の例 |
|---|---|
| コーディング(1ページ) | 1万円〜 |
| LP制作(コーディングのみ) | 3万円〜 |
| WordPress構築 | 5万円〜 |
| 修正作業 | 3千円〜 |
もちろん、案件の難易度や内容によって調整は必要ですが、ベースとなる料金の目安があると、見積もり検討が楽になります。料金表があると、クライアント側も予算感を把握したうえで問い合わせできるため、ミスマッチの少ない相談ができます。料金表を整備する前は見積もり金額にばらつきが生じて、気づいた時は相場より安く提示していたことに気づきました。相場を考慮した基本料金を設定してからは、自分自身が損することも減りましたし、提示も早くできるようになりました。
対応できる業務範囲を決める
対応できる業務範囲は応募するときに提示しておきたい情報です。できることを提示しておかないとクライアントとの認識のズレがおき、契約後にトラブルになる可能性があるからです。範囲が曖昧なまま案件を受けてしまうと、ここまでやってもらえると思っていたという行き違いが発生しやすくなります。
一文で示すなら以下を加えておくと良いでしょう。
- デザインは対応不可、コーディングのみ対応可能
- WordPressの基本構築は対応できるが、独自プラグイン開発は対応不可
できることとできないことを明確に線引きしておきます。できない業務にも対応しようとすると、クオリティが下がったり、納期に間に合わないリスクが高まるため、自分の得意分野・できる範囲に絞ることが結果的に信頼につながります。
対応範囲は、スキルの向上に合わせて徐々に広げていけば問題ありません。案件を受注するときは最初から無理に手を広げる必要はなく、確実に対応できる範囲から始めましょう。自分も最初の頃は何でも対応すると伝えたことがあり、対応しきれない依頼を受けて苦労した経験があります。それ以降は、対応可能な業務のみ受注をしてプロフィールに記載するようにしました。
納期の目安を決める
納期の目安をあらかじめ決めておくことは、クライアントに安心感を与えると同時に、自分自身のスケジュール管理が楽になりますよ。どれくらいで納品できるか分からない状態では、クライアントも発注のしづらくなります。
業務内容ごとに、おおよその納期目安を決めます。
- 簡単な修正作業なら1〜3営業日
- LPコーディングなら1週間程度
- WordPress構築なら2〜3週間程度
ある程度予備日を設けながらスケジュールを設定していきます。副業である以上、本業の繁忙期などで対応が難しくなる時期もあるため、余裕を持った納期設定を心がけましょう。
納期を守ることは、副業にとって信頼を積み重ねるうえで基本的なことです。納期だけは絶対に守るという意識を徹底するだけでも継続案件につながるケースが多くあります。多少厳しい依頼であっても、無理な場合は正直に相談していき、連絡なしで納期を過ぎることはしないようにしましょう。
週の稼働時間を決める
週にどれくらいの時間を副業Web制作に使えるかを事前に決めておくことは、案件の受注量を調整し安く、本業や私生活とのバランスを保つうえで大事です。
稼働時間の見積もりが明確になっていないまま案件を詰め込んでしまうと、納期遅れにつながるリスクが高まります。まずは、平日・休日それぞれで無理なく確保できる時間を洗い出し、週の合計稼働時間を把握しておきましょう。たとえば週10時間と決めておけば、その時間内で対応できる案件数や規模を判断することができ、無理な受注を避けられます。稼働時間は、クライアントへの提案時に週10時間程度の対応が可能ですと伝えることで、相手も依頼する案件料を調整しやすくなります。
稼働時間は固定するというより、本業の忙しさ度合いやプライベートの予定に応じて適時、見直していきましょう。自分も週の稼働時間をあらかじめ決めてから案件を受けており、詰め込みすぎず余裕を持った作業ができています。継続して副業を続けるためにも、自分の限界を把握したうえで無理のない範囲で稼働時間を設定することをおすすめします。
返信できる時間帯を決める
返信できる時間帯をあらかじめ決めておきましょう。クライアントに伝えておかないと、連絡してもなかなか返信がないと不信感を与えてしまう原因になります。本業中は返信が難しいことも多く、あらかじめ対応可能な時間帯を伝えておくことで、相手に余計な不安を与えずに済みます。
具体的には、平日は21時以降に返信します、日中は返信が遅れる場合がありますといった形で、プロフィールや初回のやり取りのなかで記載しておくとよいでしょう。これにより、クライアント側も返信までの時間を見越して連絡できるようになり、連絡が遅いといった不要な不満を防ぐことができます。繰り返しになりますが即レスできないこと自体は問題ではなく、それを事前に伝えていないことが信頼を損なう原因になりやすい点に注意が必要です。
決めた時間帯はできる限り守り、万が一対応が遅れる場合は、一言でも早めに連絡を入れる誠実さが大切です。自分自身、本業の都合で日中は対応できないことを最初に伝えるようにしてから、クライアントとのやり取りでトラブルは起きていません。限られた時間のなかでも、誠実な対応を心がけることが、副業で信頼を得ることにつながります。
Web制作案件を受注してから納品するまでの流れ
副業Web制作の案件を受注してから納品までの流れを把握しておくと、やらなきゃいけない項目の抜け漏れがなくなり、後戻りなく対応できます。
流れが分からないまま進めると、認識のズレや納期の遅れ、報酬の未払いといった問題につながりかねません。基本の工程は、募集内容の確認から始まり、提案、ヒアリング、見積もり、契約、制作、テスト、納品、請求、そして納品後の保守提案までの10ステップです。
| 案件取り組みステップ | 主な内容 |
|---|---|
| 募集内容の確認 | 作業範囲・納期・予算の把握 |
| 提案・応募 | 提案文とポートフォリオの送付 |
| ヒアリング | 目的・要望・参考サイトの確認 |
| 見積もり | 工数ベースで金額・納期を提示 |
| 契約・受注 | 条件の書面化と発注の確定 |
| 制作 | デザイン・コーディング・実装 |
| テスト・修正 | 表示確認と修正対応 |
| 納品 | データ・アカウント情報の引き渡し |
| 請求 | 請求書発行・入金確認 |
| 保守・更新の提案 | 継続的な関係づくり |
ここでは、各ステップで押さえておきたいポイントを、実体験を交えながら初心者の方にもわかりやすく解説します。
案件の募集内容を確認する
まず案件の募集内容を隅々まで読みましょう。ここを軽く見ると、応募後に理解している内容と違ったというのが起こります。
必ず確認したいのは、作業範囲、納期、予算、必要なスキル、そして使用するツールや環境です。応募内容を見たときに作業範囲は要注意で、Web制作と書かれていても、デザインを含む場合もあり、できる範囲や工数が大きく変わります。納期が極端に短い案件や予算に対して作業量が多すぎる案件は、無理に応募はしないようにしましょう。
駆け出しのころはとにかく実績がほしさに募集内容を流し読みして応募したくなりますが、あとから作業範囲の広さに気づいて苦労します。なので応募前に自分の対応範囲に収まるか、本業と両立できる納期かを必ずチェックしましょう。不明点は応募前の質問で解消できることもあるため、迷ったら遠慮なく確認しましょう。
提案・応募する
募集内容を確認して対応できると判断したら、提案文を送って応募します。提案文は、クライアントが最初に目にするあなたの営業資料です。丁寧に作り込むほど採用率は高まります。
基本は、簡単な自己紹介、募集内容への理解、対応できる具体的な内容、ポートフォリオのリンク、稼働状況の順にまとめる構成です。別のところでも言いましたが、テンプレートの使い回しを必ず避け、募集文の内容に触れる一文を必ず入れます。「御社の〇〇という課題に対して、△△の形でお役に立てます」といった一言があるだけで、クライアント側の印象は大きく変わります。
数を打つよりも質を重視したほうが、結果的に効率よく案件を獲得できます。また、副業であることや返信可能な時間帯を最初に伝えておくと、さらに良いです。
クライアントとヒアリングする
応募が通り、クライアントとやり取りが始まったら、次に行うのがヒアリングです。ここでしっかりすり合わせができていると、成果物の質が大きく変わります。言われたものを作るだけでなく、なぜそれを制作するのか、どうすればよいものができるのかを考えていきます。
ヒアリングで確認すべき項目は以下です。
- サイトの目的
- ターゲット
- 希望するデザインの雰囲気
- 参考にしているサイト
- 必要なページ数や機能
- 公開希望日
- 素材(文章・画像)の準備状況
とくに素材の準備状況はしっかり確認します。確認を疎かにすると、制作が始まってから文章や画像がまだ用意できていないと発覚し、作業が進まず納期が遅れる原因になります。
チャットだけでは伝わりずらい部分もあるので、可能であればオンライン通話で要望を直接聞き、内容を文章にまとめて確認してもらうようにしましょう。認識を文字で残しておくこととトラブル防止にもつながります。
見積もりを提出する
ヒアリングで要件が固まったら、見積もりを提出します。見積もりは、金額を伝えるだけでなく、どこまでの作業を、いくらで、いつまでに行うかを明確にします。
見積もりでは、契約金額、納期、修正対応の回数や範囲が決まっている状態でします。修正回数の上限を決めておかないと、無制限に修正を求められ、作業が終わらなくなるリスクがあるので要注意です。軽微な修正は2回まで、それ以上は追加料金といった形で、事前にクライアントと話し合って決めておくと安心です。
自分も初期の頃は金額を低く見積もりすぎて、作業時間に対して報酬が見合わず苦しんだ経験があります。さらに、修正回数を全く決めずに何度も修正をしたこともあります。安さで勝負するよりも、自分を守るための金額を示すほうが、お互いに苦労をせずに済みますよ。
契約・発注を確認する
見積もりに合意したら、契約・発注の手続きに進みます。ここで改めて契約内容を確認して認識のずれがないかを確かめます。曖昧のまま作業を始めてしまうのは、副業を行う上でもっとも避けたいことです。
クラウドソーシングを利用している場合は、プラットフォーム上で契約と仮払いが行われるため、比較的安心して進められます。直接取引の場合は、業務委託契約書や発注書を取り交わし、作業範囲、金額、納期、支払い時期、著作権の扱い、修正対応の条件などを書面に残しておきましょう。書面がなくても、メールやチャットで合意内容を残しておくだけで、トラブル時の証拠になります。
また、制作用の素材やアカウント情報を受け取る際は、取り扱いの注意点(機密保持)も確認しておくと安心です。
制作する
契約が完了したら、いよいよ制作に入ります。副業の場合、本業との両立が前提になるため、スケジュール管理がとにかく大事です。納期から逆算して、各工程の締め切りを自分で設定しておきましょう。
制作は、ワイヤーフレームやデザインの確認、コーディング、WordPressへの実装といった流れで進めるのが一般的です。進めるときは、完成してから見せるのではなく、途中段階でもクライアントに確認してもらうことをおすすめします。細かく確認をすることで、大きな手戻りを防ぎます。
自分も過去に完成まで確認をせずに進めてしまい、最終段階で方向性の違いが発覚して大きな修正が発生した経験があります。修正に多くの時間を費やし、納期に間に合いませんでした。また、制作したデータはこまめにバックアップをとり、予期せぬトラブルに備えておきましょう。進捗の共有は手間に感じますが、結果的に自分の負担を減らしてくれるので、面倒だと考えずこまめに共有をしましょう。
テスト・修正する
制作が完了したら、納品前にテストを行います。完璧に作ったつもりでも、細かいところや別の環境で確認すると、思わぬ不具合が見つかることがあります。
- 表示崩れがないか
- リンク切れがないか
- フォームが正しく動作するか
- スマートフォンやタブレットで見やすいか
- 主要なブラウザで正常に表示されるか
レスポンシブ対応とブラウザ間の表示差は見落としやすいため、実機やブラウザの検証ツールで必ず確認しましょう。誤字脱字のチェックも忘れずに行います。
テスト後は、クライアントに確認してもらい、修正依頼があれば対応します。見積もりで決めた修正の範囲内かどうかを意識しつつ、誠実に対応する姿勢が大切です。確認不足でスマホ表示の崩れを納品後に指摘されたことがあり、それ以降はチェックリストを作って毎回同じ手順で確認するようにしています。仕組み化することで、ミスは確実に減らせます。
納品する
修正が完了し、クライアントの承認が得られたら、いよいよ納品です。納品は、制作物を渡すだけでなく、問題なく使える状態で引き渡すところまでが仕事です。
納品方法は案件によって異なり、HTMLやCSSなどのファイル一式をデータで渡す場合もあれば、サーバーにアップロードして公開まで行う場合、WordPressの管理画面情報を引き渡す場合もあります。どの形式で納品するのかは、事前に確認しておきましょう。
納品時には、ご確認のうえ、問題がなければ検収をお願いしますと一言添え、検収のステップに移れるようにしましょう。検収の期限をあらかじめ伝えておくことで、検収漏れを防げます。
請求する
検収が完了したら、請求の手続きに進みます。クラウドソーシングであれば、プラットフォーム上で検収完了後に報酬が確定し、手数料を引いた金額が入金される流れです。直接取引の場合は、請求書を発行して支払いを依頼します。
請求書には、請求日、請求先、作業内容、金額、支払期限、振込先などを正確に記載します。見積もりと金額が異なる場合は、追加作業の内訳を記載しておくと、クライアントも理解しやすくなります。請求書は、クライアント指定のフォーマットをもらうか、請求書作成サービスを活用すると良いでしょう。
入金確認も忘れずに行い、期限を過ぎても入金がない場合は、確認の連絡を入れましょう。また、副業の収入は確定申告が必要になる場合があるため、請求書や入金の記録は、きちんと保管しておくことをおすすめします。
納品後の保守・更新を提案する
納品して終わりにせず、保守・更新の提案をすることは、継続的な収入と長期的な信頼関係につながる大切なステップです。Webサイトは公開してからが本番であり、運用の中で修正や更新、セキュリティ対策が必要になることがあります。
- WordPressやプラグインの定期アップデート
- バックアップの管理
- 軽微な修正・更新作業の代行
- アクセス状況の簡単な報告
納品時や検収後のタイミングで、公開後の運用についてもサポートできますと一言添えるだけでも、クライアントが興味を持つきっかけになります。月額制のプランを用意しておくと、収入が安定しやすくなります。
ただし、押し売りにならないよう、相手の状況に合わせて提案します。私自身、制作したクライアントから、そのまま保守や更新作業を任せてもらえた経験があり、一度築いた信頼が継続案件につながる効果を実感しています。
副業Web制作で初心者が注意したいこと
副業Web制作は、パソコン一台で始められる手軽さはありますが、安易にできると勘違いして思わぬトラブルに巻き込まれやすい仕事でもあります。スキルを超えた案件を受けて納期に間に合わなかったり、作業範囲があいまいなまま進めて無償の追加作業に追われたりと、失敗の多くは「事前の確認不足」から起こります。さらに、本業との両立や著作権の扱いなど、副業ならではの注意点もあります。
- 自分のスキル以上の案件を受けない
- 作業範囲を契約前に明確にする
- 修正回数を確認する
- 納期に余裕を持たせる
- 著作権・画像素材の扱いに注意する
- 無償作業を安易に引き受けない
- 本業とのスケジュールを調整する
ここでは、初心者が特につまずきやすい7つのポイントを、私自身の失敗談も交えながら解説します。
自分のスキル以上の案件を受けない
実績がほしい、単価が高くて魅力的という理由で、今の自分のスキルを超えた案件を受けてしまうことです。受注した時点では調べながらやればなんとかなると思えても、実際に作業を始めると、想定外のことが多く納品に間に合わず成果物を提出できないなんてこともあります。
| 判断の目安 | 対応 |
|---|---|
| 自分のスキルでほぼ対応できる(8割以上) | 応募してOK |
| 一部学びながらやれば対応できる | 対応する案件も少なく納期に余裕があれば挑戦可 |
| 半分以上が未経験の内容 | 応募は見送る。スキルが身に付いたら受注する |
スキル不足のまま進めると、作業が遅れるだけでなく、目標品質に到達することができずクライアントの信頼を失うリスクもあります。一括制作の案件や独自機能の実装が必要な案件は、経験が浅いうちは慎重に判断すべきです。応募前に募集内容の8割は今の自分で対応できるかを目安にし、残りの2割が学べば届く範囲かどうかを確認してから応募するか判断をしましょう。
単価の高さに惹かれてWordPressのカスタマイズ案件を受け、知識が足りずに納期ぎりぎりまで苦しんだ経験があります。結局、クライアントに事情を正直に伝えて納期を調整してもらいました。背伸びしすぎず、一段ずつ難易度を上げていくほうが、良いと感じました。
作業範囲を契約前に明確にする
作業範囲があいまいなまま契約してしまうと、ここまでやってもらえると思っていたというクライアントとの認識のズレが生まれます。副業Web制作で起きる揉め事の多くは、実はこの作業範囲の問題が多いです。
たとえばサイト制作という依頼でも、デザインを含むのか、ロゴや画像の用意は誰がするのか、文章作成やSEO設定、公開後の更新までを含むのかで、作業量は大きく変わります。契約前に、できること・できないことを具体的にしておき、クライアントに伝えておく、もしくはメモを共有しておくことが大切です。含まれるものだけでなく、含まれないものも書いておくとより安心です。
以前にチームで制作を行なっていた時に、チーム内のひとりがコーディングのみだと思い込んで作業をしていたところ、クライアントはバナー画像の作成まで期待していたという認識違いがあることがわかりました。結果的に追加対応することになりましたが、そんなの聞いていないと不満を言っていました。確認不足でもありますし、誰が悪いとかではないですが、認識のずれが発覚するだけでも雰囲気は悪くなりますよね。それ以降は必ず作業範囲を文章で確認してから作業開始するようにしています。
修正回数を確認する
見積もりや契約の段階で、修正対応の回数や範囲を確認しておくことは、副業Web制作では欠かせない準備です。決めておかないと、もう少しここを直してほしいという依頼がずっと続き、いつまで経っても作業が終わりません。
ここで注意したいのが、軽微な修正と大幅な変更の線引きです。文言の差し替えや色の微調整は軽微な修正に含めても、レイアウトの大幅な変更やページの追加は別の作業として扱うなど、あらかじめルールを決めておきましょう。一般的には修正は2回まで無料、それ以降は追加料金といった形で取り決めるケースが多く、見積書や契約書に明記しておくとトラブルを防げます。
| 修正ルールの例 | 内容 |
|---|---|
| 無料の修正回数 | 2回まで |
| 軽微な修正対応の範囲 | 文言・色・画像の差し替え |
| 追加料金が発生するもの | レイアウト変更、ページ追加 |
| 修正の依頼期限 | 納品後5日以内 |
自分も過去に修正回数を決めずに受けた案件で、納品前の確認で何度も細かな修正依頼が続き、気づけば想定の倍近い作業時間がかかったことがあります。報酬は変わらないため、時給に換算すると辛い案件でした。それ以来、修正の範囲と回数を事前に伝え、追加の場合は別途見積もりをする運用にしたことで、お互いに納得して進められるようになりました。
納期に余裕を持たせる
納期の設定は、副業の場合、本業がある分だけ余裕を持った設定をします。作業そのものにかかる時間だけを見て納期を決めてしまうと、本業が忙しく副業時間が確保できなかったときに、あっという間に破綻してしまいます。
目安としては、自分で見積もった作業時間に、予備として2〜3割ほどの余裕を上乗せして納期を設定するのがおすすめです。さらに、クライアントの確認待ちや修正対応の時間も考慮に入れておきましょう。作業が予定より早く終わった場合は、前倒しで納品すれば喜ばれますが、遅れると継続案件の入手が厳しくなります。納期を守ることは、副業でも基本です。
本業が忙しい時期と案件の納期が重なり、それにプラスして副業もしなければいけなかった時があり深夜まで作業したことがあります。納期にはなんとか間に合いましたが、そのときは正直しんどかったです。それ以降は、本業の忙しい時期には副業の量を減らすなど調整するようになり、余裕を持った納期設定を徹底しています。
著作権・画像素材の扱いに注意する
Web制作では、画像やフォント、イラスト、文章など、さまざまな素材を扱うため、著作権の配慮が必要です。知らずに権利を侵害してしまうと、クライアントに迷惑をかけるだけでなく、損害賠償などの大きな問題に発展するおそれがあります。
注意したいのが、画像素材の利用規約です。フリー素材と書かれていても、商用利用が禁止されていたり、クレジット表記が必要だったり、加工が制限されていいる場合です。また、Googleの画像検索で見つけた画像を無断で使うのは、もちろんNGです。素材サイトを利用するときは、必ず利用規約を確認し、商用利用が可能かどうかをチェックしましょう。フォントについても、商用利用の可否やライセンスの条件が決まっているため、同様の注意が必要です。
もう一つやってしまいがちなのが、制作物そのものの著作権の扱いです。納品後に権利をクライアントへ譲渡するのか、自分が保持したまま利用を許諾するのかは契約時に確認しておきましょう。保持したまま利用をするケースは稀です。ポートフォリオとして使用したいところですが、利用するのであれば、事前にクライアントに相談し許可を得るようにしましょう。
無償作業を安易に引き受けない
実績がほしい人ほど、無料でやりますよ、テスト的に作ってほしいといった依頼を、つい引き受けてしまいがちです。しかし、報酬が発生しない作業を安易に受けると、自分の時間と労力を消耗するだけでなく、全く良いことがありません。
たまにあるのですが、正式発注の前に、見本を作ってほしいとかまずはお試しで作ってほしいといった依頼です。こうした依頼は、成果物だけを受け取り発注に至らないこともあるので、必ず報酬がある依頼のみを受けるようにしましょう。ポートフォリオ用の実績づくりが目的であれば、自分で架空のサイトを作るほうが、リスクなく自由に表現できます。どうしても無償で引き受ける場合は、目的や範囲、公開してよいかどうかを明確にしておきます。
無料のテストを受けたことがありますが、そのあとの発注につながらず、時間だけを費やしてしまったことがあります。この経験から、無償での作業は原則として受けず、実績づくりは自主制作で行うと決めました。自分のスキルには正当な対価を求める姿勢を持った方が良いですよ。
本業とのスケジュールを調整する
副業Web制作を長く続けるうえで、本業とのスケジュール調整は難しいですし、調整を怠ってはいけない重要なテーマです。副業が本業に影響を与えてしまっては本末転倒ですし、無理をして体調を崩せば、どちらも続けられなくなってしまいます。
まず確認しておきたいのが、勤務先の就業規則です。会社によっては副業が禁止、または許可制・届出制になっている場合があるため、事前に必ず確認しておきましょう。そのうえで、平日の夜や休日など、無理なく確保できる時間を洗い出し、週の稼働時間をあらかじめ決めておきます。本業の繁忙期やプライベートの予定もカレンダーに書き出しておくと、そのときの受注できる案件の量が把握できるようになります。
自分も副業を始めた当初は、副業に力を入れすぎて案件を詰め込み、睡眠時間を削って作業した時期がありました。結果として本業が疎かになり、これではいけないなと感じた時期がありました。なので同じことが起こらないように週の稼働時間の上限を決めて、それを超える案件は断るようにしています。
始める前は事前準備をしっかりして信頼されるWeb制作者になろう
自分の性格や生活リズム、費用などに合った最適な方法を選ぶことが重要です。
副業Web制作者として案件を獲得していくには確かなスキルと実績が必要です。Web業界は日々進化しているため、常に時代に合った制作ができるように学び続ける姿勢も重要視されています。
自分に合った学習方法で、着実にスキルアップを目指しましょう。
Web制作を体系的に学べるスクールを比較したい方は、おすすめのプログラミングスクール10選もご覧ください。


\初心者におすすめのプログラミングスクール3選!/
![]() テックアカデミー | ![]() ZeroPlus Gate | ![]() コードキャンプ | |
|---|---|---|---|
| 特徴 | 5万円分の副業案件保証 週2回のマンツーマンメンタリング 24時間いつでも相談OKなチャットサポート 転職サポート | 学習サポート 面談プロの講師に何回でも質問可 | 完全1対1のマンツーマン指導 転職支援オプション AIによるチャットサポート オリジナルカリキュラム キャリア相談 |
| 学べる言語 | HTML/CSS JavaScript・jQuery Ruby etc… | HTML/CSSの基礎 JavaScript Webデザイン WordPressの操作 | HTML/CSSなどのコーディングスキル Web開発スキル CMS開発スキル |
| 補助金 | あり | なし | あり |
| 分割払い | あり | なし | あり |
| 転職サポート | あり | あり | あり |
| 返金保証 | あり | なし | あり |
| 無料体験 | あり | あり | あり |
| 受講期間 | 8週間〜 | 30日 | 6ヶ月〜 |
| 料金 | はじめての副業コース:175,600円(税込)〜 Web制作実践セット:362,900円(税込)〜 ※補助金適用後 | 無料 ※毎日先着制で無料 | 198,000円(税込)〜 ※レッスン回数で変動 ※補助金適用後 |
| TechAcademy [テックアカデミー] | ZeroPlus Gate | (自由テキスト) |









コメント