パソコンでスマホサイトのデザインを確認する方法(chrome限定)

インターネットを使って商売をする場合、ネットショップであってもWEBサイトであってもブログであっても、「PC用」と「スマホ用」を作っておく必要があります。

今の時代は、楽天市場やYahooショッピング、jindoやワードプレス、無料ブログサービスなどを選べば「自動的」にPC用サイトもスマホ用サイトも出来上がるという大変便利な時代になっています。

ただし、作る側の人は作業をパソコンでやっている関係上、見た目のチェックもほとんど「パソコン用」でやってしまいます。

しかしそれではダメです。
今の時代はスマホで見ている人の方が多いからです。

そこで、今日はその方法を皆さんにお伝えします。

是非参考にしてください。

※ただし google chrome限定です

 

1:ブラウザの設定ボタンを押す

image001

右上にあるスリット状のマーク「Google Chromeの設定」ボタンを押してください。

 

2:「その他のツール」から「デベロッパーツール」を選ぶ

image003

 

「デベロッパーツール」を選びます。

すると、スマホ用のサイトを見る事が出来るウインドウになります。

 

3:スマホマークを押す

image005

ここを押すとスマホページのデザインを表示してくれます。

2回押してしまった人はもう一度押すとスマホ用のページを見る事が出来ます。

うまく表示されない人は「再読み込みボタン」を押してみましょう。

image007

 

そうするとスマホサイトデザインが表示されます。

 

4:見たいデバイスのバージョンを選ぶ

image009

 

「Responsive」の文字を押すと、下に機種名がズラッと出ます。

その中から表示させたいデバイスを選びましょう。

 

これでスマホページのデザインをチェックできます。

いちいちスマホを出して、ブラウザを開いてチェックしなくてもいいので面倒臭くないですよね!

 

サイトを作ったり更新をしたら必ず「スマホ用のデザイン」も確認してくださいね!

 

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です