記事の詳細

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

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制作に役立てましょう!

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

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

The following two tabs change content below.
三宅 崇之

三宅 崇之

取締役/ストックマーケティング事業部長インクループ株式会社
研究大好き。WEBサイトを通し集積したデータを分析することで、現状を正確に把握し、次の一手を生み出すことを目的としたマーケティングを実行し、より良い企画・計画を提案することを得意としています。

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

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

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

お知らせ

平成28年度補正予算 小規模事業者持続化補助金

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

ページ上部へ戻る