Webサイト制作とは？フローと事前に準備すべき4つのポイント

Webサイト制作で理想のサイトを実現したいなら、制作会社へ依頼する前の準備が非常に重要です。具体的な内容は、サイトの方向性やサイトを通して伝えたいこと、プロジェクト進行のルール、使用する写真やロゴといった素材などさまざま。これらが不十分だと、目的に沿ったWebサイトをスムーズに制作することはできません。

例えば、「なんとなくスタイリッシュでイマドキなサイトにしたい」といったビジョンがあるだけの状態でWebサイト制作を依頼したとします。このようなケースでは、「デザインはカッコいいけどまったく成果が上がらない……」といった残念な結果になる可能性が高いでしょう。

そのような事態を避けるために、押さえておくべきポイントがあります。本記事ではWebサイト制作の基本を説明した上で、発注者がWeb制作会社へ依頼する前に準備すべき4つのポイントを解説します。

＼BtoBサイトリニューアルのよくある5つの失敗例／

“コンテンツマーケティングの基本”は以下をご覧ください！
コンテンツマーケティング成功のためのポイント

Table of Contents

Webサイト制作とは

Webサイト制作とは、Webサイトを新しく構築する、または現在公開されているWebサイトをリニューアルすることです。

Webサイトと似た用語に「ホームページ」があります。この2つの用語は同じ意味で使われることも少なくありませんが、実は意味が異なるので覚えておきましょう。

Webサイト	・企業が運営するサイト（コーポレートサイトや採用サイト、ECサイト、オウンドメディア、LPなど）・個人が運営するサイト（個人が趣味の目的で運営しているサイト）
ホームページ	・Webサイトのトップページ・ブラウザを立ち上げたとき最初に表示されるページ

Webサイト制作の方法

Webサイト制作の方法には、大きく次の2つがあります。

自分で作る
外部に作ってもらう

自分で作る

Webサイトを自分で制作する場合、主に以下の手段があります。

CMSやサイト制作ツールを活用して制作
HTML/CSS/JavaScriptを使用して手作業で制作

サイト制作できるCMS（WordPressなど）を活用すれば、プログラミングやコーディングの知識がなくても比較的簡単にWebサイトを制作できます。コーディングやプログラミングの知識があれば、より細かなデザインや機能を実装しながら一からサイトを構築することが可能です。

Webサイトを自分で作る一番のメリットは、外注費用がかからないことです。また、自分好みのデザインに仕上げられ、好きなタイミングで更新や修正ができるという自由度の高さも魅力のひとつ。

とはいえ、Webサイト制作を自分ですべて対応するとなると時間と労力がかかります。専門知識が不十分な場合、デザインが素人っぽくなったり、機能が不足したりするケースもあるでしょう。セキュリティ対策や不具合修正など、専門知識がないと対応が難しいこともあります。

外部に作ってもらう

Web制作会社などに依頼し、要件に合わせてWebサイトを制作してもらう方法です。この場合は、設計からデザイン、SEO対策、運用保守まで任せられます。

Web制作のプロの知識・スキルを活用することで、デザイン性や機能性の高いサイトを作れます。また、制作作業をすべて任せることで「自分が費やす時間」を節約できる点もメリット。トラブル対応などを含め、Webサイトが完成したあとも継続的にサポートを受けられます。

ただし、自分でWebサイトを作るよりも費用がかかるため、予算には余裕が必要です。また、自分の要望を正確に伝えないと意図しない仕上がりになる恐れもないとは言えません。制作会社によって品質や対応が異なるため、信頼できるパートナーを選定する必要があります。

Web制作会社の選び方については以下の記事をご覧ください。
Web制作会社の選び方と比較ポイント

Webサイト制作のフロー

Webサイト制作のフローには、さまざまな工程があります。フローを知らずに進めてしまうと、制作期間が長期化したり必要な工程を抜かしてしまったりといったリスクが考えられます。あらかじめ各工程を理解し、フローを整理しておきましょう。

Webサイト制作の流れは、以下のとおりです。

要件整理
サイト設計
デザイン制作
コーディング・開発
動作確認
公開
運用・保守

1. 要件整理

Webサイト制作の最初のステップは、「何のためにWebサイトを作るのか」「どんな機能が必要か」を明確にすることです。

「問い合わせ獲得」や「認知拡大」といったWebサイトの目的（ゴール）を明確にした上で、サイトを訪れるターゲットを設定します。ターゲットは、年齢層や興味、悩みなどを明確に定めましょう。詳細は「Webサイト制作を成功させる事前準備」で解説するので、あわせてご確認ください。

目的とターゲットを明確にしたら、要件を洗い出しましょう。Webサイトに必要な機能（ナビゲーションバーや検索機能、問い合わせフォームなど）や、含めたい情報をリストアップします。

2. サイト設計

Webサイトの要件が定まったら、次は構成やデザインの方向性を決めます。以下のような作業が含まれます。

サイトマップ作成	Webサイト内のページ構成や階層（トップページ、サービスページ、会社概要、ブログなど）を設計
ワイヤーフレーム作成	各ページのレイアウトやコンテンツの配置を図式化
デザインの方向性の決定	カラーやフォント、全体的な雰囲気を設定

3. デザイン制作

設計をもとにWebサイトのデザイン作成を進めます。デザインは、PhotoshopやFigma、Adobe XDなどのデザインツールを使って制作します。

PCだけでなくスマホでも見やすいように、レスポンシブデザインを取り入れると良いでしょう。

4. コーディング・開発

デザインが確定したら、実際にWebサイトを形にするためのコーディングやシステム開発を行います。「自分で作る」で紹介したように、デザインの反映方法は「HTML/CSS/JavaScriptによるコーディング」もしくは「CMSの導入」の2つです。

また、ECサイトや会員サイトなどの場合は、PHPやPythonなどのプログラミング言語を使ったサーバーサイド開発やデータベース連携を行います。

5. 動作確認

Webサイトが完成したら、公開前に動作確認を行います。具体的には、以下のような動作確認を実施します。

項目	内容
ブラウザ・デバイス確認	・各種ブラウザ（Chrome、Edge、Safariなど）やデバイス（PC、スマホ）で正しく表示されるか
リンク・フォーム動作確認	・すべてのリンクやボタン、フォームが正常に機能するか
表示速度・セキュリティ確認	・表示速度が遅くないか・セキュリティ対策がされているか

6. 公開

テストが完了したら、Webサイトを公開します。

まずは完成したデータをサーバーにアップし、ドメインを設定します。公開後の最終確認として、サイトの表示や動作に問題がないか確認しましょう。

7. 運用・保守

Webサイトは公開して終わりではなく、セキュリティ対策や検索アルゴリズム対策などの観点からも、継続的に管理・改善していくことが重要です。

具体的には新しいコンテンツを継続的に追加していき、常に最新の状態に保ちます。その上で、Google Analyticsなどを使ってアクセス数やユーザー行動を分析し、サイト改善に活かします。

また、不正アクセスや個人情報の漏えいなどを防止するため、システムやプラグインを定期的にアップデートしましょう。不具合やエラーが発生した際は、迅速に対応します。

Webサイト制作を成功させる事前準備のポイント

Webサイト制作を成功させるには、以下の事前準備が重要です。

サイトの要件を明確にする
制作進行に必要なルールを決めておく
デザイン・コンテンツ制作に必要な素材を揃える
開発・運用時に必要な情報を用意する

サイトの要件を明確にする

前項で解説したWebサイト制作のフローの中でも、目的やターゲットといった要件整理が特に重要です。

さらに、自社の強みなどについても、事前にまとめておくことでWebサイトの方向性を明確化させやすくなります。

Webサイト制作の目的

「Webサイトで何をしたいのか」が曖昧だと、着地点が不明瞭になってしまいます。目的が明確でないと、Webサイト制作が成功したのか失敗したのかを検証するのも困難です。

「問い合わせ獲得」「ブランディング」「認知拡大」「採用強化」など、Webサイト制作の目的は企業によってさまざまでしょう。「お問い合わせや資料請求を増やして見込み顧客を獲得したい」「自社の魅力を求職者へアピールして採用を強化したい」というように、具体的にWebサイト制作の目的を定めておくことが大切です。

また、Webサイト制作によって自社が抱える課題にアプローチできる可能性があるため、「問い合わせ数が少ない」「問い合わせの質が低い」といったように解決したい課題や問題点を明確にすることも効果的です。

ターゲット

自社のターゲットをより具体的に想定することも、重要なポイントです。

ターゲットに狙いどおりのアクションを起こしてもらうには、そのアクションを起こしたくなるWebサイトにしておかなければなりません。そのため部署や役職、年齢など、ターゲットの属性によって最適なWebサイト設計を行う必要があります。

もちろん、Web制作会社側も市場調査や競合分析を通してターゲット像を設定しますが、自社のターゲットに最も詳しいのは自社（依頼者）です。ターゲット像を明確にして制作会社へ伝えることが、より精度の高いWebサイト制作につながります。

自社の強み

Webサイトを通してターゲットと関係性を築くには、競合他社との差別化を図る必要があります。

まずは、自社の強みをできるだけたくさん洗い出しましょう。強みが競合他社のソリューションにも当てはまる場合は、「なぜ自社がそのサービスを提供するのか」まで深掘りするのがポイントです。自社サービスにかける想いや、サービスを通して実現したいことなどが明確になれば、「ターゲットに伝えたいこと」が見えてきます。

自社そのものや事業、サービスを文章化したり視覚化したりするフェーズは、企業の活動を見つめ直す良い機会です。この機会に、部門の垣根を越えて自社の強みをまとめてみるのも良いかもしれません。

競合他社

競合他社の情報は、Webサイトの差別化を図る上で欠かせません。特にBtoB企業では、競合他社と同じようなWebサイトを作っても、ユーザーとしては自社製品・サービスを選ぶ決定的なメリットが分からず、ターゲットの関心を獲得することは難しいでしょう。

ただし一口に競合他社と言っても、業界をリードする企業から中堅・中小・ベンチャー企業までその規模はさまざま。中には、自社と類似した特徴を持つ企業も存在するでしょう。競合を分析する際は、自社と競合のジャンルやポジションを意識して細かく分析することが大切です。

また、競合他社がターゲットに対してどのようなアプローチをしているかなどを分析し、自社に足りていない点があれば参考にしたいところ。その上で前項で紹介した「自社の強み」を踏まえながら、より自社の色を出す方法を考えましょう。

制作進行に必要なルールを決めておく

Webサイト制作プロジェクトが長期化すると、当初予定していなかった費用が発生したり、リニューアルプロジェクトの目的やゴールの軸がぶれてしまったりすることも少なくありません。

円滑にプロジェクトを進行させるには、制作会社とのスムーズなやり取りが不可欠です。そのために必要なプロジェクト進行のルールについて解説します。

担当者窓口を明確にする

まずはWeb制作会社とやり取りする担当者（窓口）を明確にしましょう。同じ議題で複数の担当者が発議すると、その分「情報共有や確認」に関するコミュニケーションが追加で発生するため非効率です。

例えば、Web担当者が社内で出た意見を取りまとめ、発注する側の総意として制作会社へ伝えるとプロジェクトをスムーズに進められます。

しかし、中には決裁者と制作会社の意見を伝達するだけの係になってしまう担当者がいます。決裁者が制作の中身を把握した上で意見を出しているのであれば制作進行上問題ありませんが、そうでないケースのほうが多いのが現状です。

そのような場合は、「どのように社内に伝えたのか」をあわせて制作会社に報告すると良いでしょう。

意思決定フローを明確にする

プロジェクトが発足する前に、どのようなルートで決裁を取るべきか必ず確認しましょう。Webサイト制作は「要件整理」「サイト設計」「デザイン制作」など複数のフェーズで構成されているため、各フェーズで決裁を取るのがおすすめです。

発注者側の意思決定フローが曖昧だと、頻繁に決定事項が振り出しに戻ってしまい、プロジェクトが長期化する恐れがあります。追加費用が発生したり公開予定が大幅に遅れたりといった懸念点からも、一度OKが出たものを作り直すことは基本的にできないと考えておきましょう。

スケジュール・タスク・納期を明確にする

Webサイト制作で重要な要素のひとつに、スケジュール管理および課題管理があります。事前に納期のリミットを決めておき、制作会社と相談しながら公開希望日から逆算してスケジュールを組みましょう。

公開時期という明確な目標がないと、作業やコミュニケーションの優先順位が下がってしまい、案件が長期化する恐れも。制作会社によっては、やむを得ない場合を除いて事前に定めた制作スケジュールを超過すると追加費用が発生するケースもあるため覚えておきましょう。

Webサイト制作における納品の目安は、サイトの規模や作業の難易度にもよりますがプロジェクト発足から3～4ヶ月後であることが一般的です。Web制作会社へ依頼する際は、準備段階から余裕を持って進めることが大切。公開までの期間が短い場合は、制作会社に問い合わせた段階で必ず伝えましょう。人員を増員して納期を早めるなどの提案をしてくれる可能性があります。

また、スケジュールが遅延する原因にタスクの把握不足が挙げられます。自社の対応作業を把握できていないと、タスクを捌ききれずに結果として希望納期に間に合わないケースも起こり得ます。制作会社は、フェーズごとにタスクとその担当者をスケジュールに落とし込んだ「WBS」（Work Breakdown Structure：作業分解構成図）を作成してくれるのが一般的です。WBSと照らし合わせながら、タスクをしっかりと確認しましょう。

デザイン・コンテンツ制作に必要な素材を揃える

Webサイトに使用する素材類は、見積もりにも関わる要素が多いためあらかじめ準備しておくことが重要です。

写真素材

Webサイト内で写真素材を使用する場合は、フリー素材でまかなうのか、カメラマンに依頼して写真撮影を行うのかを決めましょう。

製品やサービスの紹介や事例取材インタビューのほか、採用サイトなど企業のWebサイトに掲載する写真は、プロのカメラマンによる撮影を実施することをおすすめします。フリー素材では質素に見えてしまうことがあるためです。

また、社内で使えそうな写真素材をあらかじめ集めておき、制作会社へ提供するのも良いでしょう。同じデザインでも、写真素材のクオリティでWebサイトの見栄えは各段に向上するので、理想の完成形を見据えて写真素材を準備しましょう。

ロゴのデザインデータ

意外と忘れがちなのが、企業ロゴのデザインデータ提供です。AIやEPSなど、必ず編集可能な形式のデータを制作会社へ渡しましょう。PNGやJPGといった画像形式では画質が悪くなることがあります。

また、企業ロゴのレギュレーションがある場合はデータとあわせて提供しましょう。ここでいうレギュレーションとは、ロゴの背景に敷いて良いカラー、ロゴの周りに必要な余白のサイズなど、「ロゴの使い方」を定めたマニュアルです。制作会社のデザイナーはロゴを扱うときにレギュレーションがあると作業しやすくなるため、効率的に制作を進められます。

参考にしたいWebサイト

デザインのイメージや希望がある場合は、参考にしたいサイトを提示すると制作会社もイメージしやすくなります。参考サイトは、「完成形に近いイメージ」と「自社には合わなそうなイメージ」ごとに、それぞれ2～3案程度ピックアップすると良いでしょう。

ただし、「かっこいい」「すごい」「なんかいい」という漠然とした印象だけで参考サイトを集めてしまうとうまく伝わらない恐れがあります。好みからデザインを考えた結果、Webサイトの目的を見失ってしまうケースも少なくありません。Webサイトは見た目も大切ですが、最も重要なのは自社の課題解決や目標達成のためのツールとして機能することです。

開発・運用時に必要な情報を用意する

Webサイトの開発・運用時に必要な情報は成果物に影響せず、制作会社も必ず確認するため、確認が難しい場合は無理に準備する必要はありません。

ただし、これらの準備によってプロジェクトがスムーズに進行するので、どのような情報が必要なのかを把握しておくと良いでしょう。

サーバー・ドメイン・FTP情報

サイトを構築する際は基本的にテスト環境を利用します。制作会社によっては発注者側でテスト環境を用意することを前提としていることがあるので、事前に確認しておくと安心です。

必要な情報としては、以下が挙げられます。情報を管理しているのが別部署であったり、もともと付き合いのある制作会社だったりする場合は開示してもらいましょう。

サーバーコントロールパネルのログイン情報
使用するドメイン（所有している場合はテスト環境も）
FTPへのアクセス権限情報

一般的なレンタルサーバーを利用している場合を想定し、それぞれ必要な理由を簡単に解説します。

サーバーのコントロールパネルのログイン情報

WordPressなどのCMSでWebサイトを構築する際は、サーバー上で設定されているPHPのバージョンを確認する必要があります。WordPressなどのCMSにもバージョンがあり、更新を繰り返しているため、PHPのバージョンと合わなければ正常に動作しない恐れがあります。

そのほかにもMySQLの確認やDNS設定の確認などでサーバー情報が必要になりますが、テクニカルな内容のためここでは割愛します。

使用するドメイン（所有している場合はテスト環境も）

基本的に、サーバー情報とセットで制作会社に伝えましょう。Webサイトリニューアルの場合は既存のドメインを使用するのか、新しいドメインを取得するのかは発注者側で判断します。

使用しているドメインが独自ドメインではないなどの特殊なケースを除き、Webサイトリニューアルでは既存ドメインを継続利用するのがおすすめです。安易にドメインを変更してしまうと、ドメインエイジがリセットされたりこれまで獲得した外部リンクの効果を得られなかったりといった検索エンジンにおける評価が下がるだけではありません。以前のドメインでアクセスしたことがあり、ブックマークなどに登録していたユーザーが訪れた際に、ドメインが変更されてしまうとアクセスができなくなり、ユーザー体験にも悪影響を及ぼす恐れがあります。

FTPへのアクセス情報

FTP情報は、Web制作会社が新サイトのデータをサーバー上にアップロードするために必要な情報です。FTP情報が何を指すのか分からない場合は、レンタルサーバー会社から契約時に送られてきたメールを確認するか、情報システム部などの担当者に確認してみましょう。

Googleサーチコンソール・Googleアナリティクスの埋め込みタグ

Googleが無料で提供する「Googleサーチコンソール（GSC）」や「Googleアナリティクス（GA）」など、運用時に必要なツールについてです。

Googleサーチコンソールは、Webサイトの管理ツールです。自社サイトへ訪問する際にユーザーが入力した検索キーワード、ページ内のエラー、コンテンツがGoogleに認識されているかなどを確認できます。WebサイトのSEO対策には必須のツールです。

Googleアナリティクスは、Webサイトのアクセス解析ツールです。Googleアナリティクスを使うことで、自社サイトを最も訪れている年齢層や性別、ユーザーの訪問経路、集客に最も貢献しているコンテンツなどを知ることができます。また、離脱や直帰の多いコンテンツを発見できるなど、サイトの問題点を見つけるのにも役立ちます。

これらのツールは、タグと呼ばれるソースコードをサイト内の所定の箇所に埋め込むことによって計測できるようになります。公開と同時に計測が始められるように解析ツールの埋め込みタグを準備しましょう。

Googleアナリティクスの詳しい見方については、以下の記事をご覧ください。
Googleアナリティクス4（GA4）の見方【初心者向け】

まとめ

Webサイト制作は、企業のビジネスを左右する重大プロジェクトのひとつです。本記事で紹介した事前準備の精度によって、最終成果物の質やプロジェクトの進行は大きく左右されます。Webサイト制作やWebサイトリニューアルの担当を任されたら、まずは落ち着いて事前準備を整えることからスタートしましょう。

株式会社ファングリーは、制作支援とマーケティング支援の機能を併せ持つ支援会社です。とりわけ「BtoB向けのコンテンツ制作」に強みを持った制作会社と自分たちを位置付けており、ブランディングを軸としたWebサイト制作・コンテンツ制作を通じてお客様のビジネス課題の解決に取り組んでいます。Webサイト制作についてご相談がありましたら、気軽にお問い合わせください。

お問い合わせはこちら