あなたが企業Webサイトの新規制作やリニューアルを担当しているなら、知っておかなければならないことがある。もしあなたにWeb制作に関する知識がないまま取り組むならば、Web制作会社がとても優秀で、誠実でおせっかいでない限り、Webマーケティングに活用できるWebサイトを作ることは難しいということだ。
そもそも、作ろうとするWebサイトの要件をあなたが明確にできていなければ、Web制作会社はどこまでを見積金額にいれたらいいかもわからない。結果として、Web制作会社の選択は、「要件数を少なく設定し、安い金額で見積もって受注し平凡なWebサイトを制作する」か、「無理難題が五月雨式にやってくる案件に備えて、大きな金額で見積もりを出しておく」かの2択となりやすい。
細かい要件定義は制作会社に任せるにしても、チェックを入れるだけの知識は付けておいたほうがいい。「要件定義にないものは漏れる・実現されない」ということを理解しておくことが失敗を回避するには重要だ。
なにしろ、通常Webサイトは制作・リニューアル後から5年ほどは使うことが前提となっている。しっかりと作っておかなければ、その後5年間のチャンスロスが大きく返ってくるので、軽い気持ちで取り組まないことだ。
そこで、品質が高いWeb制作・リニューアルを実現するために、Web担当者であるあなたがまずやるべきこととして、Web制作に関する基礎的な知識を速習することをおすすめしたい。それにはチェック項目を一覧できるチェックシートやチェックツールを使うのがいい。
以下に、私たちネットビジネスエージェントが普段のWeb制作の流れの中でサイト公開までにチェックしているポイントをチェックリストとして公開したい。まずは、このチェックリストを確認することで、Web制作に必要な知識が網羅できる。リリース前にも役に立つだろう。ぜひ丁寧に読み込んでみてほしい。
チェックリスト1. Web戦略策定
主にWebディレクターやコンサルタントなどが行うフェーズのチェックリストです。Web戦略策定の流れについて詳しくは当社Web戦略策定支援のページでご確認ください。
Web戦略策定支援 »
ゴール設定
WebマーケティングやWebサイトの役割を明確にします。
Webサイトのゴールには、「見込み客（リード）の獲得」、「サービス申し込み」、「商品購入」、「サポートの充実」、「人材採用」などがあります。
訪問者をメール登録などでリード化できれば、情報を届け、こちらの思いや考えを伝え、再訪問を促すことができます。
ゴール設定についてもっと詳しく »
リサーチ
インターネット上での顧客やその行動・感情、競合の戦い方、保有する自社の強みや資源を明確にします。
ペルソナとは、あなたの商品やサービスを利用してくれる典型的なユーザー像のことです。顧客ターゲットになります。Webサイト制作に関わるチームメンバー間でペルソナに対する認識を合わせておきましょう。
顧客ターゲットが抱えている疑問や課題を理解していれば、「SEOを狙うべき検索キーワード」も「Webサイトに必要なコンテンツ」も明確になります。Webサイトのコンテンツを検討する上で、不可欠です。
検索、SNSなどの他の接点も理解することで、「接点で届けるべきコンテンツはどうあるべきか」を検討することができます。また、マーケティングを考える際に、接点を再考し増やすこともできます。例えば、店舗であれば、チラシなどにQRコードを追加して誘導することもできますし、オフラインでネットショップで使えるクーポンコードを配るなどの手法も考えられます。
顧客ターゲットが検索しているキーワードには、主に「1. 指名ワード（社名、商品・サービスのワード）」、「2. ターゲットワード（SEOの主となるワード）」、「3. 商品・サービス情報収集ワード（ターゲットワードを含む情報収集に用いるワード）」、「4. 課題・ニーズ情報収集ワード（問題解決の情報を収集する際に用いるワード）」、「5. 用語ワード（不明用語を調べる際のワード）」の5つがあります。
上位表示されるサイトのビジネスモデルやWebマーケティングの手法、サイト構造、強みや弱み、ターゲットを惹きつける点などを理解した上で、ベンチマークし、サイト設計に活かしましょう。
固有の強みやWebマーケティングに充てられる人材や時間、年間予算などを把握しておきましょう。
リサーチについてもっと詳しく »
Webマーケティング計画
自社のリソースに配慮しながら、継続性のあるWebマーケティング活動を計画します。
バリュー・プロポジションは、「顧客が欲していて、自社が提供できるが、競合は提供できない価値」に着目しながら、これをキャッチコピーやテキスト、ビジュアルなどで表現します。キャッチコピーは、通常トップページのヒーローイメージ部分で表現され、バリュー・プロポジションに沿ったコンテンツがWebサイトに展開されることになります。裏を返せば、バリュー・プロポジションを明確にしていなければ、Webサイト全体がユニークでなくなり、他社サイトで替えがきくものとなる恐れがあります。
Webマーケティング活動として、毎日、毎週、毎月、毎年やるべきタスクや担当者をリストアップして計画を立てましょう。
「年間資料請求数」など、Webサイトのゴールを数値化しておきましょう。
KGIを達成するために必要なKPIを設定しましょう。セッション数やリード登録数などが考えられます。
Webマーケティング計画についてもっと詳しく »
チェックリスト2. サイト設計
Webディレクターやコンサルタント、編集者、コンテンツクリエイターなどが行うフェーズのチェックリストです。SEOの視点を盛り込みながら、コンテンツやサイト構造について検討・決定していきます。詳しくはWebサイト設計のページでご確認ください。
Webサイト設計 »
コンテンツ検討
ゴールを達成するために本当に必要なコンテンツは何なのかをリサーチで得た情報などをもとにして多角的に考えます。
顧客ターゲットが解決したい疑問や課題、検索する検索キーワードなどとコンテンツの整合性が取れているか確認しましょう。
戦略策定段階で設定したバリュー・プロポジションに基づいて専門性をもたせましょう。
「集客系コンテンツ」は、ブログや用語集などの検索やSNSなどから流入を増やすためのコンテンツで、「成約系コンテンツ」は商品情報、導入事例、実績、お客様の声など、コンバージョンを高めるために必要なコンテンツです。いずれがかけても、大きな結果を得ることができません。
サイトを訪れたユーザーがストレス無く目的の情報に辿りつけるようにトップページのコンテンツはサイト全体像の把握を助ける構成にしましょう。
トップページは基本的に最もアクセス数の多いページです。訪れたユーザーに他のページも見てみたいと思わせる魅力的なコンテンツをファーストビューに配置するようにしましょう。バリュー・プロポジションの表現も大切です。
サイト構造検討
コンテンツをページ単位に整理した上で、どのようにリンクを貼れば、ユーザービリティが高いサイト構造に仕上がるのか検討します。
Webサイトを訪れるユーザーが、スムーズに目的を達成できるようカテゴライズを行い、サイト構造を組み立てましょう。構造が深くなる場合には、ユーザーが深い階層まで3クリック以内で辿り着けるようにリンクを設け導線を確保しましょう。
出来るかぎりシンプルで、自然な流れを意識しましょう。顧客ターゲットのカスタマジャーニーを事前に理解しておくことが大切です。
ナビゲーション設計
ユーザーにとって使いやすいサイトにするために、ナビゲーションのあり方を検討します。
検索などで流入してWebサイトを訪れる場合、必ずしも最初にトップページに訪れるとは限りません。ユーザーが現在どのページにいるのかパンくずリストでわかりやすく表示させることでサイトの回遊率アップにも繋がります。
グローバルナビゲーションは、ユーザーが求めている情報に辿りつくためのアシスタントの役割を担っています。ユーザーがどのページに居てもすぐに認識できる位置にナビゲーションバーを設置しましょう。また、重要度の低いものはフッターメニューなどに配置しましょう。
フッターは離脱を考えているユーザーの目を引く最後のエリアです。直帰率の低下やCV率のアップに繋がるコンテンツを配置しましょう。
ブログメディア等の投稿型のページや止むを得ずページ階層が深くなる場合には、ユーザーがアクセスしやすいようにローカルナビゲーション（カテゴリー等）を設けましょう。
長い文書や画像が多く掲載されているページは、ページの読み込み速度が遅くなりユーザーの離脱率にも繋がります。関連性があるページを分割する際にはページネーションを設け、ユーザーや検索エンジンに一連の繋がったページだと認識させましょう。
テーマや内容が類似するページが存在する場合には、関連ナビゲーションを設けてユーザーニーズに適した情報を提供しましょう。
商品の比較やサービスプランの比較が、簡単にできるようにしておきましょう。
お問い合わせ・申し込みなどユーザーに起こして欲しいアクションへの導線をしっかり設計しましょう。また、注意をそらすようなものがないかもチェックしましょう。
フォームなどの個人情報の入力を求める部分には必ずプライバシーポリシーページへのリンクを設置しましょう。また、プライバシーポリシーの内容についてもわかりやすく明確にしておきましょう。
フォームなどユーザーが操作・入力を行うコンテンツは、項目が多いとCV率の低下に繋がります。お申込み、お問い合わせ、資料請求、購入などの最終タスクを簡単に完了できるように配慮しましょう。
Facebook、Twitterなどのシェアボタンやフォローボタンは、コンテンツの直後などアクションを引き出す場所へ配置するように設計しましょう。
原稿・編集
精読率が上がることを念頭に置きながら原稿作成と見出しなどを検討します。SEOの視点も加味しながら、原稿チェックを行います。
サイト全体の口調を統一することで、一貫性が生まれます。また、ターゲットに合わせた口調を使用することでブランドイメージを効果的に印象づけることができます。
誤字・脱字を放置しておくと、Webサイトやその企業のマイナスイメージに繋がるだけでなく、SEOに影響する可能性もあります。
機種依存文字を使用すると、文字化けの原因になるので使用は避けましょう。
全角英数字は、ブラウザによっては禁則処理がされず、可読性にかけます。数字、英語、記号をしっかりと統一化しましょう。
日付の表記が統一されていない（西暦と和暦の混在など）と、ユーザーにストレスを与えてしまいます。サイト全体を通して表記のルールを定め統一化しましょう。
データや資格情報などを明示して、専門性を伝えましょう。
冗長な文章は精読率が下がります。興味を引くような見出しを入れてメリハリを付け、精読率を高めましょう。
メタ情報
タイトルやディスクリプションは、SEO、検索エンジンからの流入（クリック率／CTR）を高めることを念頭に置いて検討します。
チェックリスト3. Webデザイン
主にWebデザイナーが行うフェーズのチェックリストです。Webデザインフェーズの具体的な作業については、Webデザインのページをご確認ください。
Webデザイン »
デザイン定義
デザインの初期段階で、デザイン定義を行い、Web制作に関わるチームでデザインの方向性を共有することで、その後のブレを少なくします。
ターゲットとしているユーザーに伝えたい自社の企業イメージをムーディングボードなどで明確にし、チームと共有しましょう。
コーポレートアイデンティティは、企業を想起させると同時に、企業イメージもユーザーに定着させます。コーポレートアイデンティティに沿ったデザインを心がけましょう。
色を多用しすぎると、ユーザーに与えたいイメージが上手く伝わらなくなります。コーポレートカラーを元にメインカラー、ベースカラー、アクセントカラーを定めましょう。メインカラー・ベースカラー・アクセントカラーの割合を25:70:5の比率にするとサイト全体がまとまった印象に仕上がります。
単に情報を整理するだけでなく、デザインによる感情変化にも心を配りましょう。
UI設計
ユーザーにとってわかりやすいWebサイトにするために、ユーザーインターフェイスの動き、色、装飾等を検討します。
フォントの種類を多用すると、サイト全体が散漫な印象になってしまいます。フォントの種類は最低限に抑えましょう。
フォントの種類や大きさ、太さ、色、行間、行幅に考慮して可読性を確保しましょう。
タイトルや見出し、本文テキストのデザインが全く同じだと、ユーザーがどの情報が重要なのか（要点は何か等）が把握できません。フォントの種類や大きさ、太さ、色や装飾を使い分けてユーザーが直感的に構造を理解できるデザインにしましょう。
ブログやお知らせといった随時更新されるコンテンツの場合には、タイトルや見出しなど不特定の文字数が入ってきます。不特定の文字数に対応できるデザインを心がけましょう。
色や装飾でそれがテキストリンクだと分かるように区別をつけ、目に見える動きを与えることでクリックできると判断ができるデザインにしましょう。
行動を喚起するボタンが、きちんとその役割を果たせるように表示する文字やアイコン、クリッカブル範囲をデザインしましょう。
ユーザーが現在どのページにいるのか正しく表示させることでサイトの回遊率アップにも繋がります。サイト構造上のどのページを見ているのかが分かるデザインにしましょう。
ユーザーが現在何ページ目にいるのかが正しく理解できるよう、現在何ページにいるのか、前後のページとの関連性が直感的に分かるデザインにしましょう。
各パーツがどういった機能なのかが分からないとCV率の低下に繋がります。Web標準を元にユーザーが直感的に操作・入力・選択できるデザインにしましょう。
例えば、メールフォームの「入力→確認→完了」のステップなどは、わかりやすく表示しましょう。
配置しているアイコンのテイストが異なるとWebサイト全体がバラバラな印象になります。また、コンテンツと関係のないアイコンの配置はユーザーの思考を妨げる原因になるので適切なアイコンを配置しましょう。
ページごとに装飾やUIデザインがバラバラだと統一感が損なわれユーザーのストレスにも繋がります。Webサイト全体を通して装飾・UIに一定のルールを定めましょう。
Web標準からかけ離れたUIデザインだと、ユーザーが直感的にそれが何なのかが理解できなくなります。考えなくても、それが何なのかが直感で分かるデザインにしましょう。
レイアウト
ユーザーにとってコンテンツがわかりやすく、また商品・サービスの検討やアクションに繋がるようにレイアウトします。
ユーザーがWebサイトに訪れた際に、ひと目見ただけで何についてのWebサイトなのかが分かるようにヒーローイメージやキャッチコピーをデザインしましょう。
顧客ターゲットのニーズを理解した上で、レイアウトを行いましょう。
トップページで商品・サービスがどのようなものかしっかりと伝えましょう。
顧客ターゲットにとって、役に立つコンテンツがあることをトップページで伝えましょう。直帰率を下げることができます。
トップページは一般的に最もトラフィックが多いページです。次の行動を引き出せるように心がけてデザインしましょう。
ユーザーは必ずしも一番最初にトップページに訪れるとは限りません。瞬時にユーザーがどのページに訪れたか判断ができるようにトップページとその他のページを区別できるデザインにしましょう。
グラフィックは興味をもたせ、目を留める要素として大切です。目を留めることにより、コンテンツを読み出しますので、意味があるグラフィックをしっかり配置しましょう。
ユーザーにストレスを与えないように、各ページのレイアウトに統一性をもたせましょう
人の視線の法則である「Zの法則」や「Fの法則」を基本としてコンテンツを配置し、ユーザーがスムーズに理解できるレイアウトにしましょう。
関連する情報を近づけて配置し、関連しない情報との間には適切な余白を設けることで、ユーザーが視覚的に理解しやすいレイアウトを作ることができます。
情報の優劣をデザインでもつけて、ユーザーが求めている情報に視線が集まるようにしましょう。
ユーザーに求めるアクション（お問い合わせや資料請求など）のコンテンツを適切な箇所に配置・デザインすることでCV率アップに繋がります。
ユーザーがアクション（お問い合わせや資料請求など）を起こしたい時に探さずに済むよう、ヘッダーやフッターなど目立つ・分かりやすい位置に連絡手段や購入、申込みページなどへの導線をしっかり表示させておきましょう。
ナビゲーションバーを固定で配置する場合や追従型のシェアボタンを設置する際には、メインのコンテンツの邪魔になっていないか画面を占領していないか注意しましょう。
一画面あたりの情報量が少なすぎるとスクロールが増え、逆に情報量が多すぎるとユーザーが情報を処理しきれずに流し読みをしてしまい、ユーザビリティの低下に繋がります。デバイスごとに適切な情報量を心がけましょう。
できる限りシンプルで、自然な流れを意識しましょう。顧客ターゲットのカスタマージャーニーを事前に理解しておくことが役に立ちます。
複雑な背景のデザインや、背景色とコンテンツの色のコントラストが低いと可読性が失われるので注意しましょう。
データは、実績や事実をわかりやすく、真実味を持って伝えてくれます。
ユーザーのジャーニーや感情を理解した上で、Webサイトを設計しましょう。
PC、スマートフォンなど、複数の端末や解像度でのレイアウトを想定してデザインを行いましょう。
関連ページはサイドバーや記事の読み終わった後、トップページはロゴやフッターなどに配置することで、その他に興味を持っているページにも誘導することができます。
画像・動画
コンテンツにより具体性をもたせ、コンテンツの理解を促進させる画像や動画を用意します。
サイトのコンセプトやコンテンツの内容にあったクオリティの高い画像を配置することで、コンテンツの理解やブランドの印象が作られます。また、画像が多すぎると容量が重くなり表示速度が遅くなるので、無関係な画像は配置しないように気をつけましょう。
どのブラウザで見ても適正に表示される画像サイズにしましょう。画像の容量が重いとユーザーの離脱にも繋がるので気をつけましょう。
画像に文字を埋め込んでいる場合には、どの端末、どのブラウザで見ても文字が読めるように可読性を確保しましょう。
チェックリスト4. コーディング
主に、コーダーが行うフェーズのチェックリストです。主なコーディング作業については、コーディングのページをご確認ください。
コーディング »
コーディング
検索エンジンによるWebサイトの理解、モバイルフレンドリーや保守性などを考慮して丁寧にコーディングします。
レイアウトが崩れたりする事によりユーザーの利便性を損ねてしまい、SEOにも影響を及ぼします。
ユーザーの利便性を損ねてしまい、SEOにも影響を及ぼします。
コンテンツの内容を理解して適切にマークアップする事で、検索エンジンにより正確な情報を伝える事ができます。
適切な階層構造にする事で、検索エンジンにより正確な情報を伝える事ができます。
画像もそのページのコンテンツとして重要な役割を持っています。しかし検索エンジンは画像の内容は理解出来ないため、alt属性、およびファイル名でしっかり内容を伝えてあげましょう。
DOCTYPE宣言、文字コード、description、titleなどは、そのサイトやページの情報をGoogleなどへ適切に伝えるための必要な設定です。
OGP画像は、シェアされた時などタイムラインに表示される画像です。画像によってクリック率が変わります。600px×315px以上で画像を用意しましょう。
リンク切れはユーザーの利便性を損ね、ページの品質に影響してきます。定期的にリンク切れをチェックする事が必要です。
モバイルフレンドリーとは、ユーザーがスマホなどのモバイルでも快適に閲覧できるようにすることです。Googleは、パソコンサイトではなく、モバイルサイトをページ評価の基準にしており、レスポンシブデザインを推奨しています。
各種ブラウザやスマートフォンでもブラウザチェックを行いましょう。
表示速度は検索ランキング要因の一つで、パフォーマンスを高めることが大切です。不要なリソースなどを読み込まないようにしましょう。
FacebookのOGP設定にFacebook App IDの取得が必要です。
CMS/WordPress
WordPressなどのCMSを導入する際には、セキュリティ・保守性について検討します。
脆弱性を抱えたWordPressを使用することは可能な限り避けましょう。
テーマやプラグインに脆弱性が存在した場合、そのファイルを狙われる可能性があります。不要なテーマ・プラグインは削除しましょう。
ブルートフォースアタックを用いた不正なログインなどに対して対策を行いましょう。
最も狙われるユーザー名の一つであるadminは使用せず、加えて不要なユーザを削除する事で、不正アクセスされる可能性を抑えましょう。
SEO
SEOの観点から、コーディングに加えて、各種設定を行います。
SSL化する事で、セキュリティ面での安全やサイトの信頼性を高め、少なからずSEOにも効果を見込めます。
複数のURLが存在する場合は、リダイレクト処理を用いてURLの統一を行う事で、SEO評価の分散を防ぎます。
新サイトの適切なページにリダイレクト設定しましょう。
多言語ページ相互間でalternate属性を設定する事で、評価の分散やマイナス評価を防ぐ事ができます。また、言語や地域に応じて適切なページを検索結果に表示できます。
メタタグのcanonical属性を用いて、URL正規化を行いましょう。
サイトマップを作成しGoogle Search Consoleに正しいサイト情報を伝えましょう。
Googleインデックスに登録されないと検索結果に表示されません。Google Search Consoleを使用して各ページの状況を確認しましょう。特に重要なページに抜けがないか確認することをおすすめします。
Google AnalyticsとGoogle Search Consoleは、Webサイトの解析や状態確認をするための大事なツールです。使用できるようにWebサイトに設定しておきましょう。
フォーム
フォームはユーザーの最終アクションを途切れさせないように配慮します。
データ保全
Webサイト公開後の保守について検討します。
いざという時のためにバックアップを取得して、復旧できるようにしておきましょう。
サポート切れによってセキュリティ脆弱性や不具合が潜んでいる可能性があります。サーバー管理画面にて各バージョンの確認、または制作会社に相談を行いましょう。
チェックリストExcel版ダウンロード
Webサイト制作・リニューアルを成功させる112のチェックリストのExcel版を無料でダウンロードできます。ぜひご活用ください。
