こんにちは！福岡のホームページ制作会社「シンス株式会社」の芦刈です。
ホームページを公開してから、ブラウザでレイアウト崩れが見つかったり、リンクが繋がっていないなど・・・
バタバタと修正したりしていないでしょうか。
事前にチェック項目を把握しておけば、急なトラブルを防ぐことができます。
今回は弊社が実践している、チェック体制についてご紹介します。
チェックは何人体制でやっている？
弊社では、制作を進行しているディレクターが最終チェックをしますが、制作に関わるデザイナー、エンジニアにもセルフチェックをお願いしています。
さらに非制作者スタッフにもチェックをお願いして、Webサイトの使いやすさも確認します。
このように複数人で確認を行う理由としては、チェック者によって視点が異なることです。
ディレクター、デザイナー、エンジニアなど、役職が異なると視点も変わってきます。
様々な視点で確認を行うことで、細かい不具合を発見したり、情報を共有し合うことで視点の幅を広げることができます。
ブラウザチェックを行う理由とは？
弊社では次のブラウザで確認します。
- Chrome
- Safari
- Firefox
- Edge
ブラウザチェックをする理由としては、ユーザーによってホームページを閲覧している環境は異なります。この違いによって表示されているWebページの見た目が異なるケースがあります。
例えば、Chromeではゴシック体のフォントが表示されているのに、Safariでは明朝体のフォントになっている・・・ということもあります。
これは記述しているコードに原因があるので、どのブラウザで閲覧しても見た目が統一して表示されるように修正をします。
またデバイスによっても見た目が統一されていない場合がありますので、以下のデバイスでホームページを表示して、見た目が異なっていないか確認します。
- PC（Mac or Windows）
- iPhone
- iPad
- Android
それでは次に具体的なチェック内容についてご紹介します。
デザイン関連のチェックリスト
誤字脱字・文字表記が統一されているか
ホームページに掲載する文章・キャッチコピーは、ディレクターが作成する場合や、お客様の方で作成いただく場合がございます。
誤字脱字のチェックはもちろんですが、文字表記で括弧や数字が全角半角とバラバラになっていたり、文章に半角スペースが紛れていたりするので念入りに確認します。
目視のチェック漏れを防ぐために、以下のツールを利用してチェックをします。
日本語文章のタイポ・変換ミス・誤字・脱字・エラーをチェック・校正
フォントファミリー・フォントサイズが正しく使われているか
制作したデザイン通りにフォントファミリー・フォントサイズが反映されているのか確認します。
正しく設定されていない場合は、OSやブラウザごとにフォントファミリーが異なっていることがあります。
目視で確認するか、ブラウザのデベロッパーツールを利用して指定されているフォントを確認します。
画像に不備はないか
表示されている画像を確認します。
素材画像を使っているサイトも多くありますが、商用利用が可能なのか規約を確認する必要もあります。
また購入前のダミー画像のまま、ホームページが公開されているケースもありますので、公開前に正しい画像が設定されているか確認します。
指定したカラーが設定されているか
ホームページのテーマカラーがデザイン通りに再現できているのか確認します。
ブラウザのデベロッパーツールを利用すると、カラーコードを確認することができます。
レイアウトの崩れはないか
デザイン通りにレイアウトが構築されているのか確認します。
またブラウザ幅を動かしてみると、レイアウトが崩れてしまうケースもあります。
ユーザーによってブラウザ環境は異なりますので、なるべく全ての環境でレイアウトが整っているのか注意を払う必要があります。
構築関連のチェックリスト
HTML & CSSの文法チェック
HTML & CSSの文法が正しく記述されているのか確認します。
記述内容に不備がある場合は、レイアウト崩れの原因となっていたり、検索順位にも悪影響が出てしまいます。
目視のチェック漏れを防ぐために、以下のツールを利用してチェックします。
The W3C Markup Validation Service
画像にalt属性が設定されているか
alt属性とは画像の代わりとなるテキスト情報を設定することができます。
インターネット状況によって画像が表示されない場合がありますし、障害者や高齢者は画像の認識が難しいことがあります。
上記を踏まえてアクセシビリティ対策をする必要があります。
リンク切れはないか
ホームページに設置されている全てのリンクをチェックして、ページ遷移や意図した動きになっているのか確認します。
リンク切れのチェックは以下のツールを利用すると便利です。
ファイルの読み込みパス
HTML・PHPファイルに記述している「img・css・js」等のファイルが、正常に読み込まれているのか確認します。
とくにテスト環境から本番環境へ移行する際に、不具合が出ないか検証することが重要です。
JavaScript動作確認・コンソールエラー
JavaScriptで実装したイベント、アニメーション等が正常に動作するのか確認します。
動作に問題はないがコンソールエラーが出ているケースもありますので、ブラウザのデベロッパーツールでも確認します。
お問い合わせフォームの動作
ホームページに設置しているお問い合わせフォームが、正常に送受信できるのかテストします。
実際にフォームに入力して送受信テストを実行しますが、ホームページ公開後にお客様のメールアドレスにも受信できるのか確認をします。
SEO対策・サイト運用関連のチェックリスト
title・descriptionが設定されているか
SEO対策を目的としたtitle・descriptionが設定されているのか確認します。
ブラウザのデベロッパーツールで確認することもできますが、以下のChrome拡張機能を利用すると簡単に確認することができます。
META SEO inspector（Chrome拡張機能）
ファビコン・アップルタッチアイコンが設定されているか
ファビコン・アップルタッチアイコンが設定されているのか確認します。
ファビコンはブラウザのタブに表示されるアイコンで、アップルタッチアイコンはスマホでホーム画面に追加した時に表示されるアイコンです。
このアイコンを設定することで、他サイトと区別がしやすくなります。
目視で確認することもできますし、以下のツールを利用して確認することもできます。
OGPが設定されているか
FacebookやTwitterなどのSNSでホームページをシェアした際に、ページの内容が正しく設定されているのか確認します。
設定内容の確認は、以下のツールから簡単に行うことができます。
OGP確認ツール | Analyze OGP and Twitter Cards
Googleアナリティクスが設定されているか
ホームページのアクセス数やお問い合わせ数のデータ分析をする場合は、ホームページのソースコードにGoogleアナリティクスの計測タグを埋め込みます。
タグの埋め込み後に、正常にデータ分析がGoogleアナリティクスで拾えているのか確認します。
Googleサーチコンソールが設定されているか
Googleサーチコンソールを利用すると、ユーザーがどのような検索キーワードで、ホームページに訪れているのか分析をすることができます。
Googleサーチコンソールの管理画面からサイトマップを送信して、Googleの検索エンジンにサイトの公開を通知します。
数日後に値が拾えているのか確認します。
SSL化されているのか
SSL（Secure Sockets Layer）とはインターネット上の通信を暗号化することです。
SSL化されているサイトは、アドレスが「https://」から始まり、SSL化されていないサイトは「http://」から始まります。
ブラウザのアドレスバーから確認します。
モバイルフレンドリーに問題はないか
近年ではモバイルの利用者が多くなってきました。
とくに企業のターゲットがBtoCの場合だと、モバイルからのアクセス数が圧倒的に多くなります。
モバイルに最適化されているサイトを確認するには、以下のツールで確認します。
ホームページの表示速度に問題はないか
「Google PageSpeed Insights」というツールを利用して、サイトの表示速度を計測することができます。
サイトの表示速度が遅ければ、検索順位が低下する場合があります。またユーザーの離脱率も高くなる傾向がありますので、表示速度に問題がないのか確認します。
以下のツールを利用すると、現在のスコアと改善点を確認することができます。
まとめ
チェックリストについて紹介いたしました。
今回紹介したのは基本的な項目になります。CMSやECサイトになると、また確認する項目も増えてくると思いますので、公開前にしっかりと確認を行いましょう。
福岡のホームページ制作会社「シンス株式会社」では、親身なヒアリングを通して納得度の高いご提案をいたします。
過去の制作実績、サービス内容、料金体制については、下記リンクよりご案内しております。
最後まで読んで頂きましてありがとうございます。
〈 この記事を書いた人 〉
Webディレクター芦刈光彦
社内では、Web制作のディレクション、フロントエンドを担当しています。
音楽と登山が好きです。ずっと福岡に住んでます。どうぞお気軽に。
