Webサイト更新時のレイアウト崩れを自動でチェック！おすすめの方法をご紹介

１．Webサイト更新で起こりやすいミスとは？

自社サイトなどの更新の際に起こりやすいミスとして、例えば、次のことが挙げられます。

●誤ったページのアップロード

Webサイトの更新は、WebサーバーにWebサイトの言語が記載されたHTMLファイルや画像ファイルなどをアップロードすることで行います。アップロードが完了したら、ブラウザでページを確認することが可能になります。しかし誤ったファイルをアップロードしてしまうことがあります。その際、ブラウザ上で誤った情報を掲載してしまったり、社外秘の情報が出てしまったりすることもあり、重大な問題に発展する恐れもあります。

●先祖返り

先祖返りのミスも更新時に起きやすくなります。先祖返りとは、前回の更新時に修正や追加をしたはずの内容が、更新後に意図せず以前の内容に戻ってしまうことを指します。例えば、Webサイトの更新情報一覧を掲載しているページに「○○の情報を更新しました」と追記してアップロードした後、前回更新したニュースページへのリンクが消えてしまったということがあります。原因として、前回更新したファイルではなく、それより前のファイルを使って更新をかけてしまったということが考えられます。

●レイアウト崩れ・表示崩れ

Webサイトを更新したら、ページのレイアウトが崩れてしまったという失敗もあります。レイアウト崩れとは、表示崩れとも言われ、Webサイトの作成者が意図したものと違う表示がされていることを指します。原因として、修正をかけたときにHTMLタグなどの閉じ忘れや、タグの記述が不完全なままアップロードしてしまったといったことが考えられます。一つのミスが他のページにも影響が及んでいることもあります。

２．レイアウト崩れ・表示崩れが起こる原因とは

コンテンツのレイアウト崩れ・表示崩れが起こる原因には様々なものがあります。ここでは一般的にレイアウト崩れが起こる原因としてよくあるものをご紹介します。

●HTMLが原因のレイアウト崩れ

上記でも説明してしますが、まずHTMLの記述ミスが原因の一つとしてあげられます。その中でも一番多いのはタグの閉じ忘れです。現在使われているテキストエディタでは、自動でタグを閉じてくれるものが多いですが、リストをコピーして複数作成するときなどに、コピーミスが原因でレイアウト崩れが発生することがあります。次に多いのが、タグの全角記述があります。HTMLでは、タグは半角で入力しなければなりませんが、文章を全角で入力した後に、そのままタグを打ってしまい、全角で入力するミスが発生してしまうことがあります。また行の末尾に全角スペースが入ってしまってもレイアウト崩れが起こります。文字と違い確認しにくい箇所のため、気づくのが難しいミスになります。

●CSSが原因のレイアウト崩れ

次にCSSの設定ミスが考えられます。CSSはウェブサイトのデザインを指定するための言語ですが、誤った記述をしてしまうことで、レイアウト崩れが起こることがあります。セレクタの指定ミスや、プロパティの値の記述ミスなどが原因となることが多いです。また画像設定のミスも要因となることが多いです。CSSで指定した位置やサイズが、実際の画像と異なると設定ミスとなり、レイアウト崩れが起こります。画像については、読み込み速度も原因となることがあり、大きな画像を使いすぎると、ページの表示速度が遅くなりレイアウト崩れにつながることがあります。他にも様々なデバイスに対応するようにするレスポンシブデザインの不備や、様々な設定ができるCSSをしっかり理解できていないことで、レイアウト崩れが起こることも少なくありません。

●キャッシュが原因のレイアウト崩れ

よくあるミスですが、ユーザーのブラウザが過去のCSSやJavaScriptファイルをキャッシュしている場合、最新のスタイルやスクリプトが適用されず、レイアウトが崩れることがあります。特にサイトを更新した後に特に起こりやすいレイアウト崩れです。キャッシュをクリアすることで、解決することができ、主なキャッシュクリアの方法は以下の通りです。

・Windowsの場合
Ctrl + Shift + Rキー

・Macの場合
Command + Shift + Rキー

・chromeからキャッシュクリアする場合
左上のメニュー＞「閲覧履歴データの削除」から期間と対象を指定

●ブラウザが原因のレイアウト崩れ

ブラウザの大きさや解像度が原因でレイアウト崩れが生じる場合もあります。特定のブラウザに合わせて改行やスペースなどで余白を調整している場合、別なブラウザでは変な位置で改行されていたり、文章の間に突然スペースが入ってしまうことがあります。

それ以外にもブラウザごとに対応しているCSSやJavascriptが異なる場合があるため、最新のものに対応していないことからレイアウト崩れが発生するケースもあります。

このように、ブラウザのレイアウト崩れには様々な要因があるため、前回レイアウト崩れが発生した原因を対策しても、別な原因でまたレイアウトが崩れてしまうことがあります。そのため、必ず更新時にはレイアウト崩れが発生していないかをチェックすることが求められます。

３．レイアウト崩れをチェック！更新箇所を調べる方法

レイアウト崩れは、更新後にWebサイト全体をチェックするなど、常に調べて早期発見をする体制づくりが欠かせません。Webサイト内のレイアウト崩れに気づかないまま放置してしまい、社外からネガティブな印象を持たれてしまうのは避けたいものです。レイアウト崩れをチェックする方法には、主に次の方法があります。

●目視でチェックする

Webサイトを人が目視でチェックする方法です。人がチェックすることなので、ウェブサイトのレイアウト崩れ・表示崩れが起きていても見落としが発生しやすいところがあります。一方で、細かな変化など感性でしかわからない点は気づきやすいといえます。しかし膨大なページ数を丁寧に一ページずつ見ていくのは非常な手間がかかります。

●更新チェックツール（無料）を使用する

無料で使える更新チェックツールを使い調べる方法です。目視と比べてチェックの自動化が実現するため、手間の削減につながります。一方で、無料であるがゆえに動作保証やセキュリティ、チェックできるページ数に限りがある点に課題があります。

●更新チェックツール（自動通知付き）を使用する

法人向けに提供されている有料の更新チェックツールもあります。無料ツールと違い、有料なので動作保証付きで、チェックの自動化や通知機能などの機能が付いているものもあり、便利です。一度に登録できるWebサイト数が数万サイト単位ということもあります。

４．Webサイトの更新を自動通知するメリット

Webサイトの更新を自動通知することができれば、レイアウト崩れをできるだけ早く察知することに繋がります。そこで更新箇所をツールでチェックし、自動通知するメリットをご紹介します。

●レイアウト崩れがすぐにわかる

更新チェックツールでは、過去とのページと比較して変化があった際に、更新があった旨の即時通知を受けられます。更新された箇所を随時チェックでき、更新された箇所を画面上で更新前と更新後を比較しながら一目で分かるツールもあります。よって、更新のタイミングでレイアウト崩れが起きているかどうかがすぐに把握できます。

●更新部分のみを、効率よくチェックすることができる

Webサイトの更新作業を行う場合に、目視による確認を行うとなれば、すべてのページを開いて確認しなければなりません。しかし、自動通知付きの更新チェックツールであれば、更新されたページの更新部分のみを確認できるので、Webサイト更新によるレイアウト崩れ・表示崩れを効率良くチェックできます。

●創出できた時間をコア業務に充てることが可能になる

更新箇所を目視でチェックしていたケースでは、自動通知付きの更新チェックツールを利用することで、チェック時間が削減されるため、その分、時間を創出できます。創出できた時間は、他のコア業務に充てることができるので、生産性向上につながります。

５．レイアウト崩れを未然に防止！Web制作会社のツール活用例

Webサイトのレイアウト崩れを未然に防いでいる更新チェックツールの活用事例として、Web制作会社の活用例をご紹介します。

 

【課題】

あるWeb制作会社では、制作してクライアントに納品したWebサイトについて、随時、更新を行っています。まれに誤ったファイルをアップロードしてしまうことがあるため、更新のたびに間違った情報をアップロードしてないかを常にチェックし、確認しています。しかし、目視チェックでは時間がかかる点や、タイムリーに実施できない点に課題がありました。

 

【効果】

課題を解決するために自動通知付きの更新チェックツールを導入したところ、更新された箇所を自動で検知し、メール通知を受けられるようになり、目視チェックの工数を大幅に削減できました。また、更新前と更新後の画面の差を見ることができ、変更点が一目瞭然でした。これにより、人的ミスが起きても即時訂正できるようになったことから、万が一レイアウト崩れが見つかっても、すぐに修正対応することが可能になりました。

６．まとめ

Webサイトの更新時のミスは、人手で行っている以上、どうしても起こり得ることです。しかし、万が一、ミスが起きても、すぐにそのミスに気付き、訂正することができれば大事には至りません。

その更新時のミスの対応策におすすめなのが、自動通知付きの更新チェックツールです。今回ご紹介した活用事例で登場したツールでもある、キーウォーカーのWebモニタリング自動化ツール「CERVN（サーブン） 」は、サイト更新時のチェックに最もおすすめです。

CERVNは、Webサイトの差分や更新情報を自動で取得し、メールでのお知らせが可能です。更新の自動通知ができ、どこが更新されたのかが画面上で一目で確認できるので、レイアウト崩れを即座に把握し、対応することも可能になります。ぜひ詳細はサービスページでご確認ください。

関連コラム：差分チェックとは？おすすめツールもご紹介