料金表はこちら
Web制作とは？

WEB制作とは？主な制作の流れを解説！

本記事では、Web制作とは何か、について解説します。

Web制作は主にWebサイトを制作する業務です。
業務は分担して作業することが一般的で、1つのサイトを制作する上で、複数人が動きます。

Web制作の中で、各職種の人がそれぞれの業務内容を担っているか、どのような流れでWebサイトが公開されていくのかについて書いていきます。

Web制作の分担は主に3種類

Web制作を担う職種は、主に下記の3種類です。

  • Webディレクター
  • Webデザイナー
  • Webコーダー

それぞれ解説していきます。

Webディレクターの業務内容

Webディレクターの業務内容は、Webサイトが欲しい顧客への営業や、顧客獲得後の制作面に関するコミュニケーション、制作物の企画やマーケティングにおける戦略立案、制作物の骨組み（ワイヤーフレーム）の作成、制作管理や公開までの管理、デザイナーやコーダーへの指示出し、公開後の運用周りなど多岐に渡ります。

つまり、案件の受注からサイト公開までの一連の流れを担う業種です。

ディレクターの中にも得意な分野があり、営業や顧客獲得が得意なマーケティング寄りのディレクター、制作物を公開まで持っていくための管理が得意な制作寄りディレクターなど、職種の中でも分かれる印象です。

様々な人とコミュニケーションをとることが多いので、コミュニケーション能力が必要と言われており、制作周りにも詳しいと尚良いでしょう。

Webデザイナーの業務内容

Webデザイナーの業務内容は、ディレクターが設計したワイヤーフレームから、Webサイトのデザインを起こすことです。

Webデザインは、「意匠」を表現すること・コーディングをしやすい状態にするための「設計」を行うことの両面が求められるかと思います。

「意匠」を表現するために、お客さんが表現したい部分を汲み取りつつ、XDやFigmaなどのデザインツールで、デザインしていきます。

近年は、レスポンシブ化（PC表示・スマホ表示どちらでも綺麗で見やすく表示すること）が一般的になってきており、その工数をなるべく減らすための「設計」の方法も知っておく必要があります。

コーディングのことを詳しく知っていると、自然とレスポンシブ化しやすい設計というのが見えてくるでしょう。

また、コーディングなしでもサイトを公開できる「ノーコード」というツールがあります。ノーコードでデザインとコーディングを一貫して対応し、そのままサイト公開する、といったデザイナーさんもいます。

Webコーダーの業務内容

Webコーダーの業務内容は、Webデザインから実装を行うことです。

デザインツールでデザインしたものをそのまま公開するわけではなく、デザインをWebブラウザ上で閲覧できるようにする必要があります。
コーダーはコードを書いて「デザイン再現」と「機能の実装」を行います。

「デザイン再現」については、テキストの大きさ、色味の指定、画面幅の基準など、デザインツールから情報を確認しつつコードに落とし込んだり、画像を適切な形式で出力して、読み込ませる作業になります。

「機能の実装」は、別ページへのリンクや、ホバー（PC上でカーソルをボタンなどに乗っける時）のデザインの動き、スクロール時の物体の動きなどを実装する作業です。

HTML、CSS、JavaScript、PHPといった、コーディングにおける言語が主に使われますが、それ以外の言語が使われることもあります。

Webコーダーは、主に表示面の調整を行うことが多いですが、システムの実装が必要な場合は、その対応も含まれます。

Web制作の一般的な流れ

ディレクター

  1. 顧客を獲得
  2. 顧客へのヒアリング
  3. スケジュールの作成
  4. 戦略を企画
  5. ワイヤーフレームの作成
  6. 素材（Webサイトに表示する画像の加工前の状態）、表示するテキストの整理
  7. URLやサイトのドメイン決定
  8. デザイナー、コーダーとのすり合わせ・作業割り振り

デザイナー

  1. 素材加工し、Webサイトに載せる用の画像を作成
  2. （コーディング手法にもよるが）共通パーツの作成
  3. ワイヤーフレームからデザイン作成

コーダー

  1. デザインから情報を取得、画像を書き出し、コードを書く。基本はローカルで作業。
  2. ローカル作業が終わったら、テストサーバーにアップロード。
  3. 各ブラウザ、PCやスマホで表示崩れやシステム・機能の不具合がないか確認
  4. 本番化して公開（公開前にセキュリティのチェックなどが挟む可能性あり）

あくまで、「一般的に」ですが、このような流れでWebサイトが作られます。
お分かりいただけたかと思いますが、Webサイトをひとつ作る上でも、多岐にわたって業務があります。

これらのフローをなるべく短縮化したり、戦略立案を省いて制作のみとすることで、スピード制作を行う企業さんもあれば、忠実にフローを守り、長めにスケジュールをとる企業さんもあります。

近年、ホームページの値段、制作にかかる日数や構成が多様化しているのも、このフローの入れ替えや短縮、もしくは他に必要なフローを追加していることが挙げられるかと思います。

また、ノーコードの発展も含めて、デザイナーさんがコーディングまで担うことが可能となったり、ワイヤーフレーム作成からサイト公開までを1つのツールで行えたりと幅が広がり、多様化はますます増えていくかと考えられます。

もし、Web制作をお願いしたい企業さんや、Web制作をこれから作り手として志望している方は、これらのフローを踏まえた上で、多岐にわたる中から自分（または自分の事業）に合った制作方法を考えていくのがオススメです。