Webデザイナー(サイト制作)はサイトの見た目を設計して形にする仕事
公開: 2026-08-12/更新: 2026-08-21・運営・編集: オルグロー株式会社
この記事の要点
- 依頼主の目的を形にする課題解決の仕事で、自分の作品づくりよりも「目的に合う見せ方」を作る力が価値になります
- 未経験からの選考はポートフォリオがほぼすべて。学歴や資格よりも、模写とオリジナル作品の質が合否を分けます
- 接客・販売で磨いたヒアリング力や売り場づくりの経験は、要件整理と提案の場面でそのまま強みとして通用します
Webデザイナー(サイト制作)とはどんな仕事?
Webデザイナー(サイト制作)とは、企業サイトやキャンペーンサイトの構成づくりからビジュアル制作までを一気通貫で担い、目的に合ったWebサイトの見た目を形にする仕事です。
Webデザイナー(サイト制作)の仕事内容は?
| ヒアリング・要件整理 | 依頼主の目的やターゲット、参考にしたい事例を聞き取り、デザインの方向性を言葉で合意する |
|---|---|
| ワイヤーフレーム作成 | ページの構成や情報の並び順を設計図として描き、制作前に関係者と認識を合わせて共有する |
| デザインカンプ制作 | FigmaやPhotoshopで配色・文字組・写真を整え、実装できる形の完成イメージを作り込む |
| 素材の準備・加工 | 写真の色補正やトリミング、アイコンやイラストなど掲載素材の用意と使用条件の確認・調整 |
| 修正対応・データ整理 | 指摘を反映して仕上げ、コーダーが迷わないよう納品データを命名規則に沿って規則正しく整える |
Webデザイナー(サイト制作)の1日の流れは?
| 9:00 | メールとチャットを確認し、修正依頼と今日の制作タスクの優先順位を整理 |
|---|---|
| 10:00 | デザインカンプの制作に集中。午前は打ち合わせを入れず作業時間にする現場が多め |
| 12:00 | 昼休憩。合間に参考サイトを集めて、デザインの引き出しを増やすのが習慣という人も多いです |
| 13:00 | 依頼主とのオンライン打ち合わせ。初稿のデザイン意図を説明し、要望を聞き取る |
| 14:30 | 打ち合わせ内容を反映して修正。判断に迷う点はディレクターや先輩に相談 |
| 15:30 | 掲載写真の色補正とトリミング。素材の使用条件と利用期限もあわせて確認 |
| 16:30 | コーダーへ渡す納品データの整理と、画像の書き出し・指示書きの作成 |
| 17:30 | 社内レビューで先輩デザイナーの確認を受け、明日の提出に向けて細部を微調整 |
| 18:00 | 明日のタスクを書き出して退勤。納期前の週は残業が増えることもあります |
※職場によって差があります。よくある1日のイメージです。
Webデザイナー(サイト制作)に向いている人・向いていない人は?
向いている人
- お客様の要望を聞き出してまとめるのが得意(接客・販売でのヒアリング経験がそのまま活きます)。要望の裏にある目的をつかめる人ほど、修正の少ない初稿を作れるからです
- 売り場づくりやPOP作成など「見せ方の工夫」を目的から考えて楽しんできた。目的から逆算して見せ方を決める発想は、実務のデザイン判断そのものだからです
- 完成形を思い描きながら段取りを組み、締め切りから逆算して進めるのが好き。制作は常に納期との両立で、段取り力が品質を守る土台になるからです
向いていない可能性がある人
- 自分の作りたい世界観を最優先にしたい(依頼主の目的が最優先の仕事です)。要件と自分の好みが衝突したとき、要件を選ぶ場面が日常的にあるからです
- 細かい修正依頼のやり取りが何度も続くと強いストレスを感じる。初稿がそのまま通ることはまれで、修正対応は業務の一部として毎日発生するからです
- 複数の案件が同時に走る中で優先順位を切り替えるのが苦手。制作会社では2〜3案件を並行して進めるのが標準的な働き方だからです
「センスがない」は克服できる弱点です。実務のデザインは余白・配色・文字組といったルールの積み重ねで、型は学習で身につきます。実際、参考事例を集めて「なぜ良いのか」を理由ごと真似る練習を続けた人が、数ヶ月で選考に通る品質へ届く例は珍しくありません。一方「人の要望に合わせて作ること自体が嫌」という場合は職種の根幹と衝突するため、再現の技術で勝負できるコーダーや、作家性を活かせる道の検討をおすすめします。なお「修正のやり取りが続くのがつらいかどうか」は、学習段階でも見当がつけられます。模写した作品を誰かに見てもらい、返ってきた指摘どおりに直す作業を1本試すだけで、実務の感触はかなり具体的につかめます。向き不向きは能力の差ではなく、何を優先したいかという価値観の問題です。
自分がどちらに近いか気になる方は、Webデザイナーのタイプ診断(無料・約2分)で6タイプとのマッチ度を確認できます。
Webデザイナー(サイト制作)とUI/UXデザイナーの違いは?
| Webデザイナー(サイト制作) | UI/UXデザイナー | |
|---|---|---|
| 仕事のゴール | サイトを完成させて納品する | サービスの画面を継続的に改善する |
| 評価される力 | ビジュアルの完成度と要件の再現力 | 数字と論理で説明する設計力 |
| 案件との関わり | 案件ごとに数週間〜数ヶ月で完結 | 同じサービスに長期で伴走する |
| 未経験の入口 | 制作会社のアシスタントなど比較的広い | 経験者向けが中心で直行は狭き門 |
未経験からのルートは?前職別の入り方
販売・接客から
要望を聞き出して提案してきた経験は、ヒアリングと要件整理でそのまま活きます。デザインは会話から始まる仕事のため、聞く力のある未経験者は現場で歓迎されやすいのです。最初の壁はツール操作の速度ですが、模写の本数を重ねれば確実に追いつきます。POPや売り場づくりを「目的を持って見せ方を工夫した経験」として、ポートフォリオと一緒に語ると説得力が出ます。
事務職から
資料作成で図やレイアウトを工夫してきた人は、情報を整理して伝える素地があります。納期管理やデータ整理の正確さも制作現場で重宝される力です。壁になりやすいのは「正解のない判断」への戸惑いですが、参考事例を根拠に選ぶ癖をつければ乗り越えられます。改善前と後の資料を並べて見せられれば、面接での強い材料になります。日程や数字を取り違えずに扱ってきた正確さも、複数案件が同時に走る現場では信頼として評価されます。
印刷・DTP関連から
文字組や配色の基礎、入稿データを正確に作る習慣はWebでも通用する土台です。最初の壁はWeb特有の制約(画面幅による表示の変化や導線設計)への慣れですが、模写を通じて考え方ごと吸収できます。紙との違いは、読ませられる文字の小ささの限界や、画像を軽く保つ必要があるといった点に表れます。Figmaの操作を学び足せば、紙もWebも扱える人材として制作会社から歓迎されやすい、堅実な経路です。
未経験からWebデザイナー(サイト制作)になるには?
- 1
Figmaで模写から始める
無料で使えるFigmaで好きなサイトを10本模写し、レイアウトと配色の型を体に入れます。1本ごとに「なぜこの配置なのか」を言語化すると上達が早まります。最初の1本は時間がかかっても構いません。回数を重ねるごとに速くなるのが普通です。なお模写は他社の著作物を扱う練習のため、作品としては公開せず学習用にとどめておくのが安全です
- 2
オリジナル作品を3点作る
架空のお店のサイトでも選考対象になります。誰に何を伝えるサイトかという制作意図を添えて、ポートフォリオにまとめましょう。業種の違う題材を3つ選ぶと、対応の幅を示せて選考で有利に働きます。架空とはいえ、実在しそうな価格表やメニューまで作り込むと、情報量の多い紙面を整理できる力まで伝わります
- 3
アシスタント求人から応募
制作会社のアシスタントやバナー制作の求人と並行して応募すると、未経験の入口が広がります。完璧な作品を待つより応募しながら磨くのが近道です。不合格時に理由を聞ければ、それ自体が次の改善材料になります。応募先を制作会社だけに絞らず、事業会社の広報・販促の枠も見ておくと入口の数が増えます
求人票はどこを見ればいい?
- 「ポートフォリオ必須」の要件を最初に確認。点数や提出形式(PDFかURLか)の指定があれば、応募前にその形へ合わせるだけで通過率が変わります。指定がない場合も5〜10作品にまとめるのが目安です
- 「未経験可」でも実態は営業寄り・コーダー寄りの場合があります。仕事内容欄でデザイン業務の割合を必ず確認し、面接でも1日の業務配分を質問して答えの具体性を見ましょう。デザイナーがひとりだけの会社は、撮影も原稿も更新も抱える何でも屋になりやすい点に注意が必要です
- 制作実績が公開されている会社は仕事のテイストが事前にわかり、入社後の「作りたいものと違う」というギャップを減らせます。実績非公開の会社は面接で担当事例を尋ねましょう。実績の業種の幅は、経験できる案件の幅の目安にもなります
- 修正フローや残業時間について記載や面接回答が具体的な会社ほど、働き方の管理がされている傾向があります。修正回数の取り決めの有無は職場の健全さを測る目安になります
収入・働き方の傾向は?
入口の給与は控えめな傾向ですが、制作会社で数をこなすほど任される範囲が広がり、待遇も段階的に変わります。ワイヤーから任される、ディレクションを兼ねるなど、役割が広がる節目が待遇の変わり目になりやすい職種です。実績が作品として手元に残るため、経験を積めば転職・在宅勤務・副業への展開がしやすいのも特長で、働き方の選択肢を増やしたい人にとって積み上げの効くキャリアです。同じWebデザイナーでも、制作会社は案件数と納期の密度が高く、事業会社の社内デザイナーは自社サービスに腰を据えて関われるなど、所属先によって働き方の質が大きく変わります。求人を見比べる段階で、数をこなして幅を広げたいのか、ひとつの事業を深く理解したいのかを決めておくと、応募先選びで迷いにくくなります。担当した案件の目的と成果をメモに残しておくと、次の転職で実績を語る資料になります。
賃金・労働時間などの公的な統計は、厚生労働省の職業情報提供サイトjob tag ↗で「Webデザイナー」を検索すると確認できます。
この先のキャリアパスは?
アートディレクターへ。制作会社で数をこなして伸びる王道。
Webデザイナー(サイト制作)の求人イメージ
※実在の企業・求人ではなく、市場でよく見られる募集内容のサンプルです。
Webデザイナーアシスタント/制作会社
Web制作会社(従業員40名)
給与例月給22万〜27万円
勤務地例東京
UIデザイナー候補/自社アプリ
アプリ開発企業(従業員150名)
給与例月給25万〜32万円
勤務地例東京(在宅週3)
ECサイトデザイナー/自社モール運営
EC企業(従業員120名)
給与例月給23万〜28万円
勤務地例福岡
よくある質問
Webデザイナーは「やめとけ」と言われるのはなぜですか?
入口の給与が控えめで、納期前の残業や修正対応が続く職場もあるためです。ただし環境差が大きい業界なので、面接で残業時間や修正のルール(回数の上限や追加対応の扱い)を確認すればある程度回避できます。実績が作品として残り、在宅や副業など働き方の選択肢が広がりやすい利点もあるため、「やめとけ」の一言で判断せず、職場の見極め方を知ることが大切です。
Webデザイナーに向いていない人は?
自分の世界観の表現を最優先にしたい人、修正のやり取りが続くと強く消耗する人、複数案件の並行が苦手な人は苦労しやすい仕事です。ただし修正対応や並行管理は経験で慣れる部分も大きく、最初の1年を越えると負担が減ったという声は多くあります。表現を貫きたいなら作家的な活動、1つの事業に集中したいなら事業会社の社内デザイナーという選び方もあります。
独学とスクール、どちらがいいですか?
どちらからでもなれます。採用側が見るのはポートフォリオの中身であり、学び方そのものは問われません。費用を抑えて自分のペースで進めたいなら独学、学習の強制力と添削が欲しいならスクール、という基準で選ぶのが現実的です。スクールを選ぶ場合は、卒業生のポートフォリオの質と転職支援の実績を必ず確認しましょう。金額の大きさと成果は比例しません。
センスに自信がなくても大丈夫ですか?
大丈夫です。実務のデザインは感覚ではなく、余白・配色・文字組といったルールの積み重ねで成立しています。参考事例を集めて「なぜ良いのか」を言語化しながら型を学べば、選考ラインの品質には届きます。プロの多くも生まれつきの感覚ではなく、引き出しの数で作っています。それでも不安な場合は、正確な再現力で勝負できるコーダーや、論理で設計するUI系も選択肢になります。
何歳まで目指せますか?
求人で年齢制限を設けることは法律で原則禁止されており、応募に年齢の壁はありません。実際の選考で見られるのはポートフォリオの質と学習の継続力です。異業種で培ったヒアリング力や進行管理の経験をデザインに掛け合わせられる人は、経験年数の浅さを補いやすくなります。「未経験歓迎」の求人で研修体制を確認しながら、まずは作品の完成度を高めることに集中しましょう。
AIでWebデザイナーの仕事はなくなりますか?
デザイン案の生成は速くなりますが、依頼主の意図を聞き取って要件に翻訳し、最終品質に責任を持つ仕事は残ります。AIをたたき台づくりに使って提案の幅と速度を上げる働き方が主流になりつつあり、ツールを使いこなす側に回ることが現実的な備えです。求人でも生成ツールの活用経験を歓迎する記載が増えており、学習段階から触れておくと差別化につながります。
ポートフォリオは何点あれば応募できますか?
5点前後がひとつの目安で、模写よりオリジナル作品を中心に据えるのが基本です。点数以上に見られるのは、1点ごとに「誰に向けて、何のために、なぜこの見せ方にしたか」を説明できるかどうかです。スマホ表示の画面を添えると実務の理解が伝わり、URLで提出する場合は会員登録なしで閲覧できる形にしておくと、選考担当者に確実に見てもらえます。
Webデザイナー(サイト制作)は、あなたに向いている?
Webデザイナーの6タイプすべてとのマッチ度を、2分の無料診断で確認できます。登録は不要です。