【超重要！】プロのマーケターが教える正しいWebサイト制作の10ステップ
昨今、ノーコードツールや生成AIが台頭したことで、誰もが簡単にWebサイトを作れるようになりました。
今や、WixやStudioで作られたコーポレートサイトも少なくありません。中にはCanvaで作られたコーポレートサイトも目にすることがあります。
少し昔までは、コーディングやシステムを開発できるWeb制作会社に委託するのが常識だったのが、今となっては自社でパパッと簡易的なWebサイトを作るなんてことも増えてきたように思います。
良くも悪くも、Webサイトの制作費を大幅に削減できるため、中小企業や個人事業主の方などにはとても役に立っているツールと言えます。
ただひとつ、私が言いたいのはWeb制作会社に支払うWeb制作費は『マーケティング戦略を設計するための費用』だと考えて欲しいと言うことです。
Webサイト制作と言うものは、Webサイトという”もの”を納品するため、どうしてもWebサイトそのものにお金を払っているように感じてしまいますが、実は全く違うのです。そのWebサイトを作るために必要な戦略設計に費用を支払っているのです。
そのため一番気をつけるべきは、Webサイト制作を行うフリーランスです。Web制作会社に発注するよりも、フリーランスに発注した方が比較的費用は安く済みます。しかし、気をつけないと全く意味のないWebサイトが生まれて会社にとって”負の遺産”になってしまい兼ねません。
この記事では、Webサイト制作を行うときまたはWebサイト制作を外部に委託する際に”基準”となる最低限の10ステップとポイントを解説していきます！
特に、自社でWebサイトを作ってみようとお考えの方や、WebデザイナーでWebサイト制作を始めようとお考えの方は必ず読んで頭に入れておいてください！
- 戦略設計から制作まで
- 広範な対応可能領域
- 業務の生産性向上支援
- 地域密着のパートナー
毎月3社限定！無料で貴社のWebサイトを診断し、現状の課題や改善案を具体的にご提案いたします！
また、初回のみ60分間の無料相談も承っております！
Webサイト制作の最低限の品質基準
Webサイトを制作する際は、以下のステップを必ず踏んでください。この中の一つでも欠けていれば”論外”です。
正しいWebサイト制作の10ステップ
- プロジェクト設計
- 戦略設計
- コンセプトメイキング
- Webサイト設計
- コンテンツ制作
- デザイン
- 開発準備
- 開発・コーディング
- テスト・検証
- リリース
プロジェクト設計
プロジェクト設計は、Webサイト制作で最も重要なステップとなります。多くの方はここをすっ飛ばしているため、何の役にも立たないWebサイトができてしまうのです。
Webサイト制作の目的を再認識
まず初めに『Webサイトを制作する目的』を再認識してそれに必要な機能やシステムなどを全て洗い出したうえで、スケジュールを作成することです。
Webサイトは、目的ごとに10種類くらいに分類することができます。
| コーポレートサイト | 企業情報と信頼性の確立 |
|---|---|
| メディアサイト | 情報発信による集客とファン化 |
| LP（ランディングページ） | 特定のアクション（購入・登録）への誘導 |
| サービスサイト | 提供するサービス内容の詳細説明と利用促進 |
| ECサイト | 商品の販売と売上の最大化 |
| ブランドサイト | 世界観の訴求と企業・商品のイメージ向上 |
| 採用サイト（リクルートサイト） | 企業への興味喚起と応募者の獲得 |
| ポータルサイト | 多様な情報の集約とユーザーのナビゲート |
| 会員サイト | 既存顧客への特典提供とエンゲージメント強化 |
| インフラサイト | システムの安定稼働と利用者への技術的サポート |
まずは、何のためにWebサイトを作るのか、その目的を達成するにはどのようになればいいのかをまとめて、それに必要な機能やシステムを洗い出しておきます。
ここを飛ばしてしまうと、目的に沿わないWebサイトができてしまう可能性大です。実際、望んでいた目的と全く異なる種類のWebサイトをお持ちの企業さんからの相談は少なくありません。
スケジュール作成
次に制作後の運用までを見据えたスケジュールを作成します。ここで、制作から公開（納品・リリース）までで公開後のスケジュールを作成してくれない業者はマーケティングを分かっていない＆クライアントを大切に思っていない業者なので気をつけましょう。
戦略設計
スケジュールを作成したら次は戦略設計です。個々の作業も蔑ろにする業者が多いです。まず、リニューアルの際は現状のPV数やセッション数、ユーザー属性など過去ログをしっかりと調査しておきましょう。
事前調査
戦略設計には、事前調査が必要不可欠です。市場調査、競合調査、SEO調査、デザイン調査の4つの調査を行い、今から制作するサイト像を明確にしていきます。
市場調査と競合調査はマーケティングで最も基礎的なものです。4P分析と言うワードを一度は耳にしたことがあると思います。Product（製品）、Price（価格）、Place（場所）、Promotion（販促）の4つの頭文字をとって4P分析と言われています。
市場規模や競合他社がどのような4P分析を行なっているか調査・推定し、自社の4P分析を行なっていきます。
残りのSEO調査とデザイン調査は、業者によってどこまでしっかり調査するか変わってきます。SEO対策を得意とする業者であれば、専門ツールを使用してしっかりと競合サイトのSEO状況を調査することがほとんどです。また、デザイナーからWeb制作者になったフリーランスやデザイン会社がWebサイト制作を行う場合は、もちろんデザイン調査をしっかり行うでしょう。多くの競合サイトのデザインを複合的に取り込んで、サイトのデザインに落とし込みます。
デザイン調査はともかく、SEO調査はより専門的な知見やスキルが必要になるので、また別の記事で解説しようと思います！
カスタマージャーニー作成
さて、事前調査でどんなサイトを作るのかを明確にしたら、カスタマージャーニーを作成します。お客さんが商品やサービスを認知してから、最終的に購入・利用し、さらにリピーターや口コミしてくれるようになるまでの、一連のプロセスを時系列で捉える考え方です。
カスタマージャーニーの作り方は業者によって異なりますが、以下に私が作成する際の例を載せています。私は、認知・興味・検討・商談・購入としていますが、扱う商品やサービスによってこの段階は変わってきます。
例えば、ECサイトであれば「商談」は必要ないですよね。タッチポイントやCTAも変わってきます。
ちなみにCTA（コール・トゥ・アクション）とは、Webサイトや広告、メールなどを閲覧しているユーザーに対して、運営者が「次に取ってほしい具体的な行動」を促すための要素やメッセージ全体を指します。
CTAといえば、ボタンやバナーなどを想像しがちですが、以下のようなテキスト上のものもCTAといえます。
場面や状況によって、テキストリンクかボタンかバナーかを適切に選ぶ必要があります。
コンセプトメイキング
コンセプトメイキングは、分かりやすくいうと商品のパッケージを決めるのとほぼ同じくらい重要だと思ってください。これによって、お客さんに商品やサービスがどう伝わるかが決まります。
ただコンセプトメイキングは、非常に難しく、想いや世界観をわかりやすく端的に人に伝えつつ、お客さんにどんなメリットがあるのかを端的に伝える必要があります。また、コンセプトをしっかり作り込んでいないと、会社やブランドのイメージなどがバラバラになる他、社員やメンバーの意識にもズレが生じてしまいます。
これは、Webサイトのみの話ではなく、ビジネス全体で重要な要素として覚えていて欲しいです！
コンセプトがブレていると目先の目標にだけ集中してしまい、誤ったサービスを展開してしまう恐れがあります。
コンセプトメイキングの基本として、まずは以下の質問の答えを考えるところから始めましょう。
- 大切にしている考えは？
- 自社サービスを一言で表すなら？
- ターゲットとペルソナはどんな人？
- お客さんにどんな体験をさせたい？
- お客さんにどんな価値を提供できる？
- お客さんにどうやってサービスの提供する？
これらの質問の回答が揃ったらキャッチフレーズを考えます。キャッチフレーズは、『できるだけ短く端的に、抽象的すぎない一言』を考えましょう。
弊社では、キャッチフレーズ案を30フレーズ以上考えるようにしています。その中で弊社は『企業が抱える停滞を、戦略と実行で打破する。』というキャッチフレーズを選定しました。
キャッチフレーズの考え方もまた別の記事で詳しく解説したいと思いますのでお楽しみください！
Webサイト設計
ここまでやって、ようやっとWebサイトの設計を始めます。
サイトマップ作成
まずは、サイトマップを作成します。あらかじめトップページを基準に下層ページとURLを決めておきます。サイトマップ制作に合わせて、ページのタイトルとメタディスクリプション、H1を設計します。
メタディスクリプションとは、Googleなどの検索エンジンでキーワードを検索した際に、タイトル（青いリンク）の下に表示されるページの概要説明文を指します。
以下からサイトマップのテンプレートシートをダウンロードできるます！
こちらは弊社が実際にWebサイト制作で使用しているスプレッドシートを添付していますので、是非コピーして使ってみてください！
スプレッドシートには、「ヒアリングシート」「スケジュール」「サイトマップ【例】」が含まれています。
キーワード設計
次はSEOに直接影響するキーワード設計を行います。キーワード設計とは、ユーザーがどのようなキーワード検索で自社サイトへアクセスしてもらうかを考えることです。
検索意図は、Googleの提唱をもとに考えると、「Knowクエリ」「Goクエリ」「Doクエリ」「Buyクエリ」の4つに分類されます。
検索意図とは、そのキーワードで検索したユーザーの目的のことを指します。例えば、Knowクエリだと検索したキーワードについて知りたくて検索していると推定されます。同じく、Goクエリは検索したキーワードの場所に行きたい、Doクエリは検索したキーワードを実際にやりたい、Buyクエリは検索したキーワードの商品やサービスを購入したくて検索していると推定されます。
内部リンク設計
次は、内部リンク設計を行います。内部リンクとは、作成したページにアクセスしてもらえるようにトップページなどのアクセスが多いと想定されるページにリンクを設置することです。
ここで重要なのは、特定のページへのアクセスをふやすために1つのページでなく複数のページからリンクすることです。特に下層ページになればなるほどアクセス数が少なくなってしまうため、下層ページをまとめたページなどをトップページやヘッダー、フッターにリンクを設置しておくと間違い無いでしょう。
次は内部リンクの方法です。リンクはバナー、ボタン、テキストリンクの3つに分類されます。
以下のNG例ではテキストリンクがダメという訳ではなく、テキストだけだと情報量が少なく、その先のページがどんなページなのかが分かりにくいという点です。逆に、メニューに設置するような「サービス紹介」や「企業情報」「お問い合わせ」というのは一般的なページであるためテキストリンクでも十分です。
ところで皆さんは、以下のようなヘッダーメニューやハンバーガーメニューを一度は見たことがあるのではないでしょうか？
LPと呼ばれるWebサイトに多いですが、メニューの「お問い合わせ」のみがテキストリンクでなくボタンになっています。
これは、他のメニューよりも目立つようにしてお問い合わせを増やす目的で
「お問い合わせ」のみをボタンにしています。これもCTA設計の一つといえます。
ワイヤーフレーム作成
ここまでできたらワイヤーフレームの作成です。デザイナーの方であれば聞き馴染みのある言葉ですね。
ワイヤーフレームは、どこにどんな情報を書くのか、どんな画像を挿入するのか、どこにCTAを設置するのかを細かく記したものになります。
デザインとは異なり、要素を配置する位置や大体の大きさを指定するものなので、デザインツールを使わずにスプレッドシートや手書きでもOKです！
ただ、ワイヤーフレームを元にデザイナーがデザインするため、分かりやすく詳細に指定することがポイントです。
コンテンツ制作
ここからやっと”制作”が始まります。『Webサイト制作』というとここからの作業のことを想像しがちですが、実際は、5つ目のステップとなります。
ページ原稿作成
先ほど作成したワイヤーフレームで指定した内容を元に文章を作成していきます。必要に応じて画像やインフォグラフィックスを制作して図やアイコンなどで視覚的に分かりやすく表現しましょう。
デザイン
デザインは重要ですが、戦略設計やコンセプトメイキングで決定したターゲットや世界観を元にデザインしていくため、戦略設計やコンセプトメイキングがしっかり行われていないとデザイナーさんも困ってしまいます。
「デザインはお任せで！」と言われ作ったデザインが「イメージと違った」と言われてやり直しさせられると言う話はデザイナーあるあると言えるでしょう。そうならないためにも、1〜5のステップはしっかり力を入れて行いましょう。
テーマカラー設計
テーマカラーは、ベースカラー・メインカラー・アクセントカラーの3色のカラーセットで構成します。場合によってはサブカラーを含めた4色で構成することもあります。
ユーザーに与えたい印象ごとのカラーセット例を以下の記事でまとめていますので、よかったら参考にしてください！
フォント選定
フォントは様々な種類があり、使用するフォントによってWebサイトのデザインや雰囲気が変わります。ブランドサイトでは、手書き風のフォントにしたり、筆字風のフォントやゲームっぽいフォントにしたりすることで、ブランドの世界観を出すことができますが、フォントのデザインを優先してしまうと読みづらくなり、サイト訪問者のストレスになる恐れもあるため、気をつけましょう。
レイアウト調整
ワイヤーフレームとページ原稿を元に、Webサイトの最終デザインを行います。これがそのまま実際に公開されるWebサイトになるため、要素の配置やフォントサイズ、配色など細かく調整します。
開発準備
いよいよ実際にWebサイトを作るための準備段階に入っていきます。
レンタルサーバー契約・独自ドメイン取得
Webサイトを構成するファイルを格納するためのサーバーとドメインを用意します。これら二つの準備が整うことで、初めてWebサイトをインターネットに公開できる状態になります。
DNS設定・SSL化
DNS設定などのサーバーの設定を行います。また、SSL化を行なっていないサイトはブラウザ設定によってはアクセスできないことがあるため、必ず行うようにしましょう。
開発・コーディング
完成したデザインを元にHTML・CSS・JavaScript・PHPなどのプログラミング言語を使用して実際のWebサイトを作っていきます。場合によってはWordPressなどのCMS（コンテンツ管理システム）と呼ばれるツールを導入したり、必要に応じてカスタマイズします。
ここは、コーダーやエンジニアの専門的な分野となるので、コーディングに関してはマーケティングの観点から重要な点のみを解説します。
構造化データ
構造化データとは、検索エンジンなどのコンピューターが内容を理解しやすくするために、特定の形式でマークアップ（記述）されたデータのことです。
構造化データの主な目的は、ウェブページ上の商品、レビュー、レシピ、イベントなどの情報の意味を、検索エンジンのクローラーと呼ばれる情報を収集するプログラムに正確に伝えることです。
間接的ですがSEOの強化として、検索エンジンがコンテンツを正確に理解することで、より適切な検索クエリで表示されやすくなります。
SEO対策
SEOの最も基本的な対策ではありますが、検索エンジン用サイトマップ（sitemap.xml）の生成やクローリングされたくないページにはrobots.txtかnoindexで対策しましょう。特にindex設定のミスは非常に多いため、注意しましょう。
Googleのクロールとインデックスは、Webページが検索結果に表示されるための重要な2つのステップです。インデックスに登録されていないページは、どんなに内容が優れていても検索結果には表示されません。
フォームの実装
お問い合わせフォームや資料ダウンロードフォームは、個人情報を扱うため、スパム対策として「reCAPTCHA」か「Cloudflare Turnstile」を必ず導入するようにしましょう。
どちらも無料で利用できますが、reCAPTCHAの場合は月間10,000回を超えると停止され、それ以上の利用は有料となるため注意が必要です。
テスト・検証
Webサイトが完成するとリリースの前に必ずテストと検証を行いましょう。テスト・検証を行なっていないと、半年間お問い合わせのメールが届いていなかったなんていうとんでもない損失を生んでしまう恐れがあります。
フォームがしっかり機能しているか、投稿は問題なく公開できるか、404エラーや表示崩れなどはないか、誤字脱字はないかなど細かくチェックしましょう。
リリース・運用
テスト・検証で問題がなければリリース（公開）しましょう。これでWebサイト制作は完了ですが、冒頭にも記述した通り、Webサイトは作るだけでは全く意味がありません。再度Webサイト制作の目的を再認識し、その目的に向けて運用していく必要があります。
具体的な運用としては、以下のつが挙げられます。
- Web広告運用
- SEO対策・SEO記事制作
- アクセス解析に基づく改善
長くなってきたので、これらについてはまた別の記事で詳しく解説したいと思います。
まとめ
今回は、Webサイト制作の正しい流れを解説しましたが、いかがでしたでしょうか？
誰でも簡単にWebサイト自体は作ることができる時代ではありますが、マーケティングの観点から言えばそれはエアガンやモデルガンと同じようなものです。実銃を作るためにはこの1〜10の正しいステップを踏んでWebサイトを作る必要があります。
