地方×コピーライティング×クリエイティブの情報マガジン「KOTOLOG」
クリエイティブ

【WEBディレクターのテクニック】検証ツールを使用して、WEBサイト上のちょっとした変更を試す方法。

クリエイティブ

「参考サイトの色を変更してみたらどんな感じになるのか確かめたい」

「余白などを実際に調整してみて具体的に指示したい」


今回はGoogle Chromeの検証ツールをつかってエンジニアの経験がなくても、簡単にちょっとした変更を試すことができる方法について解説していきます。

スポンサーリンク

習得必要!検証ツールとは?

検証ツールはサイトのコード情報などが確認できるブラウザの機能です。
ブラウザ上で「右クリック」 →「検証」と進むことで、WEBサイトの情報を確認し、一時的に自分の画面上で変更することができます。

検証ツールの見方

検証ツールでは、「Elements」からサイトのHTMLのコード、「Styles」でCSSのコードが確認できます。
ざっくりと説明すると、「Elements」では文章や写真などの設置されたコンテンツ、「Styles」にはコンテンツの装飾やレイアウトについて記述されています。

編集したい場所を確認する方法

検証ツールを開く際、編集したい対象の上で右クリックを押して検証を開くと、対象の記述を確認することができます。
また、記述にカーソルを合わせると対象範囲に色がつくため、変更したい対象の記述があっているかを確認することができます。

検証ツールでの色の変更方法

色を変更したい場合、まず色がついている対象を「Elements」で選択します。

色がついている場所ぴったりになる範囲を選択しましょう。

続いて「Styles」から色を指定している記述を確認します。

色を指定している記述

「color」 文字色を指定しています。
「background-color」 背景色を指定しています。

記述から色を変更する方法

該当の記述を見つけたら色のついたアイコンをクリックしてカラーを変更してみましょう。

色の指定はカラーコードを用いて行います。

こちらのサイトなどからカラーコードを取得して変更することも可能です。

検証ツールでの余白を調整

余白をしたい場合、まず余白を含めた対象を「Elements」から選択します。
続いて「Styles」をから余白を指定している記述を確認します。

余白を指定している記述

「margin」 コンテンツの外側に対する余白を指定しています。
「padding」 コンテンツの内側に対する余白を指定しています。

通常は 「○px(上),○px(左),○px(下),○px(右)」と表記されますが、
「○px(上下),○px(左右)」と記載されることもあります。
また「margin-left : ○px」「padding-bottom: ○px」といった個別の設定がされている場合もあります。

デザインの実現方法によって使い分けは存在しますが、検収ツールで確認する際には、余白は基本的に「margin」と「padding」どちらかが設定されていると覚えておきましょう。

変更されているのは自分の画面上のみ

検証ツールでの変更は自分の画面上のみで反映されています。
更新(リロード)すれば元に戻るため、変更した画面は更新(リロード)する前にキャプチャなどで保存しておきましょう。

Google Chromeは、検証ツール上でページ全体のキャプチャが撮れる?

Google Chromeでは 検証ツールを使用してページ全体のキャプチャをとることが可能です。

  1. 検証ツール上でCommand + Shift + P(windowsではCtrl+Shift+P?)を押して入力ウインドウを表示
  2. Caputure full size screenshotを選択

この操作手順でページ全体のキャプチャを作成することが可能です。

まとめ

いかがでしたでしょうか?
検証ツールの簡単な操作方法を知っておくと、WEBサイト上のちょっとした変更を試すことができます。
急ぎの確認や、イメージを伝える際にも有効な手段なので、WEBサイトに携わる方々であれば習得しておいて損はないでしょう。

タイトルとURLをコピーしました