BtoB企業の製品サイトやサービスサイト、コーポレートサイトなどのWebサイトを制作・リニューアルするプロジェクトにおいて、手戻りなく進行するための事前チェックリストを作成しました。
とくにWebサイトの規模が大きくなると関係者が増え、プロジェクト進行の難易度は上がります。しかし、各工程でどういう点をチェックすべきかがあらかじめ明確になっていれば、プロジェクト成功の確率は高くなります。
※本記事はWebサイトの制作プロジェクトにかかわる担当者向けの内容です。
Webサイト制作プロジェクトにおける、130の工程別チェックシート（Excel）※個人情報の入力は必要ありません。クリックするとファイルがダウンロードされます。
才流では「Webサイトの作成」「Webサイトの改善・リニューアル」でお困りの企業さまを支援しています。Webサイトで課題がある方はお気軽にご相談ください。⇒サービス紹介資料の無料ダウンロードはこちら
Webサイト制作の戦略立案に関わるチェックリスト
まずはサイトをつくる前の戦略立案に関わるチェックリストです。
目標設定やターゲットの明確化、集客経路の設計やコンテンツ作成のリソース確保など、時間はかかりますが、Webサイトの成果を左右する部分です。
目的・目標設定に関わるチェックリスト
- Webサイト制作・リニューアルで解決するマーケティング課題を明確にする
- Webサイト制作・リニューアルの目的を設定する
- Webサイト制作・リニューアルで達成したい目標を設定する
- Webサイト制作・リニューアルで達成したい目標が、SMARTゴール（※1）になっているか確認する
- 目標の達成期限、またはサイトリニューアルの完成時期を決める
※1：SMARTゴールとは、ジョージ・T・ドラン（Dr. George T. Doran）博士が提唱した法則。Specific（具体的に）/Measurable（測定可能な）/Achievable（達成可能な）/Related（経営目標に関連した）/Time-bound（時間制約がある）の5つの要素を満たした目標設定の仕方
現状調査・課題抽出に関わるチェックリスト
- 現行Webサイトのアクセス解析を行う
- 見込み顧客/既存顧客にユーザーインタビューを行う
- 見込み顧客/既存顧客にアンケート調査を行う
- 現行Webサイトに対するユーザーテストを行う
- 経営者や事業責任者にヒアリングを行う
- 営業パーソンにヒアリングを行う
- 競合企業のマーケティング活動やWebサイトを分析する
- 目標達成に向けた現行Webサイトの課題を抽出する
Webサイトの企画に関わるチェックリスト
- ペルソナを明確にする
- カスタマージャーニーマップを作成する
- Webサイトの役割を明確にする
- 製品・サービスの選定前、選定時、導入後など
- Webサイトに必要な機能やコンテンツを明確にする
- Webサイトに設定するキーワードを決める
- ペルソナの検討フェーズごとに最適なCTA（Call To Action）を設計する
- Webサイトへの集客経路を設計する
- 広告、オーガニック検索、メール、営業による連絡など
- 集客のためのリソースを確保する
- 予算、人員など
- コンテンツ作成が必要な場合、リソースを確保する
- 予算、人員など
- 自社の製品・サービスが解決する課題を明確にする
- 自社の製品・サービスが提供する価値を明確にする
- 自社の製品・サービスが選ばれる理由を明確にする
- IR、採用などコーポレート関連のページへの動線や取り扱いを決める
- 多言語展開をするかを決める
サイト外で検討すべきチェックリスト
- リード獲得後の対応ルールを明確にする
- リード獲得後の対応ルールに関して、インサイドセールスやフィールドセールス部門とすり合わせを行う
- リード獲得後、商談や受注獲得までのコミュニケーション・プロセスを設計する
Webサイト制作の全体設計に関わるチェックリスト
つづいて、制作フェーズのチェックリストです。
おもににサーバーやツール類の選定に関わるもので、その先の開発規模や予算、運用体制を決定するため、考慮すべき事項が多くなります。
Webサイト全般に関わるチェックリスト
- 対象とするOS（オペレーションシステム）、ブラウザを決める
- 対応するデバイス（PC、スマートフォン、タブレット）を決める
- 契約するWebサーバを決める
- WebサーバのOSを決める
- サーバへの接続方法を決める
- 利用するフォーム、CMS（コンテンツマネジメントシステム）、その他プログラムに対応したPHP、Perl、CGI、DBの環境を決める
- SSLをどこで契約するかを決める
- ドメインはどこで契約するかを決める
- ドメインは何にするかを決める
- 404ページを用意する
- リニューアル後のtitle,meta descriptionを各ページ定義し、設定する
- OGPを設定する
- ソーシャルボタンの種類を決める
- ソーシャルボタンを設定する対象ページを決める
- ソーシャルボタンを設置する
- 印刷用のCSSを分けて作成するかを決める
- タグマネージャー、広告タグはどこに何を設置するかを決める
- 翻訳はどこで作成するかを決める
- 現状のサイトマップとリニューアル後のサイトマップを作成する
ツール選定に関わるチェックリスト
- CMSを導入するか決める
- CMSの導入範囲をどこにするか決める
- ニュース、ブログ、FAQ、製品検索など
- CMSは何を導入するかを決める
- 有償か、無償か
- CMSで必要になるプラグインは何かを決める
- CMSのユーザー権限を設計し、利用ユーザー数を決める
- フォームはCMSの機能を使うか、フォーム作成ツールやMAツールで作成するかを決める
- CMS以外のツールを導入する場合、その名称とプラン名を決める
- フォームで回答した際のメールの送信先、件名、本文をフォームの種類ごとに準備する
- フォームで必須チェックする項目、入力内容チェックする項目と内容を決める
- 例：メールアドレスでフリーアドレスを除外するなど
- フォームのmeta charset指定（文字コード）はどうするかを決める
上記で記載した内容のうち、特に予算に関わる部分は
- Webサーバ
- ドメイン
- SSL
- CMS
- フォーム
の5つです。運用維持費がかかるサービスもありますので、初期費用と運用維持費を加味して選定する必要があります。
また、Webサーバをクラウドサーバとするかレンタルサーバとするか、という判断基準として、社内ポリシー、セキュリティ・信頼性、アクセス数、システム構成あたりがあります。システム的な専門性の高い領域ですので、このあたりを加味して制作会社や開発会社に最適な構成を相談するのが望ましいです。
Webサイトのワイヤーフレーム設計に関わるチェックリスト
おもにデザインやユーザビリティを担保するためのチェックを行います。
なお、才流で公開しているBtoBサイトのワイヤーフレームとチェックリストは、以下よりダウンロードできます。あわせてご活用ください。
※関連記事：BtoBサイト制作の『型』となるワイヤーフレームと180項目のチェックリスト
デザイン・レイアウトに関わるチェックリスト
- ペルソナを明確にした上でデザインの方向性を決める
- 法人企業としての信頼感を与えるWebサイトのデザインにする
- Webサイト全体でデザインの一貫性を持たせる
- 企業名とロゴをは全ページに設置する
- Fの法則（※2）を意識したレイアウトにする
- デフォルトのフォントサイズは12px以上にする
- 参考デザインを洗い出し、デザイナーに共有する
- 参考デザインのどの部分が良いかをデザイナーに共有する
- 逆にイメージと遠いデザインも洗い出し、デザイナーに共有する
- デザインの方向性に関して、社長の合意を取る
- 写真、イラストなどの素材の必要な点数を洗い出す
- 写真やイラストはどこで手配するかを決める
- 写真やイラストを手配する場合は想定点数を決める
- 写真は購入、撮影のどちらにするかを決める
- （撮影する場合は）写真撮影のカメラマンをアサインする
- 写真撮影の日程を調整する
- 必要な写真撮影カット一覧を作成する
- イラストは購入、制作のどちらにするかを決める
- 必要なイラスト一覧を作成する
- イラスト作成のためのサンプルや手書きイメージを用意する
※2：Fの法則とは、ユーザーの視線はページの左上のコンテンツエリアからF字を描くように移動する法則のこと
ナビゲーションに関わるチェックリスト
- 全ページで一定の形、位置に設置する
- わかりやすい、簡潔な名称をつける
- グローバルメニューの項目はできる限り少なく検討する
- ヘッダやグローバルメニューにCTAを設置する
- パンくずメニューを全ページに設置する
- 3クリック以内で全てのページにたどり着けるような設計にする
- ※4クリック以上必要なサイト規模の場合は、サイトナビゲーションを活用して回遊のしやすさを担保するなど、ユーザーが迷わない工夫を行う
ユーザーを迷わせずに目的のページに誘導できるか、そこから正しいアクションを起こしてもらえる設計になっているかなど、ナビゲーションは非常に重要な部分です。
ここでは最低限の項目にとどめていますが、詳細は上でも紹介した記事でご覧いただけます。
※関連記事：BtoBサイト制作の『型』となるワイヤーフレームと180項目のチェックリスト
Webサイトの原稿を準備する際のチェックリスト
ページの原稿を用意する際に注意すべき点を記載します。既存のWebページの原稿を流用する場合も本項目をチェックして修正が最小限に抑えられると理想的です。
- 自社で作成するか、制作会社で作成するかを決める
- 対象ペルソナにマッチした文体を決める
- 用語の統一のため、用語集をあらかじめ作成する
- 専門用語はわかりやすい言葉に置き換える
- 難解なことを説明する場合は、画像やイラストを挿入してわかりやすく解説する
- 結論から先に述べ、その次に根拠となる情報を書く構成にする
- 見出し、段落、余白、箇条書きを効果的に使うなど、流し読みをしやすい文章を心がける
- 説明する項目が4つ以上ある場合は箇条書きを用いる
- 箇条書きの前に具体性のあるリード文を書く
- 例：「弊社が選ばれる理由は以下の4つです」など
- 手順を説明する場合は番号をふる
- 箇条書き箇所はインデントする
- 各項目の書き出しに同じ語句を繰り返し使っていないかをチェックする
- 各項目の文法に一貫性を持たせる
- 例：体言止めや常体/敬体で統一する、など
- 似た要素はグループ化する
- 特に記事コンテンツの場合、1つのコンテンツ内でページを複数に分割しない
- 見せたいコンテンツが多くある場合は、テーマを分類するなどしてページを分割する
少し抽象的な表現の部分もありますが、顧客や製品に合わせて自社の原稿作成ルールを策定してチェックできると品質を高めることができます。一度共通したルールを定めると、それ以後にコンテンツを作成する際に使い回しできますので、ぜひ参考にしてみてください。
コーディング時のチェックリスト
コーディング時のルール、ならびにコードチェック時のチェックリストです。
- link rel=”canonical”の指定は行うか、行う場合の設定ルールはどうするか決める
- meta name=”robots”の指定はどうするか決める
- DOCTYPE 宣言は何を指定するか決める
- meta charset（文字コード）は何を指定するか決める
- meta copyrightの指定内容を決める
- PrintCSSの設定が必要な場合は設定する
- JavaScriptのライブラリは何を指定するか決める
- プラグインに関する指定は何を指定するか決める
meta要素に関するチェック項目が多く、抜け漏れを防止する目的のチェックリストです。ルールを決めてテスト時にチェックできるようにしておくと効率的です。
ページテスト時のチェックリスト
これまでのチェック項目を踏まえて制作を行ったあとに、ページテストの際に使用するチェックリストです。Webサイトの品質担保のために活用ください。
全般
- 404ページを用意し、存在しないページで表示される
- 404ページにはトップページ、サイトマップ、サイト内検索などへのリンクを設置する
- httpでアクセスした際に、httpsへリダイレクトされる
- wwwなしでアクセスした場合にリダイレクト、あるいは直接表示される
- 古いページのリダイレクト設定は正しくされる
- ダミーの画像やテキストが残っていない
個別ページ
- 企業名とロゴからトップページへリンクが貼られている
- ナビゲーション、フッターのリンク切れが起きておらず、正しいリンク先である
- meta情報（title、descriptionなど）が正しい内容である
- Googleアナリティクスや広告などのタグあるいはタグマネージャーが設定されている
- OGP設定を正しく行えている
- 本文中のリンク切れが起きておらず、正しいリンク先である
- 原稿通りに流し込みが完了している
- 画像には代替文字（alt指定）がされている
- 指定したOS、ブラウザで正しく表示される
- 指定したデバイスで正しく表示される
- 構文エラーが出ていない
フォーム
- 必須チェックやアドレスチェックなどが正しく動作する
- 指定した宛先、件名、本文で受け付ける
- 問い合わせ内容をお客様へ送付する設定にしている
- メールが文字化けしていない
- Webメールだけでなく、Outlookなどのクライアントでも検証
ページテスト時のチェックには以下のツール活用も効果的です。
title、description、alt、OGPなどの確認ができるChrome拡張機能
Facebook、Twitterでの実際のOGPの見た目の確認ができるデバッガ
OSやブラウザなどのテストすべき項目は、これまでの全体設計やコーディング時のチェックリストで決定したものを踏まえたチェックとなります。そのためにも事前の工程できちんと設計決定した上でチェックリストを作成し、テストを完了することで手戻りなく効率的な制作進行ができます。
本チェックリストでは「Webサイト制作」にとどまらず、「Webサイト制作プロジェクト」という前後工程を意識した進行管理も含めて紹介しました。
もし担当する人数が増えたり、工程で担当が変わったりしても手戻ることがないように、前工程で決定したことが後工程でのチェックリストのインプットになる点を意識して、品質を担保できるように作成しました。
一定規模以上のプロジェクトに関わる方の一助になれば幸いです。
才流では成果が実証されたメソッドにもとづき、マーケティング戦略立案から施策実行まで支援しています。マーケティング活動で課題を感じている方はお気軽にご相談ください。⇒才流のサービス紹介資料を見る（無料）
