スマートフォンやタブレットを持っていない人はこのサイトで見え方を確認できるよ

各ブラウザの検証機能を利用すれば一発でわかるのですが、どうも難しい…というよりも、食わず嫌いな方が多いようで。
いっそweb上のツールサイトを利用した方が簡単な感覚があるのかなぁ、と。
その前になんで今後はスマホ推しかというのは GoogleがMFIを予定しているから です。
来年(2018年)以降
Googleはパソコンサイトを重要視しません。スマートフォンでの閲覧に優れたサイトを重要視します。
今も既にそうなんですが、さらにという意味です。
それが MFI。
早ければ2018年中には実施されます。

この記事は レスポンシブデザインの意味を知っており、採用したいと思ってはいるけれどもデバイスが無い
という方へ向けてお送りしています。
スマートフォン版を併用している方は、スマートフォン版はレスポンシブを含む全てのPC版とは全く別のhtml, CSSですのでこの記事は意味がありません。
レスポンシブの見え方確認をしたい人だけひぁうぃごー (o'ω')ﾉ

デバイス毎の確認ができるサイト「RESPONSIVE WEB DESIGN CHECKER」

RESPONSIVE WEB DESIGN CHECKER
れすぽんしぶ うぇぶ でざいん ちぇっかー
英語サイトなので拒否反応を起こす方もいらっしゃるかもしれませんが、操作は至って直感的なのでおすすめ。

自分のサイト・ブログがどう見えるか の確認ですので、まずはレスポンシブテンプレートを設定します。
でないと何も始まらない(笑)
トップページでもどこでも良いので、任意のページURLを入れます。

URLを入力したらEnter/ Returnキー押下あるいは GO をクリック。
すると左側にデバイス選択のアイコンが出てきます。

スマートフォンのアイコンをクリックすると、こうして機種の選択肢が出てきます。
ツールを利用している時でもただなんとなく作業するのではなく、そこにはたくさんの情報が存在していますので見過ごさない。
選択肢を見ると、「現存機種の最大は 横414px 最小は 横320px ではないか」という推測を立てられます。
こういった細かな気づきの積み重ねがリテラシーの高低差がつくポイントだと思います。
最小・最大の確認はとても大事ですので、是非両方やってみましょう。
ここではNexusの411pxとiPhoneの320pxとを比較してみます。

同じ「スマートフォン」でもこれだけ違いがあるんですね。
こうして目視確認できて始めてわかることです。

マウススクロールでくるくるできますので、実際の動作も確認することができます。
また、PC閲覧時とスマホ閲覧時でナビゲーションの形状に変更があったりする場合、ちゃんとスマホでの見た目・動作確認ができます。

スマホは持ってるけどタブレットは持ってない、という方は結構多いんじゃないでしょうか。
ここで確認しましょう。
実機とほぼ同じですが、動作については機種固有バグなどがある場合には反映されないことも。
見え方については同じです。

まとめて確認ができるサイト「Am I Responsive?」

Am I Responsive?
あむ あい れすぽんしぶ？
こちらも英語サイトです。海外ではもうレスポンシブが当たり前なんですね。

こちらのサイトは「パソコン」「タブレット」「スマートフォン」の3デバイスをまとめて確認することができます。

まとめて表示されることの利点は、作業の効率化だけでなく各デバイスの比較対照が簡単にできる点。
こちらでもやはりマウスくるくるが可能ですので是非やってみましょう。

まとめ

細かなチェックをしたい場合には前者の「RESPONSIVE WEB DESIGN CHECKER」を。
効率と比較を求めるならば「Am I Responsive」を。
それぞれ上手に使い分けると良いですね。
レスポンシブチェックサイトのご紹介でした。