WEB制作の仕事内容をやさしく解説【初心者向け】

WEB制作の仕事内容をやさしく解説

こんにちはTERUです。
フリーランスでWEB制作を仕事にしています。

読者の悩み

  • WEB制作の仕事内容について詳しく知りたい
  • WEB制作の仕事をする上でどんな職種があるのか知りたい

WEB制作の勉強し始めた方にとって、具体的に「どんな工程でWEBサイトを制作していくのか」,「どんな職種やスキルが必要なのか」理解してる人は少ないと思います。

WEB制作にも複数の職種があり仕事内容も異なるので、全体像を把握した上で自分がまず何から勉強するのか決めるのが効率的です。

本記事では、WEB制作会社で働いた経験を持つ筆者が、WEB制作の仕事内容について詳しく解説します。

WEB制作について学習方法や営業方法が気になる方は以下の記事をご覧ください。

この記事を読んで分かること

  • WEB制作の仕事内容や仕事の流れが分かる
  • WEB制作の職種や必要なスキルが分かる

本記事の信頼性

  • WEB制作のフリーランスとして4年以上仕事をしている。
  • 以前はディレクターとしてWEB制作会社で働いた経験あり。
目次

WEB制作の仕事内容について

WEB制作の仕事は、新規でWEBサイトを制作したり、既存のWEBサイトに対して修正やコンテンツ追加などのリニューアル作業を行うことです。

制作期間は、案件の規模によって様々で2〜3ヶ月でリリースするものから1年以上制作にかかるものもあります。

WEB制作の仕事内容を分解すると、大きく以下の工程で作業を行います。

作業工程
  • ヒアリング
  • 提案
  • デザイン
  • 実装
  • テスト・サイト公開
  • 運用保守

ヒアリング

まず最初にお客様から現状の課題や作業の目的を確認するためにヒアリングを行います。

  • どんな課題を解決したいのか?
  • ターゲットは誰なのか?
  • 競合はいるのか?
  • 予算やスケジュールは?

ヒアリングした内容を元に、お客様の市場や競合について調査・分析を行っていきます。

具体的には、「競合はどのようなキーワードで上位を取っているのか」「どのくらい検索ボリューム(市場規模)があるのか」等を調べることで、サイト制作の戦略を立てたり、将来的なサイトの効果を試算していきます。

提案

ヒアリングと調査・分析した内容をもとに提案書を作成して、お客様に提案します。

提案書には、以下のような内容を記載します。

  • 現状課題と目的の整理
  • WEBサイトのコンセプト
  • デザインや機能のポイント
  • 見積もり
  • スケジュール
  • プロジェクトの進め方

ヒアリングや分析の段階で、WEBサイト以外の手段が課題解決に最適だと判明した場合は、WEBサイト制作以外の提案も行うことがあります。

この段階でお客様と合意が取れれば、契約を行いプロジェクトを開始します。

デザイン

デザイン工程では、最初にお客様にデザインに関するヒアリングを行います。

デザインに関するヒアリング
  • 基本情報のヒアリング
  • 印象に関するヒアリング
  • ターゲットのヒアリング

基本情報のヒアリング

お客様の事業やビジョン、サイト制作における期待などをお伺いします。

印象に関するヒアリング

見る人に「どういう印象をもってもらいたいか」言語と色のイメージをお伺いします。

ターゲットのヒアリング

お客様が獲得したいターゲットのイメージをお伺いします。

ヒアリング情報を元に「ワイヤーフレーム作成」→「デザインカンプ作成」の流れで作業を進めていきます。

デザイン工程では、お客様が伝えたい思いや情報を整理・言語化し、ターゲットに本質が伝わるようカタチにしていくところが最も重要です。

実装

デザインを元にコーディングやプログラミング実装を行い、仕様通りに動作するWEBサイトを制作します。

よくあるウェブ制作案件、例えばコーポレートサイトなどでは、トップページのデザインが完成した段階で、デザイン作業と並行して実装を進めることが多いです。

新規制作の案件では、レンタルサーバー契約やドメイン取得など、WEBサイトを公開するための準備も必要になるので、この時点でお客様と連携しながら進める必要があります。

テスト・サイト公開

制作したWEBサイトに対してテスト作業を行います。

テスト作業には、仕様に関する動作テストと各デバイスやブラウザで正しく表示されるかの表示チェックの2つがあります。

WEBサイトは様々なデバイス(PC、スマートフォン、タブレットなど)やブラウザ(Chrome、safari、Firefox、Edgeなど)でアクセスされる可能性があるため、表示の一貫性を確保することが重要です。

動作テストと表示チェックが終われば、サイト公開を行います。

運用保守

公開したWEBサイトに対して、内容の更新や新規コンテンツの追加、ソフトウェアのアップデートといった運用保守作業を行います。

WEBサイトは公開して終わりでなく、むしろ公開してからの方が重要です。

提案時に決めた目的を達成できるように、公開したサイトに対して課題解決や改善のための施策を実施しながら、WEBサイトを運用していく必要があります。

WEB制作の仕事内容【職種別】

次にWEB制作の中で、どのような職種があるのか職種別の仕事内容について解説します。

WEB制作の仕事では、大きく4つの職種(役割)に分けることができます。

WEB制作のよくある職種
  • WEBエンジニア
  • WEBデザイナー
  • WEBライター
  • WEBディレクター

WEBエンジニア

WEBエンジニアは、デザイナーが制作したデザインとヒアリングからまとめたサイト仕様を元に、WEBサイトを作り上げます。

WEBエンジニアの中でも役割によって以下2つの職種に分かれます。

  • マークアップエンジニア(コーダー)
  • フロンドエンドエンジニア

マークアップエンジニアは、HTML・CSSといった簡易言語を用いてWEBサイトのソースコードを制作する「コーディンング」と呼ばれる作業をメインに行います。

フロントエンドエンジニアは、コーディングに加えてJavaScriptやPHP等のプログラミング言語や CMS(WordPress等)を用いてサイトの動きや仕組みの部分を実装する作業を行います。

WEB制作では、最終的に制作したサイトをインターネット上に公開するので、サーバー周りの作業もWEBエンジニアに求められる仕事になります。

WEBデザイナー

WEBデザイナーは、お客様の要望をもとにユーザーが使いやすく、魅力的で効果的なデザインを制作します。

基本的にデザイナーは、以下の2つの制作を行います。

  • ワイヤーフレーム作成
  • デザインカンプ作成

ワイヤーフレーム作成

ワイヤーフレームは、本格的にデザインを行う前にコンテンツ抜け漏れがないか、画像を含めた配置のレイアウト、コンテンツの掲載順(優先順位)などを確認します。
色や装飾は加えずに、テキストやライン、ボックスのみで作成します。

ワイヤーフレームをしっかり作ってお客様とすり合わせしておくことで、デザインカンプ作成もスムーズに進めることができます。

「Zの法則」や「Fの法則」など、ユーザーがWEBサイトを訪れた際にどのような視線の流れでコンテンツを見ていくのかも考慮しながら、配置を決めます。

デザインカンプ作成

ワイヤーフレームを元に色や装飾を加えて最終的なWEBサイトのデザインを作成します。

単純に綺麗でおしゃれなデザインにするだけでなく、サイトの利用者にとって、見やすく使いやすい訴求力の高いデザインにする必要があります。

また、ボタンをクリックした時や画面をスクロールした際など、利用者のアクションに対する動きについてもデザインしておくことで、WEBエンジニアとの連携がスムーズになります。

WEBライター

WEBライターはWEB制作に掲載するコンテンツの文章を考える仕事です。

お客様からのヒアリング内容を元にSEOを意識した読みやすい文章を作成します。

規模の大きな案件では、専任のWEBライターを用意することもありますが、私が勤務していた制作会社では、デザイナーやディレクターがWEBライターも兼務することが多かったです。

WEBサイトの場合、お客様へのヒアリングで商品やサービスに対する思いをどれだけ引き出せるかが、質の高い独自性のあるコンテンツを作成する上でのポイントになります。

WEBディレクター

WEBディレクターは、WEB制作案件のマネジメントを行う仕事です。

具体的には、お客様の要望からプロジェクト全体の目的を明確にして、エンジニアやデザイナーに対してタスクの指示や進捗管理を行いプロジェクトを成功に導く仕事です。

ディレクション作業は多岐にわたりますが、大きく以下の3つの作業があります。

ディレクター作業
  • プロジェクトの計画と戦略立案
  • デザインや仕様の確定
  • プロジェクトの進行管理

プロジェクトの計画と戦略立案

クライアントの要件やビジョンに基づいて、プロジェクト全体の目標と戦略を定めます。

デザインや仕様の確定

お客様の要件やヒアリングから、WEBサイトのデザインや仕様に落とし込み、制作するWEBサイトの内容を確定させます。

プロジェクトの進行管理

スケジュールや予算の管理、タスクの割り当て、進捗状況のモニタリングなどを行い、プロジェクトが計画通りに進行するよう管理します。

TERU

もちろん、複数の職種をまとめて担当する人もいます。

WEB制作の仕事で必要なスキル

WEB制作において、各職種の専門スキル以外にも重要だと考えられるスキルについて解説します。

TERU

WEB制作に関わらず、IT系の仕事だと共通して求められるスキルだと思います。

WEB制作で重要なスキル
  • コミュニケーションスキル
  • 問題解決スキル
  • 分析スキル

コミュニケーションスキル

当たり前ですが仕事である以上、コミュニケーションスキルは重要です。

なぜなら一人で全て完結する仕事はないからです。

TERU

フリーランスで全て一人で行う場合でも、お客様とのコミュニケーションは必須です。

ただし、コミュニケーションスキルと言っても「普段から誰とでも仲良くなれる」みたいな一般的なコミュニケーションとは少し違います。

具体的には、お客様や一緒に仕事をするメンバーに対して、以下のような能力を提供できることが重要になります。

仕事で必要なコミュニケーションスキル
  • 関係者に対して適切な情報を適切なタイミングで伝える(報連相)
  • 相手の悩みや相談に対して耳を傾け理解する(聞く力)
  • 相手にわかりやすい表現で自分の意見を伝える(表現する力)
  • 関係者間の認識齟齬を無くして円滑に調整する(調整する力)

個人的には、初めの頃は「報連相」を意識して仕事をしていれば、後は経験値を貯めていくことで自然と身につけていける能力だと思っています。

問題解決スキル

2つ目は問題解決スキルです。

問題解決スキルとは、仕事上で課題に直面した際に、問題点を把握して効率的に解決策を見つける能力です。

問題解決の流れ
  • 問題点の整理(何が問題なのか把握)
  • 解決策を調査して試行錯誤(仮説&検証)
  • 有識者に相談
TERU

技術的な面においては、常に変化していくので、自分で調べて解決していく能力(自走力)を早くから身につけておきましょう!

WEB制作の仕事でも、仕事の進め方はある程度テンプレート化できますが、人と人との仕事なので、案件ごとに大小含め様々な問題が発生します。

その度に問題解決スキルを発揮して柔軟に対応する必要があります。

TERU

技術的な問題以外にもコミュニケーション、人間関係、予算など直面する課題の種類はたくさんあります。

分析スキル

最後に分析スキルです。

分析スキルとは、WEBサイトの制作・運用において、データやユーザーの行動を分析し、効果的な改善策を見つけ出す能力です。

WEB制作では、制作・運用に関わらず分析する場面が多いです。

よくある分析シーン
  • 自サイトのモニタリング分析
  • 競合サイトとの比較分析
  • 改善施策の効果分析
TERU

データを見るだけでなく、シンプルに競合サイトを見たり、利用してみて調査するのも分析の一つです。

データを活用して制作・運用作業を行うことで、サイトの目標達成を効率的に達成することができます。
さらに、お客様に対しても、施策や作業の説得力が増します。

WEB制作の仕事に関する疑問

WEB制作の仕事に関するよくある疑問を以下に解説します。

  • コーディングができなくてもディレクターになれますか?
  • WEBデザイナーを目指していますがコーディングスキルは必要ですか?
  • フリーランスだと一人で全部やらないといけないんですか?
  • 未経験でもWEB制作の会社に就職することはできますか?

コーディングができなくてもディレクターになれますか?

可能ですが、おすすめできません。

なぜなら、ディレクターになると、デザイナーやエンジニア、お客様とのコミュニケーション相手も増えて調整事項が格段に多くなるので、コーディングについて全く理解がない場合、作業時間や制約事項が分からず、調整するのにかなり苦労するからです。

WEBデザイナーを目指していますがコーディングスキルは必要ですか?

コーディングスキルは必須ではないですが、あったほうが便利です。

なぜなら、WEBデザイナーがコーディングスキルを身につけることで以下のメリットがあるからです。

  • コミュニケーションの向上
  • 対応領域の拡張
  • キャリアの拡張

コミュニケーションの向上

コーディングスキルを持つことで、WEBデザインをもとに制作を行うエンジニアとのコミュニケーションがスムーズになります。

TERU

エンジニアが制作時に気になるポイントを把握できるため、チーム内での制作作業を効率化できます。

また、デザインを実現するための技術的な制約や可能性についてより具体的な議論ができるため、お客様により価値のある提案ができるようになります。

対応領域の拡張

コーディングスキルを持つことで、Webデザイナー兼エンジニアとして、デザインから開発までの流れを一人でこなすことができます。

特に個人事業主やフリーランスのWEBデザイナーにとっては、デザインから開発まで一括して対応できることで単価が飛躍的に上がります。

キャリアの拡張

コーディングスキルを持つことで、デザインと開発の両方に携わることができます。

そのため、より多くのプロジェクトに参加して経験を積むことができ、自分自身のキャリアを拡張することができます。

個人的には、コーディングに興味がなくても、WEBデザイナーとして活動する上で基本的なコーディングスキルを身につけておいた方がプラスになると思います。

コーディングの勉強方法については、こちらの記事にまとめています。

フリーランスだと一人で全部やらないといけないんですか?

いいえ、一人で全部対応できなくでも大丈夫です。

一人でディレクションを含めたデザインや開発といった全てをこなせるスーパーマンのような人物も存在しますが、それはごくわずかです。

自分の専門スキルを把握して、他の人とチームを組んで案件対応するパターンが多いです。

TERU

僕もWEBデザイナーと組んでチーム案件を行なっています。

フリーランスでのWEB制作においては、デザインや制作のスキルだけでなくクライアントとのコミュニケーションやプロジェクト管理能力も重要な要素ですので、案件対応を一人で全部やるのはハードルが高いです。

フリーランスの場合、チームを組んで仕事に取り組むことが一般的なので、何でもできる人よりも「◎◎に強い人」の方が市場価値が高い傾向にあります。

TERU

まずは自分の得意分野を作り上げましょう!

案件獲得方法については、以下の記事に詳しくまとめています。

未経験でもWEB制作の会社に就職することはできますか?

はい、未経験でもWEB制作会社に就職することは可能です。

TERU

僕も未経験からWEB業界に転職しています。

WEB制作会社は数が多いので、頑張って探せば全くスキルがない状態でも会社に入ることは可能だと思います。

ただ、自分自身である程度学習を行い、ポートフォリオを準備してから就職活動を進めるのが自分にマッチした会社に就職 or 転職できる可能性が高いのでおすすめです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次