UIデザイナーの副業はどう選ぶ？仕事内容・実績と受託範囲

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

UIデザイナーの副業を選ぶときは、募集の月額や「フルリモート」という言葉より先に、何を納める仕事なのか、誰といつ相談するのかを確認しましょう。画面をきれいに作れることに加え、操作中に起こる状態を整理し、実装する人へ判断を渡せることが受託範囲を決める材料になります。

未経験から目指す場合も、最初から大規模なサービス全体を設計する必要はありません。既存のルールがある部分を改善する仕事と、課題の発見から仕様を決める仕事を分け、自分が説明できる成果物に合わせて準備します。本記事では、業務委託でUIデザインを受ける前の仕事内容、実績の示し方、応募と見積もり、契約・稼働条件の確認をまとめます。

ここでいうUIは、Webサービスやアプリなどで利用者が見る情報や操作する部分を指します。職種の呼び方や分担は組織ごとに異なります。本文のケース、時間配分、金額は判断方法を説明するための仮定であり、実在案件の相場や受注実績ではありません。図版も説明用の生成イメージです。ツール・制度の公式情報は2026年10月5日に確認しています。

UIデザイナーの副業は何をする？仕事内容を成果物で分ける

見た目の制作と、操作の設計を分けて読む

募集に「UIデザイン」とあっても、仕事内容は同じではありません。仕様書に沿って画面を整える仕事、利用者の操作の流れを考える仕事、既存サービスの問題を調べて改善案を出す仕事では、必要な判断と責任が変わります。名前だけで経験が合うと決めず、開始時点で何が決まっているかを読み取ります。

例えば「申込画面の改善」という依頼でも、文章と入力項目が確定しているなら配置や状態の設計が中心です。入力項目そのものを減らす提案まで求めるなら、業務上の必要性や社内運用も聞く必要があります。利用者の調査まで含むなら、調査対象者の手配、質問の設計、結果の整理も別の作業として扱います。

UIとUXは重なる部分がありますが、UIの依頼を受けたことで利用者調査や事業戦略まで当然に担当するわけではありません。「課題を決める人」「画面を決める人」「最終承認する人」が誰かを確認します。自分に判断材料がないところは、経験があるように装うより、必要な情報と相談先をはっきりさせた方が仕事を組み立てやすくなります。

副業で比べたい四つの受託パターン

最初の比較軸は、案件名ではなく成果物です。修正後の画面データだけなのか、画面遷移や部品の一覧まで必要なのか、実装後の確認まで含むのかを並べると、違いが見えます。次の表は職種の統一分類ではなく、応募先の条件を整理するための独自の見方です。

※表は横にスクロールできます。

受託パターン	成果物の例	着手前に必要な材料	見落としやすい作業
既存UIの部分改善	対象画面の変更案、変更理由	現行仕様、問題の範囲、既存ルール	周辺画面への影響、例外状態の修正
新しい操作の設計	操作の流れ、画面案、状態一覧	利用場面、必要機能、業務の制約	仕様の相談、文章の確認、戻る経路
共通部品の整理	部品と使い分けのルール	既存データ、利用箇所、管理方針	過去画面への反映、部品の例外整理
開発チームへの継続参加	改善案、設計データ、確認記録	担当者、開発周期、会議の予定	待ち時間、質問対応、優先順位の変更

初心者に向いていると一律に言えるパターンはありません。小さな改善でも、重要な決済や権限に関わるなら難しい判断が必要です。一方、範囲が明確でレビュー担当者がいる仕事は、何を確認してもらえるかが分かります。対象の小ささと、判断を支える体制の両方を見ることが大切です。

「三画面」の中にいくつの状態があるか

仕事量を画面数だけで考えると、見積もりがずれやすくなります。一覧、詳細、申込みの三画面でも、一覧にデータがないとき、読み込みが続くとき、入力が間違っているとき、申込みに失敗したときなど、用意する状態は増えます。同じURLでも、利用者が見る内容が違えば設計上の検討が必要です。

さらに、利用者と管理者で表示が変わる、画面幅によって並びが変わる、会員状態で使える機能が違う、といった条件があります。単純にすべての条件を掛け算して枚数を増やすのではなく、共通ルールで示せる部分と、個別に画面が必要な部分を分けましょう。応募時にこの区別を質問できると、求められる仕事が具体的になります。

デザインと実装の境界を曖昧にしない

デザインデータや操作を試すプロトタイプを作ることと、動くアプリを開発することは別の作業です。画面上でボタンをつないだ見本があっても、データの保存、本人確認、権限の制御などが完成したわけではありません。提案では「画面案まで」「操作の見本まで」「HTML・CSSの実装も含む」など、納品する段階を書きます。

実装担当がいる場合は、どのような形で渡すと使いやすいかを聞きます。画面画像だけでよいのか、編集できるデータ、寸法や余白のルール、画像素材の書き出しも必要なのかを確認してください。逆に、自分がコードを書かないことを理由に実装上の制約を無視してよいわけではありません。可能か不明な動きは、作り込む前に相談します。

Figmaの公式案内では、Dev Modeにデザインの確認や仕様・素材の受け渡しを支える機能が説明されています。確認時点では有料プランとFullまたはDevの席が必要と案内されており、利用機能は契約条件にも左右されます。自分だけが使えればよいと考えず、相手が何を閲覧できるか、誰が利用費を負担するかも決めましょう。参考：Figma公式のDev Mode案内。

副業案件に応募できるかを、UI設計の確認項目で判断する

ツール経験は、何を説明できるかに置き換える

「Figmaを使えます」だけでは、相手は任せられる範囲を判断しにくいものです。既存の部品を使って画面を組める、表示幅が変わったときのルールを示せる、選択状態や入力エラーを整理できる、といった作業単位に置き換えます。できない作業も同じ単位で書けば、誤解を減らせます。

自分の確認には、作った画面の文章を倍にしてみる、項目をゼロ件にする、長い名前を入れる、操作途中で戻る、といった小さな負荷をかける方法があります。整った短い見本文字だけでは見えなかった問題が出ます。ただし、これだけで実案件に対応できると認定されるものではありません。応募先の課題とレビュー条件に照らして判断するための練習です。

基本操作そのものが不安なら、案件を広く探す前にWebデザインの独学と基礎練習へ戻る方が進めやすい場合があります。学習と応募を完全に分ける必要はありませんが、初めて触る機能を「経験あり」と書くことは避けましょう。

正常・空・読み込み・エラーを一組で考える

一覧画面なら、データがある状態だけでなく、初回でまだ何もない状態と、検索条件に合うものがない状態を区別します。前者では登録の案内が必要かもしれません。後者では検索条件を変える手がかりが必要です。同じ「ありません」という表示でも、利用者が次にできることが違います。

読み込み中は、待てばよいのか、別の操作ができるのかを考えます。エラー時には、入力を保ったまま修正できるか、再送してよいか、二重の申込みにつながらないかを確認します。ここでシステム上の挙動を自分だけで約束せず、開発担当に確かめる必要があります。UI案には、確定した条件と未確認事項を分けて残しましょう。

※表は横にスクロールできます。

確認する状態	設計で考える問い	見本に残す情報	相談が必要な点
通常	必要な情報と主な操作を見つけられるか	優先順位、文言、部品	業務上必須の項目
空の状態	次に何をすればよいか分かるか	理由と次の行動	本当に追加・再検索できるか
読み込み中	待っていることと操作可能範囲が分かるか	表示と操作の扱い	時間の目安や中断の可否
入力エラー	どこをどう直すか分かるか	エラーの位置、説明、入力の保持	検証条件と確定タイミング
処理失敗	戻る・再試行・相談の道があるか	復帰の導線と注意	重複処理やデータ保存の挙動

読める・操作できる・意味が分かるを分けて確認する

美しい画面でも、薄い文字が読めない、小さな操作部分を押しにくい、色だけで状態を区別している、といった問題は起こります。自分の見やすさだけを基準にせず、文字と背景、操作部分の間隔、見出しやラベルの意味を別々に確認しましょう。すべてを一つの「使いやすい」という感想にまとめないことが重要です。

WCAG 2.2の文字コントラスト基準では、通常の文字は原則4.5対1以上、大きな文字は3対1以上が示されています。大きな文字の定義や装飾的な文字などの例外もあります。数値を測った対象と条件を記録し、画像の印象だけで達成と判断しないようにしてください。参考：W3Cの文字コントラスト解説。

操作対象の最小サイズに関するWCAG 2.2の基準では、原則24×24 CSSピクセル以上が示され、間隔の確保や本文中のリンクなどには例外があります。「すべてのボタンを24にすればよい」という意味ではありません。実際の用途や利用者、端末、プロジェクトの基準を踏まえて設計します。参考：W3Cの操作対象サイズの解説。

これらは確認項目の一部です。キーボード操作、読み上げられる名前、フォーカスの移動などは実装を含めて確かめる必要があります。デザインファイル上で色と寸法を確認しただけで、サービス全体が基準に適合すると書いてはいけません。自分が検査できる範囲と、実装後の検証が必要な範囲を受注前に伝えます。

不明点を質問に変える力も準備する

UIの副業では、依頼文が完成した仕様書になっているとは限りません。例えば「もっと分かりやすくしてほしい」と言われたら、どの利用者が、どの操作で、何を間違えているのかを聞きます。問題の記録がなければ、分かっている事実と仮説を分け、調べる範囲から相談します。

質問は一度に大量に送るより、設計を始めるために必要なものから優先します。「入力項目の削除は可能か」「結果の表示順は変更できるか」「承認者は誰か」といった判断が止まる項目を先にまとめます。相手の回答が遅れた場合に影響する作業も示せると、相談が単なる催促になりません。

UIの実績がないときは、案件に合う小さな見本を用意する

応募先の判断に必要な一つの操作を選ぶ

UIデザインの見本では、見栄えの異なる画面をたくさん並べるより、応募したい仕事で必要な判断を示します。管理画面の改善に応募するなら、情報が多い一覧と絞り込み、状態表示などを扱う方が、華やかな広告バナーだけを見せるより役割が伝わりやすくなります。提出物の指定がある場合は、それを最優先してください。

題材は、自分が説明できる架空の小さな業務で十分です。本記事では「社内の備品を探して貸出申請する」という架空の操作を例にします。実際の会社や利用者への調査はしていない仮定であり、業務システムとして完成・運用された実績ではありません。個人情報や勤務先の内部画面を持ち出さず、自分で作ったデータを使います。

この例の目標は、備品を見つけ、貸出条件を確認し、申請結果を把握できることです。購入、決済、人事情報との連携などは含めません。まず対象外を決めると、必要な画面を増やし続けずに、限られた操作を最後まで検討できます。これが実案件でもそのまま使える仕様であるとは主張しません。

一つの見本を四つの材料で見せる

最初の材料は課題です。誰が、何をしようとして、どの条件で迷うと想定したかを短く書きます。次に設計として、必要な画面と状態、選んだ文言や並び方を示します。三つ目は確認の記録です。操作を試した方法、見つかった問題、直した点を書きます。最後に残る課題を示し、調べていないことを確定事項にしません。

備品の例なら、名称を知らない人が分類から探せるようにした理由、貸出不可の備品をどう表示するか、申請後に二重操作を避けるため何を相談すべきか、といった説明ができます。装飾の好みではなく、操作上の判断を一つずつ取り上げることがポイントです。解決していない課題を隠すより、どの担当へ確かめるかを添えます。

※表は横にスクロールできます。

見本の材料	備品貸出の架空課題で示す例	書いてはいけない飛躍
課題と仮定	名称が分からなくても分類から探す想定	調査なしで「利用者の多くが困っていた」とする
担当した設計	一覧、詳細、申請の状態とルール	他人の素材や実装まで自分の成果にする
確認と変更	試行時に戻る場所が不明だったため説明を追加	少人数の感想を統計的な改善率にする
未確認事項	貸出可能数の更新方法は開発確認が必要	画面見本だけで業務の安全性を保証する

操作の見本と、説明資料を混同しない

クリックして動かせるプロトタイプは、画面のつながりを確かめる材料になります。ただし、見る人が自由に触るだけでは、確認してほしい点を見落とすかもしれません。「備品を一つ探し、貸出条件を確かめる」といった短い課題を添えて、開始位置と終わりを明確にします。

説明資料には、プロトタイプで動く部分と動かない部分を書きます。検索結果が固定なのか、入力内容を保存しないのか、エラー表示を手動で切り替えるのかを明記します。動かない場所が多い見本でも、判断を説明できれば材料になります。実装されているように見せるための偽の機能や成果は不要です。

公開前には、閲覧者が見てよい範囲だけが共有されているかを確認します。作業中ページ、コメント、未公開情報が同じファイルに入っていると、作品だけを見せたつもりでも別の情報が見える場合があります。Figmaではファイルや共有リンクなどの権限が関係するため、最新の共有と権限の公式案内に沿って設定を確認してください。

自主制作の説明を、実案件の成果に置き換えない

作品の冒頭に「自主制作・架空課題」「担当：情報整理とUI設計」「実装なし」のように区分を置きます。会社で作った作品を見せる場合は、自分が担当した部分と公開許可を確認します。会社名を伏せたり、画面をぼかしたりしただけで自由に公開できるとは限りません。契約や勤務先のルールを優先します。

教材の完成例に沿ったものは、教材課題であることと、自分で追加した検討を分けます。許諾されていない素材を差し込んだまま公開しないことも重要です。作品の数を増やすために権利の曖昧な画面を並べるより、説明と公開条件がそろった見本を用意しましょう。

作品ページ全体の組み立てや自己紹介の詳しい作り方は、Webデザインのポートフォリオ作成ガイドで整理しています。この段階では、応募先が求める操作に近い見本があるか、状態と判断理由を説明できるかを確かめてください。見本の完成は応募材料の準備であり、採用や受注を保証するものではありません。

UIデザインの副業案件を探すときの応募・見積もりの考え方

探す場所を増やす前に、仕事の条件をそろえる

案件を探す方法には、募集サービス、制作会社や事業会社の募集、知人からの紹介などがあります。どれを利用する場合も、業務委託なのか雇用なのか、募集が現在も続いているのか、週や月にどれだけの稼働が必要かを確認します。検索結果に「副業」と表示されても、土日だけで対応できるとは限りません。

「リモート可」は場所の条件です。平日昼間の定例会議や、開発中の質問への対応を求められることも考えられます。自分が出られる時間帯を先に整理し、募集に書かれていない点は応募の早い段階で聞きましょう。月の合計時間が合っていても、相談が必要な時刻に重なれなければ進行が難しくなります。

まず数件の募集を、仕事内容、必要経験、時間帯、成果物、契約方式で並べます。高い金額だけを抜き出して相場と考えず、求められる責任や稼働量の違いを見ます。正社員の月給、フル稼働の業務委託、短時間の副業の報酬を同じ数字として比較しないようにしてください。

応募文は、相手の仕事と自分の根拠を結び付ける

応募では、長い経歴紹介より、今回の範囲に何が合うかを先に伝えます。例えば、既存の入力画面改善なら、入力状態を整理した見本、その中で担当したこと、対応できる時間、先に確認したい条件をまとめます。相手の課題が不明な段階で、必ず成果が上がると約束する必要はありません。

この例は文章の部品であり、実際に送るときは自分の経験と条件に直します。経験があるなら、自分が担当した部分を具体化します。未経験でも、確認できる見本を示して質問を絞ることはできます。「何でも対応します」と広げるより、条件が合う仕事を相手と判断できる内容にします。

応募時の課題提出にも注意が必要です。試験としての小さな見本なのか、実際に使う成果物の制作なのか、対価、提出後の利用範囲、期限を確認します。相手の事業にそのまま使える大量の画面を、目的や利用条件が曖昧なまま渡さないようにしましょう。違和感があれば条件を質問し、回答がないまま進めない選択もあります。

見積もりは制作以外の時間も分けて積む

見積もりでは、依頼の確認、既存画面の理解、画面と状態の設計、相談、修正、納品準備を分けます。新しいツールの調査や、支給データの整理が必要なら、その負担も確認します。最初から細部まで正確に予測できなくても、どの仮定で計算したかを示すと、範囲が変わったときに話し合えます。

次の表は相場ではなく、限定された架空案件を計算するための例です。「既存仕様が確定」「対象は一つの操作」「支給データに重大な整理不足がない」「修正は合意した範囲内」という仮定を置いています。実際には技能、仕様、会議や確認の回数により大きく変わります。

※表は横にスクロールできます。

作業	仮に見込む時間	時間が増える条件
依頼と支給データの確認	2時間	仕様の未確定、資料不足
画面と状態の設計	6時間	対象状態や端末の追加
相談とレビュー	2時間	会議追加、承認者の増加
修正と整合確認	3時間	前提や方向性の変更
納品準備と説明	1時間	別形式や追加資料の指定
合計	14時間	仮定が変われば再計算

仮に報酬が42,000円、支出が3,000円、上記の14時間がかかるなら、税金などを考慮する前の「報酬から支出を引いた額を作業時間で割る」計算は約2,786円です。これは労働者の時給や手取り、業界相場ではありません。さらに応募や経理に4時間使ったなら、同じ39,000円を18時間で割ると約2,167円になります。何を分母に入れるかで見え方が変わる例です。

価格を下げる前に、対象を減らせるか相談する

予算が合わないときは、すべて同じ内容のまま金額だけを下げるのではなく、先に対象を絞る相談をします。一つの操作だけにする、対象端末を限定する、既存部品を使う、調査は別工程にするなど、品質を保ちながら範囲を変えられるか検討します。必要な安全確認を削る方向にはしません。

一方、相手が本当に必要とする範囲を外すなら、その案は適していません。「画面は納めるが実装者が理解できる説明はしない」といった切り方では、後工程で困る可能性があります。削る内容と残る制約を説明し、条件が合わなければ受注を見送ることも選択肢に入れます。

契約・稼働・情報管理を確認し、続けられる副業にする

契約前に、納品と完了の意味を言葉にする

受注前には、対象の操作と状態、成果物の形式、納期、レビューの回数、完了の判断、報酬と支払期日を確認します。「デザイン一式」だけでは、どこまで含むかが曖昧です。編集データ、画像素材、説明資料、プロトタイプ、実装後の確認のうち、含むものと含まないものを分けます。

修正回数だけを決めても、同じ画面の文字変更と、新しい機能の追加では負担が違います。合意した要件に対する修正と、要件の変更をどう区別するかを相談します。依頼側の確認が遅れた場合、仕様が変わった場合、途中で終了する場合の扱いも、最初に文面で確認すると判断しやすくなります。

フリーランス法は、対象となる事業者間の業務委託で、取引条件の明示などを定めています。適用される義務は発注者の要件や委託期間などで異なり、副業という呼び方だけで一律に決まりません。支払期日も対象要件や再委託の例外を含めて確認する必要があります。個別契約で迷う場合は、公正取引委員会の公式案内や相談窓口を参照し、必要に応じて専門家へ相談してください。

週の作業時間と、相手に重なる時間を別に確保する

平日夜に一時間ずつ、休日にまとまった時間を使えるとしても、その全量を制作で埋めないようにします。連絡、会議、レビューの読み取り、やり直し、ファイルの整理にも時間がかかります。会社の繁忙期や体調不良が起きた場合の余白を含め、自分が継続できる上限を考えます。

例えば、週に確保できる時間を八時間と仮置きするなら、制作に五時間、相談や確認に二時間、予備に一時間という組み方があります。これは推奨の標準配分ではなく、作業以外の時間を忘れないための例です。会議が多い案件では配分を変え、平日昼間の即時対応が不可なら、その条件を契約前に伝えます。

連絡できない時間は、返信の目安と合わせて説明します。「夜に確認し翌日までに回答できる」「急な当日会議は難しい」など、現実に守れる範囲にします。相手の開発が日中の迅速な判断を必要としているなら、合計時間が足りても条件が合わない場合があります。無理に応じて遅れるより、早い段階で相性を確認します。

勤務先の就業規則、必要な届出、守秘義務、競業に関する条件も確認します。厚生労働省は副業・兼業のガイドラインや留意点を公開していますが、勤務先の具体的なルールや個別の事情は別に確認が必要です。会社の端末、アカウント、素材、顧客情報を副業へ流用しないことも基本です。参考：厚生労働省の副業・兼業案内。

編集権限・素材・実績公開を最初に確認する

クラウドの制作ツールを使うときは、どの組織のファイルで作業するか、誰を招待するか、閲覧と編集をどう分けるかを決めます。個人の公開リンクを便利だからと使う前に、依頼者の情報管理ルールを確認してください。案件終了後も個人アカウントに機密情報が残らないよう、納品先と整理方法を合意します。

写真、アイコン、フォント、部品集には、それぞれ利用条件があります。画面を作る人が利用できても、編集データを相手へ渡す条件が同じとは限りません。支給素材についても、利用権の確認を誰が担当するのかを決めましょう。権利の説明が不明な素材は、使用を保留して代替を相談します。

AIによる補助を使う場合も、依頼者の情報や画面を外部サービスへ入力してよいかを先に確認します。禁止されている情報を入力しないこと、生成物に不正確な表現や権利上の問題がないかを確認することが必要です。生成したから自由に納品・公開できる、と一括で判断しないでください。

実績公開は納品とは別の許可です。公開できる画面、会社名、制作過程、数値、公開時期を具体的に確認します。受注できたことがうれしくても、契約前の相談内容や未公開機能をSNSへ載せないようにしましょう。自分の作業を説明するために必要な範囲と、相手が公開してよい範囲は一致するとは限りません。

学習費や独立の判断は、仕事の不足と記録から考える

案件を探して不足が見えたら、学習内容を絞ります。状態の整理が苦手なら操作の見本を作ってレビューを受ける、部品の使い方が不安なら既存ルールに沿って小さく作る、実装との会話が難しければHTMLやCSSの基礎を確認する、といった順です。名前の有名な講座を契約すること自体を目標にしないようにします。

添削や質問の環境が必要なら、Webデザインスクールの料金・内容・支援の比較も判断材料になります。ただし、Webデザイン全般の講座がUIの状態設計や開発連携まで扱うとは限りません。対象課題、講師の対応範囲、添削回数、総費用を確認し、受講による受注や収益の保証はないことを踏まえて選びます。

副業が一件決まっただけで、すぐに独立する必要はありません。制作時間と実際の総時間の差、追加作業の理由、入金の時期、継続依頼の有無を記録します。一つの取引先への依存や、案件がない期間の負担も確認し、自分の生活を維持できるかを別に考えます。売上の最高額だけでは、続けやすさは判断できません。

UIデザイナーの副業は、見た目の完成度だけで決めると、受注後の仕事量や連携条件を見落としやすくなります。どの操作を、どの状態まで、誰と相談しながら仕上げるのかを具体的にしましょう。自分が説明できる小さな範囲から準備し、足りない点は確認・学習で補うことが、無理の少ない案件選びにつながります。