WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： トレンド >TIPS

流行のスマホサイトを作りたい！！と思っても、
作ったデザイン、またはページをスマホで確認するのは、意外と面倒なものですよね。

でも普通にPCで見ているだけでは、実際にどう表示されているのか分かりません。
しかも、スマホサイトを作るために使用するのは、html5とcss3…。
まだユーザーも多いブラウザ、IE8では表示されないレイアウトもあります。

そこで、今回はPCでもスマホサイトが簡単に確認できる、
便利な方法をいくつかご紹介します（＾o＾）

(1)見たいページをFirefox、Chrome、Safariで表示する

まずは一番簡単な方法です。
上のブラウザで、確認したいサイトを表示させ、ウィンドウの幅を縮めるだけです。
スマホサイトは横に伸び縮みするように作ることがほとんどなので、
横幅をスマホっぽく調整すれば、スマホっぽく表示させられます。

(2)Safariのツールを利用する

こちらは少し作業が要ります。
Safariのメニューバーの「編集」→「設定」で設定ウィンドウが出てくるので、
一番右の「詳細」タブへ行き、下にある「メニューバーに”開発”メニューを表示」にチェックを入れます。
すると、メニューバーに「開発」ボタンが出てくるのでクリック→「ユーザーエージェント」を選択します。
そこに「Safari～iPhone」という列がありますので、それを選択します。

これで、Safariでスマホサイトが見られます＼（≧▽≦）ノ
ちなみに、先輩に教えていただいたワザです。
この方法なら、iPhoneで見るのと
ほぼ同じように見れます。

左：(1)の方法でFirefoxで見た画面
右：(2)の方法でSafariで見た画面

実は、(1)のやり方では、時々ワナに引っかかります。
(1)ではただサイズを合わせるだけなので、「スマホっぽく」見えているだけです。
なので、スマホサイトによくある
「スマホでPCサイトにアクセスすると、自動でスマホサイトに飛ぶ」という設定がしてある場合、
(1)ではスマホサイトが見れません。（画像：左）
スマホサイト専用のURLを入れても、PCサイトに飛んでしまいます（泣）

(2)のやり方なら、ちゃんとスマホサイトを表示してくれるのです（；∀；）（画像：右）

参考サイトは、こちらです。

ソフトを入れる

一番、スマホサイトをきちんと表示できるやり方です。
http://www.springbox.com/mobilizer/
まず、こちらにアクセスし、ソフトをダウンロードします。
ダウンロード後、ソフトを開くと細長いバーが出てきます。
ここの「Phone」から機種を選びます。
iPhoneはiPhone、Androidは「HTC Evo」を選択します。

すると、PC画面にスマホが現れます。
現れましたら、最初に出てきた細長いバーに、見たいページのURLを貼り付け、Enterキーを押します。

スマホで見ている感覚そのままです！リンクもマウスで押せます。

こちらも、(1)のような引っかかり方はしません。

ちなみに、これも先輩に教えていただきました。

参考サイトはこちらです

「スマホサイト」といっても、作るのはPC。
これらをぜひ活用してみてください♪