trass

BLOG

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

2015.03.02

Web制作

c-kurihara

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ページ)を表示するか
  • フォームに登録した内容が、データとして正しく取得できているか

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

その他もチェック

    • サイトの読み込みが遅かったり、動きがガタついていないのか?

表示が遅いとイライラしますもんね

    • JavaScriptエラーは発生してないか?

JavaScriptの動作も設定どおりに動いているのかもチェック

    • ソーシャルボタンは正常に動作しているか?

「Facebookいいね」や「Tweetボタン」が代表のソーシャルボタンは、ページに付ける機会が多いと思います。

    • 印刷ページは問題なく出力されるのか?

地図やチケットなどの印刷したいページもあります。

    • JavaScriptが無効な場合でもページの機能に問題がないか?

非サポートのブラウザに何かしらのメッセージを表示させる、もしくはサポート環境では表示されるはずの画像やテキストの代替を表示させるなどの対応をしましょう。

    • 一番深い階層(ディレクトリ)に移動するときは何クリックになるのか?

あまりディレクトリが深くなるとユーザビリティが悪くなりSEOにも影響するので、再考したほうがいい時もありますよ。

当然「人」がチェックすることなので、まったく間違いがなくなるというものではないのですが、上記のチェック内容をルール化すると、効率的に作業を進めることができます。 また、ダブルチェック・トリプルチェックをすることで、ミスが発生する確率はグッと減りますよ!

トラスのWebサイト企画・制作サービス

単なる制作だけではなく、企画段階から関わらせていただくことで、戦略的な視点から制作を進めさせていただくことが可能です。
Webサイト企画・立案、企業サイト制作、リニューアル、イントラネットサイト構築、ランディングページ制作ならぜひ一度トラスにご相談ください。

Webサイト企画・制作に関するお問い合わせはこちら

Webサイト企画・制作サービスの詳細はこちら

トラスではお客さま先に常駐して運用ディレクションやサポート業務を行う、人材常駐サービスを行っています。
詳しい業務内容は人材常駐サービスをご覧ください。

トラスのサービスを詳しく見る

CATEGORY LIST

CONTACT

03-6383-4401

受付時間:9:00〜18:00(土日祝定休)

メールでのお問い合わせ

COMPANY PROFILE

BLOG