記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

レスポンシブデザインを確認する方法とツールを使った方法

各デバイスサイズによるデザイン崩れを確認するのはもちろん、各OSやブラウザでの表示も確認するのがレスポンシブ対応です。今回は各デバイスサイズやOS、ブラウザなどのテスト環境をPCから確認できる方法を3つご紹介します。

Web制作をする上で必須の対応とも言っていいレスポンシブデザインは、実機で本当にレスポンシブデザインになっているかの確認が欠かせません。ですが、実際にコーディングしたものをサーバーに上げてスマートフォン等から確認するのは手間が掛かります。今回はパソコン版のChromeからでも実機でのレスポンシブデザインを確認できる、3つの方法をお伝えします。

レスポンシブデザインの確認方法①デベロッパーツール

各ブラウザにほぼ必ず付随している機能に「デベロッパーツール」というものがあります。

Web制作をするのであれば、使い方を抑えておきたい機能としても有名です。

デベロッパーツールを使えるようになると、以下のようなことができるようになります。

  • 実際に見ているブラウザ上の特定箇所に使われているHTMLやCSSを即座に把握できる。
  • CSSで装飾されているボタンのhover/active/focusなどさまざまなプロパティに指定されているCSSを把握できる。
  • 参考にしたいWebサイトを見つけた時にコードの書き方を真似できる。
  • ブラウザ上でfont-familyやfont-sizeなどのCSSを変更した時の表示を確認できる
  • 指定したHTMLやCSSが動かない時にエラー箇所を特定できる。
  • スマートフォンやタブレットでの表示をリアルタイムに確認できる。

デベロッパーツールの使い方

デベロッパーツールでできることは沢山ありますが、今回は「ミンウェブ」を例にレスポンシブデザインを確認する方法をお伝えします。

  • ミンウェブのTOPページを開いたら「F12」キー、もしくはWindowsはCtrl+Shift+i、Macは⌘+option+iを押してデベロッパーツールを起動させます。
  • デベロッパーツールの中身は以下の画像のような構造になっています。何処に何の要素があるかを抑えておきましょう。
  • デフォルトの設定では「Responsive」になっており、この状態の時には自由に横幅サイズを変更することができます。実際に横幅を594pxに変更した状態が以下の画像になり、タブレット表示になっていることが確認できます。
  • 「Responsive」状態の時には横幅を自由に変更できますが、各デバイスの実寸サイズでの表示を確認することができます。Responsiveのタブを開くと画像のように各デバイスの名称が表示されます。
  • 例としてiPhone6/7/8 Plusの表示を開きました。これらのデバイス実寸サイズがルーラーつきで表示されます。この表示の時でも画面内でスクロールすればスマートフォンから見るのと同じように表示を確認できます。
  • もしデバイスの横表示を確認したいとなった時には、onlineタブの右横にあるアイコンをクリックしましょう。

デベロッパーツールのおすすめポイント

  • その場でCSSの修正を反映した表示を確認できる
  • コーディングデータを触らないでソースコードの編集をできる
  • HTMLの構造を色で理解できる

デベロッパーツールのもっともおすすめできる点は、HTMLやCSSの構造や要素を目視で確認できる点です。 コーディングしているうちに実際にCSSがかかっている要素が変わってしまっている、というのはよくあるケースです。想定通りの実装が出来ない場合にはCSSで要素単位で構造を確認するといいでしょう。

デベロッパーツールの注意点

  • 画面の味方などを覚える必要がある。
  • HTMLやCSSの知識がないと内容がわからないため、最低限の知識が必要になる。

デベロッパーツールの使用に関しての注意点はほとんどありません。しいて言うのであれば、最初の使い方に慣れないうちは使いづらさを感じたり、HTMLやCSSの知識が足りない場合に少し苦労したりする程度です。

レスポンシブデザインの確認方法②ResponsiveViewer

ResponsiveViewerは海外で作られたChromeの拡張機能であり、iPhoneやAndroid、PC画面など複数画面の表示を一気に確認することができるツールです。

デフォルトでは以下の端末での表示を確認できます。

  • iPhone XR, XS Max
  • iPhone XS, X
  • iPhone 8 Plus, 7 Plus, 6S
  • iPhone 8, 7, 6S, 6
  • Galaxy S9 Plus, S8 Plus
  • Galaxy S9, Note 8, S8
  • Pixel 3, 3 XL
  • Medium Screen(1024×800)
  • Large Screen(1280×800)

ResponsiveViewerの使い方

ResponsiveViewerはChromeの拡張機能なので、Chromeを使用します。

  • ChromeからResponsiveViewerのWebストアを開く
  • Chromeに追加して、レスポンシブデザインを確認したいWebページを開いたまま拡張機能からResponsiveViewerを起動する
  • 起動をすると画像のような画面になり、各デバイスからの表示を確認することができます。

ResponsiveViewerのおすすめポイント

  • 一気に複数デバイスでの表示を確認できる
  • 各デバイスの縦・横表示を切り替えられる
  • デフォルトにない端末も任意で追加できる

    →右上にある+ボタンを押せば、任意の名前、横幅、縦幅の仮想デバイスを追加できます。

  • WordPressのis_mobile()関数も適用された表示を確認できる
  • →デベロッパーツールでは対応できないis_mobile()関数での表示も確認可能です。

ResponsiveViewerをおすすめするもっとも大きな理由は、一気に複数デバイスでの表示を確認できる点です。表示するデバイスも必要に合わせて設定できるため、必要な分だけの表示を確認できます。

ResponsiveViewerの注意点

  • iOSやSafariの場合にはResponsiveViewerの表示と異なる場合もある
  • 最終的には実機テストが必要

ResponsiveViewerは非常に便利なプラグインですが、どうしてもブラウザ上での表示までは再現できません。そのため、WindowsのChromeからResponsiveViewerを開いた場合には、iOSやSafariの表示とは異なる場合があることを意識しておきましょう。

プラグインで確認するだけではなく、実際にテスト環境下で確認をすることも大切です。

レスポンシブデザインの確認方法③lamdatest

レスポンシブデザインと聞くと、どうしても「スマホ・タブレットでの表示デザイン」と思う方もいますが、各ブラウザで表示崩れがないデザインもレスポンシブデザインに含まれます。

lamdatestは各ブラウザ・デバイスでの表示をパソコンのブラウザ上から確認できる、無料会員は時間制限つきですが、クロスブラウザ表示を確認するのに非常に効率的なチェックツールです。

lamdatestの使い方

lamdatestは無料のアカウント登録が必要です。Googleアカウントなどを連携させることで簡単に登録できるので、登録してから使ってみましょう。以下の使い方は登録済みの状態から始まります。

  • ダッシュボードからReal Time Testingを開く
  • 自分が表示を確認したいブラウザ・OS・デバイス・デバイス幅などのテスト環境を設定する*今回はiPhone iOS13.3 Safariを例とします。
  • クラウド上に指定したOS、デバイスのモックアップ内にWebサイトが仮想マシン上の状態として表示され、リアルタイムで挙動を確認することができます。無料の場合には10分の制限があるため注意しましょう。
  • 途中でブラウザやOS,デバイスを変更したくなった場合にはトグルボタンを開いた一番上にあるボタンから変更しましょう。
  • lamdatestはオンラインツール上でデベロッパーツールを開くこともできます

lamdatestのおすすめポイント

  • 各デバイスやOS,ブラウザを所有していなくてもクロスブラウザの表示確認ができる
  • 各テスト環境下でバグが発生していたらデベロッパーツールで確認できる
  • クラウド内で動画やスクリーンショットとして表示を保存できる

lamdatestはクラウド上で各テスト環境を構築しているため、テストしたい環境を所持していなくてもクロスブラウザチェックができます。クライアントの所有環境や、サイト要件で定義したブラウザを確認できるため、レスポンシブデザインが必須となっている現在では試しておいた方がいいオンラインツールです。

lamdatestの注意点

  • 無料会員は月に60分までしかテスト環境での確認ができない
  • 仮想環境であることには変わりないため、どうしても本番環境で表示崩れなどが発生する可能性はある。

lamdatestは無料会員の他、3種類の有料プランが用意されているサブスクリプションです。

lamdatestの公式ページによると、無料会員は以下の制限が発生します。

  • 1か月あたり60分までリアルタイムテストができる
  • 60分は10分×6セッションにわかれている
  • 1か月あたりに可能なスクリーンショットテスト回数は10回
  • 1か月あたりに可能なレスポンシブテスト回数は10回

これらの制限がわかりやすい注意点として挙げられます。また、クラウド上の仮想環境下での確認ではあるため、仮想環境下で問題なければ100%本番環境で表示が崩れないことを保障するものではありません。

まとめ

パソコン版のChromeからでも実機でのレスポンシブデザインを確認できる、3つの方法をお伝えしました。デベロッパーツール、ResponsiveViewer、lamdatestと同じレスポンシブデザインを確認できるツールでも大きく特徴が違います。

  • デベロッパーツール:リアルタイムで簡単にスマートフォンやタブレット表示をしたい時
  • ResponsiveViewer:対応すべきデバイスでの表示を一気に見たい時
  • lamdatest:クロスブラウザでの表示を確認したい時

使い分けに困ったら、大まかにこのように使い分けるのがおすすめです。必須の対応であるレスポンシブデザインを今回紹介した各ツールで確認して、品質の高いWeb制作をしていきましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。