.webp)
Web制作を初めて依頼する際、「Webサイトはどういう流れで作るの？」「完成までどれくらいの期間がかかる？」といった不安をお持ちの方は少なくないと思います。
Webサイト制作をスムーズに進めるためには、最初に全体の流れを把握しておくことが非常に重要です。Webサイト制作の流れや工程を理解しておくことで、制作会社に依頼した際も円滑に進めることができます。
この記事では、初心者の方にも分かりやすいように、Webサイト制作の基礎知識や流れを解説していきます。
是非最後までご覧ください。
Web制作が成功する重要なポイント3つ
.webp)
漠然としたイメージで制作を依頼するだけでは、理想のＷebサイトを作成してもらうことは難しいかもしれません。望み通りのサイトを手に入れるためには、しっかりとした事前準備が必要です。この章では、Web作成を成功させるための重要なポイントを3つ解説します。
Webサイトを制作する目的を考える
Webサイト制作においては、最初に「なぜWebサイトを作りたいのか」「どのような方向性のサイトを構築したいのか」といった目的を明確にすることが重要です。
Webサイト制作には様々な目的が存在します。
例えば、企業情報を効果的に伝えたり、お問い合わせの増加を目指すためには企業Webサイトが適しています。
見込み顧客の拡大を望むならば、企業ブログ（オウンドメディア）が効果的でしょう。
ブランディングに焦点を当てる場合は、ブランドサイトやオウンドメディアが適しています。
短期的な売上向上を目指す場合には、ランディングページ（LP）が有効であり、商品の認知を広めたい場合も同様です。中長期的な売上拡大を目指すならば、ECサイトが適切です。また、人材獲得を目指す企業にとっては、採用サイトが適切と言えます。
Webサイト制作を進める際には、制作会社に対してなぜWebサイトを作りたいのか、どのような方向性を持たせたいのかを明確に伝えることが重要です。
ですが、依頼前の段階では大まかなイメージしかできていないことが多いため、制作会社に相談しながら進めた方が結果として目的に合ったWebサイトを制作することができます。
また、目的とどのようなサイトが欲しいのかを事前に社内で決まっていた場合でも、一度制作会社に相談することで制作会社から「その目的であればこのようなサイト構成にした方が効果的です」とプロ目線でのアドバイスをしてくれる場合が多いです。
そのため、目的を策定する段階から信頼できる制作会社と密にコミュニケーションを図っておきましょう。
特にベンチャー企業やトレンドに合わせたキャンペーン特設ページ等だと、サイト制作にそこまで費用や時間をかけれないことが多いかと思います。
ノーコードツールの「Webflow」でサイト制作を依頼すれば、デザイン性の高いサイトにも関わらず通常のサイト制作に比べ工期を短縮することができるため、予算や時間をできるだけかけたくないけどデザインは最先端にしたい、という場合は是非、一度以下の記事をお読みください。
関連記事：【メリット解説】なぜWebflowはマーケティングに強いのか？
予算や担当者を明確にしておく
Webサイト制作における予算策定は慎重に行う必要があります。
具体的な項目として、制作会社への支払い費用、サーバー、ドメイン、SSLなどの年間利用費用、さらにはアクセス解析サービスやマーケティングツール、CMSパッケージなどの導入費用を洗い出し、それぞれの予算を確保します。
そして、Webサイトの制作プロジェクトを円滑に行えるよう、「体制の確立」をしましょう。体制の確立とは、社内外においてWebサイトの制作や運用に関わるメンバーを決めておくことです。
まず、社内のリソースを確保する段階では、マーケター、Web制作担当者、サイト運用担当者など、各分野に精通したメンバーをアサインします。
次に、社外の制作会社の選定が必要です。
Webサイトの規模が大きい場合、自社での制作は難しく、制作会社に依頼することが一般的です。
適切な制作会社の選定は、プロジェクトの成功に直結するため、信頼性や実績、技術力などを十分に考慮することが重要です。
できるだけ詳細にRFPを作成する
RFP（Request for Proposal）は、ホームページ制作会社やシステム開発会社に対して、制作の提案を行う前に発注者が作成する資料のことです。この文書には発注者の要望などを明確に記載します。
以下は、RFPの項目の例です。
・ホームページ制作の依頼目的
・予算
・希望納期（希望公開日）
・必要なシステムや機能要件の有無（CMSやECなど）
・サーバの指定や運用・サポートに関する要望
上記をRFPに明記することで、ホームページ制作会社の選定条件をより具体的に示すことができますが、実際問題社内の担当者は初めてREPを作ることがほとんどだと思います。
曖昧や間違ったREPを作成してしまうと、その後のサイト制作の軸が大きくズレてしまう可能性も考えられるため制作会社に相談しながら作成することがおすすめです。
Webサイトの企画・戦略立案
.webp)
プロジェクトは本格的なフェーズとなり、ここからは制作会社とより密に協力して業務を進めることが必要です。Webサイトの企画と戦略立案はどのように制作会社と進める形になるのか順番に説明していきます。
目的の明確化
依頼前に明確にした「Webサイト制作の目的」を更に具体的にはっきりさせていきます。
目的の明確化は、「目的を達成したと言えるのはどのような状態か？」を定め、数値で設定することが理想的です。
例えば、「Webサイト経由の新規顧客を増やしたい」という目的に対しては、次のような目標値を設定することができます。
・新規顧客からのお問い合わせ数を月30件から月100件に増やす。
・新規顧客の商談数を月5件から月30件に増やす。
・新規顧客からの受注数を月3件から月10件に増やす。
「数字」を使用した客観的な指標によって、制作会社と発注者の認識のずれを防ぐことができ、リアルな数値が目標として示されることで、プロジェクトを進める上での方向性をより具体的に理解し合えるようになります。
ターゲットの特定
「目的」が確定したら、ターゲットとペルソナを具体的に設定していきます。
「ターゲット」は、特定のサービスや商品を利用する可能性のある人々を指し、属性としては「20〜30代の育児中の女性」や「都内在住の30代独身男性」など、年代・性別・居住地などを一定程度絞り込んでいます。
「ペルソナ」は、ターゲットをより詳細に具現化した具体的な人物像を指します。ペルソナの設定では、学歴や職業、年収、趣味や興味の対象、休日の過ごし方、1日のスケジュール、行動パターン、悩みなどをできるだけ詳しく設定し、まるで実在するかのような人物像を描き出していきます。
ターゲットとペルソナを明確にすることで、Webサイトに必要なページやコンテンツ作成などの段階で、適切な方向性を迅速に判断できるようになり、サイト全体に一貫性が生まれます。
競合分析とポジショニング
前述のペルソナの行動パターンなどを考慮しつつ、同業他社や競合のWebサイトをリサーチします。
この際、競合他社のマーケティング施策（SNSマーケティングやWeb広告などのWebサイト施策以外も含む）も注意深く調査し、「どのようにWebサイトと統合し、運用しているか？」も確認します。
得られたリサーチ結果を踏まえ、「競合他社と比較して自社の強みや優位性は何か？」、「自社の強みをWebサイト上でどのようにアピールするか？」といった戦略を構築します。
戦略の策定に際して、自社の強みやポジショニングを明確にするためには、3C分析や4C分析、PEST分析などのフレームワークが役立ちます。
ブランディングを意識する
ブランディングを意識する際、ただ単に消費者の視点に立つだけでは、いつまでたってもブランドイメージが明確になりません。
そこで、ブランドイメージを効果的に浸透させるためには、まず前述したペルソナの設計が必要です。ペルソナがしっかりと定まれば、Webサイトのゴールやデザイン・レイアウトの構築が容易になります。
サイトコンセプトの決定
次に、Webサイトのコンセプトを確定させます。
Webサイトのコンセプト（またはサイトコンセプト）は、サイトが具体的に「誰にどのような価値を提供し、どのようなメッセージを伝えるか」を明確にし、それを言語化したものです。
サイトコンセプトは、Webサイト制作全体において構築やデザインの基本的な指針となるため、非常に重要です。
サイトコンセプトの設定には複数の方法がありますが、一般的には20文字程度のキャッチコピーにまとめることがおすすめです。
これまでに設定した「目的」「ペルソナ」「リサーチ＆分析結果」を考慮しながら、サイトコンセプトを具体的に策定していきましょう。
Webサイトの全体像を設計
.webp)
Webサイトの設計は非常に重要なフェーズでWebサイト制作の成功には「設計が8割」とも言われます。
時間を十分に充てて取り組む必要があります。
要件定義の設定
これまでの打ち合わせ内容をもとに、「要件定義」を具体的に検討しましょう。
「要件定義」とは、ホームページ制作に必要な全工程を統合した資料であり、以下の主要項目が含まれます。
- プロジェクトの概要
- ホームページ制作の目的
- 制作スケジュール
- 制作体制
- 必要なコンテンツ
- 開発要件（実装する機能やサーバーの仕様など）
- 課題点
これらの項目を整理することで、ホームページ制作の全体像を関係者間で一致させることができます。全体像に関するズレが発生すると、タスクの割り振りや進捗スピードに影響を与える可能性があるため、十分な確認が必要です。
また、要件定義で明確にした内容を基にスケジュールが組まれるため、後からの追加が難しくなったり、追加費用が発生するリスクがあるため、不明点や懸念事項は要件定義の策定時に徹底的に検討しておくようにしましょう。
サイトマップの作成
サイトマップは、ウェブサイトの全体構造を示す図やリストのことです。サイトには複数のページやコンテンツがあり、それらがどのように結びついているかを一覧にまとめたものです。要するに、サイトマップはウェブサイトの「地図」であり、訪れる人がサイト内を探索する際の案内役です。
情報をサイトマップに組み込むことで、コンテンツ同士のつながりを視覚的に整理し、以下のポイントで適切な判断ができます。
- 情報の網羅性: ユーザーに必要な情報が漏れなく含まれているか？
- ユーザビリティ: ユーザーにとって理解しやすい内容で情報が提供されているか？
- 階層構造の適切さ: 階層は浅すぎず、かと言って細かすぎず、適切な深さで構築されているか？
- スムーズなナビゲーション: ユーザーが求める情報までスムーズに移動できる設計になっているか？
コンテンツを適切に配置し、ユーザーが迅速に必要な情報にアクセスできるようにすることで、サイトの利便性が向上し、ユーザーの満足度も向上します。
コンテンツの設計
Webサイトの制作において重要なポイントとして、ペルソナがコンテンツから強くベネフィットを感じることが挙げられます。
「ベネフィット」とは、商品やサービスを利用することで得られるプラスの効果を指します。この概念は「メリット」とは異なり、具体的な価値や良さを強調します。
例えば、全自動洗濯機の場合、
メリット: 自動で選択ができる
ベネフィット: 家事の時間を短縮でき、忙しい生活をサポート
このように、具体的なベネフィットを伝えることで、ユーザーの購買意欲が高まります。競合他社をしのぎ、強力な訴求力を持つコンテンツを設計するために、「ディレクトリマップ」の作成も欠かせません。
「ディレクトリマップ」は、Webサイトの全URLやタイトルを一覧でまとめたもので、関係者同士で共有することで今後の作業がスムーズに進むようになります。
UI／UXを考慮したサイト設計
サイト設計は、階層やサイト全体の構造を決定する重要な工程で、「UI・UX」の配慮が欠かせません。
UI（ユーザー・インターフェイス）は、「UserInterface」の略で、Userは利用者を指し、Interfaceは境界面や接点という意味です。
つまりUIは、利用者とサービスなどとの接点のことを指し、ユーザーが操作する画面だけでなく、マウスやキーボード、タッチ画面などの入力デバイスも含めて、全てUIに含まれます。
一方で、UX（ユーザー・エクスペリエンス）は、「UserExperience」の略で、「ユーザーが商品やサービスを通じて得る体験」を指します。
この体験は、商品やサービスが提供する感動や印象、使いやすさ、質の良さなど、様々な要素から成り立っています。
さらに。UXはユーザーが製品やサービスを使用する中で感じる満足度や使いやすさを含みます。
UXの重要性は、単に商品やサービスが機能するだけでなく、その使用体験がユーザーにとって良いものであるかどうかが影響するためです。
総じて、UXは商品やサービスの成功において不可欠であり、Webサイトの「目的」を果たすためには、UI・UXに注意を払ったサイト設計が必要です。
サイトコンセプトやWebサイトの課題、ペルソナの行動パターンやニーズを考慮しながら、ユーザビリティを向上させるための設計を進めていきましょう。
デザイン作成／コーディング／システム開発
.webp)
このフェーズでは、要件定義書やサイトマップを確認しながら、コンテンツやデザインの制作に入っていきます。
デザインの作成
設定したUIやコンセプトを基に、デザイナーがメインの色彩、フォント、画像素材、共通パーツなどを確定させます。
同時に、営業資料や社内資料など、サイトに掲載するための素材もきちんと整理していきます。
デザインコンセプトが決定したら、次は、各Webページのワイヤーフレーム作成です。必要な素材が整った段階で、デザイン案（デザインカンプ）が作成されます。
デザインカンプは、Webサイトの「完成見本」であり、クライアントと制作者が具体的な完成イメージを共有するための重要なものです。
デザインカンプ作成では、まずトップページのデザインが手がけられ、全体のトーン＆マナー、世界観が決定されます。
その後、他の主要ページのデザインが制作され、トップページとの統一感を確保します。全体のスタイルが一貫していないと、ページごとに印象が異なってしまいますので、事前に企画と設計で確立した世界観に基づいた配色やデザインを徹底しています。
この過程で「もともとのイメージに沿っているか」「デザインに違和感がないか」などを確認し、問題がないようであれば制作を進めてもらいます。
コーディング作業
コンテンツが完成したら、次はコーディングやシステム開発といった工程が始まり、最終的にWeb上で閲覧可能な形に整えていきます。
主なコーディングには以下のようなものがあります。
HTML（HyperText Markup Language）コーディング： ウェブページの構造を定義するために使用されます。HTMLは要素やタグなどで構成され、文書の構造やコンテンツをマークアップします。
CSS（Cascading Style Sheets）コーディング： ウェブページのスタイルやデザインを定義するために使用されます。CSSはHTML要素に対してスタイルやレイアウトを指定し、ページを視覚的に整えます。
JavaScriptコーディング： ウェブページに対する動的な機能やユーザーとの対話を実現するために使用されます。クライアントサイドで実行され、ページ上でのイベント処理やアニメーション、フォームのバリデーションなどを担当します。
サーバーサイド言語によるプログラミング： サーバーサイドで動作するアプリケーションやデータベースとの連携を実現するために、PHP、Python、Ruby、Node.jsなどの言語を使用することがあります。これにより、動的なコンテンツやデータの取得・処理が行われます。
データベースのクエリ： サーバーサイドでデータベースと連携する場合、SQL（Structured Query Language）を使用してデータの検索、挿入、更新、削除などの操作を行います。
コーディングは各Webページの表示速度やSEOなどに影響を与えるため、慎重に行う必要があります。HTMLコーディングが完了すると、Webページを実際に閲覧できるようになります。
この段階で、文章の適切性、誤植や脱字の有無、意図したレイアウトとデザインの実現度などを確認し、必要に応じて修正を行います。
一般的に、フルスクラッチやWordPressでサイト制作を検討している企業が多いかと思います。
しかし、思っている以上にサイト制作は発注側にも労力が必要かつ制作会社からデザインやコーディングの納期を結構急かされたり、途中でデザインの変更ができなかったりとプロジェクトが進むと後戻りができない等の問題が出てくるのが多いです。
しかし、「Webflow」というノーコードツールでWebサイトを制作することで、途中でもデザインの変更が可能だったり、高いデザイン性はキープしつつ従来のサイト制作よりも短い期間で完成するなど、納得のいくサイトを制作することができます。
関連記事：最強のサイト制作ノーコードツール『Webflow』とは？ - メリットについて数字を交えてご紹介 -
システム開発
Web制作におけるシステムには、フロントエンドとバックエンドの2つの側面があります。
フロントエンドとは、Webサイトの表面に直接触れる部分で、訪問者が目にする箇所です。
HTMLやCSSを使用して構築され、さまざまな端末やOS環境で最適に表示されるように注意が払われています。
バックエンドとは、Webサイトの裏側で、訪問者の目には見えないプログラムの部分を担当します。
CMS（例: WordPress）を使用するか、独自のシステムを構築し、サーバーとの連携も行います。
このように、フロントエンドとバックエンドが協力してWebサイトを構築し、最終的な形に仕上げていきます。
動作確認と公開
.webp)
最後は、Webサイトの動作確認をして、公開する作業となります
動作確認を行う
ユーザーがWebサイトを閲覧する環境を想定して、どのデバイスやブラウザでもシステムが問題なく仕様通りに動作するかを確認します。
例えば、PC上では正常に動作していても、スマートフォンやタブレットでは表示が乱れるなどのエラーが生じることがあるため、PCだけではなく、異なるデバイスやブラウザでの動作確認が必要になってきます。
同時に、依頼者側もデザインや機能要件が予定通りに機能しているかを確認し、要望との齟齬があれば修正を依頼します。
なお、動作検証の段階でミスや不具合を見逃さないように下記のポイントを確認するようにしてください。
- 表示や動作の確認
- テキストの誤字脱字がないか？
- ダミーテキスト・ダミー画像は残っていないか
- 表記揺れがないか
- リンク切れ・リンク間違いがないか
- 問い合わせ先の電話番号は正しいか
- サイトスピードは問題ないか
- 404ページが正しく表示されているか
- 問い合わせフォームが正しく動作しているか
- SNSシェアボタンが動作するか
サイト公開前の最終チェックリスト
サーバーとドメインの最終設定
サイトを新しく立ち上げる時に必要になるのが「サーバー」と「ドメイン」です。
サーバーは、ホームページの表示内容が格納される「入れ物」のようなもので、これがインターネット上に存在するイメージです。
ドメインとは、サーバーの住所のようなものを指します。例えば、ホームページのURL「https://webflow.jp」の場合、「webflow.jp」の部分がドメインになります。
希望するドメインが既に使用されている場合は、他の利用可能なドメインを探す必要があります。希望のドメインが利用可能かどうかは、インターネット上で簡単に確認できます。
サイト公開
検証作業を繰り返し、発注者の修正要求が解決できれば、いよいよサイトを公開します。
リリース当日は予期せぬトラブルが発生する可能性があるため、プロジェクトに参加しているデザイナーやエンジニアは素早く対応できるような手配が必要です。
リリース後も、しばらくの間はエラーが発生しやすいので、継続的にテストを実施するなど、慎重さを怠らないよう留意が必要です。
公開後のマーケティング施策
.webp)
Webサイトは公開して終わりではありません。Webサイトで集客をしたいなら公開後の「運用」がポイントとなります。
検索エンジンに公開したことを伝える
Googleの検索エンジンにサイトの公開を通知することで、専門のクローラー（ロボット）がサイトを効率的に巡回し、インデックス化してくれます。この手続きは簡単で、Googleサーチコンソールを利用することですぐに完了します。Googleサーチコンソールとは、Googleが提供するウェブマスターツールです。
ウェブサイトのパフォーマンスをモニタリングし、検索結果での表示状況や検索トラフィックに関する情報を提供します。サイトのSEO（検索エンジン最適化）やコンテンツ戦略の改善を行うことができます。
サーチコンソールにサイトを登録し、所有権を確認した後、サイトのURLを提出するだけで、Googleが新しいコンテンツを発見しやすくなり、ユーザーが関連検索でサイトを見つけやすくなり、検索結果に反映されます。
社内や取引先等の社外へ連絡する
サイトが公開されたら、社内にホームページ公開の連絡を行ったり、外部に向けてはリリースの連絡やSNSでの配信など、多くの人にサイトを知ってもらえるように連絡をしましょう。様々な意見やフィードバックを受けたら、将来の改善に活かせるようにメモをしておくなどしておきましょう。ユーザーからのフィードバックはサイトの質を向上させるための貴重な情報源であり、適切な対応が成功の鍵となります。リリース後の段階でも積極的なコミュニケーションと改善への意欲が求められます。
アクセス解析を行う
公開後、ウェブサイトの効果や変化を確認することは大切です。テレビ番組の視聴率のように、ウェブサイトにも訪れた人数やページビューなど、さまざまなデータを解析することができます。通常、月に1回のアクセス解析や四半期に1回の分析が一般的で、ウェブサイトの目標やゴールに向けた進捗を確認し、必要に応じて改善策を検討します。車内にアクセス解析できる人がいない場合は、制作業者や解析が得意なデジタルマーケティングの業者に依頼することも手段のひとつです。
Webサイト制作の会社選定で重要なポイント
ネットなどで検索しても、制作会社が多すぎてどれを選べば良いか分からない、会社選びで失敗したくないが、知識がなく困っているという悩みを抱えていらっしゃる方も多いと思います。
ホームページ制作会社を選ぶポイントを3つご紹介します。是非以下のポイントを参考に選定をしてみてください。
Webサイトの企画・戦略立案から対応できるか確認
Webサイトを公開するまでには、デザイン、制作、コーディングなど、いくつものプロセスを実施します。その中でも企画や戦略の立案は、Webサイト戦略をしっかり考える工程ですので、多くの時間と労力が必要となります。
発注者が満足し、検索エンジンにも評価されるWebサイトを作るためには、企画や戦略立案のプロセスが最も重要と言えます。
「ホームページを作成するだけ」の企業よりも、多岐にわたる施策を展開できる企業を選ぶことで、コストは高くなるかもしれませんが、あらゆる角度からの集客が期待でき、結果的に高い投資対効果を実現できます。
マーケティングに関する知見
Webサイトには、集客や販売などの自社の事業に直結した「売れる仕組み」を持つことが求められます。そのためには、Web制作会社にもWebサイトに戦略的なマーケティングを盛り込むためのノウハウが必要です。戦略的なマーケティングの知見を持つ制作会社を選ぶことで、さらなる集客が見込めます。また、サイト公開後の運用までしっかり請け負ってくれるかどうかも重要な選定ポイントになります。たとえば、メディアサイトの立ち上げを検討しているのであれば、サイト制作後の運用コンサルティングまで一貫して承っている制作会社がよいでしょう。
制作会社の作業体制が整っているか確認
どのような制作体制で業務に当たっているかも重要なポイントです。具体的にはシステムエンジニアやプロデューサーなど、各工程の指揮系統がしっかり組まれた制作体制が望ましいです。
制作会社は数多くの依頼を同時進行で進めており、制作体制が整っていなければ納品に遅れが生じたりする可能性があります。工程の指揮系統がしっかり組まれていると、業務が円滑に進む流れができており、スケジュールに沿った品質の高いホームページ制作が期待できます。また、新人よりもベテランのエンジニア・デザイナーが多く在籍している方が、品質が高い傾向です。制作体制の充実度は「制作は自社のメンバーなのか一部外注か」「エンジニアやデザイナーは新人かベテランか」などから判断できます。制作体制の充実度も比較し、依頼する制作会社を選びましょう。
まとめ
.webp)
いかがでしたでしょうか？
本日はWebサイト制作の流れと重要なポイントを解説しました。
是非、今回の記事を参考にして、Webサイトの制作に取り組んでください。
特にデザイン性の高いサイト、費用をそこまでかけることができない場合は「Webflow」というノーコードツールで制作することをおすすめします。
途中でデザインの変更が何度でも行えたり、フルスクラッチやWordPressといった一般的なサイト制作よりも短期間で完成したり、社内の管理工数の負担を軽減できたりなどを実現することができます。
是非、お問い合わせお待ちしております。
