新人WEB担当必見！WEBサイトリリース前にチェックしておきたいこと！

2015.03.02

Web制作

cozzy

Webサイトの制作において、リリース前のデータに問題がないのか？をきちんとチェックすることは、品質を管理するうえでとても大事な作業になります。

チェックの抜け・漏れから大きな事故につながり、費用がかさむことも・・・。
もちろんWebサイトを制作するコーダーさんやプログラマーさん、エンジニアさんにディレクターさんにいたっては、数えきれないほどのチェック項目に沿って確認を繰り返し行っています。

ですが、制作をしているときには気付かないミスや見落としが必ずあります（断言！）

せっかくWeb担当になって企画やプランニングなど、サイト立ち上げに向けてがんばってきたのに、最後に残念な結果になるのは本当にツライですよね？しかし、Web担当はWebサイトを作ったり直したりすることはできなくても、ミスや見落とし箇所を見つけることはできます！

今回の記事ではWebサイトを安全にリリースするために、Web担当としてこれだけは事前にチェックしておきたいことを紹介します。

表示は崩れていないか？正しい内容が載っているか？

やっぱり見た目って大事ですよね？！デザインを何度も確認しているあなたなら、自信をもってチェックすることが出来るはずです！

ページの構成（レイアウト）が崩れていないか？

枠からテキストや画像が飛び出していないか

ヘッダーやフッターが指定どおりの位置にあるか

各推奨ブラウザでページを見たときに、ブラウザによってはレイアウトが違って表示される（崩れる）ことが多々あります。Windows・Macそれぞれ、IE5.5～10、FireFox、Safari、Chrome、Operaなどのブラウザは確認しておきたいところです。枠やカラムごと、ごっそりページの下部に落ちている、なんてことも良くあります。ちなみに主要な複数のWebブラウザに対応していることを『クロスブラウザ』といいます。古いブラウザなんてもう使っていないよ！という方も、クロスブラウザチェックのツールがいろいろとありますので、目的や使い勝手で選んでみてください。

【チェックツール】 Lunascape ：主要なレンダリング・エンジン（IE、Firefox、Chrome、Safari）をひとまとめにしたWebブラウザです。ボタンだけで画面の切り替えができます。

IETester ： IEのみですが、5.5～10までのバージョンでチェック可能。互換モードでの違いもチェックできます。

Browsershots ：チェックしたいブラウザ（100以上）から選んだら、スクリーンショットで撮った画像でチェックできます。

ブラウザのサイズ・解像度によってWebサイトを見ることができるか、表示が崩れていないか

PC以外にもスマホやタブレットなどの機種が変わっても、表示が変わります。確認したい画面のサイズに合わせてWebサイトを表示させるツール。サイズが違う端末ではどのように見えるのか？が確認できます。

【チェックツール】 Screenfly ：いろいろな解像度のスクリーンで、Webサイトがどのような見え方になるのか確認できるオンラインサービスです。デスクトップ以外にもモバイルやタブレットでの表示もチェックできて便利です。

ページの表示をセンター寄せで作っているはずが左寄せになっていることがありました。デザインだけでは気が付かないことが結構あります。

テキストは指定どおりに正しく表示されているか？

原稿どおり文章を表示しているか（文言の抜けがないか・不要な文言が入っていないか）

誤字はないか

全角・半角・スペースなどは適切か

フォントサイズはあっているか（小さすぎて見にくくなっていないか）

改行位置がおかしくないか

文字が切れている・重なっている

文字化けで読めなくなっている　など。

特に注意したいのが電話番号や日時（期限）などの間違いです。この間違いはクレームにつながりやすいので、原稿も疑うくらいチェックしましょう！また、意外に多いのはページタイトルやパンくずの表記間違いがあります。見落としがちなのはフッターのコピーライトが抜けていたり、ファビコンが抜けているなど。ファビコンとは、Webブラウザのブックマーク（お気に入り）リストや、アドレスバーやタブブラウザのタブにちょこっと出てくる、Webサイトをイメージしたアイコン画像って見たことありませんか？あとはデスクトップのショートカットやスタートメニューのアイコンなど、そのWebサイトオリジナルのアイコン画像のことです。また、画像に文字が回り込むのか、折り返すのか？も、レイアウトごとに統一した方が見た目がきれいですよ。

画像の表示は崩れていないか？

画像のサイズはあっているのか（サイズの設定が正しくされているのか）

画像の縦横比はあっているのか（サイズ設定と同様ですが、画像が縦長になったり横長になったりします・・・かっこ悪いのです）

画像の解像度はあっているのか（解像度が低いと滲んだりガタガタになるし、高すぎると表示に時間がかかるなどの弊害があります）

そもそも表示している画像があっているのか（意外に関係ない画像が表示されていることも多いのです！）

また、画像にAlt表示が設定されているかも忘れやすいポイントです。ボタン画像などロールオーバーでオンオフ表示するか、など確認してみてください。何よりもサイトを利用する方にとって「見やすい」「読みやすい」「分かりやすい」ことが一番だと思います。デザインや色使いが見やすい、テキストのサイズが読みやすい、コピーが簡潔で分かりやすい、ボタンやテキストリンクが「あっ、これはリンクだ！」と分かる、ボタンが押しやすい、ページの移動がスムーズである、など。デザイン上で確認していても実際にWebサイト上で見ると、意外なところが使い難かったり、分かりにくいことも多々あります。利用者と同じ目線でWebサイトをチェックすることで、品質の向上に努めたいものです。

リンクが正しい動きか？

リンクをクリックしたときに、ページがエラーになっているとがっかりしますよね。せっかくWebサイトを見に来てくれたお客さまが離れてしまう（離脱）要因のひとつでもあります。

リンク先がエラーになっていないか？

テキストリンクも画像リンクも、記載されたとおりのリンク先に移動するか

外部サイトへのリンクはちゃんとページがあるのか

リダイレクトする場合も要注意です。

リンクの動作が正しいか？

テキストリンクも画像リンクも、記載されたとおりのリンク先に移動するか

リンクテキストにロールオーバーした時に、設定している場合は下線が入る

リンクテキストにロールオーバーした時に、設定している場合はテキストの色が変わる

反対にリンクの設定をしないテキストに、下線を付けていないか（リンクと勘違いしてしまうので・・・）　も確認してください。

アンカーリンクも指定の位置に移動するのか
ブラウザによってはリンクが効かない場合もあるので、ブラウザごとにチェックしてみてください。リンクの確認ではチェックツールもありますので、ページ数が多い場合やダブルチェックで利用するとよいと思います。

【チェックツール】 Deadlink.tv ：チェックしたいページのURLを入れるだけで、リンクが切れている箇所を表示してくれます。

フォームは正しく動作しているか？

問い合わせや申し込みなど、Webサイト利用者の要望が集まるのがフォームです。言い換えればフォームが正しく動作しないと大きな事故につながりがちです。フォームの動作は念には念を入れて確認しましょう！

フォームの動作が正しいか？

テキストを入力する箇所は、問題なく入力ができるか

文字数を制限する場合は、それ以上の文字が入らないか？文字数オーバーの場合にエラーを表示させているか？をチェックします。

全角・半角や英数の入力制限をしている場合は、設定どおりの動作になっているか

指定以外の文字を入力した場合に、エラーを表示させているか？チェックボックスやラジオボタンの動きは正しいか？をチェックします。

複数選択できるorできないときも、正しく動作しているか

プルダウンで選択する場合に、正しく選択できるか

プルダウン内でテキストが切れてしまうこともありますので、問題なく表示されているかもチェックします。

SSLで暗号化する場合は、リンク先のページが“http://”ではなく“https://”に設定しているか

郵便番号から自動で住所を表示させるなどのプログラムを使う場合も、正しく動作するのかを確認しましょう。また、必須項目に未入力・入力間違いがあった場合も、エラー画面に正しい注意が表示されるのか確認です！

フォームに入力した内容が正しく反映されているか？

フォームに入力後に、入力内容の確認画面を表示するか

この画面はあった方が利用者には優しいと思います。

フォームでの登録（入力）完了後に、完了画面（Thanksページ）を表示するか

フォームに登録した内容が、データとして正しく取得できているか

いろいろなパターンでフォームにテスト登録をして、取得したデータと比較しましょう。また、投稿したデータがきちんと送信できているのかもチェックしましょう。