非エンジニアでも使える！Chromeデベロッパーツール活用術

こんにちは！

本日は、D2C IDの中でもWEB制作の分野で活躍しているプロジェクトマネージャー・ディレクターの池田が、Chromeの「デベロッパーツール」について解説します。

デザイナーさんやエンジニアさんに修正依頼する前に、修正内容を検証しておきたいときや、打ち合わせしながらその場でデベロッパーツールを使って表示イメージを擦り合わせるなど、WEB制作の現場では欠かせない「デベロッパーツール」

押さえておきたいポイントをご紹介します。

---------------------------------------------------------

D2C IDでプロジェクトマネージャー・ディレクターを担当している池田です！

私はもともとフロントエンド畑出身ということもあり、テクニカル領域を武器にしたディレクションをすることが多いです！

ChatGPTや音声AIなど、生成AI周りのテクニカルディレクションを得意としてます。

・【森永乳業】マウントレーニア AI森田に褒めらレーニア

・【NTT DOCOMO x Google】1億人であるある言いたい選手権

突然ですが、みなさんChromeのデベロッパーツール、使ってますか？

日頃の業務でこんなことで困ったことはありませんか？

　ここのテキストを変えたいけど、この文字量で収まるのか…？

　でも、これだけをエンジニアさんにお願いするのも気が引ける…

そんなシーンにぴったりな デベロッパーツール をご紹介します。

デベロッパーツールってなんぞや？

PCのChromeに備わっているブラウザ機能で、F12キーを押すことでデベロッパーツールが出てきます。

近年のブラウザであれば、Chrome以外にも似たような機能が搭載されています。

このツールではサイトのHTML/CSSなどのソース、リクエストヘッダーや通信内容の確認など幅広く確認できます。

デベロッパーと付いていることからエンジニア向けかな？と敬遠されるかもしれませんが、実はディレクター・デザイナー・マーケティング担当などWebに携わる方であれば使える場面は必ず出てきます！

今回は、簡単なのに超便利な使い方をご紹介したいと思います。

デベロッパーツールの使い方

サイト上の文字を変える

できること

疑似的にサイト上の文字を手元ですぐに変更できます。

文字を変更したときの見え方や、原稿を流し込んだ時にボリューム感を検証するときにめちゃめちゃ重宝します。

手順

1.選択アイコンを押して、変えたい文字を選択します。

2.ダブルクリックすると、文字を書き換えられます。

※改行を入れたいときは、HTML編集（ダブルクリックではなくF2を押す）で"<br>"を直接入力します。

ページ内にある文字を探す

できること

前述の文字を変えたいときに、目的の文字をすぐに見つけられます。

文字以外にもHTMLタグやCSSなども検索可能です。


手順

1.デベロッパーツール上で[Ctrl + F]キーを押して、検索の入力エリアを表示します。

2.任意の文言を入力すると、文字が存在する場合はハイライトされます。

さらに[Enter]キーを押すと、次の文字に移動します。

適用されてるCSSを確認・変更する

できること

テストアップ上に反映せずに、手元で事前の検証ができます。

その状態のキャプチャを撮れば、修正イメージとして関係者との認識も合わせやすくなります。

たとえば、以下のようなことが値を変えるだけで簡単に検証できます。

　・文字のサイズを変えたい：font-sizeの値を変更する

　・余白（マージン）を変えたい：marginの値を変更する

　・要素の幅/高さを変えたい：Width/Heightの値を変更する

　・背景色を変えたい：background-colorのカラーコードを変更する

手順

1.選択アイコンを押して、変えたい要素を選択します。

2.CSSプロパティを変更します。

要素を削除する

できること

要素を消したときの見え方の確認など。

資料で使いたいサイトキャプチャを撮るときに、この要素は入れたくないな～、というときにも使えます。

手順

1.選択アイコンを押して、削除したいHTML要素を選択します。

2.「Delete」キーを押すと、要素が削除されます。

削除した要素は「Ctrl+Z」を押すことで、元に戻せます。

PC上でスマホサイトを見る

できること

スマホでの見え方にシミュレーションできます。実機とは厳密な見え方は違ってきますが、ざっくりの表示確認や検証が行えます。スマホでの表示を手っ取り早く確認したいときに便利です。

手順

1.スマホアイコンを選択します。

PCの状態に戻したいときは、スマホアイコンをもう一度選択します。

2.スマホの表示に変更されます。

もし変わらない場合は、上部の[Dimensions]をiPhone等に変更し、F5でサイトリロードを試してください。

さいごに

いかがでしたでしょうか？

初めてで右も左も分からないという方がいましたら、ぜひこの記事をぺっと共有してみてください。

これだけでも覚えておければ、様々な場面で活用できるかと思います。

デベロッパツール自体も、まだまだできることは沢山ありますので、気になった方は色々弄ってみてください！

------------------------------------------------------------------

D2C IDでは、さまざまなWEBコンテンツ制作を行なってまいりました。

WEBサイト制作を起点としたコミュニケーションプランニングやSNSとの連動など、お気軽にご相談ください。

https://www.d2cid.co.jp/contact/