モバイルフレンドリーなホームページか確認する方法

2017年3月30日

Mobile friendly
geralt / Pixabay

日々Web開発やアフィリエイトをPCでやっていると、ちゃんとスマホやiPadなどでちゃんと表示されるかどうか心配になる。そんな時どうしているでしょうか。

Blisk

PCで作ったスマホ対応のホームページはちゃんと表示されているのかという悩みを解消する、PCの表示とスマホの表示を同時に表示して見ることができるブラウザがあるのをご存知だろうか。Bliskと言ってこんな感じです。

左にスマホ画面、右にPC画面の両方を表示させ、スクロールもスマホ画面かホームページ画面でどちらでも行える。そして動きも同期する。これで一々スマホで確認せずともPC画面上で確認ができるのです。

 アフィリエイターは別に開発をしているわけでは無いですが、多くのホームページを抱えている場合が多かったり、CSSやHTMLをいじっている人も多いですよね。また、近年はスマホやタブレットも普及したため、アクセスの大半がスマホだったりします。そのため、ホームページを作るにはスマホとPCの両方に対応したページを作らないといけません。しかし、ページを更新する度一々スマホを立ち上げてチェックし、次にPCでチェックしてと結構面倒です。それを解消してくれるのがBliskです。

 これはGoogle Chromeとベースが同じなので、操作は全く難しくありません。スマホ表示も自動で分割表示してくれるし、対応機種も最新バージョンのものがあります。

対応しているスマホ端末

  • iPhone 4、5、6、6 Plus
  • Nokia N9
  • Samsung Galaxy S3、S4
  • Google Nexus 4、6

対応しているタブレット端末

  • iPad mini
  • iPad Air Retina
  • Google Nexus 7、10

ただし現在は、30分間は無料ですべての機能を使うことができますが、時間をすぎると12時間、下図の様に左のモバイル側の表示がでなくなります。

有料登録することでこの制限が外れますが、1ヶ月契約だと9.99ドル、年間契約だと8.49ドル/月かかります。クレジットーカードが必要で自動更新です。便利だから年間契約したいよなぁと思いますがどうなんだろうと悩み中です。因みに料金はこちらで見られます → 料金体系

ダウンロードはこちらから → Blisk

解約は、https://2co.com/へアクセスし、注文番号とE-mailアドレスを入れれば、解約ページに誘導されるようです。

Google Chromeの機能拡張

BliskでできることをGoogle Chromeの機能拡張でできないか調べてみました。

すると機能拡張で「mobile browser emulator」なるものがありまして、早速インストールしてみました。

  1. Google chromeの右上、✗ボタンの下にあるドットが縦に3つに並んでいる箇所をクリックし、「設定(S)」をクリックする
  2. 画面左上の「機能拡張」をクリックする
  3. ページの一番下にある「他の拡張機能を見る」をクリックする
  4. 左上のストアを検索する箇所に「mobile browser emulator」と入力して検索する
  5. 「mobile browser emulator」を選んで「Chromeに追加」ボタンを押してインストールする
  6. Chromeの機能拡張アイコンに赤い「m」のアイコンが出てきたらインストール成功です

 表示させたいホームページを開き、赤いのアイコンをクリックすると次のような選択肢が表示されます。

 画面サイズに合わせてクリックすると、次のようなスマホをエミュレートした画面が表示されます。下図にあるように、画面の一番下にiphone6と出ています。他のサイズでやるとHTCやGalaxyと表示されるものもあります。出てきた画面はスクロールできます。実際、無料ならこれでも良いかなという感じです。

モバイルフレンドリーテストをしてくるサイト

ホームページがモバイルフレンドリーかチェックしてくれるサイトを2つ紹介します。

Test how mobile-friendly your site is.

Googleが提供しているサイトです。自分のHPのURLを入力して検索するだけで、モバイルフレンドリーかテストしてくれます。日本語には対応していません。

アクセスはこちらからどうぞ → テストサイト

 

モバイルフレンドリーテスト

こちらもGoogleが提供しているサイトです。日本語対応しています。

アクセスはこちらからどうぞ → テストサイト