Web制作会社 THINkBALがデジタル全般の情報をお届けするデジタルマガジンです。東京と埼玉を拠点としたWeb制作会社|株式会社THINkBAL
Web制作
Update: 2024/4/13

【プロが解説】Webサイト構築の制作手順や制作費用の相場

コーポレートサイトやECサイトなど、ビジネス用のWebサイトは、個人のWebサイトと違って、求められる要素や制作の流れ、必要なスキルまで大きく異なります。

  • ビジネス用のWebサイトを構築したいが、どのようにすれば良いのか分からない人
  • 個人や自社で構築するべきか、外注したほうが良いのか迷っている人
  • 便利なツールがあれば知りたい人

企業でWebサイトを制作する場合は、それなりのスキルが必要になります。どのようにWebサイトを構築すれば良いのか、費用や流れについて解説します。

Webサイト制作のプロが貴社のお悩みを解決します! データ分析、UX/UI設計に基づく戦略とデザインで伝えたい価値を伝わるカタチに。 ビジネス成果に貢献するWebサイト制作・構築を提供します。
\まずは無料相談!2営業日以内に返信/
Webサイトの制作・改善を相談する

Webサイト構築とは?

PCの前で相談している人
Webサイト構築のポイント
  • ビジネス用Webサイトの目的は「集客」である
  • 目的を達成するためのWebサイトを設計・構築
  • いかに見込み客をゴールまで誘導できるかが重要

ビジネス用Webサイトの目的は「集客」です。そして、自社製品の購入やサービスの利用、あるいは資料請求など次のプロセスにつながる状態をゴールとします。まさに、Webマーケティングの入口となる部分です。

「Webサイトの構築」とは、集客できる仕組みを作るためにWebサイトを制作する工程全般を指します。Webサイトを作れるだけでなく、ビジネスやWebマーケティングについての理解やノウハウを基にした設計・構築が必要です。

Webサイトを訪れた見込み客(ターゲット)をゴールへ誘導するには、途中で離脱するのを防がなければいけません。「自社の商品・サービスの魅力やメリットをアピールする」「いつでもゴールできるようにする」といった導線を考える必要があります。

ほかにも文字のサイズや色使い、ボタンの配置など、見やすさや使い勝手にも配慮しなければいけません。

Webサイト構築の手順や流れ

PCを制作するのイラスト

続いて、どのようにWebサイトが構築されるのか、手順や流れを見てみましょう。

Webサイト構築の手順のポイント
  • Webサイトの構築には、企画・設計・制作・リリースという4つのプロセスがある
  • リリース後も運用や保守管理といった作業が必要

企画

まずは、プロジェクトを立ち上げて企画を立案し、Webサイトを制作する目的を明確にします。たとえば、「企業の認知度を高める」「商品の購入やサービスの利用に結びつける」などです。

目的が決まったら、達成すべき目標(ゴール)を設定します。アクセス数や売上、成約率など、数値で設定するのが一般的です。

目的やゴールに応じて、ターゲットも絞り込みます。そのために必要となるのが「ペルソナ」の作成です。年代や性別だけでなく、職業や趣味、行動パターンに至るまで細かく設定し、あたかもペルソナが実在するかのように作成します。ペルソナを作成すれば、プロジェクトの参加者間でターゲットの共有が容易です。

ターゲットを絞り込めたら、どのような施策が有効か分析します。Webサイトが完成しても、存在が知られていなければ見てもらえません。ターゲットによって、SNSや検索結果、記事での紹介など、主となる入口を決めます

外部に設計・制作を依頼するのであれば、企画する側で盛り込みたい要素も決めなければいけません。設計・制作する側から提案される場合もありますが、目的に応じたWebサイトを構築するのであれば、自分たちでも考えておきたいところです。

こうして立案された企画は、「計画書」(設計・制作側からヒアリングを受けた場合は「要件定義書」)にまとめられ、設計・制作側に引き継がれます。

サイトの競合分析について詳しく知りたい人はこちらも併せてご覧ください。

おすすめの競合分析ツールについて詳しく知りたい人はこちらをご覧ください。

設計

PCの画面から飛び出しているサイト

次に設計です。計画書や要件定義書に従って、具体的にWebサイトの構成や画面のレイアウト、搭載する機能などを決めます。

通常、ひとつのWebサイトは複数のページで構成されますが、手当たり次第に作成するのは見る人が混乱したり、無駄に費用が発生したりする原因です。必要最低限のページで、目的を果たせることが求められます。

たとえば、企業の認知度を高めるのが目的なら、トップページを中心として、内容ごとに各ページを作成し、それぞれに行き来できるようリンクを貼るスタイルです。

商品の購入やサービスの利用が目的なら、一直線でゴールにたどり着けるようにします。どうしても別の情報を表示させる必要性があるときは、ページごと移動するのではなく、ポップアップ形式にして別画面で表示させるといった具合です。

画面のレイアウトは、Webサイトの構成に基づいて、「ワイヤーフレーム」という配置図を作成するところから始まります。ユーザーにとって、どこに何があるのか直感的に分かるよう、配置しなければいけません。

ワイヤーフレームを作成して、レイアウトが決まったら、コンセプトに基づいてキーとなるフォントや色などを設定し、Webサイトをデザインします。Webサイトに掲載する文章や画像も、この時点までに準備しておきたいところです。

Webサイトの構築で必要なワイヤフレームの作成方法について詳しく知りたい人はこちらも併せてご覧ください。

制作

画面のレイアウトやデザインが決まったら、制作に入ります。Webサイトは、複数のプログラムの集合体です。HTMLやCSSといったマークアップ言語でデザインし、JavaScriptやPHPで動きをもたらします。

ホームページ作成ソフトを使えば、簡単にWebサイトを作れますが、環境によって表示が崩れたり、正しく動かなかったりするのが難点です。どんな環境でも正確に、意図したとおりに表示したり、動かしたりするなら、プログラミングで作成するのが適しています。

もちろん、一からプログラミングだけでWebサイトを構築するのは、手間がかかり、人件費がかさむ原因です。そこで、あらかじめ必要な部品をまとめてテンプレートにした「フレームワーク」や、コンテンツを一元管理する「CMS」を活用して、制作を簡略化する場合もあります。

最近では、パソコン用とスマートフォン用にWebサイトを作成するのが必須です。別々に作成するのは手間がかかるので、それぞれのフレームワークを用意して、コンテンツはCMSから呼び出して配置するという手法が増えています。

リリース

最後にWebサイトのリリース(公開)です。プレスリリースやSNS、検索サイトなどを通して、幅広くWebサイトの開設を周知させます。

もちろん、リリースして終わりではありません。どんなに完成度を高めても、リリースしないと分からないエラーもあります。特定の環境で正しく表示されなかったり、SNSとの連携がうまくいかなかったりするなどです。リリースしてからしばらくは、こうしたエラーの修正作業に追われます。

ある程度、安定して運用できるようになったら、今度は成果の確認です。どこからアクセスしているのか、Webサイト内でどのように行動しているのか、どれくらいゴールに至っているのか確認して、問題があれば改善します。

また、何度も訪れてもらうようにするには、こまめな更新が欠かせません。適宜、最新の情報と入れ替えます。それは、認知度を高めるためのコーポレートサイトでも同じです。並行してブログやSNSの運用も必要になるでしょう。

さらに、Webサイトは年中無休で24時間閲覧されますから、万が一のトラブルに備えて保守管理もしなければいけません。ユーザーがWebサイトを訪れたときに閲覧できないのは避けたいところです。

このように、リリース後も運用のために取り組まなければいけないことが、数多くあります。

Webサイトの構築手段を選ぼう

PC設計のイラスト

Webサイトを構築する手段は、「自分で制作する」か「外注する」かの2種類です。それぞれのメリットやデメリットを知っておきましょう。

Webサイト構築手段のポイント
  • 自分で制作するのは費用を抑えられるが、専門的な知識が必要で手間もかかる
  • 外注するのは高品質なWebサイトを作れて手間もかからないが、高額の費用が発生し、更新するのも時間がかかる
  • ツールの活用で、ある程度のWebサイトを作れるが、個性を出しづらい

自分で制作する

個人あるいは自社で制作するのは、細部に至るまで思いどおりのWebサイトを作れるのがメリットです。新しい情報もすぐに反映させられます。制作にかかる費用も給与の範囲内で済ませられるでしょう。

一方で、制作にあたっては専門の知識が必要になるのがデメリットです。先述のとおり、ホームページ作成ソフトでは、できることが限られますし、意図したとおりの表示や動きができない場合もあります。そのようなWebサイトは、安っぽく見えますし、セキュリティ面でも不安です。

ビジネス用のWebサイトを制作するなら、少なくともHTMLやCSS、JavaScript、PHPの知識が求められます。Webサイトを公開するサーバーの手配も必要です。Webマーケティングのノウハウもある方が良いでしょう。

また、Webサイトはリリースで終わりではなく、その後も運用や保守管理が必要です。ほかの業務と兼任するのは大きな負担になります。

企業によっては、そのための人材を確保したり、専任として雇用したりするのが難しいかもしれません。担当者が退職すると、Webサイトの運営や保守管理が行き詰まるリスクもあります。

以上のことから、多くの企業にとって、自社だけでWebサイトを構築するのは、あまり現実的ではないかもしれません。

外注する

PCの構築に必要なもの

Webサイトの制作会社に外注にすると、自社の負担を軽減できて、本来の業務に専念できます。制作会社は知識やノウハウが豊富ですから、目的に合った品質の高いWebサイトを制作してくれるでしょう。リリース後の保守管理まで引き受けてくれる制作会社もあります。

もちろん費用はかかりますし、自社で制作するよりもはるかに高くなる可能性もあります。一方で、自社で専用の人材を確保する必要がなく、担当者の退職で運用や保守管理が途絶える心配もありません。

外注すると、更新のたびに連絡してコンテンツを送り、掲載されるのを待たなければいけません。ECサイトのように、更新の頻度が多いと、大きな足枷となります。トラブルが発生したときも同様です。

自社に合った制作会社を選んでも、目的や意図が漠然としていては、事前にヒアリングが行われても正しく伝わらないでしょう。たとえ外注するとしても、企画については、細部まで明確にしておく必要があります。

ツールを利用する

自社で制作する場合は、ツールの利用によって、手間を軽減できます。例えば、フレームワークやCMSです。

フレームワークは、あらかじめWebサイトの表示や動作に必要な部品が用意されており、そのためのプログラミングをする手間が省けます。入力フォームなどの特殊な部品も、わざわざJava Scriptで作成する必要がありません。

CMSは、コンテンツを一元管理しており、ページ上で呼び出す指示をプログラミングするだけで表示できます。ページごとにコンテンツを埋め込む必要がなく、更新するときはCMS内で作業するだけで各ページに反映されるのが便利です。

WordPressが有名ですが、HeartCoreやNOREN、Adobe Experience Managerなどビジネス向けのCMSもあります。

ただし、こうしたツールは、ほかの企業でも利用されているため、どうしてもレイアウトやデザインが似通ってしまうのがデメリットです。また、利用にあたっては、それぞれの知識が必要になります。あくまでも、ツールのひとつに過ぎないので、Webサイトとしてまとめ上げるにはHTMLやCSSの知識も欠かせません。

Webサイト構築の費用

お金の入った袋

では、Webサイトの構築を外注した場合、どれくらいの費用がかかるのか見てみましょう。

Webサイト構築費用のポイント
  • テンプレートを利用すれば、数万円から構築できる
  • オリジナルデザインであれば、最低でも20万円以上が目安
  • Webサイトの種類によって費用は異なり、ECサイトは高額になりやすい

テンプレートを利用する場合の費用

Webサイトを制作するときの費用は、作業量(工数)によって左右されます。当然、ページ数を多くしたり、凝った内容にしたりするなどして工数が多くなれば、費用は高額になるでしょう。

ただし、CMSなどを利用すれば、工数を少なくできるので、費用を抑えられます。たとえば、ランディングページの制作などであれば、テンプレートのあるツールをしようすれば数万円からの制作が可能です。もちろん、カスタマイズしたり、機能を拡張したりするのであれば、費用は上乗せされます。

オリジナルデザインの場合の費用

オリジナルのデザインにこだわるなら、一からプログラムを組まなければいけないので、工数が増えて費用も比例して高くなる傾向にあります。

内容にもよりますが、最低でも50万円以上はかかり、ページ数や機能性などにより100万円以上かかるケースも珍しくありません。運用や保守管理まで依頼すると、より費用もかかってくるでしょう。

費用は高いですが、テンプレートを使わずに一から全てを構築できるので、自社の理想とするデザインや機能性を持たせることができます。また、ターゲットにあった機能や動線を自分で組むことができるので、ユーザビリティを高くできるといったメリットもあります。企業の顔となるコーポレートサイトや採用サイト、製品・サービスサイトなどはオリジナルでの作成をおすすめします。

Webサイトの構築はフレームワークを使おう

サイト構造のイラスト
フレームワークのポイント
  • プログラミングする必要がないので手間を省ける
  • 仕様が統一されているので、同じルールの中で制作できる

フレームワークには、Webサイトを構築する上で必要な部品が揃っています。配置を決めるHTMLや、デザインするCSS、動作するためのJava Scriptなど、それぞれのフレームワークがあるほどです。これらをひとまとめにしたフレームワークもあります。

初心者向けから、上級者向けまで幅広くラインアップされているので、目的やスキルに合ったものを選ぶと良いでしょう。先述のCMSと組み合わせれば、さらにWebサイトの構築が簡単になります。

フレームワークは、チームで制作するときも便利です。使える言語が決まっているなど、仕様が統一されているので、誰もが同じルールの中で制作できます。特定のメンバーにスキル面で依存するのも防げるでしょう。余計なプログラムが入り込む余地もないので、Webサイトの品質も担保できます。

制作の手間を省けるだけでなく、リリース後に更新したり修正したりするといったメンテナンスのときも、迷う心配がありません。フレームワークについて理解していれば、誰でも同じ作業ができるようになります。

Webサイト構築に必要なスキルや機能

スキルアップと書いた積み木

続いて、自分や自社でWebサイトを構築するなら、どのようなスキルやツール、機能が必要になるのか見てみましょう。

Webサイト構築に必要なスキルのポイント
  • テンプレートを利用すれば、数万円から構築できる
  • オリジナルデザインであれば、最低でも20万円以上が目安
  • Webサイトの種類によって費用は異なり、ECサイトは高額になりやすい

スキル面

まず、Webサイトを作る上で基本となるのがHTMLです。コンテンツを「タグ」で囲むと、タグの機能とおりに表示されます。タグの数は、HTML5なら108種類です。

CSSは、ページのスタイルを記述するコードです。背景や文章の色、フォントの種類や大きさなどを、専用の言語で記述し、CSSファイルを作成します。HTMLファイルの中にCSSファイルを読み込むコードを記載すると、各ページごとに設定しなくても、スタイルが反映される仕組みです。

JavaScriptは、Webサイトに動きを持たせるときに使われます。例えば、ポップアップやアラートを表示するときです。プログラミング言語のJavaとは、別物となります。HTML言語の中にJavaScriptを含めることもできますし、CSSと同様にJavaScriptファイルを作成して、HTMLファイルの実行時に読み込むことも可能です。

PHPは、動的にWebサイトを作成できます。

HTMLやCSS、JavaScriptは、Webサイトを表示するブラウザ上で実行されるため、同じブラウザを使っていれば、どのユーザーも画面の内容は同じです。一方、PHPはユーザーの行動によって、表示される画面が変わります。例えば、ECサイトの注文で確認画面が表示されるのはPHPによるものです。

ツールを使うとしても、これらの知識はあったほうが、Webサイトを柔軟に制作できるでしょう。

ツール・機能面

ツールの中でも、ホームページ作成ソフトは、導入コストが安く、直感的に操作できるのがメリットです。ただし、細かく調整したり、凝った内容にしたりするなら、HTMLやCSSの記述が必要になります。

フレームワークやCMSは、Webサイトの構築を簡略化できるので、作業時間の短縮が可能です。コーポレートサイト用やECサイト用など、各種用意されているので、Webサイトの目的に合ったものを利用すると良いでしょう。利用にあたっては、HTMLやCSS、JavaScript、PHPの知識が求められます。

HTMLやCSS、JavaScript、PHPは、メモ帳やWordでも記述できますが、HTMLエディタを使うと便利です。タグやクラスなどを自動的に色分けしてくれたり、エラーを判別して修正を促してくれたりします。

ほかにも、独自にボタンや背景をデザインするのであれば、Illustratorなどのドローツールがあるほうが良いでしょう。Wordや、OSに付属のペイントソフトでも作成できますが、ドローツールは拡大・縮小しても線が常に滑らかです。画像を図形の集合体として編集するからこそ実現できます。

また、Webサイトに掲載する画像を加工するならPhotoshopなどの画像編集ソフトが便利です。色や明るさの補正、写真の切り抜きや合成などができます。

Webサイト構築は個人でもできる?

パズルを持った人達のイラスト

最後に、Webサイトは個人または社内だけで構築すべきか、外注すべきか考えてみましょう。

個人でWebサイト構築をする際のポイント
  • 複数の担当者がいて分業するなら可能
  • ひとりで構築するのは時間がかかって、現実的ではない

専門分野で分かれて作業する分には可能

社内に複数の担当者がいて、プログラミング担当、デザイン担当、原稿や写真担当といった具合に分業するのであれば、自社だけでもWebサイトを構築できるでしょう。担当者のスキルによっては、高品質で見映えの良いものが作れるはずです。スキルが足りなくても、フレームワークやCMSの活用で、ある程度はカバーできます。

ただし、大規模なWebサイトを作成するとなれば、より高度なスキルが求められ、リリース前のテストや、リリース後の運用にも手間がかかり、さらに多くの人員が必要です。業務の合間に行うには負担が大きいでしょう。

全ての工程を1人でやるには時間がかかる

1人の人力ででWebサイトを構築するのは、時間がかかり、あまり現実的ではありません。ビジネス用のWebサイトであれば、機能性やデザインなどもこだわる傾向にありやらなければいけないことが多くなるので、スケジュールどおりにリリースするのはむずかしいでしょう。スキルのある人員を複数名確保することも簡単なことではありません。そういったスキル人材が集まった、デジタルマーケティング全般で活躍をしている企業などに依頼ができると、制作から運用〜その後のマーケティングまでを一括することができるので、おすすめです。

ホームページ作成ソフトや、クラウド型のWeb制作プラットフォームを活用するなら、ひとりでも構築ができるかもしれません。レイアウトやデザインのテンプレートが豊富で、コンテンツをドラッグ&ドロップしたり、機能を追加したりするだけで、Webサイトが完成するからです。

Webサイト構築は業者に依頼がおすすめ!

握手をしているサラリーマンのイラスト
Webサイト制作を業者に依頼する際のポイント
  • 専門業者に依頼するほうが、目的に合ったWebサイトを構築できる
  • 正確さや安全性のためにも、専門業者に依頼するほうが安心
  • 専用の人員が不要で、本来の業務に専念できる

ここまで紹介したとおり、個人あるいは自社でWebサイトを構築するのも不可能ではありませんが、専門業者に依頼するほうが目的に合ったものを作れます。専門業者はスキルを備えており、ノウハウも豊富だからです。

ビジネス用のWebサイトは、正確さや安全性を求められています。これらが損なわれると、途端に信用を失ってしまうでしょう。特に、最近はWebサイトのセキュリティ対策が重視されています。その点からも、専門業者に依頼をするほうが安心です。

専門業者の中には、制作だけでなく、企画から運用、保守管理まで引き受けてくれるところもあります。確かに費用はかかりますが、自社で人員を用意する必要はありません。社員は本来の業務に専念できます。費用対効果を考えると、ほとんどの場合において、外注のほうが適しているでしょう。

THINKBALでは、大手有名企業のWebサイトを構築してきた実績が豊富です。制作だけでなく、企画から制作、運用、分析改善まで幅広く対応しております。目的を達成するための提案も可能です。

Webマーケティングに基づいて戦略を考え、成功できるWebサイトを構築いたしますので、まずはお気軽にお問い合せください。

まとめ

この記事のまとめ
  • 専門業者に依頼するほうが、目的に合ったWebサイトを構築できる
  • 正確さや安全性のためにも、専門業者に依頼するほうが安心
  • 専用の人員が不要で、本来の業務に専念できると考えれば、決して割高ではない

Webサイトの構築は、専門業者に外注するのがおすすめです。費用はかかりますが、見映えや使い勝手を良くしたり、目的に合ったオリジナリティのあるWebサイトを構築してくれたりするでしょう。

個人や社内だけで構築する場合は、ツールやクラウドサービスを活用すると簡単です。知名度を高めるためのコーポレートサイトなら、これで十分な場合もあります。外注でも、こうしたテンプレートに基づいて構築してもらうと、費用を抑えられるでしょう。

目的に合ったオリジナリティのあるWebサイト構築

STUDIO 資料画像

正確さや安全性が高く、安心してお任せできる制作会社に依頼してみませんか?

  • Webサイトの制作手順が分からない
  • 誰に制作を依頼すればいいのか判断できない
  • クオリティの高いWebサイトを構築してほしい

Webサイト構築なら
THINkBALにお任せください

著者
Digital Magazine editorial departmentDigital Magazine 編集部
Digital Magazineの企画・執筆・編集をしています。Webサイト制作、UX/UIデザイン、コンテンツマーケティング、SEO対策、SNS運用、広告運用に強みを持ったメンバーが、デジタルマーケティング全般の最新情報やノウハウをわかりやすくお届けします。
監修者
Miyazaki Norifumi宮崎 典史
THINkBAL代表。Web制作会社でWebサイト構築を学び、株式会社電通に出向。ナショナルブランドのWebサイトを数多くプロデュース。担当領域は、Webコンサルティング・戦略立案・プロジェクトマネジメント・UXリサーチ・情報設計・制作ディレクション。