Webデザイナーの仕事の流れ｜未経験が知っておくべき現場のリアル
Webデザイナーって、実際にどんな仕事の流れでやってるんだろう…
案件って、最初から最後まで一人でやるの？
AKIWebデザイナーの仕事は「5つのフェーズ」で動いています。それぞれに現場ならではのポイントがあるので、正直に話しますね。
「Webデザイナーって、どんな流れで仕事をするんだろう」と気になっているあなたの気持ち、よくわかります。
スクール選びや転職を考えるとき、「実際の仕事がイメージできない」という不安は多いです。採用担当として面接してきた経験から言うと、仕事の流れをちゃんと理解している未経験者と、なんとなくしか知らない未経験者では、面接での説得力がまったく違います。
この記事では、Webデザイナー歴10年以上の私が、ヒアリングから納品・運用まで、現場で実際に経験してきた工程をすべてまとめました。案件を受ける前に知っておきたいことも、正直に書いています。
全くの未経験から独学とスクールを経てWebデザイナーへ転職。その後Webデザイナー・Webディレクターとして働き、現在は本ブログの運営やWebサイト制作を通じてデザインに携わる。IT業界経験20年以上。
Webデザイナーの仕事は「5つのフェーズ」で動く
Webデザイナーの仕事は、大きく5つのフェーズで進みます。それぞれが独立しているようで、実はつながっています。前のフェーズで手を抜くと、後のフェーズで必ずしわ寄せが来る——というのが現場の実感です。
📋 5つのフェーズ一覧
- ヒアリング・要件定義：クライアントの要望を整理する
- サイト設計・ワイヤーフレーム：構成と骨格を設計する
- デザイン制作：ビジュアルを作り込む
- コーディング・テスト：動くWebサイトに実装する
- 納品・運用・保守：公開後も関わり続ける
会社によってはフェーズごとに担当が分かれることもありますが、小規模の制作会社やフリーランスは、基本的に一人でこのすべてを担います。未経験のうちは「どこまでやればいいの？」と戸惑うかもしれないので、最初に全体像を掴んでおくことが大切です。
フェーズ1：ヒアリング・要件定義（ここで案件の8割が決まる）
最初のフェーズは、クライアントの話を聞くことです。シンプルに聞こえますが、ここが最も重要で、最も難しい工程でもあります。
AKI今振り返ると、駆け出しのころは「聞くのが怖くて」曖昧なまま進めてしまったことが何度もありました。そのたびに後工程でやり直しが発生して、本当に時間をムダにしました。
クライアントから確認すべき5つの軸
ヒアリングで最低限押さえておきたい内容は以下の5つです。これを最初に整理できているかどうかで、後の工程のスムーズさがまるで変わります。
💡 ヒアリングの5つの軸
- 目的：サイトを作る目的は何か（集客・採用・ブランディングなど）
- ターゲット：誰に見てもらいたいか（年代・職業・ニーズ）
- 機能・ページ構成：必要なページ数と機能（フォーム・EC・ブログ等）
- デザインのイメージ：参考サイト・雰囲気・NGな要素
- 予算と納期：どのくらいかけられるか・いつまでに必要か
要件定義書はなぜ必要か
ヒアリングで得た情報をまとめたものが「要件定義書」です。これが後でドラブルを防ぐための保険になります。
口頭でのやり取りだけで進めると、「そんなこと頼んでいない」「もっとこうしてほしかった」という認識のズレが必ず起きます。特に修正が発生したとき、「最初の合意の内容」を書面で確認できるかどうかが重要になります。未経験のうちほど、ドキュメントを残す習慣をつけておくことを強くすすめます。
フェーズ2：サイト設計・ワイヤーフレーム
ヒアリングが終わったら、サイトの「骨格」を作ります。デザインを作る前に、情報の配置と流れを整理するフェーズです。
情報整理とサイトマップ
まずサイト全体の構成（サイトマップ）を設計します。「どのページに何を載せるか」「ユーザーはどんな順番でページを移動するか」を考えながら、ページの一覧と階層を整理します。
このとき意識すべきなのは、「作り手の都合」ではなく「ユーザーの動線」です。見てほしいページに自然にたどり着けるか、迷わず目的のページに行けるか——この視点で構成を設計します。
ワイヤーフレームの作り方と注意点
ワイヤーフレームは、各ページのレイアウトを「ざっくり」可視化したものです。色やフォントは入れず、「どこに何を置くか」だけを決めます。ツールはFigmaが現在の主流です。
ワイヤーフレームを作る最大の理由は、「クライアントとのすり合わせ」です。デザインを作ってからの大幅な構成変更は時間がかかります。ワイヤーフレームの段階で認識を合わせておくことで、デザイン制作をスムーズに進められます。
フェーズ3：デザイン制作（実はここより前が重要）
ワイヤーフレームが固まったら、いよいよデザインの制作に入ります。Webデザイナーと聞いて多くの人がイメージするのがこの工程だと思いますが、正直、「前のフェーズをしっかりやっておけば、デザインは比較的スムーズ」というのが現場の実感です。
デザインコンセプトの決め方
デザイン制作の最初は、方向性を決めることです。ターゲット層に合った配色・フォント・全体の雰囲気を決めます。参考サイトを3〜5件集めて「こういう感じにしたい」をクライアントと共有するのが一般的な進め方です。
このステップをすっ飗ばしてデザインを作り始めると、出来上がりを見せたときに「なんか違う」と言われる可能性が高くなります。方向性の確認は、一手間に見えて後の大幅な手戻りを防ぐ重要なステップです。
修正は何回まで？現場での現実
デザインが完成したら、クライアントに確認してもらいフィードバックを受けます。ここで現実的な話をしておくと、修正は必ず発生します。「一発OK」は滅多にありません。
AKI「修正無制限」で受けてしまって、10回以上修正が続いたことがあります。正直しんどかったし、もったいなかった。今は必ず「修正は○回まで」を最初に契約書に入れるようにしています。
フリーランスや副業で案件を受ける場合は、事前に修正回数のルールを決めておくことが大切です。「何回でも修正します」という姿勢は親切に見えて、実は自分の首を絞めることになります。
フェーズ4：コーディング・テスト
デザインが確定したら、それをWebサイトとして動く形に実装するのがコーディングです。HTML・CSS・JavaScriptを使って、デザインデータを実際のページに落とし込みます。
使う言語と担当範囲
Webデザイナーが担うコーディングの基本はHTML/CSSです。JavaScriptについては「基本的な動き（アニメーション・スクロール効果）は書ける」「本格的なプログラムはエンジニアに依頼する」という分担が現場では多いです。
📋 コーディング担当範囲の目安
- HTML/CSS：Webデザイナーの必須スキル。マークアップ・レイアウト・レスポンシブ対応
- JavaScript（基礎）：スクロールアニメーション・ハンバーガーメニューなど
- JavaScript（応用）・バックエンド：エンジニアと分業、またはWordPress等CMSで対応
📌 関連記事：初心者でもわかる！HTML/CSSの基礎
テスト・デバッグで見るべきポイント
コーディングが終わったら、さまざまな環境で動作確認をします。ブラウザ（Chrome・Safari・Firefox）やデバイス（PC・スマートフォン・タブレット）ごとに表示が崩れていないかを確認し、問題があれば修正します。
特にスマートフォンでの表示確認は必須です。現在のWebサイトへのアクセスの半分以上がスマートフォンからというケースが多く、PC表示だけ綺麗でもクライアントには喜んでもらえません。
フェーズ5：納品・運用・保守（作って終わりではない）
テストが完了したらいよいよ納品です。ただ、多くの場合「納品で終わり」ではなく、公開後の運用・保守も仕事の一部になります。
納品時に渡すもの
制作物の納品形式はプロジェクトによって異なりますが、一般的に渡す内容は以下の通りです。
- 公開済みWebサイトのURL（サーバー・ドメインはクライアント手配の場合も多い）
- デザインデータ（FigmaファイルURLまたはPSD・AI形式）
- ソースコードのファイル一式（WordPressの場合はテーマ・プラグイン情報）
- 管理画面のアカウント情報（WordPressのログインID等）
保守・運用の重要性と継続案件
公開後も定期的なセキュリティアップデート・コンテンツ更新・アクセス解析のレポートなどで継続して関わるケースがあります。これが「保守・運用契約」です。
月額で安定した収入になるため、フリーランスにとっては特に重要な収益源になります。最初の納品をしっかり仕上げることで、継続依頼につながることも多いです。
AKI「作って終わり」ではなく、長く付き合えるクライアントを持てると、フリーランスとしての土台が安定します。そのためにも、最初の仕事の質と誠実さが大事だと実感しています。
副業・フリーランスとしてスキルを出品したい場合は、ココナラ（スキルマーケット）が最初の入り口として使いやすいです。「バナー1枚制作します」「ランディングページのデザインをします」など、自分のできる範囲でサービスを出品して、実績を積んでいく方法があります。
未経験が最初の案件を取るには
流れはわかった。でも「実際に仕事をどうやって取ればいいの？」という疑問が出てくると思います。未経験・副業スタートの段階で現実的な選択肢は、クラウドソーシングサービスを使うことです。
ポートフォリオを作ったけど、どこに営業すればいいかわからない…
最初の1件は、誰でも難しいです。実績がないと応募しにくい、応募しないと実績ができない——という状況になりやすい。だから最初は単価より「経験を積むこと」を優先して、低単価でも受けてみる判断が現実的です。
クラウドワークスは案件数が多く、初心者向けの小規模案件も探せます。「バナー作成」「LP一部修正」など、範囲の小さな仕事から始めるのが実績を作りやすいです。
📌 関連記事：WebデザイナーとWebディレクターの違いを徹底比較！自分に合った仕事を選ぶ方法 — デザイナーとディレクターの違いはこちら
よくある質問
Q：5つのフェーズを全部一人でやるのですか？
A：会社の規模や体制によって異なります。大手の制作会社では、ディレクター・デザイナー・ンーダーが分業するケースが多いです。一方、小規模な制作会社やフリーランスでは、1人で5フェーズすべてを担うことが一般的です。スクール卒業後すぐにフリーランスを目指す場合は、全フェーズを一通り学んでおくことをすすめます。
Q：制作期間はどのくらいかかりますか？
A：ページ数や規模によって大きく異なります。シンプルなコーポレートサイト（5〜10ページ）で1〜2ヶ月、ECサイトや大規模サイトになると3〜6ヶ月かかることもあります。フリーランスで最初に受ける小規模案件（バナー・LP1枚等）は、数日〜2週間程度が目安です。
Q：未経験でも最初の案件は取れますか？
A：取れます。ただし最初は単価が低いことを前提にしておくほうが現実的です。クラウドソーシングで小さな案件から始め、実績とポートフォリオを積み上げていく流れが一般的です。「最初から高単価」を目指すより「まず1件経験する」ことを優先すると、次の案件につながりやすくなります。
Q：フリーランスと会社員で仕事の流れは違いますか？
A：基本のフェーズは同じですが、フリーランスはヒアリングから納品・請求書発行まですべて一人で対応します。会社員は分業体制があるため、担当するフェーズが限定されることが多いです。また、フリーランスは修正回数や料金の交渉も自分で行うため、最初は戸惑うことも多いです。まず会社員として実務経験を積んでからフリーランスに移行するルートが、現場では多い印象です。
まとめ
AKI流れを知っているだけで、面接でも実際の仕事でも余裕が変わります。まず全体像を掴んでから、それぞれのフェーズを深掘りしていくのが確実な進め方だと思います。
📝 まとめ：Webデザイナーの仕事の流れ5フェーズ
- ヒアリング・要件定義：最初が肝心。曖昧なまま進めると後工程でしわ寄せが来る
- サイト設計・ワイヤーフレーム：ユーザー動線を考えた骨格設計。Figmaが現在の主流ツール
- デザイン制作：修正は必ず発生する。修正回数は事前にルール化しておく
- コーディング・テスト：HTML/CSS必須。スマートフォン表示の確認は特に重要
- 納品・運用・保守：作って終わりではない。継続案件がフリーランスの収益の土台になる
「仕事の流れはわかった、でも自分にできるのか不安」という人は、まずポートフォリオを1本作ることから始めてみてください。完璧じゃなくていいです。小さく動いてみることで、次のステップが見えてきます。