表示テストとは？

Webサイトを制作するとき、「動作・表示確認テスト」という工程がありますが、具体的にどのようなことを行うかご存じでしょうか？

「デザインが崩れていないか」「ボタンが正しく動作するか」「スマホでも問題なく見られるか」など、ユーザーにとって快適なWebサイトにするために欠かせない作業です。

今回は、動作・表示確認テストの具体的な内容や重要性について詳しくご紹介します！

動作・表示確認テストの重要性

Webサイトは、パソコン・スマホ・タブレットなど様々な環境で見られます。
また、Google ChromeやSafariなどの違うブラウザでも表示されます。

しかし、すべての環境で完璧に見えるとは限りません。
「パソコンでは問題ないけど、スマホで見るとボタンが押せない」
「Chromeでは正しく表示されるのに、Safariだとデザインが崩れる」

こういったトラブルを事前に防ぐために、しっかりテストを行うことが大切です。

実施する人

表示テストはサイトを作成した人以外のメンバーでおこないます。

制作者自身がチェックすると、どうしても見落としが発生しやすいため、第三者の視点でテストを実施しています。

チェック項目の例

デザイン確認

デザイン案とテストサイトを見比べて、以下のような点をチェックします。

• テキストのフォントやサイズ、色がデザイン通りか
• ボタンや画像の位置がズレていないか
• 行間や余白が適切にとられているか

HTML・CSS・jsエラー

構造や文法が適切かツールを用いてチェックします。

エラーがあると機能に不具合が生じたり、SEOに悪影響が出たり、スクリーンリーダーやキーボード操作が正しく機能しなくなる可能性があります。

「ドキュメントのチェックが完了しました。エラーや警告は表示されません。」と表示されています。

Alt属性

Alt属性とはWebサイトに掲載されている画像の代わりに表示されるテキストのことです。画像が表示されない場合や、音声読み上げブラウザを使用する際に役立ちます。

• 画像に意味のあるAlt属性が設定されているか
• 装飾目的の画像（アイコンや背景画像など）に不要なAltが設定されていないか

アクセシビリティ向上のためにも、適切に設定されているかチェックします。

実は画像一つ一つに説明文が入っています。

見出し

適切な順番で見出しタグが使われているかをチェックします。

見出しタグはSEO対策にも影響するため、検索エンジンにとってもわかりやすい構成にすることが重要です。

リンクチェック

• すべてのリンクが正しく動作するか
• リンク切れがないか
• 内部リンク・外部リンクの設定が適切か

リンク先に誤りがないか一つ一つボタンをクリックして確認しています。

タブ・キーボード操作

• キーボードのTabキーだけでページ内の移動が可能か
• フォーカスの移動順が適切か
• フォームやボタンがキーボード操作で問題なく動作するか

マウスを使わずにページを操作できるかチェックします。

クロスブラウザチェック

異なるブラウザやデバイスで、表示崩れや動作不良がないかを確認します。

対象ブラウザ・デバイスの例

• Edge / Firefox / Google Chrome / Safari
• iPhone / iPad / Androidスマートフォン・タブレット

また、ウィンドウ幅を変更して、最小320pxの表示でも横スクロールバーが出ないかもチェックします。

表示スピードチェック

表示が遅すぎるページはないかをチェックします。

遅いページがある場合は画像のファイルサイズなどを調整しています。

タイトル・説明文

• ページごとに適切なタイトルが設定されているか
• メタディスクリプションが適切か

タイトルや説明文はSEOにも影響するため、キーワードを意識して設定しています。

赤枠部分がタイトル、黄色下線が説明文です。

まとめ

Webサイトは、見た目がきれいなだけではなく、どんな環境でも正しく表示され、スムーズに動作することがとても大切です。
テストを怠ると、デザインの崩れやリンクエラー、スマホでの不具合などが発生し、せっかく訪れてくれたユーザーがサイトを離れてしまう原因になります。

テストを丁寧におこない、誰にとっても見やすく、使いやすいWebサイトを作っていきます😊