記事の詳細

自身のサイトがスマホやタブレットでどのように見えるのかパソコンで確認する簡単な方法をご紹介します。

Google製のブラウザ、Chromeを使えば無料で簡単に確認することができます。最新のiPhone6 Plusも既に対応済みです!

まずはパソコンにChromeをインストールしましょう

ChromeのインストールはGoogleのサイトでまとめられていますので、こちらをご覧ください。

Google Chrome のダウンロードとインストール

Chromeのインストールは終わりましたか?Chromeを実行して確認したいホームページを開きましょう!

今回はGoogleのウェブマスター向けモバイルガイドのページを開いてみます。

そして、開いたら「F12キー」をポチっと押してください。そうすると、画面の下の方に何やら文字がたくさん書かれた画面が開きます。これはホームページの構造を表しているものなので、今回は特に気にしなくて大丈夫です。

chrome_tool_01
chrome_tool_02

赤枠で囲んだ部分を拡大してみました。

このスマホのようなアイコンをクリックしてください。

iPhone6、iPhone6 Plusもデバイスリストにありました!

スマホのアイコンをクリックすると下の図のような画面になりますので、左上の「Device」をクリックしてみてください。

聞いたり、見たことあるスマホやタブレットの名前がずらっと表示されるので、確認してみたいスマホの名前を選択してください。

選択すると自動的にサイズが変化しますので、選択したスマホで見た時の画面を擬似的に再現してくれます。

chrome_tool_03

やっぱりXperia Z1を選んでしまいました。。。

私の愛用しているXperia Z1もデバイスリストにあったので、迷わず選択!!

chrome_tool_04

Xperia Z1の場合、こんな感じで見えるそうです。

Chromeは無料でダウンロードできますので、利用しない理由はありません。この機能の他にもChromeはホームページ制作において役立つ機能がたくさんありますので、また別の機会にご紹介させて頂きますね。

無料で使えるツールをどんどん使って、効率的なWEB制作に役立てましょう!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る