CSSが反映されていなくてページ内のデザインが一部崩れていたことになかなか気づかなかったということはありませんか？
ここでは、どのCSSのリソースが切れているか見つけることができるツールを紹介します。
1.デベロッパーツールでCSSが反映されない時に確認する方法
ここでは一旦Google Chromeのデベロッパーツールを使っていきます。デザインが崩れているページを開き、Windowsなら「F12」キーを押します。(Macなら⌘ + Opt + I)
CSSがうまく反映されていないHTMLセレクタを選択すると、右側に該当のCSSファイルが表示されます。ここに正しいCSSファイルが表示されていない場合、CSSのリソースが切れているということです。headタグ内にあるCSSのリンクが正しいか確認してみてください。
この方法は目視で気づいた場合有効ですが、そもそもデザインの崩れを見落としている場合は以下の方法をお勧めします。
2.アナトミーでCSSが反映されない時に確認する方法
弊社のアクセス解析ツール「アナトミー」でもCSSのリソースが切れていないか確認できます。「アナトミー」はアクセス指標やユーザー動線など解析に関する情報だけでなく、ページの画面キャプチャやCSSなどのリソース情報も持っています。
- 1.[ プロパティ ]をクリック
2.[ リソース切れ ]ボタンをクリック
3.リソース切れが起きているページはタイルが赤くなる 
- 4.メニューをクリックし[ ページリソース閲覧 ]をクリック
- 5.詳細情報ページの[ リソース ]をクリック
6.リソースが切れているCSSファイルにエラーアイコンが表示される 
これだけで、どのCSSのリソースが切れているのか確認できます。そしてアナトミーは週次で更新しているので、毎週自動でリソースが切れていないか確認できるようになります。これでなかなかデザイン崩れが起きていることに気付けなかったということはなくなります。
まとめ
リソース切れやリンク切れなどでページが正しく表示されないと、離脱率も上がってしまいます。
ページの品質を上げることもアクセス解析においては重要です。ぜひ一度「アナトミー」をお試しください。
もしも、気になるページがうまく計測されない、などGoogleアナリティクスの設定に関して懸念点があれば、Googleアナリティクスの設定状況が診断できるサービスも含まれていますので、合せてお試しください。
アクセス解析とは画面の改善をすること
アクセス解析はデータを見ることではなく、データに基づいて画面の改善をしていくことです。
このセミナーでは基本的なアクセスデータの見方から、データに基づいた画面の改善方法を学ぶことができます。
参加者の声
今までとは違った角度で自社のwebサイトを見られてよかったです。
テンポよく、的確な説明で分かりやすかった。重要ポイントについても強調され、頭に入った。
私のような素人でも問題なく参加できました。