「自分が作っているサイト、スマートフォンで見たらどんな風に映るんだろう？」と気になったことはありませんか。
パソコンの大きな画面で作業をしていると、ついついスマホでの見え方を確認するのを後回しにしてしまいがちですよね。
わざわざ自分のスマートフォンを取り出して、URLを打ち込んだり、自分宛てにメールでURLを送ったりして確認するのは、少し面倒に感じるかもしれませんね。
「パソコンの画面上で、そのままスマホ向けの表示を確認できたらいいのに……」
もしかしたら、あなたもそんな風に感じているお一人かもしれませんね。
実は多くのWebデザイナーさんやブログ運営者さんが、同じような悩みを抱えてきたんですよ。
でも、安心してくださいね。
この記事を読んでいただければ、スマートフォンを使わずに、パソコンの画面だけでモバイル向けのサイトをサクッと確認する方法がしっかりと身につきます。
特別なソフトを買う必要もありませんし、難しい専門知識もいりません。
これからご紹介する方法を知れば、あなたのWebサイト作りやブログ運営が、きっと今よりもっと快適で楽しいものになるはずです。
私たちと一緒に、少しずつ新しい知識を取り入れていきましょうね。
パソコンのブラウザ機能を使えばスマホ向けの表示は簡単に確認できます
さっそくですが、あなたが気になっている疑問にお答えしますね。
モバイル用webサイトを表示するのは、pcからでも簡単にできるんですよ。
そのために一番おすすめなのが、Google Chrome（グーグルクローム）というブラウザに標準でついている「デベロッパーツール」を使う方法なんです。
デベロッパーツールと聞くと、「なんだかプロのエンジニアさんが使う難しいツールなのかな？」と身構えてしまうかもしれませんね。
たしかに、名前の響きは少し専門的ですよね。
でも、実はこのツールの中にある「エミュレーション機能（スマホの画面を疑似的に再現する機能）」は、初心者さんでもボタン一つで簡単に使える、とっても優しい機能なんですね。
この機能を使うと、パソコンの画面の中に、まるで本物のスマートフォンのような小さな画面がポンッと現れます。
そこで自分のサイトがどのように表示されるか、文字が小さすぎないか、画像がはみ出していないかなどを、すぐにチェックすることができるんですよ。
わざわざ手元のスマートフォンを開かなくても、パソコンのマウスとキーボードを持ったまま、サクサクと作業を進められるようになります。
これって、とっても便利だと思いませんか。
なぜデベロッパーツールを使ってパソコンで確認するのがおすすめなの？
「でも、どうしてわざわざパソコンでスマホの画面を見る必要があるの？本物のスマホで見た方が確実じゃない？」
そんな風に疑問に思う方もいらっしゃるかもしれませんね。
そのお気持ち、よくわかります。
もちろん、最終的には本物のスマートフォンで確認することも大切です。
でも、作業の途中でデベロッパーツールを使うことには、たくさんの魅力的な理由があるんですよ。
ここでは、その理由を3つに分けて、優しくお話ししていきますね。
わざわざスマートフォンを取り出す手間が省けて作業に集中できるから
一番の理由は、なんといっても作業の手間がグッと減るからなんですね。
Webサイトを作ったり、ブログの記事を書いたりしているときは、パソコンのキーボードに向かって集中している状態ですよね。
そんなときに、「ちょっとスマホでの見え方を確認しよう」と思って、スマホを探して、ロックを解除して、ブラウザを開いて、URLを入力して……という作業を挟むと、せっかくの集中力が途切れてしまうかもしれませんね。
でも、パソコン上でそのままモバイル用webサイトを表示できれば、マウスを数回クリックするだけで確認が終わります。
修正したいところが見つかれば、すぐにパソコンで直して、またワンクリックで確認できるんです。
この「修正」と「確認」のサイクルがスムーズになることで、あなたの貴重な時間を節約できるんですね。
忙しいあなたにとって、これはとても嬉しいポイントではないでしょうか。
たくさんの種類のスマートフォンでの見え方を一度にテストできるから
世の中には、本当にたくさんの種類のスマートフォンがありますよね。
iPhoneをお使いの方もいれば、Google PixelやSamsung GalaxyなどのAndroidスマートフォンをお使いの方もいらっしゃいます。
そして、それぞれの機種によって、画面の大きさ（画面解像度）は少しずつ違うんですね。
「自分のiPhoneでは綺麗に見えているけれど、他の人のスマホでは文字がズレてしまっているかもしれない……」
そんな不安を感じたことはありませんか。
かといって、すべての機種のスマートフォンを自分で買い揃えるのは、現実的ではありませんよね。
iPhoneやAndroidなど自由にデバイスを選んで確認できます
ここでデベロッパーツールの出番です。
このツールの中には、あらかじめ様々なスマートフォンの機種データが登録されているんですよ。
プルダウンリストから「iPhone」や「Pixel」など、見たい機種の名前を選ぶだけで、その機種の画面サイズにパッと切り替わってくれるんです。
これなら、あなたが持っていないスマートフォンの画面でも、どんな風に見えるのかを簡単にテスト（クロスブラウザテスト）することができますよね。
読者さんがどんなスマホを使っていても、綺麗で読みやすいサイトを届けることができるようになりますよ。
サイトの裏側の仕組みやサーバーの動作も一緒に確認できるから
少しだけ専門的なお話になりますが、デベロッパーツールを使うと、画面の見え方だけでなく、「サイトの裏側」で何が起きているのかも確認できるんですね。
たとえば、スマートフォン向けの画像が正しく読み込まれているか、読み込み速度が遅くなっていないか、サーバーがきちんと動作しているかなどです。
最近は「モバイルファースト」といって、スマートフォンでの見え方や使いやすさを最優先にする考え方が主流になっています。
だからこそ、パソコンの画面でただ小さく表示するだけでなく、スマートフォンとして正しくサイトが機能しているか（ユーザーエージェントが正しく認識されているか）を確認することが大切なんですね。
デベロッパーツールを使えば、そういった目に見えない部分のチェックも一緒に行えるので、より安心で安全なサイト作りができるんですよ。
実際にパソコンでモバイル向けサイトを表示する手順を試してみましょう
ここまでの話を聞いて、「なんだか便利そう！私にもできるかな？」と興味を持っていただけたのではないでしょうか。
大丈夫ですよ、操作はとっても簡単です。
ここからは、実際にGoogle Chromeを使って、パソコン上でスマホ向けのサイトを表示する具体的な手順を、一緒に見ていきましょうね。
手順1：Google Chromeでデベロッパーツールを開く
まずは、Google Chromeのブラウザを開いて、確認したいWebサイトやブログのページを表示してみてください。
ご自身のサイトでもいいですし、お気に入りのニュースサイトなどでも大丈夫ですよ。
ページが開いたら、デベロッパーツールを起動します。
起動する方法はいくつかありますが、キーボードの「ショートカットキー」を使うのが一番早くておすすめですよ。
WindowsとMacそれぞれのショートカットキー
お使いのパソコンに合わせて、以下のキーを同時に押してみてくださいね。
- Windowsをお使いのあなた：Ctrlキー と Shiftキー と I（アイ）キー を同時に押すか、F12キー を押します。
- Macをお使いのあなた：Optionキー（⌥） と Commandキー（⌘） と I（アイ）キー を同時に押します。
キーを押すと、画面の右側や下側に、英語や記号がたくさん並んだ新しいパネルが現れると思います。
これが「デベロッパーツール」です。
初めて見ると少しびっくりしてしまうかもしれませんが、今回は難しい英語のコードは一切触りませんので安心してくださいね。
手順2：スマホ表示モード（デバイスツールバー）に切り替える
デベロッパーツールが開いたら、次はいよいよスマホの画面に切り替えます。
デベロッパーツールのパネルの左上あたりに、小さな「スマートフォンとタブレットが重なったようなアイコン」があるのを見つけてみてください。
（「Toggle device toolbar」という名前のアイコンです。）
このアイコンをマウスでカチッとクリックしてみてください。
または、ここでも便利なショートカットキーが使えるんですよ。
スマホ表示に切り替えるショートカットキー
- Windowsの場合：Ctrlキー と Shiftキー と Mキー
- Macの場合：Commandキー（⌘） と Shiftキー（⇧） と Mキー
いかがですか。
ブラウザの画面がキュッと狭くなって、スマートフォンのような縦長の画面に変わりましたよね。
画面の上の方には「Dimensions（またはデバイス名）」と書かれたメニューがあり、ここをクリックすると、iPhoneやGalaxyなど、好きな機種を選ぶことができるんですよ。
もし一覧の中に確認したいスマホがない場合でも、「Edit（編集）」からカスタムデバイスを追加して、好きな画面解像度を指定することも可能です。
いろいろな機種を選んで、見え方がどう変わるか試してみるのも楽しいかもしれませんね。
手順3：必ずページを「再読み込み（リロード）」する
さて、スマホの画面サイズに切り替わって「これで完了！」と言いたいところなのですが、実はここからが一番大切なポイントなんですよ。
画面をスマホモードに切り替えた後は、必ずページを「再読み込み（リロード）」してくださいね。
ブラウザの左上にある、ぐるっと回った矢印のマークをクリックするか、キーボードの「F5キー（Macの場合はCommand + R）」を押せばOKです。
なぜ再読み込みが必要なの？
「どうしてわざわざ再読み込みをしないといけないの？」と気になりますよね。
実は、最近のWebサイトは「レスポンシブデザイン」といって、パソコン用とスマートフォン用で、読み込む画像やメニューの仕組みを自動的に切り替えていることが多いんです。
ただ画面の幅を狭くしただけでは、パソコン用の仕組みのまま画面だけが小さくなっている状態になってしまうことがあるんですね。
再読み込みをすることで、ブラウザが「あ、今はスマホから見られているんだな」と正しく認識してくれて、本当のスマートフォンと同じ状態（正しいユーザーエージェント）でページを読み込み直してくれます。
これにより、スマホ専用のメニューボタン（ハンバーガーメニューなど）が正しく表示されるようになるんですよ。
この「切り替えたら再読み込み」というワンセットを、ぜひ覚えておいてくださいね。
Google Chrome以外のブラウザでも確認できるの？
「私はいつもFirefoxやSafariを使っているんだけど、それでもできるのかな？」
そんな疑問をお持ちの方もいらっしゃるかもしれませんね。
大丈夫ですよ、Chrome以外のブラウザでも、同じようにモバイル用webサイトをpcで表示することができます。
たとえばFirefoxやMicrosoft Edgeでも、F12キーを押してデベロッパーツールを開き、スマホとタブレットのアイコン（レスポンシブデザインモード）をクリックするだけで、同じようにスマホ表示に切り替えることができます。
Safariの場合は、少しだけ準備が必要です。
メニューの「Safari」から「環境設定（または設定）」を開き、「詳細」タブの中にある「メニューバーに"開発"メニューを表示」にチェックを入れてください。
そうすると、上部のメニューに「開発」という項目が追加されるので、そこから「レスポンシブ・デザイン・モードにする」を選ぶことができますよ。
お使いのブラウザに合わせて、使いやすい方法を選んでみてくださいね。
おさらい！パソコンでスマホ向けサイトを確認するポイント
ここまで、モバイル用webサイトをPCで表示する方法について、一緒に見てきました。
たくさんの新しい言葉が出てきたので、最後に大切なポイントを優しくおさらいしておきましょうね。
- デベロッパーツールを使うのが一番簡単：
特別なソフトは不要で、Google Chromeなどのブラウザに最初からついている機能を使えばOKです。 - ショートカットキーでサクッと起動：
Windowsなら「F12」、Macなら「Option + Command + I」でツールを開き、スマホのアイコンをクリックして画面を切り替えます。 - 好きなスマホの機種を選べる：
画面上部のメニューから、iPhoneやAndroidなど、様々な画面サイズでの見え方をテストできます。 - 切り替えたら必ず再読み込みを：
本当のスマホと同じ状態を再現するために、画面を切り替えた後は忘れずにページをリロード（再読み込み）しましょう。
この4つのポイントさえ覚えておけば、これからはいつでもどこでも、パソコン一つでスマートフォン向けの表示をチェックすることができますね。
作業の効率がグンと上がって、もっと素敵なサイト作りに時間を使えるようになりますよ。
いかがでしたか。
最初は「難しそう」と感じていたデベロッパーツールも、使い方を知ってみると、意外とシンプルで親しみやすい機能だということがおわかりいただけたのではないでしょうか。
私たちも、この機能を知ったときは「もっと早く知っておけばよかった！」と感動したのを覚えています。
知識として知っているだけでなく、実際に手を動かして試してみると、より深く理解できるようになりますよ。
もし今、パソコンの前に座っているなら、ぜひこの記事のページや、あなたのお気に入りのサイトで、さっそくデベロッパーツールを開いてみてくださいね。
「あ、本当にスマホの画面になった！」という小さな感動を、ぜひ味わっていただきたいなと思います。
あなたのWebサイト作りやブログ運営が、これからもっともっと楽しく、充実したものになりますように、心から応援しています。
