gaのコピー

レスポンシブデザインのウェブサイトが主流になってきて、7割を超えるホームページがスマートフォン対応を実施しているようです。

閲覧者も7割以上がスマホからという中で、自身のホームページがスマホではどう見えているかを気にする必要があります。

もちろんご自身のスマートフォンで確認するのは手っ取り早い手段ですね。

 

ただ、iphoneでもバージョンによってビュー(見映え)が変わりますし、アクオスフォンやandroidでも各機種もちろん違いがあります。

これら全ての実機を保持することは携帯業者でもない限りほぼ不可能です。

こんな時に一括(もしくは機種ごとに)チェックできる便利なツールを2つ紹介させて頂きます!便利ですので、是非ブックマークしておいてください。

それではご覧下さい。

 

★★★googleのディベロッパーツールを使用する★★★

最も簡易にチェックができる方法です。

【STEP1】まずgoogle chromeであなたの確認したいサイトのURLにアクセスしてください。

【STEP2】右上の三本線のメニュー(バーガーアイコンていいます)からその他ツール>ディベロッパーズツールにアクセスしてください。

スクリーンショット(2017-03-28 3.43.29 AM)

【STEP3】実際にスマホの機種を選択でき、その機種での見映え(ビュー)が確認できます。

スクリーンショット(2017-03-28 3.43.50 AM)

この方法のメリット→操作が簡易であり、面倒なログイン等がない。リンクが実際にクリックできる。

この方法のデメリット→Jsでモバイル対応の振り分けしているサイトのスマホビューは正しく表示されない。

※この確認はブラウザ画面の横幅をスマホサイズに縮めた際にレイアウトが変わるかどうかでも確認できます。

 

★★★モビライザーを使用する★★★

【STEP1】https://app.mobile1st.com/mobilizerにアクセスする。

【STEP2】ログイン画面に自動遷移するので、初めての方はSIGN UPをクリックする。

スクリーンショット(2017-03-28 3.55.15 AM)

【STEP3】メールアドレスとパスワードを入力する。

※現時点でメールアドレス人しょうがないので、存在しない適当なアドレスでも使用可能です。

このサービスは無料で使えるのは5回まで(2017年3月現在)なので、適当まアドレスで都度アカウントを作成した方がいいかもしれません。

できれば以降は購入して使ってください。

スクリーンショット(2017-03-28 3.59.59 AM)

【STEP5】入力窓に確認したいサイトのURLを入力します。

スクリーンショット(2017-03-28 4.00.17 AM)

【STEP6】タブレット含め、様々なデバイスの見映えが一括出力されます。

スクリーンショット(2017-03-28 4.04.31 AM)

この方法のメリット→Jsを使用してのスマホ対応も正しく表示される。一括でほとんどのデバイスをチェックできる。

この方法のデメリット→リンクがクリックできないので複数ページのチェックが面倒。無料版は回数制限がある。

 

以上でレスポンシブデザインの確認方法の説明を終わりにします。用途に応じて使い分けてください。

★☆★☆★☆この記事のプレゼント★☆★☆★☆

◆XXXXXXXXX

versusbutton

関連記事

コメント

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

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

お知らせ

  1. 2017/1/10

    2017年ご挨拶
過去の記事

ランキング

今月のおすすめ

  1. gaのコピーのコピー

    2017-4-2

    メタディスクリプションが必要な理由

    メタタグ(metaタグ)は7割近くのホームページに入っているタグで、主にメタディスクリプションとメタ…
  2. gaのコピーのコピー

    2017-2-5

    SEO対策におけるメタタグ(meta)の評価

    メタタグ(metaタグ)は7割近くのホームページに入っているタグで、主にメタディスクリプションとメタ…
  3. ga

    2017-2-5

    グーグルアナリティクスのアカウント取得方法

    アクセス解析では抜群のインターフェースと機能を有するグーグルアナリティクスは無料で利用できる、大変嬉…
  4. domein%e3%81%ae%e3%82%b3%e3%83%92%e3%82%9a%e3%83%bc%e3%81%ae%e3%82%b3%e3%83%92%e3%82%9a%e3%83%bc

    2017-1-10

    おすすめドメイン会社

    ドメイン登録に際して取り扱い業者がたくさんあるので、どこを使用しようか迷う方もいるのではないでしょう…
  5. sa-ba-%e3%81%ae%e3%82%b3%e3%83%92%e3%82%9a%e3%83%bc

    2017-1-9

    サーバー申し込み手順(お名前.com)

    【STEP1】お名前.comレンタルサーバーにアクセスします。 【STEP2】画面右上のお申し…

固定ページ

ページ上部へ戻る