Webデザイナーとは何をする仕事？仕事内容・ツール・1日の流れを現役10年が解説

2026/06/20ツール・制作環境

「Webデザイナー」という言葉は聞いたことがあっても、実際の仕事内容がよくわからない、という人は意外と多いです。

私はWebデザイナーとして10年以上働き、採用担当として5年間、さまざまなバックグラウンドを持つ方々の面接をしてきました。その経験から言うと、Webデザイナーのリアルな仕事像は、一般に思われているものとかなり違うと感じています。

この記事では、現場の視点と採用担当の視点、両方から「Webデザイナーの仕事内容」を整理します。「自分に合いそうかどうか」を判断する材料として読んでもらえれば幸いです。

Webデザイナーが「実際にやること」をざっくり整理する

Webサイトを「見た目」だけ作る仕事ではない

Webデザイナーの仕事を「おしゃれな画面を作る人」とイメージしている方が多いのですが、実際はもう少し幅があります。主な仕事内容を大きく分けると、こんな感じです。

• デザイン制作：Webサイトのビジュアルをデザインツール（主にFigma）でデザインする
• コーディング：HTML・CSSを使って、デザインをブラウザ上で動く形に実装する
• 更新・運用：既存サイトのテキスト・画像の更新、バナー制作、LP（ランディングページ）の制作
• クライアントとのやりとり：要件ヒアリング、提案、修正対応
• ディレクション補助：スケジュール管理・ファイル整理・制作進行

デザインをガリガリ作る時間はもちろんあるのですが、実際には「更新」「やりとり」「確認作業」にかなりの時間を使います。今振り返ると、私が新人のころにイメージしていたよりも、デザインを作っている時間の割合は少ない、というのが正直なところです。

制作会社とインハウス（事業会社）では仕事の中身がかなり違う

Webデザイナーといっても、働く環境によって日々の仕事は大きく変わります。

制作会社（受託）の場合：

• 複数のクライアント案件を同時に抱えることが多い
• 案件の種類が多様（コーポレートサイト・ECサイト・LP等）
• 締め切りに追われるペースが続きやすい
• 幅広いスキルが身につきやすい

インハウス（事業会社のデザイン担当）の場合：

• 自社サービスやブランドに特化した仕事
• 長期的に1つのプロダクトに向き合える
• マーケティング・エンジニアとの連携が密になる
• 深いドメイン知識がつきやすい

採用担当として面接してきた経験から言うと、「制作会社で幅広く経験を積んだ後、インハウスに移る」という流れは比較的多いパターンです。最初にどちらを選ぶかは、自分の性格や目指したいキャリアによって変わってきます。

📌 関連記事：Webデザイナーの働き方 — 制作会社・インハウス・フリーランスの違いを、それぞれの特徴とともに整理しています。

2026年現在、Webデザイナーが実際に使うツール

デザインツール：Figmaが業界標準になった

少し前まではAdobe XD・Photoshop・Illustratorといったツールが主流でしたが、2026年現在、デザイン制作の現場ではFigmaがほぼ標準ツールになっています。

Figmaが広まった主な理由は、チームでリアルタイムに共同編集できること、ブラウザベースで動くこと、デザインのデータをそのままエンジニアが参照できることなど。クライアントとのレビューもFigma上でコメントをやりとりするスタイルが増えています。

採用担当として感じるのは、2024年以降の応募者の多くがFigmaを触ってきている、という現実です。

「まず何を覚えればいいですか？」と聞かれたら、デザインツールはFigmaから入ることをお勧めしています。Photoshopも現場で使うことはありますが（特に画像加工・バナー制作）、デザイン制作の軸はFigmaで問題ありません。

なお、Figmaには最近AIを活用した機能（文章生成・レイアウト提案など）が追加されつつあります。業界全体としてAIとの連携が進んでいる流れは確かにありますが、「AIを使いこなしているか」が採用の絶対条件になっているかというと、今のところそうではないです。基本的なデザイン力と論理的な思考があることの方が、採用担当として見ていて重要です。

コーディング：HTML/CSS＋AIコーディング補助の流れ

Webデザイナーがどこまでコーディングをやるかは会社によって違います。「デザインだけ」という環境もあれば、「HTML/CSSのコーディングまで」という環境もあり、「WordPressのカスタマイズまで」というケースも珍しくありません。

コーディングの基本はHTML・CSSです。JavaScriptもある程度知っていると現場で役立ちますが、がっつり書けないとダメ、というわけではないことが多いです。

最近の業界の流れとして、GitHub CopilotなどのAIコーディング補助ツールを使うエンジニアやデザイナーが増えています。自分でゼロからコードを書く作業が一部効率化されてきており、今後この傾向は続くと思われます。ただ、基礎的なHTMLとCSSの知識がないと、AIが出力したコードを確認・修正できません。基礎をしっかり押さえた上でAIを補助として使う、というのが今の現場感に近いと思います。

📌 関連記事：Webデザイン学習の正しい順番 — デザインとコーディング、どちらから始めるべきかを整理しています。

その他の業務で使うツール

デザイン・コーディング以外にも、現場では以下のようなツールを使うことが多いです。

• コミュニケーション：Slack・Chatwork・Notion・Backlog（チケット管理）
• ファイル管理：Google Drive・Dropbox・GitHubなど
• クライアントとの共有：Figma・Googleスライド・Notion
• 分析・確認：Google Analytics・PageSpeed Insights・Chrome DevTools

デザインツールが使えるだけでなく、「チームで仕事を進める」ための基本的なツールに慣れていることも、現場では地味に大事です。

Webデザイナーの1日の流れ

制作会社とインハウスではペースがかなり異なります。それぞれのパターンを時間軸で見てみましょう。

制作会社（受託）の場合

複数の案件を並行して抱えながら、締め切り優先で動くのが制作会社の現場です。

午前：確認・ミーティング・連絡対応

• 09:00 Slack確認・クライアントからのメール返信
• 09:30 進行中の案件の確認（修正指示の内容把握）
• 10:00 週次ミーティングや案件ごとのデザインレビュー（Figmaを画面共有しながら）
• 11:00 午後の実制作に向けて素材・テキスト確認、方向性の整理

午前中は「確認と調整」が中心になることが多いです。

午後：実制作の時間

• 13:00 Figmaでデザイン制作（新規ページ・バナー・LP等）
• 15:00 HTML/CSSのコーディング作業、またはWordPress更新
• 17:00 制作物の社内確認・修正
• 18:00 翌日分のタスク整理、クライアントへの進捗報告

実制作の時間は午後に集中させるケースが多いですが、締め切りが重なると午前から夜まで全部制作、という日もあります。正直しんどかった日もありましたが、今思うと、締め切りに追われながら覚えたことが一番身になっていました。

インハウス（事業会社）の場合

自社サービスやブランドの担当として、チームの中でデザインを担う役割です。制作会社ほど締め切りの波は激しくないですが、スピード感や連携の密度は高い。

午前：チームとの連携・課題整理

• 09:30 朝会（エンジニア・マーケター・デザイナーが集まる15〜30分のスタンドアップ）
• 10:00 自社サービスのUI改善作業：Figmaで既存画面の修正案を作る
• 11:00 エンジニアと仕様のすり合わせ（デザインを実装できる形に詰める）

午後：設計・確認・フィードバック対応

• 13:00 LPや新機能のデザイン制作
• 14:30 デザインレビュー（チームにFigmaを見せながら意見をもらう）
• 15:30 マーケターから来たバナー制作の依頼に対応
• 17:00 Notionで進捗を更新。翌日の作業を整理して終業

インハウスの場合、毎日大量の案件を捌く、というよりは、1つのプロダクトの品質を上げることに集中できる環境が多いです。採用担当として面接していた感覚でいうと、「ゆっくりでも深く関わりたい」「1つのサービスに愛着を持って働きたい」という方はインハウスのほうが向いていることが多い印象です。

採用担当として感じる「現場で活躍する人」の共通点

ツールよりも「なぜそのデザインにしたか」を説明できるかどうか

ポートフォリオを見るとき、採用担当として私が最もよく見るのは「このデザインにした理由が説明できるか」です。

Figmaが使えるかどうかより、「ユーザーが混乱しないように情報の優先順位を整理した」「読みやすさを意識してフォントと余白を調整した」という思考の跡が見えるかどうか。完成度よりも、意図が感じられるかどうかを見ています。

採用する側として見ていると、ツールの習熟度は入社してから追いつける。でも、デザインを論理的に考える習慣は、後からなかなかつかない。

自分で情報を更新し続けている人

Webデザイン業界はツールや手法の変化が早いです。採用担当として面接してきた中で、長く活躍している人ほど「学ぶことを日常にしている」という印象があります。

完璧な知識を持っているかではなく、「新しい情報を自分でキャッチして試してみる習慣があるかどうか」。これは実際に面接でも話の流れで見えてくる部分です。

📌 関連記事：Webデザイナーに必要なポートフォリオとは？採用担当が正直に語る — 採用担当として実際に何を見ているか、ポートフォリオの評価軸を正直に整理しています。

よくある質問

まとめ

Webデザイナーという仕事の輪郭が少し見えてきたでしょうか。「自分に向いているかどうか」をもう少し具体的に確認したい方は、向いている人・向いていない人を整理した記事も参考にしてみてください。また、学ぶ環境を選ぶ段階なら、スクールと独学の選び方について書いた記事が判断材料になると思います。

📌 関連記事：Webデザイナーに向いている人・向いていない人【採用側が正直に語る】 — 採用担当として「向いている人」の特徴を整理しています

📌 関連記事：Webデザイナーになるには独学とスクールどっちがいい？転職経験者が実体験で徹底解説 — スクールか独学か迷っている方の判断材料になるよう整理しています

関連記事

• Webデザイナーに向いている人・向いていない人【採用側が正直に語る】
• 未経験でも大丈夫？あなたの強みを発見してWebデザイナーへ
• Webデザイナーになるには独学とスクールどっちがいい？転職経験者が実体験で徹底解説
• Webデザイン学習の正しい順番（デザインとコーディング、どちらから？）
• スキマ時間のWebデザイン勉強法