Web担当者が知っておきたい「Chromeデベロッパーツール」の使い方

最近のウェブブラウザには「デベロッパーツール（開発ツール）」と呼ばれる、ウェブデザイナーや開発者にとってとても便利なツールが付いています。

しかしこのツールは、デザイナーやウェブ開発者だけが利用するようなツールではありません。
Web担当者の方でも使えるようにしておいた方がいい機能もありますので、ここではWeb担当者目線で、Chromeのデベロッパーツールの機能と使い方をご紹介します。

デベロッパーツール（開発ツール）でできること

デベロッパーツールでは、Webサイトの様々な技術的なことを確認することができます。
例えば、下のようなことができます。

スマホサイトの表示確認ができる

適切なスマホサイトがあるかどうかは、検索順位を決めるランキング要素になっています。
（モバイルフレンドリー）
デベロッパーツールを使えば、iPhone、AndroidでどのようにWebサイトが表示されているのかを確認することができます。

スタイルシートのテストができる

Web担当者の方がスタイルシートの知識を持っていることが前提になりますが、デベロッパーツール上でスタイルシートの修正ができますので、デザイナーに依頼する前にテストをすることができます。

「テキストと画像の間隔をもう少し広げたほうが読みやすいのでは？」
「テキストボックス同士の間隔はもう少し狭くした方が見やすいのでは？」
といった修正を、Web担当者がテストすることができます。

テストをしてみた結果、修正した方が良いと判断すれば、デザイナーに修正依頼をすればいいわけです。

「修正してもらったけどやっぱり元の方がいいな」という手戻りがなくなり、デザイナーとのコミュニケーションも円滑にできるようになるはずです。

位置を偽装することでその地域の検索結果を知ることができる

「偽装」というと聞こえは悪いかもしれませんが、デベロッパーツールを使えば、今現在自分のいる場所を変えて、検索結果を表示させることができます。

Googleは2014年12月に、検索された地域によって検索結果を変更するアップデートを実施しました。つまり、東京と大阪では検索結果が違うキーワードがあるということです。

もし、東京にいながら大阪での検索けっかを知りたい時でも、わざわざ大阪まで行って検索してみる必要はなく、Chromeのデベロッパーツールで地域が変えられるのです。

現地での検索結果と寸分違わず一致するとは限りませんが、参考にはなるはずです。

スマホサイトの表示を確認する方法

いま開いているWebページをスマホで開いた時にどのように見えるのか、それを確認する方法を解説します。

1. Webページのどこでもいいので、空白部分で右クリックして「検証」をクリックします。
2. 初期状態では画面の下側にデベロッパーツールが起動しますので、「Toggle device mode」のアイコンをクリックします。
3. スマホでの表示がエミュレートされます。画面上部のデバイス選択のセレクトメニューから、エミュレーションしたいデバイスを選択します。
4. 初期状態では、iPhone6やNexus5などの主要なデバイスのみが表示されていますが、セレクトメニューの「Edit…」をクリックすると、iPhone4やNexus7などの古い機種も、メニューに加えることができます。
5. 縦画面表示と横画面表示を入れ替える時には、エミュレーションされている画面上部右端にあるアイコンをクリックします。
6. 小さな画面で表示している場合などは、倍率を小さくしてすべての画面の表示させることもできます。

スタイルシートの修正テストをする方法

デベロッパーツールでは、HTMLやスタイルシートの修正テストを行うことができます。

1. Webページのどこでもいいので右クリックして「検証」をクリックします。
2. デベロッパーツールのいちばん左にある要素を選択するアイコンをクリックします。
3. スタイルシートを修正したい箇所を、Webページ上で選択します。
4. デベロッパーツールの左側に選択した要素のHTMLが表示され、右側には適用されているスタイルシートが表示されます。
5. 右側に表示されているスタイルシートを修正します。修正したスタイルは、リアルタイムで反映されますので、変更しながら確認がとても楽です。

Chromeデベロッパーツールで修正しても、実際のHTMLやスタイルシートには影響は及びません。
あくまでも「表示している間だけ、修正をしているページだけ」の変更です。

今現在の位置を偽装して地域の検索結果を表示する方法

Chromeデベロッパーツールを使うと、検索している位置を「緯度」と「経度」で指定して、その地域での検索結果を得ることができます。

東京に本社があって地方に支店がある企業の場合、支店のある周辺地域の検索結果は、東京での検索結果と異なる場合があります。
なんかおかしいな？と思ったら、位置情報を書き換えて検索してみましょう。

また、Googleアカウントにログインしている状態だと位置の偽装ができない場合がありますので、うまくできない場合にはシークレットモードに変更して試してみてください。

シークレットモードウィンドウは、WindowsならCtrl+Shift+N、Macなら⌘ command+Shift+Nで開きます。

またはChromeのメニューから「新しいシークレットウィンドウ」を選びます。

1. Webページ上のどこでもいいので右クリックして「検証」をクリックします。
2. 「Toggle device toolbar」のアイコンをクリックして、スマホのエミュレート画面に切り替えます。ちなみに、エミュレートするデバイスはiPhoneでもAndroidでも構いません。
3. キーボードのescキーを押してコンソールを表示したら「Sensors」をクリックします。
4. 「Geolocation」のプルダウンメニューから「Custom location…」を選択します。
5. Latitudeは緯度、Longitudeは経度を示しています。
   試しにLatitudeに「33.59」Longitudeに「130.42」と入力してください。
6. その画面でGoogle検索を行います。「ラーメン」で検索してみてください。
   ページ下部に表示されている地域を確認すると「福岡県福岡市博多区博多駅前」と表示されているはずです。

   いま画面に表示されている検索結果は、博多駅前で検索した結果とほとんど同じはずです。

7. 何度か検索をすれば位置情報が切り替わるはずですが、もし何度やっても切り替わらない場合には、検索結果の下に表示されている「正確な現在地を使用」もしくは「更新」のリンクをクリックして試してください。

   何度か繰り返しているうちに切り替わるはずです。

持っているスマホで同じキーワードを検索してみてください。

おそらく食べログが上位表示していると思いますが、東京で検索したのなら東京のページが、大阪で検索したのなら大阪のページが上位表示されているはずですが、位置情報を書き換えて検索した結果は、福岡県のページが上位表示されています。

緯度と経度はこちらのサイトで検索することができますが、一応大都市の緯度と経度を載せておきますので、参考にしてください。（その都市の大まかな位置です）

• 東京
  • Latitude「35.68」
  • Longitude「139.76」
• 名古屋
  • Latitude「35.17」
  • Longitude「136.88」
• 大阪
  • Latitude「34.7」
  • Longitude「135.49」
• 福岡
  • Latitude「33.59」
  • Longitude「130.42」
• 札幌
  • Latitude「43.06」
  • Longitude「141.35」

もし検索結果が切り替わらない場合には、地域名が書かれている横に表示されている「更新」を何度かクリックしてみてください。

デベロッパーツールの表示位置を変える方法

デベロッパーツールは、初期状態ではページの下側に表示されますが、スマホページをエミュレートしている時など、下側に表示されていると邪魔なことがあります。

そういった場合には、画面の右側に表示させたり、独立したウィンドウで表示させると使いやすくなります。

1. デベロッパーツールの右端に表示されている「丸が縦に3つ並んだアイコン」をクリックします。
2. 「Dock side」でデベロッパーツールの表示位置を変更することができます。
   左側から「別ウィンドウで表示」「下に表示」「右に表示」です。

いかがでしょうか。
Chromeデベロッパーツールを使いこなせれば、サイト運営のヒントが得られるはずですので、ぜひ活用しましょう！

「役にたった」と思ったらシェアお願いします