Webサイト製作において、必要になるのがテストです。
業界ではデバックとも呼び、「正常に動作するのか」、「バグはないのか」などを検証します。
バグが存在して、機能が正常に動作しないままサイトを公開すると、大きな被害を被る可能性が高いです。
そのため、デバック作業は非常に重要になり、責任が大きくなります。
今回はテストで確認すべきチェック項目を紹介します。
トラブルを未然に防ぐために、確認が必要なチェック項目を作成するのがオススメです。
表示確認
一番最初におこなうべきチェック項目として、表示確認が挙げられます。
正しく表示されているのか、サイトの隅々までチェックするようにしましょう。
異なるブラウザで確認する
Webサイトを利用するユーザーは、様々なブラウザを使用しているので、主要なブラウザでの表示確認は必須です。
「IE」、「Chrome」、「Safari」、「Opera」、「Firefox」この5つのブラウザは使用率が高いので、表示確認しましょう。
JavaScriptなどは、使用するブラウザによっては正常に動作しないことがあるので、動作しない場合でも問題なくWebサイトを閲覧できることもチェックすることが重要です。
各ブラウザでサポートされている技術を使用してWebサイトを製作するようにしましょう。
ブラウザを確認するツールは以下になります。
・SPOON.NET
・browserling
・Browser Sandbox
・Browsera
異なるOSで確認する
ブラウザだけでなく、異なるOSを使用して確認する必要があります。
Windows、Android、OS X、iOSの4つが一般的になり、表示確認が必要です。
最新のバージョンから古いバージョン、多くのユーザーに使用されているバージョンなど様々なバージョンで確認しましょう。
異なる端末で確認する
製作したWebサイトをパソコンだけでなく、スマートフォンで確認するのはもちろんですが、使用する端末も注意しましょう。
スマートフォンでも機種が違えば、画面のサイズが変化するので、画面に収まらないことや無駄なスペースなどができることもあります。
普及している人気の端末で確認することは必須です。
スマートフォンだけでなく、タブレットでも確認するようにしましょう。
Webサイトがスマートフォンやtブレットに対応していることを確認できるツールが「モバイルフレンドリーテスト」です。
Googleが無料で提供しているツールになり、トップページのURLを入力するだけで調べることができます。
チェックされる項目は以下の4つです。
・フォントサイズ
・ビューポートの設定
・タップ要素同士の距離
・コンテンツサイズがビューポートに対応しているかどうか
適切な設定がおこなわれていない場合は、改善点なども表示されるので、必ず使うようにしましょう。
Chrome、Firefoxそれぞれの拡張機能もあります。
Chromeで使用する場合はこちらのツールを使用して確認できます。
Chrome DevTools Overview
Firefoxで使用する場合はこちらのツールを使用して確認できます。
User Agent Switcher
コンテンツ確認
使用環境による表示確認の次は、コンテンツの表示確認をおこないます。
文字によるレイアウト崩れ
文字の大きさや、文字量によるレイアウトの崩れがないことを確認します。
以下のような例が、よく見受けられます。
・文字を大きく装飾してレイアウトが全体的に崩れている
・記事のタイトルを長くして、段落ちしている
一部の文字を装飾している場合は、レイアウトが崩れていないか注意しましょう。
マウスホバーの動作確認
マウスホバーの動作確認も忘れないようにしましょう。
正しく動作していなければ、アクションがなくクリック率などが大きく変化するので、必ずチェックします。
表示が統一されいるか
フォントスタイルがページ全体で統一されており、文章の口調が統一されていることを確認しましょう。
大きなWebサイトになると、複数人でコンテンツを製作しており、表現や口調の違いが発生する場合があります。
統一された表現や口調の方が、ユーザーにとって見やすくなるのでオススメです。
コンテンツの統一性を保つために、事前に使用する表現や口調などのルールを儲けるようにしましょう。
画像が表示されているか
画像が表示されていることもチェックしましょう。
基本的なことですが、画像が正しく表示されていないことは頻繁におこります。
それだけではなく、「画質が粗くないか？」、「サイズは適切なのか？」なども合わせて確認します。
特にロゴやトップページの画像は、Webサイトの「顔」になる部分なので念入りにチェックしましょう。
画像はWebサイトの見た目を大きく左右する重要な役割を担っているので、細部までこだわることをオススメします。
ファビコンが表示されているか
ブラウザのタブに表示されている画像がファビコンです。
この部分も見落としやすく、チェックが必要になります。
画像の表示と同じようにファビコンの表示も確認しましょう。
リンクチェック
リンク切れ
リンク切れのチェックは、Webサイトを公開するときだけでなく、定期的にチェックする必要があります。
理由としては、掲載しているリンク先のWebサイトが閉鎖されていたり、URLが変わっている可能性があるからです。
リンクが切れていると、ユーザーに不便な思いをさせるだけでなく、SEOの面でも悪い評価を受けてしまいます。
手動でリンクをチェックするのは労力と時間がかかるので、オススメしません。
リンク切れをチェックするツールを使って、確認するようにしましょう。
以下のようなチェックツールがオススメです。
・リンクチェッカー(リンク切れチェックツール)
オンラインでリンク切れをチェックできるツールです。
WebサイトのURLを入力して、チェックボタンを押すだけでサイト全体をチェックできます。
・Online Broken Link Checker
こちらもブラウザ上で使用できる、リンク切れのチェックに特化したツールです。
・Broken Link Checker
WordPressのプラグインとして使える「Broken Link Checker」。
CMSにWordPressを採用している方はこのツール使えば、リンク切れの心配はなくなります。
・Check My Links
Chromeの拡張機能として使える「Check My Links」になり、使用するためにはChromeをダウンロードして、拡張機能をインストールする必要があります。
Firefox、Safariなど他のブラウザでは使えないので、注意してください。
リンク切れを調べたいページを表示させ、「Check My Links」のアイコンをクリックすることで、調べることができます。
・LinkChecker
このツールは、Firefoxのみで使用できる拡張機能ツールです。
こちらもボタン1つで解析結果を知ることができます。
特にこだわりがなければ、気になったらすぐに調べれるブラウザの拡張機能を使うことをオススメします。
リンクを間違い
リンク切れなどはツールを使用してチェックすることができますが、人の目でチェックしなければいけないのは、リンクの間違いです。
リンクの間違いとは、目的のページではないページに飛ばされることになります。
例えば、「お問い合わせ」のボタンをクリックして、Webサイトのトップページに移動するなど、表示内容とページの飛び先が一致していないことを意味します。
リンクの飛び先を確認する方法は、1つ1つリンクになっているボタンをクリックして飛び先を確かめるしかありません。
手間のかかる作業になりますが、欠かすことのできないチェック項目です。
表示速度
デザインやセキュリティと同じように大切なのがWebページの「表示速度」です。
今はWebサイトがすばやく表示されることは当たり前の時代になり、ユーザーの利便性を上げるために、表示スピードは必ずチェックしましょう。
表示が遅延していないか
各ページの表示スピードを必ずチェックしましょう。
全てのページが素早く表示されることが理想ですが、特に気をつけるべきページはトップページになり、表示スピードが遅くなると、ユーザーの離脱率が上がります。
コンテンツの量が多く、様々な機能を搭載しているページは、読み込みに時間がかかってしまいます。
対策方法としては、搭載している機能を必要最低限に抑えることや画像などを圧縮することです。
これらの対策をするだけで、表示スピードはかなり早くなります。
以下のような画像圧縮ツールがオススメです。
Optimizilla
最大20枚までの画像を同時に圧縮することができ、JPEGとPNG両方に対応しています。
操作方法が非常にシンプルで使いやすいのが特徴です。
Online GIF optimizer
JPEGとPNGの両方を圧縮できるうえに、GIFアニメの容量も削減できるのがこのサイトの魅力です。
知名度は高くありませんが、機能性は優れています。
画像圧縮について詳しく知りたい方は、「ページの軽量化に！画像圧縮のできるツールまとめ」こちらの記事を参考にしてください。
スムーズな動作
動作がスムーズに機能することも重要です。
例えば、以下のようなことが挙げられます。
・画像をクリックして拡大されるまでに時間がかかる
・SNSの共有ボタンが表示されるまで時間がかかる
・サイト内の検索結果の表示が遅い
ユーザーが閲覧していてストレスを感じさせないためには、機能の動作が早いことが重要です。
機能のレスポンスが遅い場合は、エンジニアと相談して、改善しましょう。
スマートフォンでのスムーズな表示
先ほど説明したスマートフォンに対応した表示も大切ですが、表示スピードも欠かすことはできません。
基本的には、パソコンよりもスマートフォンの方が処理能力が低くなるので、スマートフォンでの表示が遅くなります。
スマートフォンでもスピーディーに表示されることを心がけましょう。
フォーム
「問い合わせフォーム」、「入力フォーム」などフォームはWebサイトで必須機能です。
フォームはユーザーとの連絡するための手段になるので、絶対にバグがないようにチェックしましょう。
入力文字
漢字、ひらがな、数字、半角、全角、機種依存文字など入力される文字は多数存在します。
機種依存文字は、正しく表示される可能性が低いので、入力できないように機能を設定しておきましょう。
入力フォームにJavaScriptのコード記述して、ハッキングする手口もあるため、注意する必要があります。
バリデーション
バリデーションとは、入力内容や記述内容が要件を満たしており、妥当性を確認することです。
簡単に説明すると、入力チェックになります。
先ほど説明した、JavaScriptのコード記述してフォームを送信すると、バリデーションが機能して妥当性のない内容として受け取らないようにします。
他にも、入力フォームに空欄がある場合や入力された文字数が長すぎる場合など様々な場面で活用できます。
不正や不備のある内容を受け取らないために、バリデーションが正しく動作していることをチェックしましょう。
バリデーションの機能が搭載されていない場合は、必ず搭載するようにしましょう。
入力後のリダイレクト先
フォーム入力した後のリダイレクト先もチェックします。
内容を送信した後、何もアクションがなく、フォーム入力画面のままだと、ユーザーは正しく内容を送信できたのか不安になります。
ユーザーの不安を取り除くために、入力フォームからページ移動するようにリダイレクト先を設定しましょう。
リダイレクト先として多く設定されているのが、「お問い合わせありがとうございました。」と表示したページに移動させることです。
他に多い例としては、トップページにリダイレクトさせることもあります。
メールの送信を確認
入力文字、バリデーション、リダイレクト先をチェックした後は、入力内容を記載したメールが正しく送信できていることを確認しましょう。
メールの宛先が正しいことを確認することも重要ですが、同時にメールが送信される場合でも、送信されることをチェックしましょう。
使用しているサーバーや回線状況によっては、複数人が同時にフォームを入力して、メールを送信すると、正しく送れないことがあります。
メールの不届きをなくすために、サーバーやシステムを改善しましょう。
SNS連携
SNSの登場によって「バズる」という言葉が誕生したように、SNSとWebサイトを連携することでアクセスアップが期待できます。
現在では、Webサイトと各種SNSである、「Twitter」、「Facebook」、「Instagram」を連携させることは当然です。
SNSに関するチェックするべき項目を紹介します。
共有ボタンの表示
共有ボタンが正しく表示されていることを確認しましょう。
よくある問題として、共有ボタンの読み込みに時間がかかってしまう場合があります。
「Twitter」、「Facebook」、「Instagram」、「Pocket」、「LINE」、「Hatena」など共有できる全ての媒体のボタンを表示させると読み込みが遅くなるので、効果の高い必要な媒体だけに絞るようにしましょう。
同時に共有ボタンが正常に動作することもチェックします。
WordPressでSNSのシェアボタンを設置できるプラグインは以下のようになります。
・Social Media Share Buttons | MashShare
・WordPress Button Plugin MaxButtons
・WP Social Bookmarking Light
・Sharebar
WordPressを使用していない方にはこのようなツールがあります。
SNSアカウントの登録
SNSの共有ボタンを設置するだけでなく、SNSを運用するためのアカウントも用意しましょう。
WebサイトによってSNSアカウントを設定して、ソーシャルで拡散することが大切です。
「Facabook」のアカウントをWebサイトに掲載することや「Twitter」のつぶやきを表示させることで、Webサイトを訪れたユーザーにフォローしてもらえることもあります。
事前にアカウントを用意して、デザインの一部に組み込むようにしましょう。
アカウント認証
Webサイトにログイン機能を実装している場合、SNSのアカウントを利用してログインすることが可能です。
今は、SNSのアカウントを利用してユーザー登録する方が多いため、SNSの連携は必須になります。
「Twitter」、「Facebook」のアカウントを利用してログインできることをチェックしましょう。
SNSのアカウントを利用してログインした場合、他の機能も問題なく、使えることも確認しましょう。
SEO
SEOとはSearch Engine Optimizationの略称になり、検索エンジン最適化を意味します。
Googleに評価されやすい運用、サイト設計をすることで検索結果で上位に表示されるようになります。
「Webサイトで集客したい」、「PV数を増やしたい」このようなニーズを叶えるためには、SEO対策が必須です。
機能性のチェックも重要ですが、SEO対策ができていることも確認しましょう。
メタタグ
メタタグとは、htmlファイルのheadの中に記載されるタグです。
ここに記載されている内容をクローラーが受け取り、検索エンジンの評価に反映されます。
メタタグの中でも特に重要な2つが、「title」と「description」です。
この2つを正しく設定されているかチェックしましょう。
titleタグ
titleタグは検索結果で表示される大見出しの部分になります。
以下の項目を注意しましょう。
・全角30文字以内
・文頭に重要なワードを入れる
・同一のワードを繰り返し使用するなど、過剰な対策はしない
・サイト名を入れる場合は文末に入れる
・目を引く、魅力的なタイトルをつける
タイトルは適切な長さに設定して、意識しているキーワードは先頭に配置しましょう。
特定のキーワードを反復して使用すると、評価が下がるので、無理にキーワードを詰め込まないようにすることが大切です。
SEOを意識したタイトルをつけることも重要ですが、検索者が思わずクリックしたくなるようなタイトルをつけましょう。
クリック率が低ければ、定期的にタイトルを変えてクリックされやすいタイトルをつけることがポイントです。
descriptionタグ
titleタグの次に大事になるのが、descriptionタグです。
descriptionタグはページ全体を説明した文章になり、検索結果一覧でも大見出しの下に表示されます。
descriptionタグを設定する上で、大切になるのが以下の項目です。
・ページの内容を上手く説明する
・70〜80文字で一度区切り、全角120文字以内で作成する
・各ページ固有のdescriptionタグを設定する
・キーワードの使用は2回までにする
descriptionタグで一番重要になるのがページの内容を上手にユーザーへ伝えることです。
説明文とコンテンツの内容が大きく違う場合、ユーザーは困惑してしまい、離脱率が高くなります。
離脱率が高くなると、Googleからの評価が下がってしまいます。
必ず120文字以内で作成して、70〜80文字で区切るようにしましょう。
70〜80文字で一度区切る理由としては、パソコンで検索した場合は、120文字まで表示されますが、スマートフォンで検索した場合は120文字全てが表示されません。
スマートフォンで表示される文章量は、70〜80文字までになるので、そこで一度文章を区切った方が見やすくなるからです。
今はパソコンよりもスマートフォンで閲覧される機会が増えているので、スマートフォンに合わせたdescriptionタグを設定するのがオススメです。
titleタグと同じように、descriptionタグでも同じワードを何度も使用することはNGになります。
同じワードを使うのは2回までにしましょう。
altタグ
altタグとは、Webサイトに表示されている画像の情報を記述するタグになり、クローラーに画像の情報を伝える機能もあります。
ページの読み込みに時間がかかり表示されない場合や回線の状態が不安定で画像が表示されない場合は、画像の代わりにaltタグに設定している文章が表示されます。
altタグが正しく設定されているWebサイトは、評価が上がるので、必ず設定しておきましょう。
注意するべき点は、altタグに上位表示させたいキーワードを設定するのではなく、画像の情報を正しく設定することです。
画像とは関係ない情報をaltタグに設定すると、評価が下がってしまいます。
h1タグ
一番大きい見出しになるのがh1タグです。
h1タグの設定は、検索結果の順位を大きく左右する重要な項目になります。
サイト訪問者やクローラーにとってわかりやすいタグを設定するようにしましょう。
SEOをより意識するのであれば、検索順位を上げたいキーワードを入れるようにすることがオススメです。
Googleが公式に発表している内容に、「h1タグは同じページに複数あっても問題ない」という意味の文章が記載されています。
これに関しては様々な情報が流れており、確実なことはわかりませんが、h1タグは多くても2つまで、できれば1つにしておくのがベストです。
Googleアナリティクス
GoogleアナリティクスとはGoogleが提供しているWebサイトを解析するツールです。
無料で使用することができ、アクセスを解析やユーザーの行動を把握できます。
・アクセス数
・ユーザーの属性
・滞在時間
・閲覧されている大まかな場所
・流入先
・使用されているデバイス
アクセス数を伸ばす、ユーザーのニーズを知るためには欠かせない情報を入手できます。
トレッキングコードと呼ばれるコードをサイトに設置するだけで簡単に導入できるので、必ず設定するようにしましょう。
サーチコンソール
このツールもGoogleが提供しているツールになり、無料で使用できます。
サーチコンソールを使って、以下のことができます。
検索クエリ
運営しているWebサイトがどのようなキーワードで何番目に表示されているかを知ることができます。
検索順位は、運営するなかで重要な情報です。
Fetch as Google
Fetch as Googleとは、サーチコンソールを使って、クローラーを巡回させることです。
新しい記事を掲載したときやコンテンツ内容を変更したときは、この機能を使用して、クローラーに巡回してもらうことで、早くインデックスされるようになります。
ペナルティ確認
Googleのガイドラインに違反している場合、ペナルティを受けます。
サーチコンソールを使うことで、ペナルティの有無を知れるので、定期的に確認しましょう。
サイトマップ
サイトマップとは、Webサイトの構成を表したデータです。
普段、使用する機会はありませんが、サイトマップを送っておくことでWebサイトを全体的にクローラーが巡回してくれます。
サイトマップもサーチコンソールから送信できます。
canonicalの設定
canonicalとは、類似している複数のページが存在する場合、クローラーに優先させるべきページを伝えることができます。
メタ情報と同じで、headタグのなかで使用します。
<head> <link rel="canonical" href="https://example.com/"> </head>
ECサイトを運営している方で、色やサイズが違うだけの商品をそれぞれURLを配布して表示させていないでしょうか。
画像や一部テキストが違うだけだと、重複しているページと認識される可能性が高いので、canonicalを使って正規化したいページを指定します。
セキュリティ
インターネットとセキュリティは切っても切り離せない関係です。
セキュリティに脆弱性があると個人情報の流出、Webサイトが乗っ取られる可能性があります。
そのような事態を防ぐために、セキュリティ対策は非常に重要です。
まずは、セキュリティの基本となる部分をチェックしましょう。
パスワードの設定
パスワードを設定することは当たり前ですが、簡単に推測されないパスワードを設定することが重要です。
簡単なパスワードを設定して、ハッキングされるケースは多数あります。
ハッキングされないパスワードを設定するために、以下の項目をチェックしてください。
・名前、誕生日など推測されやすい文字列は避ける
・10文字以上のパスワードを設定
・数字、大文字、小文字などを組み合わせる
・パスワードを使い回さない
どれも基本的な部分になりますが、簡易なパスワードがハッキングの対象となり、被害を被るケースがたくさんあります。
少し気をつけるだけで、改善できるので、意識するようにしましょう。
パスワードを考えることが、面倒な方には、パスワード生成ツールがオススメです。
人気の高いツールを紹介します。
LUFTTOOLS
使用する文字や文字数などを選ぶことができ、最大50個まで同時に生成することが可能です。
手軽に使用できるところが、人気の理由になります。
サイトURL：LUFTTOOLS
Password Generator
パスワード生成に特化したサイトになり、シンプルな操作性と使いやすさが魅力です。
気になった方は、一度使ってみてください。
サイトURL：Password Generator
パスワード生成の注意点などより詳しく知りたい方は「【あなたのパスワードは大丈夫!?】ハッキングされないパスワードの作り方」こちらの記事を参考にしてください。
SSLの設定
WebサイトをSSL化することで、データが暗号化され、セキュリティに強くなります。
費用はかかりますが、SEOの面でも有利になるので、導入することがオススメです。
GoogleもSSL化することを推奨しています。
まとめ
Webサイトを納品または公開する前にチェックするべき項目を紹介させていただきました。
表示確認からセキュリティ対策まで、抜けがないようにチェックしましょう。
確認するべき項目はチーム全体で共有して、それぞれが随時確認できるようにすることが理想です。