LPブログ

【非エンジニア向け】Chromeデベロッパーツールの使い方｜LPの確認・修正依頼に役立つ機能まとめ

けんてぃー

公開日：2026.10.23 18:40

【非エンジニア向け】Chromeデベロッパーツールの使い方｜LPの確認・修正依頼に役立つ機能まとめ

皆さんこんにちは。クロスバズでコーディングを担当している、けんてぃーです。

突然ですが、Webサイトには修正がつきものですよね。広告を回している方だと、ABテストのたびに修正を依頼することも多いかと思います。

そういった中でこういう経験をしたことはないですか？
「修正依頼していたけど、完了したら思っていたイメージと違った…」
「修正内容がうまく伝えられず、後戻りが多い…」
「修正指示を出すときに、ページ全体のスクリーンショットが欲しい」

デベロッパーツールを使えば、修正内容を事前に確認できるので、制作会社との認識のずれを減らせます。

私はコーダーとして、毎日デベロッパーツールを使っています。とても便利なツールなので、まだ知らない方や初めての方にも、ぜひ覚えていただきたいです。

ということで今回はLP（ランディングページ）の修正を依頼する方に向けて、デベロッパーツールの使い方を解説していきます。

気になるところだけ読んでも使えるように、機能ごとに見出しを分けています。必要なところから読んでも大丈夫です。

デベロッパーツールをうまく使い、仕事の効率化をしていきましょう！

デベロッパーツールとは？誰でも使える無料の確認ツール

皆さんデベロッパーツールを使ったことはありますか？

「存在は知っているけどエンジニア向けのツールじゃないの？」
「使おうとしたものの文字が多すぎて諦めてしまった」

こんな方もいるかもしれません。でも安心してください。
基本的に使う機能はごく一部で、それさえ覚えてしまえばWebサイトの修正において必要なものは十分です。

デベロッパーツールは無料で誰でも使え、確認が簡単にできる便利なツールです。

ぜひ覚えていきましょう！

デベロッパーツールでできること

まずデベロッパーツールでできることをご紹介します。
基本的な機能として以下にまとめました。

スマホ・タブレットサイズでの表示を確認できる
文字の差し替えや色の変更を確認できる
開いているページのスクリーンショットが簡単に撮れる
サイトの画像を保存できる
Webサイトの状態（ページの表示速度など）が確認できる

デベロッパーツールはWebサイトの見た目や中身を幅広く確認できるツールです。
細かく見ればほかにもたくさんの機能がありますが、開発者向けのものも多いので、上記の機能さえ覚えておけば問題ありません。

触ってもサイトは壊れない

デベロッパーツールを使えば、文字の差し替えや色の変更が確認できます。
デベロッパーツールで書き換えたものは、自分のPCで一時的に変わるだけで、本番サイトに保存されるわけではありません。

そのため、自由に変更して頂いて問題ありません。

Chromeデベロッパーツールの使い方｜開き方と基本画面

ここまで、デベロッパーツールでできることを紹介しました。
次に実際にデベロッパーツールを開いてみましょう。開き方や基本的な画面の説明を画像付きで詳しく解説していきます。

デベロッパーツールの開き方

まずデベロッパーツールの開き方を確認しましょう。
Chromeで確認したいLPを開き、ページ上で右クリックします。続いて『検証』を選択してください。

ショートカットは以下のとおりで、デベロッパーツールはよく開くことになると思うので、覚えておくと便利です。

Windows：F12 キー、または Ctrl + Shift + I キー
Mac：Command + Option + I キー

もしデベロッパーツールが英語で表示されている場合は、以下の手順で日本語に変更できます。

デベロッパーツール右上の歯車アイコン（Settings）をクリックする
左のメニューで「Preferences」が選ばれた状態のまま、「Appearance」の中にある「Language」で「Japanese – 日本語」を選ぶ
右上の「×」で設定画面を閉じ、上部に「Settings changed. To apply, reload DevTools.」と表示されたら「Reload DevTools」をクリックする

この記事では、日本語表示の画面で説明していきます。

まず覚えるべき「要素の選択」

デベロッパーツールを実際に開くことができたら、まず覚えるべき「要素の選択」を解説します。
※「要素」とは、Webサイトを構成するテキスト・画像・ボタンなどの部品です。

どういう機能かというと、Webサイト上でクリックした部分が、HTMLのどこにあたるのかを確認できる機能です。
これがないと一つ一つソースコードを確認して…といったことになるので絶対覚えましょう。

使い方としてはデベロッパーツールを開くと上部に「要素」や「コンソール」といったタブがあります。
このタブがある列の一番左にある四角に右下矢印というアイコンがあると思うので、クリックしてください。

するとアイコンの色が変化します。
その状態でWebサイトの好きなところにカーソルを持っていきましょう。

そうするとカーソルが合った位置の要素を確認することができます。

確認したい部分が決まったら、そのままクリックしてみましょう。
クリックした部分が選ばれた状態になり、デベロッパーツールの「要素」タブで、その部分のHTMLが色付きで表示されます。

この「アイコンをクリック → 見たい部分にカーソルを合わせる → クリック」の流れが「要素の選択」です。
このあとも「要素の選択で〇〇をクリックします」という説明が出てくるので、まずはテキストや画像をいくつかクリックして試してみましょう。

解除したいときは先ほどのアイコンをもう一度クリックすると解除されます。

画面の配置を変える

デベロッパーツールの位置はデフォルトだと右側に出てきます。
もし見づらいと思った場合は、下記の方法で好きな位置に移動させることができます。

まず上記タブの中の右側にある「⋮」をクリックしてください。

メニューの一番上に「固定サイド」という項目があります。

「固定サイド」の右に並んでいるアイコンで、デベロッパーツールを左・下・右の好きなところに配置できます。
一番左のアイコンをクリックすると別ウィンドウで開きます。

別ウィンドウから元に戻したいときは、別ウィンドウの右上にある「⋮」から、もう一度「固定サイド」を開きます。
左・下・右に配置するアイコンのどれかをクリックすると、選んだ位置（Webサイトの左・下・右）にデベロッパーツールが戻ります。

また、デベロッパーツールとWebサイトの間にカーソルを持っていくと、デベロッパーツールの幅も調整することができます。

自分の見やすい配置に変更しましょう。

基本的な操作は以上です。
ここからは、デベロッパーツールで実際にできることを見ていきましょう。

本記事では、主に5つ紹介していきます。

デベロッパーツールでできること1．スマホ・タブレット表示を確認する

まず初めにスマホ・タブレット表示の確認の仕方を解説します。
PCでもスマホサイズで確認したいことはありませんか？デベロッパーツールを使えばPC上でスマホサイズの表示確認が簡単にできます。

スマホ表示に切り替える

早速スマホ表示に切り替えてみましょう。

先ほど「要素の選択」を使用したときのアイコンの右側にあるアイコンをクリックします。

すると以下の画面に切り替わります。

この画面が出てきたらWebサイト上部にあるバーを確認してください。
一番左に「サイズ：〇〇」というところがあります。

「サイズ：〇〇」をクリックすると、さまざまな機種がプルダウンで出てきます。
この中から確認したい機種やサイズを選択しましょう。

そうするとWebサイトがその機種のサイズで表示されます。
もし確認したいサイズが無いというときは次に解説する方法で好きなサイズに変更することができます。

PC表示に戻したいときは、先ほどクリックしたアイコンをもう一度クリックしてください。
ページを再読み込みしてもスマホ表示のままなので、戻すときはこのアイコンを使いましょう。

機種・画面サイズを変える

一覧にないサイズで確認したいときは、自分で画面サイズを指定することができます。

まず、先ほどの「サイズ：〇〇」のプルダウンから「レスポンシブ」を選択してください。
すると、その右側に2つの数字が表示されます。

左の数字が幅、右の数字が高さです。

ここに確認したい数字を直接入力すると、そのサイズで表示されます。
例えば幅を「375px」にすると、iPhone SEと同じ幅で確認できます。

また、よく使われる代表的な機種の幅は以下のとおりです。

機種	幅
iPhone SE	375px
iPhone 16	393px
iPhone 16 Pro Max	440px
Samsung Galaxy A55	360px
Pixel 9	412px
iPad Mini	768px
iPad Pro 13	1032px

※2026年10月20日現在

どれもデベロッパーツールの機種一覧から選べるので、迷ったらまずはこの幅で確認してみましょう。

また、表示されている画面の右端や下端にあるつまみをドラッグして、サイズを自由に変えることもできます。
少しずつ幅を変えながら、どの幅で表示が崩れるかを確認したいときに便利です。

さらに、上部のバーの右側にある回転のアイコンを押すと、スマホを横向きにしたときの表示も確認できます。

最終確認は実機で行う

最後に注意点があります。
ここで確認できている「スマホ表示」というのは、あくまでもPC上で見るスマホ表示ということを覚えておきましょう。

私自身、デベロッパーツールでは問題なかったのに、実機で確認したら文字が変なところで改行されていたり、アニメーションが表示されなかったりしたことがありました。

このように、実機では表示が崩れることもあるので、最後に実機で確認することを忘れずに行いましょう。

デベロッパーツールでできること2．文字を書き換えて見え方を確かめる

次に、デベロッパーツールでは文字を書き換えることもできます。
例えばテキスト変更する際に実際の見え方を確認したいときに使えます。

文章量によって見え方も異なってくるので、最初に確認しておくと「思っていたものと違った」となることを防ぐことができます。

実際に、改行位置についての修正依頼はよくいただきます。私たちも、文言が増えたときは改行位置がおかしくなっていないかを確認するようにしています。

テキストを書き換える方法

ではどうやって実際に書き換えるのかといいますと、まず「要素の選択」で変更したいテキストをクリックします。

クリックすると、デベロッパーツールの中に該当の箇所のHTMLが出てきます。
※たまに折りたたまれていることがあるので、フォーカスされたHTMLの左側にある▼をクリックして展開してください。

あとは変更したいところのテキストをダブルクリックすると、

このようにテキストを入力できるようになるので、変更したい文字に変更しましょう。

これは少し応用になるのですが、文字だけでなくHTMLタグごと書き換えることもできます。
（HTMLとはWebサイトを構成するためのコードです。）

やり方は、書き換えたいHTMLの上で右クリックし、「HTML として編集」を選びます。

よく使うのは改行です。改行したい位置に <br> と入力すると、その位置で改行されます。
「この見出し、ここで改行したほうが読みやすいかも？」というときに、実際の見え方を確かめられます。

書き換えは自分の画面だけ

ここで変更したものはあくまでも自分の画面だけになります。
実際のサイトの内容が変わるわけではありません。

変更したものは、リロードするとすべて元に戻ります。一部だけ戻したいときは、その部分のテキストをもう一度編集しましょう。

なお、変更した内容を修正依頼に使いたいときは、リロードする前にスクリーンショットを撮っておきましょう。

デベロッパーツールでできること3．色や文字サイズを変えて、修正後のイメージを確かめる

修正には色や文字サイズを変更することもありますよね。
デベロッパーツールは文字の色や、サイズを変更することもできます。

ここの色やサイズを変更したらどう見えるか、というのが確認できるので活用していきましょう。

個人的に、デベロッパーツールで一番おすすめしたいのがこの機能です。

文字のサイズや色を、実際の画面で見ながら変えられるので、「どれくらいがちょうどいいか」を自分で確かめられます。

文字サイズを変える

まずは文字サイズの変更の仕方です。

ここではCSSというWebサイトの見た目を変更するコードを使います。
ただ書くものは1行で、難しいことはありません。

まず、「要素の選択」で変更したいところのテキストをクリックします。
そうすると、HTMLが表示されている部分の近くに「スタイル」というタブがあります。

「スタイル」をクリックすると、いくつかCSSというものが出てきます。
一番上に「element.style {」と「}」で囲まれた枠があるので、基本的にはここを編集していけば問題ありません。

ここに書いたものは、選んだ要素だけに反映されます。

ここまでこれたら「element.style {」と「}」の間の空白をクリックすると入力できるようになります。

そこで文字サイズを変更したい場合は以下のコードを入れてください。
「font-size」

「font-size」と入力してエンターキーを押すと、そのすぐ右に、数値を入力する欄が出てきます。

そこに「20px」のように入力して、もう一度エンターキーを押すと、テキストの大きさが変わります。
このとき、数字のあとに「px」を付けて入力してください。数字だけでは反映されません。

font-size: 10px;にしたとき

font-size: 30px;にしたとき

ちなみに、今の文字サイズを知りたいときは、「スタイル」の右にある「計算済み」タブを開いてみましょう。

「font-size」の項目に、今表示されている文字サイズが書かれています。
依頼するときに「今の16pxを18pxに」と伝えられるので、変更する前に確認しておくと便利です。

文字サイズの変更方法はこれだけです。
あとは好きな数値に変更してベストなサイズを探しましょう。

色を変える

次に色を変更してみましょう。
文字サイズと同様に、CSSを使って色を変更することができます。

一口に「色」と言っても、変更したい箇所によって使うCSSが違うので注意しましょう。
以下に、色を変更したいときによく使うCSSをまとめましたので参考にしてください。

文字の色を変更したい場合：color
背景色を変更したい場合：background-color
枠線の色を変更したい場合：border-color

※背景がグラデーションや画像になっている場合は、background-colorでは色が変わらないことがあります。その場合は、制作会社に「この部分の背景色を変えたい」と伝えれば大丈夫です。

使い方としては文字サイズを変更したときと同じです。今回は文字の色を変更してみます。

「要素の選択」で変更したいところをクリックできたら

「color」と入力してエンターキーを押し、右側に好きな色のカラーコードを入力します。
カラーコードとは「#」から始まる色の番号のことで、例えば「#ff0000」は赤になります。

これで赤色にすることができました。
また、カラーコードを入力すると、カラーコードの左側に小さな色の四角が出てきます。

この四角をクリックするとカラーパレットが表示され、好きな色に変更できるので、ぜひ使ってみましょう。

問題なく文字のサイズや色を変更することができましたか？
CSSという言葉は普段聞き慣れないかもしれないですが、覚えることは少ないのでぜひ活用していきましょう。

デベロッパーツールでできること4．ページ全体のスクリーンショットを撮る

全体を確認したいときや修正指示を出したいときに、ページ全体のスクリーンショットが欲しくなることはありませんか？
デベロッパーツールを使えばスクリーンショットを撮ることもできます。

全体や一部のみなどと、柔軟にスクリーンショットを撮ることができるので、手動でやるのは面倒というときに非常に役立ちます。

お客様から「ページ全体のスクリーンショットのここと、ここを直してほしい」という形で修正依頼をいただくこともあります。全体が1枚にまとまっていると、どこの話なのかがすぐに分かるので、依頼する側にも受ける側にも便利です。

ページ全体を1枚で撮る方法

まずページ全体を1枚で撮る方法を解説します。
デベロッパーツールの「要素」や「コンソール」が並んでいるタブの右側にある「⋮」をクリックします。
メニューの中に「コマンドを実行」があるので、クリックしてください。
ショートカットは以下のとおりです。

Windows：Ctrl + Shift + P
Mac：Command + Shift + P

「コマンドを実行」をクリックすると、「実行>コマンド」という入力欄が出てきます。

ここの検索窓に「スクリーンショット」と入力しましょう。

すると、いくつか選択肢が出てきます。
ページ全体を撮りたいときはこの中の「フルサイズのスクリーンショットをキャプチャ」をクリックしてください。
クリックすると撮影が始まり、数秒で撮り終わります。

一つ注意点ですが、このスクリーンショットの幅は現在Webサイトが表示されている幅で撮られます。

以下のようにサイズの幅を「500」に設定すると、幅500pxの画面でスクリーンショットが撮れます。

そのため、あらかじめ確認したい幅に設定したうえでスクリーンショットを撮りましょう。

また、スクロールすると文字や画像がふわっと出てくるサイトでは、その部分が空白のまま写ることがあります。一度ページの一番下までスクロールしてから撮るようにしましょう。

スマホ表示のまま撮る方法

次にスマホ表示のまま撮る方法をご紹介します。
Webサイトが表示されている上部のバーにある「サイズ」のところからスマホの機種を選択してください。

選択できたら先ほどと同じように、上部タブの「⋮」またはショートカットから「コマンドを実行」を開き、「スクリーンショット」と検索して「フルサイズのスクリーンショットをキャプチャ」を選択してください。

そうすると、現在表示されている幅で全体のスクリーンショットを撮ることができます。

一部分だけ撮る方法

ページの一部分だけを撮りたいときも、先ほどと同じく「コマンドを実行」から「スクリーンショット」と検索します。

使うのは以下の2つです。

領域のスクリーンショットをキャプチャ：画面上をドラッグして囲んだ範囲を撮影できます
ノードのスクリーンショットをキャプチャ：「要素の選択」で選んだ部分だけを撮影できます。見出しひとつ、ボタンひとつだけ撮りたいときに便利です

撮影したスクリーンショットは、Chromeで設定しているダウンロード先に保存されます。

デベロッパーツールでできること5．サイトの画像を保存する

修正依頼のときに「この画像を差し替えたい」と伝えるために、今使われている画像を手元に保存しておきたいこともあると思います。

多くの画像は右クリックの「名前を付けて画像を保存」で保存できますが、背景に使われている画像などは右クリックでは保存できないこともあります。

そんなときにデベロッパーツールが役立ちます。

デベロッパーツールで画像を保存する方法

右クリックで保存できない画像も、HTMLから画像のURLを探して開けば保存できます。手順は次の3つです。

「要素の選択」で保存したい画像をクリックします
HTMLの src="〜" に書かれているURLの上で右クリックし、「新しいタブで開く」を選びます
（背景画像の場合は、「スタイル」の中にある background-image: url(〜) のURLです）
開いた画像を右クリックし、「名前を付けて画像を保存」で保存します

保存した画像を使うときの注意

画像を保存できると便利ですが、どの画像でも自由に使えるわけではありません。使う前に、次の点を確認しておきましょう。

他社サイトの画像は使わない：画像には著作権があります。参考として見るのは問題ありませんが、自社のサイトや資料に使うのはやめましょう
自社サイトの画像でも素材のライセンスに注意：有料素材の写真などは、使える範囲が決まっていることがあります
大きいサイズを選ぶ：同じ画像でもサイズ違いが複数用意されていることがあります。srcset に複数のURLが並んでいる場合は、一番大きいもの（数字が大きいもの）を選びましょう
WebP形式に注意：保存した画像が「.webp」という形式だと、ソフトによっては開けないことがあります

【応用編】デベロッパーツールで公開前の確認もできる

ここまで、デベロッパーツールで実際にできることを紹介してきました。
ここでは応用編として、制作会社からLPが納品されたときのチェックに使える方法を紹介します。

公開前に自分でも確認しておくと、「設定が抜けていた」という見落としを防げます。

私たちも納品前には、ここで紹介するタイトル・ディスクリプション、見出し、alt、GTMを、すべてデベロッパーツールで確認しています。

タイトル・ディスクリプションを確認する

検索結果に表示されるタイトルと説明文（ディスクリプション）も、デベロッパーツールで確認することができます。

これらは「meta情報」とも呼ばれ、検索結果でクリックされるかどうかに関わる大切な部分です。

やり方としては、デベロッパーツールの「要素」タブを一度クリックしてから、以下のショートカットを使ってください。

Webサイト側を選んだまま押すと、Chromeのふつうのページ内検索が開いてしまうので注意しましょう。

Windows：Ctrl + F
Mac：Command + F

これは検索のショートカットで、押すと検索窓が出てきます。

この検索窓に、タイトルを確認したいときは「<title」、ディスクリプションを確認したいときは「name="description"」と入力しましょう。

「title」だけで検索すると、関係ない箇所もたくさんヒットしてしまうので、この形で検索するのがおすすめです。

検索窓に入力すると少し見づらいですが、該当する部分が黄色くハイライトされます。

<title> と </title> に挟まれた文字が、現在設定されているタイトルです。
ディスクリプションは、name="description" の後ろにある content="〜" の中の文字です。

確認するポイントは、そのページの内容に合ったタイトルとディスクリプションになっているかです。ほかのページと同じ文言のままになっていないかも見ておきましょう。

見出し（h1など）が正しく付いているか確認する

次に見出しの確認をしていきましょう。
確認の仕方は先ほどのメタ情報を確認したときと同様です。

ただ検索するキーワードが違います。
見出しは「hと数字」の組み合わせでできており、一番大きい見出しは「h1」となります。
その次に2、3・・・と続いていきます。

Windows：Ctrl + F
Mac：Command + F

上記のショートカットで検索窓を出し、確認したい見出し（今回は一番大切な「h1」）を「<h1」と入力して検索します。

検索できると先ほどと同様に黄色くハイライトされ、h1が使われている要素を確認することができます。

確認するポイントは、h1が基本的にページに1つあり、そのページで一番伝えたい内容（LPならメインのキャッチコピーなど）が入っているかです。

キャッチコピーが画像になっている場合は、h1の中にある画像のaltに、キャッチコピーの文言が入っているかを確認しましょう。

画像に説明文（alt）が入っているか確認する

次に画像の説明文（alt）を確認する方法をご紹介します。

手順としては以下のとおりです。
「要素の選択」→確認したいところの画像をクリックしてください。

そうすると下記のようなコードが表示されます。

ここの「alt」という文字を探しましょう。
これが選択した画像に入っている説明文（alt）となります。

もしない場合はその画像に説明文（alt）が設定されていないこととなりますので確認しましょう。

なお、alt="" のように中身が空になっている場合は、飾りの画像のためにわざと空にしていることもあります。
確認するポイントは、画像を見なくても内容が伝わる文が入っているかです。例えば、文字入りの画像なら、画像の中の文字がそのまま入っているのが理想です。

計測タグ（GTM）が入っているか確認する

GTM（Googleタグマネージャー）とは、広告やアクセス解析の計測タグをまとめて管理する仕組みです。計測タグは、GTMを使って入れることが多くあります。

確認の仕方は先ほどと同様で、検索窓に「GTM-」と入力してみましょう。
「GTM-」から始まるIDが見つかれば、GTMが入っています。

もし出てこなければ、GTMは使われていない可能性があります。
ただし、GTMを使わずに計測タグを直接入れている場合もあるので、「GTMがない＝計測できていない」とは限りません。

また、「GTM-」が見つかっても、中の計測が正しく動いているかまでは分かりません。
どちらの場合も、成果が計測できているかは、制作会社や広告の担当者に確認しましょう。

補足：デベロッパーツールでページの重さや表示速度も確認できる

補足として、デベロッパーツールではページの重さも確認できます。
ページの表示速度がなんか重たい…という場合は確認してみましょう。

「ネットワーク」タブで容量の目安が分かる

まず、重たい原因が何なのか整理します。

重たくなる原因の一つが、Webサイトに使われている画像や、HTML、CSSなどの容量です。

この容量はデベロッパーツールの「ネットワーク」タブというところから確認できます。
開き方としてはデベロッパーツールの上部にある「ネットワーク（Network）」をクリックしてください。

「ネットワーク」タブを開いたら、一度ページを再読み込みしてください。
デベロッパーツールは開いている間の読み込みしか記録しないため、開く前に読み込まれたものは表示されません。

また、上部の「キャッシュを無効化」にチェックを入れておくと、初めてサイトを訪れた人と同じ条件で確認できます。

再読み込みすると以下のようにWebサイトに組み込まれているHTMLや画像などがどれくらいの容量で読み込まれているかが確認できます。

ゴチャゴチャしていて分かりづらいかと思いますが、見るべきところは一つです。
下部にある「〇〇MBを転送しました」というところを確認してください。

この数字は、ページを表示するために読み込んだデータの量（転送量）で、大きければ大きいほど重たいということになります。

数字の大まかな目安は以下のとおりです。

1.6MB以下：理想的な軽さ（3G回線で10秒以内に操作できる状態になることを目指した、容量削減の目標）
5MBを超える：Googleの計測ツール「Lighthouse」でも「重い」と指摘されるサイズ
※出典：Google「過大なネットワークペイロードの回避」（2019年5月2日更新）。

ただし、「この容量以下なら速い」「超えていたら遅い」と決まっているわけではありません。通信環境やサーバーの応答、ページの中で動く処理などによっても、表示速度は変わります。

容量の数字だけで判断せず、次に解説するLighthouseの結果もあわせて確認しましょう。
気になる場合は、制作会社に「画像や動画の容量を減らせるところはありますか？」と相談してみるのがおすすめです。

特に、動画や大きな画像を多く使っているLPは重くなりやすいので、確認してみましょう。

また、修正の前後で数字を比べると、修正でページが重くなっていないかも確認できます。

Lighthouseで表示速度を計測できる

次にデベロッパーツールで使える「Lighthouse」という機能をご紹介します。
簡単に説明すると、Webサイトを以下の4つの項目で100点満点で採点してくれる機能です。

パフォーマンス：ページの表示速度
ユーザー補助：誰にとっても使いやすいか（アクセシビリティ）
ベストプラクティス：安全性など、Webサイトとして基本的なことができているか
SEO：検索エンジンに正しく伝わる作りになっているか

使い方は、デベロッパーツール上部の「Lighthouse」タブを開き、デバイスで「モバイル」か「パソコン」を選んで「ページ読み込みを分析」を押すだけです。

計測するたびに点数は多少変わるので、点数そのものより「どの項目が低いか」を見るのがおすすめです。

点数が低くても、すぐにサイトを訪れた人が困るとは限りません。

気になる項目があったときは、結果のスクリーンショットだけを送るのではなく、「この項目の点数が低いのですが、対応が必要か見てもらえますか？」と制作会社に相談してみましょう。

表示速度の改善方法については、LPの表示速度がCVRに影響する？表示速度を改善する11の方法を徹底解説！で詳しく解説しているので、もし興味があれば読んでください。

デベロッパーツールで修正依頼を伝わりやすくしよう

ここまで、デベロッパーツールでできることを解説してきました。
では実際にデベロッパーツールを使った修正依頼の仕方を、例を使って紹介します。

よくある「伝わりにくい依頼」の例

まず伝わりにくい例からです。

例えば、社内でLPの更新を担当している方に「ここの文字を少し大きくしてください」と頼んだとします。
修正後に確認すると、思っていたよりも大きくなっていて、「もう少し小さくしてください」ともう一度お願いすることになってしまいます。
頼んだ側と担当の方とで、「少し」の感覚が違っていたわけです。
「少し大きく」「もう少し暗く」という言葉だけで、加減をぴったり合わせるのは難しいものです。
こうした後戻りが起きると、次のような負担がかかります。

修正内容を伝え直して、仕上がりをもう一度確認する手間が増える
反映が1往復分遅れて、LPの公開やABテストの開始が後ろにずれる
社内の確認が必要な場合は、もう一度確認を回すことになる

デベロッパーツールで試してから依頼すると

では、伝わりやすい依頼にするにはどうすればよいのでしょうか。
社内の担当者に頼むときにおすすめなのが、依頼をする前にデベロッパーツールで変更を試しておくことです。
何度も修正を依頼し直すのは気が引けますよね。

試した数値をそのまま伝えれば、「少し」のズレが起きにくくなり、1回で思いどおりの仕上がりに近づきます。
上司や関係者に「この見え方でいいか」を先に確認してもらいたいときにも便利です。
手順は次のとおりです。

「要素の選択」で変更したいところをクリックする
文字サイズや色、改行を変えて、良いと思う見え方を探す
決まった数値とスクリーンショットをそのまま依頼に書く

例えば、先ほどの「少し大きく」「もう少し暗く」は、次のように伝えられます。

【対象ページ】https://example.com/lp/
【対象箇所】スマホ表示のファーストビューのキャッチコピー
【変更内容】
・文字サイズ：16px → 20px
・文字色：#666666 → #333333
・「〇〇で」の後ろで改行
【添付】変更前・変更後のスクリーンショット
【範囲】スマホのみ（PCはそのまま）

このように数値とスクリーンショットで伝えれば、「思っていたものと違った」というズレを防ぎやすくなり、社内でのやりとりもスムーズになります。

依頼するときに添えるもの

社内で依頼をするときは、以下がそろっているとさらに伝わりやすくなります。

ページのURL
変更前と変更後のスクリーンショット：デベロッパーツールで変更した状態をそのまま撮れば、完成イメージが一目で伝わります
確認した画面：PCだけか、スマホも変えたいのか
変更内容：例）font-size: 16px → 18px
変更する範囲：この箇所だけか、同じ見出しすべてか

とはいえ、修正のたびにここまで準備するのは、正直なかなか大変ですよね。
社内の担当者に頼む場合は、どんな見え方にしたいかを決めて、それを正確に伝えるところまで、依頼する側がやらなければなりません。

制作会社に依頼する場合は、ここまで細かくそろえなくても大丈夫です。
制作会社はLPを作るプロなので、「どこを」「どう変えたいか」さえ伝われば、足りない情報は確認しながら進めてくれます。

「もう少し目立たせたいけど、どれくらいがいいか分からない」という段階でも、「何のために変えたいのか」を伝えれば、目的に合った見え方を一緒に考えてもらえます。
もちろん、デベロッパーツールで試した数値やスクリーンショットがあれば、イメージはより早く、正確に伝わります。
見え方が決まっているときは試した内容を、まだ決まっていないときは目的を伝える、と使い分けるとスムーズです。