公開日時:2022.05.18

最終更新日:2022/07/08

【初心者の方も安心】Web制作の流れをご紹介!

ワイヤー

こんにちは!
今日はなぜかスタミナがないGlobal Web Designの福田です(笑)

Webサイトを制作会社などに頼みたいときなどに

「どういう流れでWeb制作するの?」
「Web制作にかかる期間はどのくらい?」

といった疑問が出てくると思います。

今回はそんな方のためにWeb制作の流れをご紹介します!

Web制作の流れ

Web制作の流れについて、まず簡単にご紹介すると以下の順序になります。

  1. お問い合わせ
  2. ヒヤリング
  3. 企画提案・お見積り
  4. お申し込み・ご契約
  5. サイト設計
  6. デザイン案の作成
  7. コーディング
  8. お客様レビュー確認
  9. 公開準備
  10. 納品・公開

だいたいの制作会社はこのような流れになっています。
①から④までが、選定・契約期間になり、⑤から⑩が制作期間となります。

選定・契約期間期間にかかる目安は一般的に3〜4週間ほどです。
制作期間は一般的に2〜3ヶ月ほどかかります。
ここから1つずつ見ていきましょう!

お問い合わせ

最初にお電話やお問い合わせフォームなどからお問合せをいただきます。

Web制作の流れの中で大切なことは、企画の段階でWebサイトの「目的」「ターゲット」を明確にすることです。

Web制作会社は検索するとたくさん件数が出てきます。
Web制作会社を選ぶときは基本的に制作会社選びは自分で情報収集しなければいけません。

Web制作会社にもさまざまな強みがあります。

「ECサイトの制作・運用が得意」
「採用情報に強い」
「WEB集客を得意としたマーケティングに強い」
「Webサイトの動き(アニメーション)が得意」

などあります。
「目的」「ターゲット」を明確にすることで、どのWeb制作会社がいいか絞り込みを行うことができます。

ヒヤリング

お問い合わせの次に、ヒアリングを行います。
現在Webサイトを運用しているのであれば、Webサイトの状況などを確認したり、Webサイトをどのように運用していくかやWebサイトの目的などをヒヤリングしていきます。


Webサイトの目的は具体的に以下のものが挙げられます。

  • 集客
    自分の商品やサービスなどを新規の顧客に知ってもらう。商品やサービスを興味や関心を高めてもらう(問い合わせ数、商談数、受注数など)
  • 会社概要
    Webサイトで会社に好印象を与えたり、会社の信用性を高くする(検索順位、訪問数など)
  • 採用
    Webサイトで採用を促進したり、企業の理解を深める(求人応募、採用人数)

Webサイトに複数の目的があると、Webサイトの目的がぶれてしまうので目的をしぼることで、Web制作会社と目的を共有しやすくなります。

またどのような人にWebサイトを見てほしいのか「ターゲット」を決めていきます。
Web業界では「ペルソナ」と呼ばれる人物像を決めていきます。
「ターゲット」を明確にすることによって、Webサイトのデザインやコーディングなども変わっていきます。

企画提案・お見積り

ヒヤリングをもとにWebサイトの企画をご提案します。
Web制作会社はクライアントの同業・競合他社のリサーチ、クライアントのアイデア出し、過去に制作した事例やデーター、ノウハウなどをもとに企画提案を行います。

企画内容に問題がなければ、見積書をお渡しします。
見積書に問題がなければ、制作段階に移ります。

サイト設計

企画内容をもとに、Webサイトの設計を行います。

Web制作会社とクライアントはWebサイトのコンセプト、テーマ、サイト構造の設計、掲載コンテンツのボリュームなどを具体的に決めていきます。

サイト構造の設計ではサイトマップを作成し、Webサイトの構造をわかりやすくしていきます。
Webサイトは完成間近になり、大幅な修正等があると追加費用が発生したり、公開の期日が延期となったりする場合があります。
サイトマップの構成はしっかりと確認するようにしましょう。

デザイン案の作成

サイト設計が完了したらデザイン作成に移ります。
Webサイトの目的からデザインのコンセプトを決め、サイト設計に対して適切なビジュアルを落とし込むことでデザインを作っていきます。

デザインコンセプトの設計は以下のようなものがあります。

  • Webサイトの方向性をまとめたテキスト
  • Webサイトとのメインとなる色
  • フォントの決定
  • 画像や動画などの決定
  • レイアウトの決定
  • 共通するバーツの決定

画像や動画などの素材を準備する

デザインコンセプトに沿って、ウェブサイトで使用する画像や動画、テキスト、イラストなどを準備します。
写真などはすでに持っているもので足りない場合は撮影などを行い素材を用意することもあります。

デザインカンプの作成

さまざまな素材の準備ができたら、各ページのデザインを作成します。
出来上がったデザインはデザインカンプと呼ばれます。
ほとんどの場合、Webサイトの顔となるトップページのデザインから作成します。

デザインコンセプトに沿ってデザインカンプは作成されますが、ビジュアル化したときの印象のズレや違和感がないかを確認しながらデザイン作成を行います。

コーディング

デザインが完成したら、WebサイトをWebブラウザで表示できるようにコーディングをして構築していきます。
コーディングにはHTML・CSS・Javascriptをコーディングする「フロントエンド」、PHP、サーバーを使用する「バックエンド」に分かれます。

フロントエンド

デザインカンプと同じものを上ブラウザで見るようにする、ソースコードと呼ばれる言語で記述をしていく作業です。
Webページに表示されるテキストや画像、装飾や動きなども実装していきます。
主にHTML・CSS・Javascriptといった言語を使い構築されています。

バックエンド

バックエンドとはサーバーで動くプログラムを開発する工程です。
目に見えない部分の作業になるのであまりピンと来る方はは少ないと思います。

PHPやMySQLなどをつかってシステム面を構築していきます。
よくあるシステムとして、

  • 予約サービスなどのお店への連携
  • WordPressなどのCMSの構築
  • サーバー設定やドメイン設定

などを行います。

お客様レビュー確認

フロントエンドバックエンドの作業が完了したら、さまざまなテストを行います。
ユーザがWebサイトを見る環境は様々あります。
今日のユーザにもデザイン通りの表示が見えているか、仕様通りにシステムが動作しているかチェックを行い、問題があれば修正をします。

修正が全くない事は非常に少ないので、テストと修正期間のスケジュールも確保しておくといいでしょう。

納品・公開

テスト終了後、クライアントにもチェックをしてもらい修正がなければ公開作業を行います。
公開当日は、デザイナー、エンジニアのどちらも稼働できるように手配しておくといいでしょう。

様々なテストを行って公開作業をしますが、予想外の要因でエラー等が発生することもあるので、問題があれば即座に調整できるように体制を整えておく必要があります。

まとめ

いかがでしたでしょうか?
今回はWeb制作の流れについてご紹介しました。

Web制作の流れは基本的にどの制作会社も変わらないと思いますが、納期しだいでWeb制作の流れはやくなったり、同時進行で進んだりすることもあります。
Web制作は基本的に1〜2ヶ月ほどかかりますが、ページ数やシステムなどで3〜4ヶ月ほどかかる場合もあります。
Web制作にあたって、制作期間を決めて制作会社と打ち合わせをするのがいいでしょう!

Web制作する人、これからWeb制作を頼む方も、Web制作の流れについて参考になれば嬉しいです!

この記事を書いた人
福田 弦

福田 弦

2020年にGlobal Web Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。趣味はドラム。

SNSでシェア