Webデザインを副業にしたいと思っても、「Figmaを覚えれば仕事になるのか」「バナーとWebサイトのどちらから始めるのか」で迷いやすいものです。
Webデザインの仕事では、ツール操作だけでなく、誰に何を伝えるかを整理し、情報の優先順位を決め、PCやスマートフォンで読める形へ落とすところまでが必要です。
この記事では、未経験からWebデザイン副業を始めるときの順番を整理します。
情報の基準日：2026年8月12日
Figmaの機能・プラン・画面は更新されます。最新仕様はFigma公式のFrames、Auto layout、Prototypingを確認してください。
先に結論：最初は「1ページを目的から完成まで作る」
最初からロゴ、広告、アプリUI、EC、コーポレートサイトを全部練習する必要はありません。
まずは例えば、架空サービスのLPを1ページ作ると決めます。
- サービスと想定読者を決める
- ページの目的を決める
- 必要な情報を整理する
- ワイヤーを作る
- FigmaでPCデザインを作る
- SPデザインを作る
- 読みやすさと一貫性を確認する
- 制作意図を言語化する
- ポートフォリオへまとめる
- 小さな案件へ応募する
見た目の華やかさより、なぜこの順番・余白・文字・CTAにしたのかを説明できることが重要です。
Webデザイン副業にはどんな仕事がある？
LPデザイン
商品・サービスの申込や問い合わせなど、1つの目的へ向けた縦長ページを設計します。
初学者は、情報設計からCTAまで1ページで完結するため、練習テーマにしやすいです。
コーポレート・サービスサイトのページデザイン
トップページや下層ページのデザインを作ります。
既存のブランドルールやコンポーネントに合わせる力も必要になります。
バナー・SNS画像
Webサイト本体より範囲が小さく、訴求・文字量・画像の選び方を練習できます。
ただし「バナーが作れる」と「サイト全体の情報設計ができる」は別のスキルです。
UIデザイン
Webサービスやアプリの画面を設計します。状態変化、操作フロー、コンポーネント、アクセシビリティなど、LPとは異なる観点が増えます。
Webデザイン副業を始める流れ【2026年8月時点】
Step 1：受けたい制作物を1つ決める
最初は「LPデザイン」「小規模サイト」「バナー」など範囲を絞ります。
おすすめは、PC/SPのあるサービス紹介LPです。Webデザインとレスポンシブの両方を考えられます。
Step 2：Figmaの基本操作を覚える
最初に必要なのは、すべての機能ではありません。
- Frame
- Text
- Shape
- Image
- Alignment
- Auto layout
- Styles
- Componentsの基本
- Prototypeの基本
Figma公式では、Frameをレイアウトのコンテナとして使い、Auto layoutでpadding・gap・alignmentなどを持った可変レイアウトを作れます。
Step 3：既存サイトを「理由」で観察する
良いと思ったページを見たとき、色やフォント名だけを集めるのではなく、
- 最初に何を伝えているか
- CTAはどこにあるか
- 見出しと本文の強弱
- 余白が広い場所・狭い場所
- 画像が担う役割
- SPで何が省略されるか
を観察します。
他社デザインをそのままコピーして公開作品にするのではなく、構成・判断の参考として扱います。
Step 4：架空LPを3本ほど作る
同じ業種だけでなく、目的の違うLPを作ると判断の幅が出ます。
例：
- SaaS無料体験
- オンライン講座申込
- 店舗予約
毎回、目的・ターゲット・CTAを最初に書きます。
LPを1本作る具体的な工程は「FigmaでLPデザインを作る基本」で整理しています。
Step 5：PCとSPをセットで作る
PCだけ綺麗でも、スマートフォンで読みにくければWebの制作物として不十分です。
SP版では、
- 2カラムを1カラムにする
- 文字サイズ・行長を調整する
- 画像のトリミングを変える
- CTAを押しやすくする
- 表やカードの並びを変える
などを判断します。
PC/SPカンプの作り方は「FigmaでPC/SPデザインカンプを作る実践レシピ」へ進んでください。
Step 6：配色・文字・余白をルール化する
作品内で毎回感覚的に数値を変えるのではなく、
- 主な文字色
- 背景色
- アクセント色
- 見出し階層
- 本文サイズ
- セクション間隔
- カード内余白
を整理します。
具体的な整え方は「配色・文字・余白を整える実践レシピ」で確認できます。
Step 7：ポートフォリオには判断理由を書く
完成画像だけでなく、
- 誰向けか
- 何を達成するページか
- 情報をどう並べたか
- CTAをどう設計したか
- PC/SPで何を変えたか
- 自分の担当範囲
を書きます。
「きれいに作りました」ではなく、仕事で再現できる考え方を見せます。
Step 8：案件条件を確認する
応募・見積もり前に少なくとも、
- ページ数
- PC/SP両方が必要か
- ワイヤー支給の有無
- 文章・画像素材の支給状況
- ロゴ・ブランドガイドの有無
- 修正回数
- Figmaファイル納品か
- コーディングまで含むか
- 実装者との連携方法
- 納期
を確認します。
Step 9：小さな範囲から受ける
最初から大規模サイト一式ではなく、
- LP1ページ
- 下層ページ1枚
- 既存ページのリデザイン
- バナー数点
など、自分で品質を担保できる範囲から始めます。
副業収入や案件獲得は保証されません。単価より、条件が明確で最後まで完了できる案件かを優先します。
デザインだけで終わらず「実装される状態」を意識する
Webデザインは画像作品ではなく、最終的にブラウザで表示・操作されます。
そのため、
- 同じ見た目の部品を揃える
- PC/SPの変化を明確にする
- hoverや開閉など状態を書く
- 画像書き出し方法を整理する
- コンテンツ幅や余白ルールを共有する
と、実装者へ渡しやすくなります。
完成したFigmaをコードへつなぐ工程は「FigmaデザインからHTML・CSSへ実装する方法」で整理しています。
逆にHTML/CSS側から制作全体を知りたい場合は「WebページをHTML・CSS・JavaScriptで1枚作る方法」へ進めます。
独学とスクール、どちらがよい？
まず自分で1本作ると、「ツール操作」「情報設計」「配色・文字」「コーディング」のどこで止まるかが分かります。
独学で進められるなら、そのまま作品数を増やして問題ありません。
一方、課題添削や体系的なカリキュラムが必要なら、学習サービスを比較する選択肢があります。個人仕事ラボではWeb制作・Webデザインのオンラインスクール比較で整理しています。
2026年8月時点で、デジハリ・オンラインスクール公式にはWebデザイナー向けの複数コースが掲載されており、Webデザイン・グラフィックソフト・Web構築などを扱っています。料金・期間・内容は変更されるため、申込前に公式情報を確認してください。
まとめ
Webデザイン副業は、Figmaの操作だけを覚えるのではなく、目的設定 → 情報整理 → PC/SPデザイン → 判断理由の言語化 → 実装への引き渡しまでを1つの制作工程として練習すると進めやすくなります。
次は「FigmaでLPデザインを1ページ作る基本」で、実際の制作工程へ進んでみてください。
次に読む記事
今のテーマから次の行動へ進むときは、以下の記事も参考にしてください。
- FigmaでLPを1ページ作ってみる — 副業準備として、目的設定からPC/SPデザインまで1本完成させたい人向けです。
- Web制作・Webデザインの学習サービスを比較する — 独学で詰まった部分を体系的に学びたい人向けです。