※本記事は2026年10月時点の情報です。制度・サービス内容は変更される場合があるため、最新情報は公式サイトでご確認ください。
「Webデザインの副業で、本業以外の収入とスキルを手に入れたい」。そう考えていても、次のような疑問で止まっていませんか。
- Webデザインの副業には、どんな仕事があるのかよくわからない
- 未経験からどのスキルをどの順番で身につければいいか迷っている
- ポートフォリオの作り方や、最初の案件の取り方がイメージできない
結論から言うと、Webデザインの副業はバナー制作のような小さな仕事から始め、ポートフォリオで実力を見せながらLPやサイト制作へ広げていくのが現実的です。ノーコードツールの普及で、コーディングが得意でなくてもサイト制作に関われる場面も増えています。
この記事でわかること
- Webデザイン副業の仕事の種類(バナー・LP・サイト制作・ノーコード)
- 必要なスキルとツール(公式価格つき)
- 採用されやすいポートフォリオの作り方
- 案件の獲得方法と単価の目安(例示)
- 本業と両立するためのスケジュールの組み方
副業を始める全体の流れは副業の始め方、ほかの職種と比べたい方は会社員におすすめの副業一覧もあわせてご覧ください。
Webデザインの副業とは?仕事の種類
Webデザインの副業は、Webサイトや広告で使われるビジュアルを、目的に合わせて設計・制作する仕事です。「見た目をきれいにする」だけでなく、「クリックされる」「問い合わせにつながる」など成果を意識したデザインが求められます。代表的な仕事は次の4つです。
| 仕事の種類 | 主な内容 | 必要なスキル | 副業での始めやすさ |
|---|---|---|---|
| バナー制作 | 広告・SNS・サイト内に使う画像の制作 | デザインツール、文字組み、配色 | 始めやすい |
| LP制作 | 商品・サービスを紹介する縦長の1ページの設計とデザイン | 構成力、デザイン、場合によりコーディング | 実績が数件できてから |
| Webサイト制作 | 企業・店舗サイトの複数ページの設計・デザイン・構築 | デザイン、HTML/CSS、WordPressなど | 経験を積んでから |
| ノーコードでのサイト制作 | STUDIO・Wix・ペライチなどのツールで構築 | ツールの操作、デザインの基礎 | 比較的始めやすい |
バナー制作
Web広告やSNS投稿、サイトのキャンペーン告知などに使う画像を作る仕事です。1点あたりの作業量が比較的小さく、短期間で完了するため、未経験者が最初の実績を作るのに向いています。同じデザインでサイズ違いを複数作る「リサイズ」案件もよく見られます。
LP(ランディングページ)制作
広告などから訪れたユーザーに、商品の購入や問い合わせといった行動を促すための1ページを作る仕事です。ターゲットの悩みから構成を組み立て、見出し・画像・ボタンの配置で行動につなげる力が求められます。デザインのみを担当し、コーディングは別の担当者が行う分業の案件もあります。
Webサイト制作
会社や店舗のホームページなど、複数ページで構成されるサイトを作る仕事です。デザインに加えて、HTML/CSSによるコーディングや、WordPressでの構築まで依頼されることがあります。工程が多く期間も長くなりやすいため、副業では本業との時間配分に注意が必要です。
ノーコードツールでのサイト制作
STUDIO、Wix、ペライチといったノーコードツールを使えば、プログラミングをせずにサイトを構築できます。小規模事業者や個人のサイト、イベントのLPなどで活用されることがあり、デザインと構築をまとめて引き受けやすいのが特徴です。ツールごとに料金や機能、商用利用の条件が違うため、公式サイトで確認したうえで提案しましょう。
Webデザインの副業に必要なスキル
Webデザインの副業で求められるスキルは、大きく「デザインの基礎」「ツール操作」「実装の知識」「ビジネススキル」に分けられます。最初からすべて完璧である必要はなく、受けたい仕事に合わせて優先順位を付けましょう。
| スキル | 具体的な内容 | 優先度(バナーから始める場合) |
|---|---|---|
| デザインの基礎 | 配色、文字組み(タイポグラフィ)、余白、レイアウトの原則 | 高 |
| ツール操作 | Figma、Photoshop、Illustrator、Canvaなど | 高 |
| マーケティングの視点 | ターゲット設定、訴求の整理、クリックされる構成 | 中〜高 |
| コーディング | HTML/CSS、レスポンシブ対応、WordPressの基礎 | 中(LP・サイト制作で必要) |
| コミュニケーション | ヒアリング、提案、修正依頼の整理、スケジュール管理 | 高 |
デザインツールの比較(公式価格)
| ツール | 価格(2026年10月時点・税込) | 主な用途 |
|---|---|---|
| Figma | 無料のスタータープランあり(有料プランは公式で米ドル表示) | Webサイト・LPのデザインカンプ、共同編集 |
| Adobe Photoshop | 単体プラン 年間契約・月々払い 3,280円/月 | バナー、写真の加工・合成 |
| Adobe Illustrator | 単体プラン 年間契約・月々払い 3,280円/月 | ロゴ、アイコン、図版 |
| Adobe Creative Cloud Pro | 年間契約・月々払い 通常9,080円/月(初回12か月割引あり) | Photoshop・Illustratorなどをまとめて利用 |
| Canva | 無料プランあり/Canvaプロ 年額11,800円(1人) | SNS画像や簡単なバナーをテンプレートから制作 |
最新の価格はFigma公式、Adobe公式、Canva公式でご確認ください。
どのツールを使うかはクライアントによって異なります。WebサイトやLPのデザインではFigmaでのデータ共有を求められることが多く、バナー案件ではPhotoshopのデータ(PSD)での納品を指定されることがあります。最初は無料で使えるFigmaから始め、受けたい案件の募集要項を見て必要なツールを追加すると、無駄な出費を抑えられます。
未経験からの学習ステップ
- デザインの基礎(配色・文字・余白・レイアウト)を書籍や講座で学ぶ
- Figmaなどのツールで、既存のバナーやWebサイトをトレースして手を動かす
- 架空の店舗やサービスを設定し、オリジナルのバナーやLPを作る
- HTML/CSSの基礎を学び、作ったデザインを1ページだけでもコーディングしてみる
- 完成した作品をポートフォリオにまとめ、案件に応募する
トレースは練習としては有効ですが、他人のデザインを自分の作品として公開することは避けましょう。ポートフォリオに載せるのは、必ず自分で企画・制作したオリジナル作品にします。
採用されやすいポートフォリオの作り方
Webデザインの副業では、ポートフォリオが「名刺」であり「営業資料」です。発注者は作品を見て、「この人に任せたら、目的に合ったデザインを作ってくれそうか」を判断します。
ポートフォリオに入れたい作品
- バナー:同じテーマで訴求を変えた2〜3パターン(例:「価格訴求」と「安心感訴求」)
- LP:架空サービスのファーストビュー+全体構成
- Webサイト:トップページと下層ページ1つ程度のデザイン
- ノーコード:実際に公開したサイトのURL(架空サービスでも可)
作品ごとに書くべき説明
| 項目 | 書く内容の例 |
|---|---|
| 目的 | 例:30代女性向けの料理教室の体験申込みを増やす |
| ターゲット | 例:仕事帰りに通える教室を探している会社員 |
| 工夫した点 | 例:「仕事帰りに通える」を一目で伝えるため、時間帯を大きく配置 |
| 使用ツール・担当範囲 | 例:Figmaでデザイン、STUDIOで構築 |
| 制作期間 | 例:約10時間 |
デザインの見た目だけでなく、「なぜこのデザインにしたのか」を言葉で説明できると、発注者は仕事を任せたときのイメージを持ちやすくなります。
ポートフォリオの公開方法
ポートフォリオは、Webサイトとして公開する方法と、PDFや共有リンクで提出する方法があります。Webデザイナーであれば、ノーコードツールやWordPressで自分のポートフォリオサイトを作ること自体が作品になります。一方、まずは素早く応募を始めたい場合は、Figmaの共有リンクやPDFでも十分です。
クライアントワークで作ったデザインを掲載する場合は、必ず事前に許可を取りましょう。守秘義務がある案件は、公開できない前提で考えておくのが安全です。
Webデザインの副業案件を獲得する方法
案件の探し方は、経験の段階によって向き不向きがあります。複数の方法を組み合わせて、安定して仕事が入る状態を目指しましょう。
| 獲得方法 | メリット | 注意点 |
|---|---|---|
| クラウドソーシング(クラウドワークス、ランサーズなど) | 案件数が多く、バナーなどの小さな案件から始めやすい | 手数料がかかる。コンペ形式は採用されないと報酬が発生しない |
| スキルマーケット(ココナラなど) | 「バナー1点○円」のように自分のサービスを出品できる | 出品直後は実績がなく、価格設定や見せ方の工夫が必要 |
| SNS・ポートフォリオサイト経由 | 手数料なしで直接取引できる。継続依頼につながりやすい | 発信を続ける手間がかかる。契約や請求を自分で管理する |
| 知人・前職のつながり | 信頼関係があり、相談から受注につながりやすい | 条件があいまいになりやすいので、書面で取り決める |
| 副業エージェント・マッチングサービス | 企業の案件を紹介してもらえる | 実務経験やスキル要件が設けられていることが多い |
手数料や案件数などの最新情報は各サービスの公式サイトで確認してください。サービスの違いはクラウドソーシング比較やココナラ等のスキル販売の始め方、企業案件を探すなら副業エージェントおすすめで解説しています。
最初の案件を取るためのチェックリスト
- ポートフォリオに、応募する案件と近いジャンルの作品がある
- 応募文に「案件の目的に対して、どう作るか」の提案を書いている
- 納期・修正回数・納品形式(PNG・PSD・Figmaなど)を確認している
- 作業できる曜日と時間帯、連絡が取れる時間帯を伝えている
- プロフィールに顔写真やアイコン、得意分野、使用ツールを記載している
Webデザインの副業の単価目安
単価は作業範囲・ページ数・デザインの難易度・実績によって大きく変わります。以下は副業で見かけることの多い案件を想定したあくまで一例で、実際の金額は案件ごとに異なります。
| 案件の例 | 作業範囲の例 | 単価の例 |
|---|---|---|
| 例:SNS用バナー | 1サイズ・修正2回まで | 数千円程度〜 |
| 例:広告バナー一式 | メイン1点+サイズ違い数点 | 1万円前後〜 |
| 例:LPのデザイン | デザインのみ(コーディングなし) | 数万円〜 |
| 例:ノーコードでの小規模サイト | デザイン+構築・数ページ | 数万円〜十数万円 |
| 例:WordPressサイト制作 | デザイン+コーディング+構築 | 十数万円〜 |
※上記は説明のための例示であり、収入を保証するものではありません。
単価を上げるためのポイント
- デザインだけでなく、構成案・コーディング・ノーコード構築までまとめて提案する
- 飲食・美容・士業など、特定業界に強いデザイナーとして打ち出す
- 「納品して終わり」ではなく、更新や改善提案を継続契約にする
- 見積もりは作業時間から逆算し、修正回数と追加料金の条件を明記する
本業とWebデザインの副業を両立するコツ
Webデザインの副業は、デザインの確認や修正のやり取りが発生するため、作業時間だけでなく「連絡の時間」も考慮した計画が欠かせません。
1週間のスケジュール例
| 曜日 | 時間の使い方の例 |
|---|---|
| 平日(月〜金) | 例:朝30分で連絡の確認と返信、夜1時間で制作 |
| 土曜 | 例:午前中に2〜3時間、まとまった制作作業 |
| 日曜 | 例:休息日。翌週の作業計画だけを立てる |
上記はあくまで一例です。家族との時間や休息も含めて、無理のない作業量から始めましょう。
両立のための工夫
- 受注前に「対応できる時間帯」と「返信までの目安」をクライアントに伝える
- 納期は作業時間の1.5倍程度の余裕をもって設定する
- 同時に進める案件数の上限を決めておく
- テンプレート化(見積書・ヒアリングシート・納品メール)で事務作業を減らす
- 本業の繁忙期は新規の受注を控える
時間管理の具体的な方法は本業と副業の両立・時間術で詳しく解説しています。
就業規則・税金も確認しておく
副業を始める前に、勤務先の就業規則で副業が認められているかを確認しましょう。特に本業と同じ業界の企業からの受注は、競業にあたらないか注意が必要です。詳しくは副業禁止と就業規則をご覧ください。
また、給与を1か所から受け取り年末調整を受けている会社員は、副業の所得(収入から経費を引いた金額)が年間20万円を超えると確定申告が必要で、20万円以下でも住民税の申告は必要です。ツールの利用料などは副業に使った分を経費にできる場合があります。副業の確定申告、副業の経費、副業の住民税もあわせてご確認ください。個別の判断は税務署・税理士にご確認ください。
業務委託で仕事を受ける場合、2024年11月1日に施行されたフリーランス・事業者間取引適正化等法により、発注事業者には取引条件の明示や、給付の受領から60日以内の報酬支払いなどが義務付けられています。条件が書面やメールで示されない案件は、受注前に確認しましょう。
よくある質問
Q. 未経験・独学でもWebデザインの副業はできますか?
A. 可能です。書籍やオンライン教材、ツールの公式チュートリアルなど、独学で学べる情報は多くあります。ただし、独学では自分のデザインの良し悪しを判断しにくいため、作品を第三者に見てもらう機会を作ると上達が早まります。
Q. コーディングができないと副業は難しいですか?
A. バナー制作やLPのデザインのみの案件、ノーコードツールでのサイト制作など、コーディングなしで受けられる仕事もあります。ただし、HTML/CSSの基礎を理解していると、実装しやすいデザインを作れるようになり、受けられる案件の幅も広がります。
Q. パソコンのスペックはどれくらい必要ですか?
A. 使うツールによって異なります。ブラウザで動くFigmaやCanvaは比較的軽く使えますが、Photoshopで大きな画像を扱う場合はメモリに余裕があると快適です。各ツールの公式サイトに掲載されている動作環境を確認しましょう。
Q. Webデザインと動画編集、副業ならどちらがいいですか?
A. どちらも在宅で取り組みやすい職種です。静止画のレイアウトや情報設計が好きならWebデザイン、映像のテンポや演出に興味があるなら動画編集が向いています。動画編集の副業の始め方もあわせて比較してみてください。
Q. 生成AIが普及しても、Webデザインの副業は続けられますか?
A. 画像生成やデザイン補助のAIツールは広がっていますが、クライアントの目的を聞き取り、ターゲットに合わせて構成や訴求を考える工程は、引き続き人が担う部分が大きい領域です。AIを作業の効率化に活用しつつ、提案力を磨くことが大切です。なお、AIで生成した素材を使う場合は、各ツールの利用規約やクライアントの方針を確認しましょう。
まとめ
- Webデザインの副業には、バナー・LP・Webサイト制作・ノーコード制作などの種類がある
- 未経験なら、作業量が小さいバナー制作から始めて実績を積むのが現実的
- ツールは無料で始められるFigmaやCanvaから試し、案件の指定に合わせて追加する
- ポートフォリオには、目的・ターゲット・工夫した点を言葉で添える
- 単価は作業範囲で大きく変わる。構成・構築まで提案できると単価を上げやすい
- 本業との両立には、連絡時間を含めた計画と余裕のある納期設定が欠かせない
次にやること:副業全体の進め方は副業の始め方で確認できます。ほかの職種も検討したい方は会社員におすすめの副業一覧、実務経験を活かして企業案件を探したい方は副業エージェントおすすめをご覧ください。
次に読みたい記事
