COLUMN for DivingShop

パソコンでスマホ表示が見れる!今すぐできるデベロッパーツールの活用方法

パソコンでスマホ表示が見れる!今すぐできるデベロッパーツールの活用方法

INDEX

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

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

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

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

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

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

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

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

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

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

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

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

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

参考:令和2年版情報通信白書

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

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

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

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

デベロッパーツールとは

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

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

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

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

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

Windowsの場合

①Googleクロームの右上の・が三つ並んだメニューボタンから「Googleクロームの設定」→「その他のツール」→「デベロッパーツール」を選択

デベロッパーツールを出すには上の方法のほかに以下の方法もあります。

・F12ボタン
・Ctrl + Shift + i
・スマホ表示にしたいページで右クリック→検証

②デベロッパーツールが表示されたらスマホとタブレットの絵が描かれているデバイスの切り替えボタンを押す。

③「responsive」横の三角形のボタンを押すと端末の種類が変えられるので、見たい端末を選ぶ

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

Macの場合

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

①Google Chromeの「メニュー」から「表示」→「開発/管理」→「デベロッパーツール」を選択

上記の方法のほかにも以下の方法でデベロッパーツールを出すことができます。

・Cmd+Opt+I・右クリックして「検証」

②デベロッパーツールが表示されたら上の方にあるスマホとタブレットの絵が書いてある「Toggle device toolbar」ボタンを押す

③見たい端末を選んで更新すると画面がスマホ表示になる。上にある「responsive」ボタンから端末の種類を選べる

元のパソコン表示に戻す場合はデベロッパーツールを閉じます。デベロッパーツールの位置を動かしたい時はデベロッパーツール上部の歯車ボタンの隣にある・が三つ並んだボタン→「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の場合

①ブラウザの右上の三本線のアイコンをクリック

②「ウェブ開発」→「Web開発ツール」

③開発ツールのツールバーでタブレットとスマホの絵のボタンを押す

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

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

Macの場合

①ブラウザの「ツール」から「Web開発」をクリック

②「開発ツールを表示」を選ぶ

③開発ツールのツールバーでタブレットとスマホの絵のボタンを押す。

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

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

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

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

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

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

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

Contact Us
お問い合わせ

ホームページやウェブマーケティングについてのご相談はお気軽にお問い合わせください。
1営業日以内にご返信させていただいております。

お問い合わせはこちら