attention admin about comments trackbacks you may also like

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

2017年10月23日
webのあれこれ
0
Tips Responsive Smartphone

これからのwebは スマートフォンでの見え方を最重要視するべし!
ということで、スマートフォン持ってない・タブレット持ってないという方がパソコンから簡単に自分のブログの見え方を確認する方法をご紹介。

各ブラウザの検証機能を利用すれば一発でわかるのですが、どうも難しい…というよりも、食わず嫌いな方が多いようで。
いっそ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とを比較してみます。

横411pxと横320pxのスマートフォン

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

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

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

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

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

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

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

まとめ

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(0)

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)