COLUMN for DivingShopダイビングショップ向け経営・集客コラム

インターネットでの集客のためにホームページを更新したり、ブログの記事を書いている方もいらっしゃるかと思います。

更新やブログを投稿した後、記事を読む人からどう見えているかチェックしていますか？

Webサイトはパソコンとスマホでは画面サイズが異なり、表示のされ方がちがいます。パソコンで作業していると気がつかないかもしれませんが、スマホでは読みにくかったり、表示がくずれてしまっていることもあります。

読みにくいと読むのをやめて、読者はほかのWebサイトにいってしまうかもしれません。記事が読みにくく、記事を読んでいる人が途中で読むのをやめてしまうと、せっかくのサービスをPRできず機会損失につながってしまいます。

最後まで読んでもらうためにも、読みやすさは大切。

ブログを書いたら、スマホの表示はどうなっているのかを確認するのがおすすめです。とはいえ、自分が持っていないスマホの機種でどう見えているのかは確認できませんし、作業中にもパソコンでチェックできたら便利ですよね。

そんな時に役立つのが「デベロッパーツール」です。

この記事ではデベロッパーツールとはどんなものか、そしてくわしい使い方を解説します。今回はよく使われているブラウザのGoogle Chrome、Microsoft Edge、Safariのデベロッパーツールの使い方をご説明します。
デベロッパーツールはWeb制作のためのツールですが、スマホ表示を確認する方法はそれほど難しくはありませんし、無料で使えます。

デベロッパーツールを使ったことがない方や使ってみたいと思われたら、この記事を参考に、デベロッパーツールをぜひ使ってみてください。

ブラウザについては、くわしく知りたい方向けに書いた記事もありますので、あわせて読んでみてください。

【ホームページ制作】知っておきたい主要ブラウザ5種類のちがい

ブログやホームページはスマホで見られている

スマホが普及し、ネット検索をパソコンではなくスマホでする人が増えています。個人のネット検索の約6割がスマホになっていて、パソコンでの検索を上回っています。

参考：令和２年版情報通信白書

たくさんの人にブログやホームページを読んでもらいたいと思ったら、スマホ対策は不可欠。

スマホ表示がくずれていないかやスマホでの読みやすさはとても大事です。

ブログやホームページの更新をパソコンでしている方も多いかと思います。パソコンで作業をしていると気がつきにくいのですが、パソコンでは読みやすかったのに、画面が小さいスマホ表示だと文字が多くて読みにくかったり、表示がくずれてしまっていたりすることも。そうならないために、スマホでの表示を確認するようにしましょう。

パソコンでの作業中に、記事がどんなふうにスマホに表示されているのかチェックするのに役に立つのが今回ご紹介するデベロッパーツールです。

デベロッパーツールとは

デベロッパーツールはGoogle ChromeやSafariなどのブラウザに元々ついている機能で、Web制作をする人たちに使われています。デベロッパーツールを使うと、ブラウザで表示されているWebサイトがどんなふうにつくられているかを示すHTML構成や通信状態などを確認できます。

この記事ではGoogle Chromeで使われている「デベロッパーツール」という名称を使っていますが、ブラウザによって呼び方は変わります。
例えば、Microsoft Edgeでは「開発者ツール」と呼ばれています。ですが、呼び方は変わっても、機能は同じです。

デベロッパーツールはブラウザに備わっている機能なので、特別に何かを準備したり、インストールしたりしなくても無料で気軽に使えます。デベロッパーツールだといろいろな端末・機種の見え方をチェックできるので、自分が持っていない機種のスマホやiPadなどのタブレット端末でもどんなふうに表示されるかを確認できます。

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

一番多くの人に使われているGoogle Chromeのデベロッパーツールの使い方をWindowsとMacの両方でご説明します。

Windowsの場合

スマホ表示からパソコン表示に戻すにはデベロッパーツールを閉じるかF12ボタンを押すともとに戻ります。また、作業がしにくい、画面が見にくい場合は、デベロッパーツールの移動が可能です。デベロッパーツール上部の歯車ボタンの隣にある・が三つが並んだボタン→「dock side」ボタン横のアイコンで表示場所を選べます。

Macの場合

Macの場合のデベロッパーツールの使い方は以下の通りです。

元のパソコン表示に戻す場合はデベロッパーツールを閉じます。デベロッパーツールの位置を動かしたい時はデベロッパーツール上部の歯車ボタンの隣にある・が三つ並んだボタン→「dock side」ボタン横のアイコンで表示場所を選べます。

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

MicrosoftEdgeはWindows10の標準ブラウザで、MicrosoftEdgeでデベロッパーツールにあたる機能は「開発者ツール」と呼ばれます。
開発者ツールの使い方は以下の通りです。

Windowsの場合

F12ボタンを押すかスマホ表示したいページで右クリック→「開発者ツールで調査する」を選ぶと開発者ツールが表示されます。

記事をスマホ表示にするには開発者ツールの上にあるバーのスマホとタブレットの絵のボタンを押すとスマホ表示に切り替わります。

パソコン表示に戻すにはF12ボタンを押すか、開発者ツールを閉じます。画面上で開発者ツールを移動させるには、開発者ツールの上にある・が三つ並んだボタンを押し、「ドッキングの位置」から好きな位置を選びます。

Macの場合

スマホ表示したい記事で右クリック→「開発者ツールで調査する」を選ぶか、Command + Option + Iで開発者ツールが表示されます。

スマホ表示にするには開発者ツールの上にあるバーのスマホとタブレットの絵のボタンを押します。

パソコン表示に戻す際には開発者ツールを閉じればOK。開発者ツールを好きな場所に表示させるには、開発者ツールの上にある・が三つ並んだボタンから「ドッキングの位置」に入り、アイコンから好みの位置を選びます。

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

SafariはMacやiPhoneで使われているiosの標準ブラウザです。SafariのWindows向けソフトはサポートを終了しているので、Safariのデベロッパーツール（インスペクタ）の説明はMacの説明だけにします。

Safariのデベロッパーツールの使い方は以下の通りです。

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

Mozilla Firefoxはどのパソコンにも標準装備されていないので、インストールが必要です。Mozilla Firefoxのデベロッパーツールにあたる機能は「開発ツール」という名称です。
開発ツールの使い方は以下の通りです。

Windowsの場合

スマホ表示されている画面の上のバーから端末も選べる

パソコン表示に戻すには開発ツールを閉じます。開発ツールを好きな位置に表示するには開発ツールのツールバーで・が三つ並んだボタンを押し、表示位置を選びます。

Macの場合

スマホ表示に切り替わった画面の上のバーから見たい端末も選択可能

パソコン表示に戻すには開発ツールを閉じます。開発ツールを好きな位置で表示したい場合は、開発ツールのツールバーで・が三つ並んだボタンを押し、表示位置を選びます。

デベロッパーツールで読みやすい記事にしてたくさんの人に読んでもらおう

スマホを持っている人が増え、パソコンよりスマホでネット検索をする人が多くなっています。たくさんの人にホームページやブログを読んでもらうにはスマホ対策は欠かせません。

スマホで記事が読みにくかったり、表示がくずれていたりするとホームページやブログに読者がせっかくたどり着いても読むのをやめてほかのWebサイトに行ってしまい、機会損失につながる可能性もあります。

今回ご紹介したデベロッパーツールは無料で気軽に使うことができ、パソコンでスマホ表示を確認できる優れもの。

スマホ表示のための操作もそれほど難しくありません。スマホでも読みやすい記事を書くために、この記事を参考にデベロッパーツールをぜひ、使ってみてください。