【Webサイト制作とは】Web制作の流れ・工程をWeb制作で稼ぐ僕が解説

WEB

Webサイト制作について悩んでいる人「Webサイト制作って何?Webサイトの流れや、どんな役割の人が携わってWebサイトはつくられているのかを知りたい。」

以下について解説します。※Webサイト制作とWeb制作は同じ意味です、なるべく理解しやすいように本記事では「Webサイト制作」の方を主に使っています。

本記事でわかること

  • Webサイト制作とは
  • Webサイト制作の流れ
  • Webサイト制作の職種ごとの役割

本記事の信憑性

先日Twitterで以下のツイートをしました。

とその後すぐに80万の案件を受注しました!

こんな感じで順調に案件を受注している僕ですが、web制作の学習を始めたのは2021年2月。こんな僕がしっかりと稼げる人からのアドバイスがほしいということでこの記事を書いています。

Web制作とは【Webサイトを作ること】

Web制作とは端的にはWebサイトを作ることです。Webサイトとひとことに言っても実は色々な種類のWebサイトがあります。

  • コーポレートサイト:企業の認知
  • サービスサイト:商材の認知
  • ブランディングサイト:企業や団体のイメージアップ
  • ランディングページ(LP):短期的な集客
  • ECサイト:販路拡大
  • オウンドメディア:集客や認知(長期)

上記をまとめてWebサイトと呼び、Web制作とは上記を作ることです。Webサイト制作は作るまでにかなりの時間を要します。

ここからはWebサイトを0から完成までどんな流れで行われているのかを解説していきます。

Web制作の流れ

ここからWebサイトがどのように作られているのかを解説します。以下の流れに沿ってWebサイトは作成していきます(サイトによって表現は若干違うかもしれませんが、同じ内容です)。

こちらはWeb制作の案件をこなす際にも意識すべきポイントです。

Web制作の流れ

  • 戦略立案
  • 設計
  • 制作
  • 保守・運用

上記の通りで、これらを上から順に行っていきます。つまり簡単に図にすると以下のようになります。

</img src=”https:>

1つずつ見ていきます。

戦略立案

戦略立案では主にWebサイト制作の目的や目標を決定します。

Web制作案件の場合はクライアント様より、ヒアリングを行い調査分析することによって、最終的な成果物(Webサイト)のイメージを明確にします。

設計

設計の段階では以下の2つを決める必要があります。

  • どのくらいの予算、メンバーで行うか。またどんなスケジュールですすめるか
  • Webサイトで発信する情報をどのような配置で設置するか(ワイヤーフレーム)

このようにWeb制作までの大まかな道筋を決定します。

制作

制作フェーズでは、設計の際に決めたワイヤーフレームに沿ってWebサイトを作成していきます。Webサイトの制作中にもクライアント様とこまめにコンタクトを取り合い、クライアント様の望むWebサイトの制作を進めていきます。

以下のプログラミングスキルが必要となるフェーズです。

・HTML
・CSS
・JavaScript
・PHP

上記のとおりです。

保守・運用

Webサイトは作って終わりではないです。

Webサイトがきちんと動作しているか、もっとユーザーに見てもらうサイトにするためにはどうすればよいか

上記のようなことを確認しながら、Webサイトを運用していく必要があります。ここでは主にWebマーケティングスキルが必要になります。

Webマーケティングとは以下のWebサービスを使ったマーケティングのことです。

・SEO
・リスティング広告
・アドネットワーク
・リターゲティング広告
・サーチターゲティング広告
・Googleマイビジネス
・SNS広告
・プレスリリース広告
・メール配信/LINE@
・記事広告

こちら、Web制作の学習を始めたばかりでは学習しない内容なので深く考えなくて大丈夫です。

Webサイト制作の職種ごとの役割

されここからは、各工程を行っている職種について解説していきます。下の図のようになっています。

上記はかなりざっくりとした分類ですが、以下のような役割(職種)があると言えます。

Web制作に関わる職種

  • ディレクター
  • プランナー
  • エンジニア
  • アナリスト

上記のとおりです。1つずつ詳しく解説していきます。

ディレクター

ディレクターは簡単に言うと、Webサイト制作を統括する人のことです。

スケジュールの管理や、クライアントと制作者の情報共有、各工程への指示出しなど

ディレクターが行う、Webサイト制作の業務内容をディレクションといったりします。ディレクターに必要なスキルについて解説します。

統括する力

前述したようにWebサイトの制作には、通常多くの人が携わります。そういった人たちをまとめるのがディレクターの仕事です。

1つの成果物を沢山の人で作る

ということになるので、方向性をきちんと揃えること、クライアントからの意見を素早くおろすことなどが必要になってきます。

チームメンバーの能力把握

さきほど、ディレクターはクライアントと制作側の橋渡しをするというふうに述べました。その際にメンバーのスキルを把握しておくことが重要です。

何が出来て、何が出来ないのか

これを把握しておかないとクライアントに対しての提案の質が落ちるだけでなく、クライアントからの要求に即座に回答できないなどの、副次的なよくない影響も出てきてしまいます。

ですので、日頃からチームメンバーやプロジェクトの理解を深めておくことが重要です。

コミュニケーション能力

こちらは特に必須スキルです。Webサイト制作では、コーディングを主に行うエンジニアを始めとして、あまり対外的にコミュニケーションを取ることのない職種が一般的ですが、ディレクターは違います。コミュニケーション能力が必要となるのは以下の場面。

  • クライアントからのヒアリング
  • チームメンバーとのコミュニケーション

上記のとおりです。これが出来ないと、ディレクションは困難です。

プランナー

プランナーはWebサイト制作において、最も上流の工程の仕事です。

サイトの方向性や、どの程度デザイン案が固まっているのかを確認する

つまりクライアントからのヒアリングを行い、作りたいWebサイトの概略を掴むというのが内容となります。

上記のとおりです。

「え、Webディレクターと何が違うの?」

Webディレクターも確かにクライアントからのヒアリングをおこない、デザインをプランニングしたりするのですが、どちらかというと制作側向けにデザインを作成する感じです。

Webディレクターがデザインカンプを作成することが多い

つまり、プランナーがWebサイトの方向性を決める→ディレクターがデザイン案を作成→エンジニアがコーディングといった感じです。

ちなみにコミュニケーション能力が必要なスキルですね。

エンジニア

エンジニアはプログラミングを利用して、ものづくりを行う人のことです。そしてWeb制作においてはエンジニアはさらに以下のように細分化されます。

  • フロントエンジニア
  • バックエンドエンジニア
  • マークアップエンジニア

それぞれ少し解説します。

フロントエンジニア

主にはJavaScript、PHP、CSSなどのユーザーインターフェースを構築する言語を主に扱います。デザインカンプを形にしていきます。現在、当ブログもそうなのですがスマホからの流入が多いので、スマホユーザにも適したデザインでのWebサイト作成が必要となります。

バックエンドエンジニア

サーバーサイドの処理を指し、一般的にユーザーの目に見えることのないサーバーやデータベース、機能、処理を担うプログラムやモジュールなど、仕組みや機能、部品のことを指します。

マークアップエンジニア

HTMLとCSSにより、WEBデザイナーが設計したWebサイトのデザインに忠実にプログラムを実行します。ユーザビリティへの配慮や、SEO対策をしっかりと施したコーディングが必要になります、フロントエンジニアがこの分野も兼業する場合もあります。

アナリスト

作成したWebサイトのアクセス解析を行います。例えば以下のようなツールを使って、解析を行います。

  • GA(グーグルアナリティクス)
  • Google Search Console(グーグルサーチコンソール)

読者がどの記事に集まっているのか?どのくらいの時間、記事を読んでいるのかなどを解析します。

まとめ

本記事ではWebサイト制作について解説しました。重要な点は以下になります。

Webサイトとは

  • コーポレートサイト:企業の認知
  • サービスサイト:商材の認知
  • ブランディングサイト:企業や団体のイメージアップ
  • ランディングページ(LP):短期的な集客
  • ECサイト:販路拡大
  • オウンドメディア:集客や認知(長期)

Web制作の流れ

  • 戦略立案
  • 設計
  • 制作
  • 保守・運用

Web制作に関わる職種

  • ディレクター
  • プランナー
  • エンジニア
  • アナリスト

本記事は以上になります。なお、TwitterもやっていましてWeb制作案件を受注するためのノウハウを発信していますので、以下よりフォローお願い致します。

>>Twitterはこちら

また本記事の画像は以下のサイトより使用しています。

Illustration by Freepik Storyset

最後になりますが、以下のLstepでは営業術・チーム化・自動化を発信しております。フォローすると時給が大幅に上がります!

>>Lstepへのログインはこちら