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

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

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

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

<目次>

Chrome Developer Toolsで何ができるのか

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