こんにちは、株式会社Romantistのデザイナー荒井です。
自分は普段webのコーディングやフロントエンドの実装を行うことも多く、常にChoromeデベロッパーツールを利用しています。
web開発者でないとあまり馴染みが無いツールかもしれませんが、web制作に携わる方も知ると便利な機能がたくさんありますので今回はいくつかピックアップして紹介できればと思います。
Chromeに標準搭載されている、開発者用の検証・デバッグツールになります。
開発者としてはソースコードの確認や、プログラムのエラーを確認したりと必須のツールとなっています。しかし、その反面かなり多機能で、開発者以外にはなかなか敬遠されるツールかもしれません。
そのなかでも今回は非開発者の方でも使える且つ便利な機能を紹介していこうかと思います。
いろいろな開き方がありますが、おすすめは画面を右クリックして表示されるコンテキストメニューから「検証」を選択します。
そうするとブラウザのの右側にデベロッパーツールが展開します。
これで一旦準備は完了です!
デバイスモードを起動すると様々な端末のサイズや挙動をシュミレーションできます。最近のwebサイトはPCだけでなくスマートフォンの画面サイズでも適切に表示されるように作られているので、両サイズで確認する必要があります。もちろんお手持ちのスマートフォンで確認するのでも問題ありませんが、効率的に確認するにはデバイスモードで確認するのもオススメです。
早速試してみましょう。デベロッパーツール左上の方のPCとスマートフォンのアイコンをクリックしてみてください。
クリックするとwebページの表示領域が狭くなり、上部にメニューが表示されるかと思います。
表示されたメニューの左のセレクトボックスをクリックすると様々な端末が表示されます。どれか一つを選択してみてください。
今回はiPhone 14 Pro Maxを選択してみます。選択するとwebサイトが表示されているウインドウサイズに変化が出るかと思います。あくまでシュミレーションではありますがこれでiPhone 14 Pro Maxでの表示が確認できます。デフォルトでその他にも端末が登録されていますので色々切り替えて表示がどのように変化するか確認してみてください。
次にwebサイトのスクリーンショットを撮ってみましょう。スクリーンショットが手軽に取得できると修正指示の赤字を入れていくときなどに便利です。
右上のメニューアイコンをクリックします。クリックするとメニューが展開するので
のどちらかを選択します。
Capture Screenshotは現在表示中の領域のみのスクリーンショットが取得できます。Capture full size screenshotはページ全体のスクリーンショットを取得することができます。
こちらはより厳密にwebサイトを確認していくときに便利です。
WordPressなどのCMSを利用している場合ページの表示内容を管理画面から動的に変更することが可能です。
動的に変更する部分はテキストが短くなった場合、長くなった場合にどのように表示されるか確認しておく必要があります。管理画面画からデータを入力して確認するのでもよいですが、よりスピーディーに確認する方法を今回紹介します。
まずデベロッパーツールのConsoleタブをクリックしてください。
上記の画像のような画面に切り替わるかと思います。画像では何も表示されていませんがwebページのエラーがある場合などはここにエラーの内容が表示されていたりもします。
詳細は省きますがconsoleは主にエラー内容の確認や、独自のプログラムをWebサイトに対して実行する際に利用するものになります。
それではWebサイトのテキストを変更できるようにするプログラムを実行してみましょう。
「>」アイコンが表示されている部分があるので、テキストカーソルを合わせて以下のプログラムをコピーして貼り付けて実行してみてください。
document.body.contentEditable = true;
その後、変更した部分のテキストをクリックします。そうするとテキストカーソルが出現して編集可能になるかと思います。あとは文字を入力するだけで内容を書き換えることができます。
ページのパフォーマンスや改善点も簡単に調べることができます。
webサイトのURLを入力して計測するPageSpeedはご存知の方も多いかと思いますが、同様の測定をデベロッパーツールから行うが可能です。
ログインがが必要な画面の測定などはPageSpeedでは難しいですがこちらの機能では手軽に行うことが可能です。
Lighthouseタブをクリックしてみてください。タブにLighthouseがない場合は「>>」アイコンをクリックすると出てくるかと思います。
そうするといくつかのオプションが表示されます。ひとまず初期状態のままで「Analyze page load」ボタンをクリックします。
分析が終わったあとに分析結果が表示されます。細かい修正点等もスクロールしていくことで閲覧できます。そのあたりは興味があれば調べていただけるとよいかと思います。大まかな点数の確認だけでもWebサイトの状態がざっくりと把握できてよいかと思います!
まだまだ多くの機能をもっているデベロッパーツールですが、ほんの一部の機能を紹介させてもらいました。
自分自身も使ったことない機能がたくさんあるのでこれからも色々と試していこうかと思います。(日々勉強)
デベロッパーツールに限らず、Web制作について知りたいことなどあればお気軽にお問い合わせください!