Webサイトの制作時に確認すべきチェック項目をまとめました。
うっかり見落としがちな項目からセキュリティ対策、SEOまわりなど、ジャンルごとに分けてご紹介しています。サイト制作におけるチェックリストとしてぜひご活用ください。
サイト制作
まずは制作まわりのチェック項目から見ていきましょう。
ここで取り上げている内容は、企画や制作の初期段階に対応した方がよいものがほとんどです。制作してから修正を行うのは、大きな手戻りになるケースが多いことがその理由です。
一方で、制作まわりのチェック項目に対応するにはエンジニアやデザイナーなど開発者の力が必要です。
制作に関するチーム全体で密にコミュニケーションを取りながら、素早く間違いのない制作を進めていくようにしましょう。
スマホ対応できているか？
ご存じの通り、近年はパソコンよりもスマホなどのモバイル端末でインターネットを利用しているユーザーが増加してきています。下の総務省のレポートからも、スマホからインターネットを使っている割合はパソコンと同じくらいだとわかります。
（画像出典元： 総務省｜平成27年版 情報通信白書｜インターネットの普及状況 ）
皆さんもご経験があるかと思いますが、スマホのディスプレイからパソコン向けのページを見るのはストレスですよね。ページがスマホ対応をしていないと、離脱を招くことになりかねません。
Webサイトを作る際は、スマホなどのモバイル端末で正しく表示されているかしっかりとチェックするようにしましょう。
スマホに対応しているかをチェックするには、Googleのモバイルフレンドリーテストがおすすめです。
モバイルフレンドリーとは、2015年からGoogleが検索で導入しているアルゴリズムのこと。モバイルフレンドリーテストを行うことで、そのページがGoogleのスマホ対応の基準に沿っているかがチェックできます。
モバイルフレンドリーにパスしない場合は、原因となった改善箇所をリストアップしてくれます。開発途中にWebページを改善する時にも使えますね。
ブラウザの場合は、Chromeデベロッパーツールを使ってチェックする方法もあります。
» Chrome DevTools Overview – Google Chrome
Firefoxを使っているなら、アドオンのUser Agent Switcherを使ってもいいでしょう。
» User Agent Switcher :: Add-ons for Firefox
リンクは正しいか？
サイトに設置してあるリンクは、正しく機能しているか確認するようにしましょう。
主なリンクが正しいかをチェックする切り口としては、以下の2点があります。
リンク切れ
リンク切れはユーザーに不便を強いるだけではなく、SEO面でもマイナスになります。サイトの立ち上げ時にはあまりないかもしれませんが、リンク切れについては必ずチェックするするようにしましょう。
ところで、リンク切れはなぜ起きるのでしょうか？サイト立ち上げ時の場合は、URLの記載ミスが考えられます。また、外部リンクのURLが変わったり、サイトが閉鎖されてしまった可能性もあるでしょう。
つまり、リンク切れはいつ起こってもおかしくないのです。
いつ起こるかわからないリンク切れを、手作業でチェックするのは骨が折れます。そこで、リンク切れがチェックできるツールやプラグインを利用することをおすすめします。
リンク間違い
リンク間違いも、サイトにとっては大きなマイナスになります。意図した以外のページに飛ばされるのは、ユーザーにとっては大きなストレスになります。リンク間違いはゼロにするよう、確認を怠らないようにしましょう。
リンク間違いの探し方ですが、手作業で調べていく方法と、リンク切れと同じようにチェックツールを使うことが多いです。
フォームは正しく動作するか？
Webサイトには企業サイトやECサイトなど、さまざまな種類があります。当然ながら、Webサイトの目的もそれぞれ異なります。
そういった多様なWebサイトにあって、共通して重要なページ要素があります。それは、フォームです。
お問い合わせフォームや会員登録フォーム、商品購入フォームなど、フォームはあらゆるWebページに設置されています。デザインや項目はさまざまですが、コンバージョンにつながる重要さは共通しています。
フォームが正しく動作するかは、しっかりとチェックするようにしましょう。
フォームから送信ができるか、といった基本的なことはもちろんのこと、デバッグを行うこともお忘れなく。考えられるケースを一覧にして、テストを行うのがベストです。
ページ階層は深すぎないか？
Webサイトの中に、ページ階層が深くなっていないかチェックするようにしましょう。
そもそもページ階層を深くすることには、デメリットが多過ぎます。
例えば、一つだけ階層の深いページがあるとしましょう。ユーザーはこのページを見るために、メニューやパンくずなどいくつものリンクをクリックしなければいけません。これは大変手間なので、目的のページにたどり着く前に離脱をしてしまうかもしれません。
階層が深いということは、ユーザビリティが低いということになるのです。
また、クローラビリティも悪くなります。Googleなどの検索エンジンがページを巡回することをクロールと言いますが、その尺度としてクローラビリティという言葉が使われています。
クローラビリティが悪いということは、巡回しづらいサイトであることを指しています。これはつまり、SEOに悪影響があるということに他なりません。
ユーザビリティやクローラビリティを向上させるためにも、サイトのページ階層は（特別な理由がなければ）浅くするようにしましょう。
表示速度は問題ないか？
何らかの原因で読み込みに時間のかかるページがあると、離脱を招く大きな原因になってしまいます。デザインや機能だけではなく、ページの表示速度についてもチェックしておくようにしましょう。
ページの表示速度をチェックするには、Googleの提供している下記のツールがおすすめです。対象ページのURLを指定すると、モバイル（スマホ）とパソコンの両面から表示速度がチェックできます。それだけでなく、表示速度を向上するための改善点もリストアップしてくれる優れものです。
それ以外にも、ブラウザの開発者向けツールを活用するのも手です。例えば、Chromeデベロッパーツール（Chrome Developer Tools）のNetworkパネルではページの表示速度がチェックできます。
» Chrome DevTools Overview – Google Chrome
なお、スマホページの表示速度の改善ではAMPの導入も検討してみてもいいでしょう。AMP（Accelerated Mobile Pages）とは、GoogleやTwitterが参画しているスマホ表示高速化のプロジェクトのこと。AMPに対応したページは、表示速度を劇的に改善することができます。
» Accelerated Mobile Pages Project – AMP
AMPはまだ発展途上のプロジェクトですし、対応可能なページも限定されています。ただ以前よりも導入がしやすくなってきてはいるので、表示速度を改善したいケースでは役に立ってくれるはずです。
AMPの導入をサポートするWordPressプラグインもあります。
HTML構造は正しいか？
目に見える部分ではないのですが、HTMLが正しく記述されているかは非常に重要です。
HTML構造に間違いがあると、Googleなどの検索エンジンが正しくページをクロールできません。クロールのし易さをクローラビリティと言うのですが、HTML構造が正しくないとクローラビリティが下がってしまうのです。
サイトの公開前に、下記のツールを使うなどしてHTMLをチェックをしておくといいでしょう。
» The W3C Markup Validation Service
CSSの文法をチェックする場合は、下のツールが使えます。
» The W3C CSS Validation Service
主要なブラウザに対応しているか？
Webサイトの制作時は、開発者やデザイナーによって普段使いのブラウザが異なります。そのため、うっかり見落としているブラウザがあったりします。デザイン崩れや機能しない要素があったりすると問題ですよね。
対応するブラウザについては、できれば企画段階から決めておくといいでしょう。制作途中では各ブラウザでの表示や動作をチェックして、その都度修正を加えていくことになります。
サイトが出来上がってからチェックをするのは避けてください。対応していないブラウザが後から見つかると、大幅な手戻りになってしまう可能性があるからです。
ブラウザへの対応度合いがチェックできるツールやサービスとしては、Browser SandboxやCross Browser Testing Tool、Browseraあたりが人気です。
» Cross Browser Testing Tool: 1500+ Real Browsers & Devices
» Browsera – Automated Cross Browser Web Application Testing Service
ユーザビリティに配慮されたつくりになっているか？
Webサイトを使うのは、ターゲットとなるユーザーです。つまり、ユーザーにとって使いやすいデザインやつくりにする必要があるのです。ユーザビリティとはまさにそのことで、ユーザーがストレスなくサイトを使えるかということ。
ユーザビリティは非常に奥の深いテーマなのですが、ここではぜひ押さえて欲しいポイントを3つご紹介します。
現在位置がわかりやすいか？
Webサイトのページ数が多くなってくると、自分がいる現在位置がわからなくなることがあります。
それを防ぐために、パンくずやナビゲーションを上手に使うようにしましょう。ページ内に今の階層を表示したり、メニューで現在位置をアクティブにするなど工夫してください。
ページ要素が近接し過ぎていないか？
ボタンやリンクなどのページ要素が近すぎると、操作がしづらかったり、押し間違いの原因になってしまいます。指で操作するスマホでは、特にストレスの原因になる場合が多いです。
実際に操作をしながら、ページ要素がストレスなく配置されているかをチェックするようにしてください。視認性や操作性を中心に確認するといいでしょう。
不必要な操作がないか？
ユーザーの立場からすると、たった一つのクリックでも手間に感じるものです。不要な操作や入力項目があると、それだけでユーザビリティの低下を招く可能性があるのです。
過度な操作を要求していないかなど、ユーザーの立場からサイトの使い勝手をチェックすることが必要です。
SNS
Webサイトへの流入を稼ぐ方法として、SNSは日に日に重要性が高まってきています。SNSにコンテンツをシェアして、それが共有されていく。その結果、大きなアクセスを生むことができるのです。
サイトのジャンルを問わず、SNSの活用はマストと言えるでしょう。SNSを活用する上で行っておきたいことを、チェック項目として下にまとめていきましょう。
SNSアカウントは準備済みか？
ユーザーとの接点を増やすためにも、SNSは非常に大切です。Webサイトへの流入アップにもつながりますし、使いようによっては自社サービスのブランディングにもつなげることができるから。
Webサイトを制作するのであれば、SNSアカウントを作成して運用をしていくことも考慮するようにしましょう。
さて、その際に重要になってくることが一つあります。それは、SNSごとの特徴に沿った運用をしているかどうか、ということ。FacebookならFacebookなりの、TwitterならTwitterなりの運用方法があるのです。
フォトSNSサービスのInstagramを例にあげてみましょう。
10代や20代の若年層や女性のユーザーを多く抱えています。ファッションや最新の流行に敏感なユーザー層なので、そういったユーザーに支持してもらえるような投稿をしていく必要があるのです。
共有ボタンは設置してあるか？
ページ上のコンテンツをSNSのタイムラインに流すには、自らアカウントを作って投稿をするか、ユーザーにシェアをしてもらうかの2つがあります。後者を実現するために、ページにはSNS共有ボタンを設置するようにしましょう。
共有ボタンで対応しておきたいSNSとしては、FacebookやTwitter、Pocket、LINEなどがあげられます。他には、ブックマーキングサービスのはてなブックマークや、クラウドメモサービスのEvernoteなどもいいでしょう。
下の記事では、WordPressで共有ボタンを設置するためのプラグインの解説を掲載しています。こちらの記事も参考にされてください。
» WordPressでSNSシェアボタンが設置できるプラグイン5選（＋OGPの設定方法）
OGPは設定してあるか？
OGPとは、FacebookなどのSNSで共有されたときに、ページの種類やタイトル、概要、トップ画像などを明示するための方法のこと。OGPが設定してあれば、ページの内容が意図した通りに共有されることになります。
逆にOGPが設定してなければ、ページの内容が間違って共有される危険性があります。ひどいケースだと、全く関係のないバナーがトップ画像として表示されていることも。
コンテンツをより魅力的に・正しく共有してもらうために、OGPの設定は忘れずに行っておきましょう。
OGPの設定方法については、下の記事で解説しています。
» WordPressでSNSシェアボタンが設置できるプラグイン5選（＋OGPの設定方法）
SEO
SEO（Search Engine Optimization、検索エンジン最適化）とは、Googleなどの検索エンジンに対する施策のこと。SEOに取り組むことで、検索結果での上位表示が見込めるようになります。
SEOには大きく分けて内部対策と外部対策があります。
内部対策とは、自サイトの内側に行う施策のこと。SEOに効く重要タグを最適化したり、リンク構造を見直すなどの方法があります。一方で外部対策とは、主に外部リンクを稼ぐことを指しています。
SEOを考える上では、このどちらもが重要です。サイトの内側のしっかりと整えることも大事ですし、意味のある外部リンクもSEOにはプラスの効果があります。
ここでは内部対策にフォーカスして、制作時にチェックしておくべき項目をまとめています。どれも基本的で重要な施策なのですが、後回しにされてしまうことも少なくありません。
制作時にしっかりとチェックをしておき、SEOにも対応した、抜かりのないサイト運営につなげていきましょう。
SEOについては下の記事でも解説しています。よろしければ併せて参考にしてくださいね。
» SEO
メタ情報は設定したか？
検索エンジンにページ情報を伝えるため、メタ情報はとても大切です。メタ情報が正しく設定していれば、検索順位の向上に役立つでしょう。
また設定したタイトルやメタ情報は、Googleなどの検索結果にも表示されます。ユーザーはそれらのテキストを見てサイトを訪問するかを決めています。つまり、検索結果からの流入にダイレクトに効いてくるのです。
メタ情報としては、タイトル（title）と説明文（description）の2つを設定しておけばいいでしょう。一昔前はキーワード（deywords）も重要だったのですが、現在では設定する必要はありません。
タイトル（title）
タイトルはメタ情報として最も大事です。そのページにどんな内容が書かれているかが一目でわかるからです。
それでは、タイトルはどのように設定すればいいのでしょうか？良いタイトルを設定するには、下の4点を考慮して設定をすることが一般的です。
- 文字数の目安は32文字。
- キーワードを入れる。（ただしキーワードの詰め込みは厳禁！）
- 大事なことは前半に入れる。（後半は省略される可能性あり）
- ユーザーを惹きつける文章にする。
上の3つはいいのですが、4つ目の項目は少しわかりづらいかもしれません。
ユーザーを惹きつけるタイトルにするには、いくつかのポイントがあります。例えば、読者を指定したり、具体的な数字を入れたり。しかし最も大事なことは、改善を行うことです。
タイトルは一度設定したらそれで終わりにするのではなく、できれば継続的に改善していくようにしましょう。
説明文（description）
ページの概要にあたるのが、説明文です。
タイトルだけでなく、説明文も検索結果に表示されます。説明文を全ページ設定するのは手間ですが、SEOを考えてぜひ設定するようにしましょう。
説明文は下の4点を意識しながら設定をしましょう。
- 文字数の目安は120文字。（スマホでは50文字が目安）
- キーワードを入れる。（ただしキーワードの詰め込みは厳禁！）
- 大事なことは前半に入れる。（後半は省略される可能性あり）
- コンテンツを簡潔に、かつ魅力的に伝える。
上のポイントからわかるように、注意すべきポイントはタイトルと似ていることがわかるでしょう。
タイトルもそうなのですが、説明文とコンテンツの内容にはズレがないようにしてください。この2つに齟齬があると、検索エンジンに対しても、ユーザーに対しても大きなマイナスになります。検索順位の悪化や、離脱や直帰率の増加を招く原因になります。
なおGoogleの検索結果にて、ユーザー使ったキーワードは太字で表示されます。この点からも、キーワードを含めることの大事さがわかりますね。
h1タグ
メタ情報と並んで重要なのがh1タグです。
h1タグとはHTMLの見出しタグの中で最も上にくる、いわばそのページ全体の見出しとも言えるタグです。ユーザーにとっても、検索エンジンにとってもわかりやすい内容にしておくようにしましょう。
h1タグの使い方については、様々な意見が飛び交っています。その中で注目すべきいくつかのポイントをあげておきましょう。
先ずは、「h1タグはページに一つにしなければいけないのか？それとも複数設置しても大丈夫なのか？」という視点から。ページ内にh1は一つだけにした方がいいという意見もありますが、結論から言うと一つでなくても構いません。異なるコンテンツのまとまりが複数あるのであれば、それぞれにh1をつけても問題ないのです。
もう一つ。「h1タグはテキストにつけるべきか？画像でも大丈夫なのか？」という問いがあります。h1タグをつけるのは、テキストでも画像でも大丈夫です。しかし画像につける場合は、alt属性をつけるようにしてください。alt属性については、次の項で解説しています。
画像にはalt属性を設定しているか？
Webページにはロゴやバナー、トップ画像などたくさんの画像を使います。これらの画像には、alt属性を設定するようにしましょう。
alt属性とは、何らかの理由で画像が表示されなかった時に代わりに表示されるテキストのこと。alt属性が設定してなければ、無味乾燥なアイコンが表示されるので、そこに何の画像が設置してあったかわからないのです。
alt属性を設定しておけば、SEOにもプラスになります。
Googleなどの検索エンジンは、画像の内容を見ることができません。alt属性があれば、検索エンジンは画像の内容を理解することができます。つまり、コンテンツをより正しくクロール・インデックスしてもらえるようになるのです。
なお、音声読み上げブラウザもalt属性を使っています。多少の手間はかかりますが、得られるメリットは多くあります。alt属性はぜひ設定しておくようにしましょう。
Googleアナリティクスは導入済みか？
SEOを考えるにあたって、アクセス解析は最重要とも言えます。サイトの現状が把握できるだけでなく、新たなビジネスチャンスや改善点を発見することもできるからです。
アクセス解析用のツールとしては、Googleアナリティクスを使うことが王道です。Webサイト公開前に忘れずに導入しておくようにしましょう。
Googleアナリティクスの使い方や導入方法については、下の記事でご紹介しています。
» Googleアナリティクスの基本や導入方法、サーチコンソールとの連携方法
» Googleアナリティクスのフィルタの基本と代表的な活用例2つ
サーチコンソールは導入済みか？
Webサイトを制作したら、サーチコンソールを導入しておくようにしましょう。
サーチコンソールとはGoogleが提供している、ウェブマスター向けのツールのこと。無料で使える上に、サイト運営やSEOに欠かせないさまざまな機能が使えます。代表的な機能を列挙しておきましょう。
- Googleへのサイト登録。
- xmlサイトマップの送信。
- インデックスの促進。
- エラーやペナルティの確認。
- 検索キーワードの確認。
サーチコンソールの使い方や導入方法については、本ブログでも取り上げています。よろしければそちらもご覧ください。
» Googleサーチコンソールの基本と代表的な機能、導入手順まで
» アクセス解析の基本！検索アナリティクスの使い方（Googleサーチコンソール）
セキュリティ対策
Webサイトの運営では、セキュリティ対策はとても重要です。
セキュリティ被害に遭えば、自社の企業活動や営業活動に大きな支障が出てしまうからです。加えて、ユーザーの個人情報など大切な情報を守るためにもセキュリティ対策はしっかりと行っておきたいもの。
とは言っても、セキュリティ対策は非常に幅広く奥が深いものです。もちろん強固なセキュリティ対策を行っておきたいところですが、正直なところセキュリティ対策に割くことのできる時間やコストも限られているでしょう。
そこで、基本的な対策から行っていくことがオススメです。
基本的な対策と言っても、十分に効果は期待できます。一度に全部、ではなく、できることからコツコツとやっていきましょう。
それでは基本的なセキュリティ対策を3つご紹介します。サイト制作時にはぜひチェックをしておきましょう。
SSLを導入しているか？
Webサイトにはさまざまな種類がありますが、ユーザー情報や管理・運営にかかる情報をやり取りするシーンは多いでしょう。例えば、入力フォームからデータを送信する時や、CMSで作業をする時があります。
こういったデータについては、セキュリティ対策をしっかりと施さなければいけません。そうでなければ、第三者による不正アクセスやクラッキングなどの危険性が出てきてしまうからです。
代表的な対策としては、SSL（Secure Sockets Layer）があります。SSLを導入すると、サイトでやり取りするデータを暗号化することができるので、セキュリティレベルを格段に上げることができます。
プラグインを活用しているか？（CMSの場合）
WordPressなどのCMSでは、セキュリティ対策に役立つプラグインが知られています。CMSを使っている場合は、こういったプラグインは積極的に使っていくようにしましょう。
WordPressは世界中で使われているCMSです。そのため、ハッキングなどの標的になってしまう危険も考えておかなければいけません。
セキュリティ対策のできるプラグインについては、下の記事でまとめています。WordPressサイトの構築を検討されている方を中心に、プラグイン選びの参考にしていただければと思います。
» WordPressサイトのセキュリティを高めるプラグイン5つ
セキュリティへの意識はあるか？
Webサイトにどんなに対策をしていても、Web担当などの運営者のセキュリティ意識が低ければ意味がありません。パスワードなどの重要情報の管理もずさんになるでしょうし、もしサイトに何らかの異変が起こっても気付くことができないでしょう。
そのため、サイト運営の関係者はセキュリティへの意識を持つべきです。社内外を問わず、日ごろからセキュリティへの啓蒙や意識付けを行っておきましょう。どんなにセキュリティ対策がなされたサイトであっても、それを使うのは人間だと言うことを忘れないようにしてください。
公開、運営
Webサイトを公開する前にチェックする項目や、運営にあたってチェック・準備すべき内容についてまとめています。
インデックスは拒否していないか？
Webサイトの制作時は、Googleにインデックスされないようにしているはずです。インデックスを拒否する方法は、robots.txtを使うことが一般的でしょう。
実は、Webサイトを公開した後でもインデックスの拒否を解いていないケースが稀に見受けられます。せっかくサイトを公開したのに、いつまでたっても検索結果に出てこないのでは困りますよね。
サイトを公開する際は、インデックスを拒否していないか必ず確認をするようにしましょう。
WordPressサイトの場合は、おすすめのプラグインがあります。
» Stop the Bokettch — WordPress プラグイン
WordPressでは、設定画面からインデックスを拒否することができます。チェックを入れるだけなので簡単なのですが、それだけにインデックス拒否をしていることを忘れてしまいがち。
Stop the Bokettchはそういった時におすすめなプラグインです。管理画面の上部にアラートが表示されるので、うっかりインデックス拒否を解除し忘れる危険性を減らすことができます。
コンテンツの運営体制は？
Webサイトの運営で大事になってくるのが、コンテンツの配信です。サイトの運営戦略に沿った、フレッシュで価値のある情報を提供していくことが大切になってきます。
Webサイトを立ち上げる時には、コンテンツの運営や制作フローについても固めておきましょう。例えば、下のようなポイントはしっかりとおさえておかなければいけません。
- コンテンツの内容は？
- 誰がコンテンツを作る？アップする？
- コンテンツの管理はどうする？
- コンテンツの効果測定方法は？
運用フローは正しいか？
ECサイトにとって、Webサイトはあくまで入り口でしかありません。Webサイトの裏には、手や足を動かして行う業務が山ほどあります。Webサイトを制作するだけではなく、運用フローをキッチリと固めておく必要がある、ということです。
具体的には、商品の発送や返品、クレーム対応などがあります。企業サイトやオウンドメディアのように、問い合わせがあった時の対応だけでは足りません。
Web制作と併せて、実際の運用フローを試してみるなどしておきましょう。もしかすると、Webページを修正する必要が出てくるかもしれませんよ。
ユーザーテストは実施したか？
ユーザーテストとは、実際にWebサイトを使ってもらうテスト手法のことです。
何かと忙しい制作時期にテストを実施するのは、面倒に思うかもしれません。しかしユーザーテストは、制作者サイドでは思いもよらないアイデアや改善点ももたらしてくれるものです。
例えば、ユーザーテストによってWebサイトの改善点を洗い出すことも期待できます。ユーザーが期待する内容になっていなければ、コンテンツを見直す必要も出てくるかもしれません。
ユーザーテストは、何も大々的に実施する必要はありません。数人程度の少人数のユーザーに協力してもらえばOKなので、サイトの本格運用の前に採り入れてみてはいかがでしょうか。
あとがき
Web制作で確認したいチェック項目をまとめてご紹介しました。
流行り廃りの速いWebにおいては、まずはスタートしてみるという考え方が大勢を占めています。しかし、制作の節目で抜け漏れや問題が発生していないかを知ることも、非常に大切です。
ご紹介したチェック項目はあくまで代表的なものばかりですが、それだけに欠くことのできない内容ばかりです。Web制作時のチェックリストとして、ご活用いただければと思います。