Menu

コーディングの知識が無くてもWebサイトのシミュレーションができるChrome Developer Toolsを使ってみた

IT・Web関連企業で営業の仕事をしていると、クライアントに対してWebサイトの新規構築やリニューアルを提案するだけでなく、受注後のディレクションを担当することもあります。その際、サイトを見て「ここをこう直したらどうだろう」と思ったり、クライアントから「あのタイトルの色を変えたデザインを2、3パターンください」と言われることがありますよね。そんなとき、どうしていますか?

デザイナーやコーダーに修正を依頼してイメージを確かめ、クライアントに提示する──。これもひとつの方法ですが、デザイナー・コーダーは忙しいことが多いため、ちょっとした変更で数パターンの案をつくってもらうのは気が引けてしまうものです。

こんなときぜひ試していただきたいのが「Chrome Developer Tools」です。もともとはJavaScriptのバグ検出ツールですが、HTMLやCSSも操作できるので幅広くシミュレーションするときに便利です。

Chrome Developer Toolsで何ができるのか

それでは、具体的に何ができるのか簡単に見ていきましょう。

起動する

kuramoto-02

右クリックして「要素を選択」をクリックするか、「Ctrl+Shift+I」キーを押すと(Windowsの場合)、Chrome Developer Tools(以下、DevTools)が起動します。

191_kuramoto-06

 

よく使うのは、左端の虫眼鏡アイコンで表されている「インスペクションモード」です。また、その横の方にある「Elements(要素)」から「Console」は、デフォルトで用意されているパネルです。

191_kuramoto-03

インスペクションモードを選択し、テキストを変更してみる

では、実際に試してみましょう。インスペクションモードを選択して、カーソルをサイト内の変更したい部分にあてると、薄く影のようなものが付きElements内の該当ソースに移動します。

191_kuramoto-08

ここで、グレーのラインが付いた箇所をダブルクリックして文言を変えてみます(別の方法として、右クリックし「Edit as HTML」をクリックしても文言を変えることができます)。

191_kuramoto-10

「すべてのBtoBマーケターに朗報です」が「すべてのBtoB企業に朗報です」に表示が変わりました!
このように、簡単にシミュレーションすることが可能です。

キャッシュクリア機能

シミュレーションするにあたって便利なのが、キャッシュをクリアする機能です。
画面右のギアアイコンをクリックして、

191_kuramoto-04

出てきたメニューの中で、「Disable cache (while DevTools is open)」にチェックを入れておきましょう。

191_kuramoto-11

この項目にチェックを入れておくことで、よく起こりうる「変更したのに(キャッシュが残っていて)反映されていない! どうして?」といった事象を防ぐことができます。

画面幅を変え、表示を確認する

ギアアイコンの隣にある四角形のアイコンを選択すると、DevToolsがChromeの画面右側に寄ります(別ウィンドウに切り出される場合、四角形アイコンを長押しします)。

191_kuramoto-07

191_kuramoto-12

ここから画面幅を変えると、それぞれの幅のデバイスで表示したときの見え方をシミュレーションできます。

191_kuramoto-13

レスポンシブ対応しているサイトなら、もちろん幅を狭めれば見え方が変わってきますよね。こうした確認も特別なツールを使うことなく、時間を費やすこともなく、簡単におこなうことができます。

デバイスモード

インスペクションモードと並んでよく使うのが「デバイスモード」です。インスペクションモードのアイコンの隣にあるスマートフォンのアイコンをクリックすると、デバイスモードが起動します。

191_kuramoto-05

191_kuramoto-15

デバイスモードの画面左上にある「Device」から、数十種類のタブレットやスマートフォンなどの各デバイスからの見え方を試すことができます(エミュレーション)。また、「Device」の隣にある「Network」で通信環境を選択すると、その環境下でどのように読み込み・表示がされるのかをざっくりチェックできます。

191_kuramoto-17

関連するツールとして、「Emmet Re:View」というエクステンションも便利です。また、モバイル対応のチェックツールとして、「Google モバイルフレンドリーテスト」を試してみるのもいいでしょう。

 

ここまで「インスペクションモード」と「デバイスモード」の使い方を簡単にご紹介してきましたが、他にも下記のようなシュミレーションが自在にできます。

  • 文字やボタンの色を変える
  • フォントや文字の大きさを変える
  • 不要な要素を削除してみる
  • 配置を変えてみる
  • タブレットやスマートフォンでの閲覧を想定してピンチインやピンチアウトを試してみる……

DevToolsについてさらに詳しく知りたい方には下記の記事もおすすめです。

また、DevToolsも便利ですが、シミュレーションするのに以下のエクステンションもたいへん便利です。

※記載されている内容は掲載当時のものであり、一部現状とは内容が異なる場合があります。ご了承ください。

PageTop
PageTop