ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

インバウンドサイトを作るときに知っておきたいこと

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

ツール活用で時短をめざそう!スマホサイトの表示チェックをサクサクすませる方法

  • WEBデザイン

WEBサイトを作る時に、スマートフォンやタブレットなど多様な端末を意識した制作を行うことが以前にも増して多くなっています。特に、「Googleによるモバイルフレンドリーの大規模アップデート」の影響もあって、レスポンシブWEBデザインでマルチデバイス対応のサイト制作を行う流れは主流になりつつあります。

WEB運営者の方も、サイト制作時やリニューアル時、更新時などに、多様なデバイスで見え方のチェックをしなければならない場面が多くなっているのではないでしょうか。以前ならPCサイトの表示のみをチェックすればよかったのに、PC で見て、スマートフォンで見て、さらにタブレットでも…と、チェックしていかなければならないのは、結構大変ですよね。そこで今回は、手早く正確にスマホやレスポンシブのサイト表示チェックができるツールをご紹介しようと思います。

ブックマークレット「Viewport resizer」

01 のコピー

http://lab.maltewassermann.com/viewport-resizer/

マルチデバイス(レスポンシブ)での表示確認を、パソコン上で手早く・簡単に・早く行いたいのなら、この「Viewport resizer」は、かなりおすすめです。

01-2 のコピー

ブラウザベースで動作するブックマークレットとして提供されているので、Windowsでもmacでも関係なく、ブラウザもいつも使っているもので大丈夫。Viewport resizerのサイトにアクセスして、青いボタンのブックマークレットをブックマークツールバーにドラッグするなどして、ブックマークに登録するだけで準備は完了です。

使用方法もごく簡単で、確認したいサイトを表示した状態で、ブックマークしたViewport resizerをクリックするだけ。画面上部に、黒いデバイス選択バーが表示されますので、その中からチェックしたいデバイスのアイコンをクリックすれば、それに応じた画面サイズでページを表示してくれます。

resizer-01-3 のコピー

各デバイスの向き(縦・横)も変更可能。ツールバーに主なデバイスサイズが登録されていますが、カスタマイズも可能。また、Viewport resizerのサイトでは、メーカー別の多様なサイズのデバイスから自分が必要なものだけを選んで、自分流のブックマークレットも作成できるようになっています。

ざっと表示状態をチェックできればいいというなら、これで十分。ブックマークするだけで使えて動作も軽いので、とりあえず登録しておいても損はないツールです。

Webサービス『Responsive Web Design Test Tool』

02 のコピー

http://designmodo.com/responsive-test/

次にご紹介するのは、WEBサービスとして提供されているツール「Responsive Web Design Test Tool」です。

02-2 のコピー

ブラウザでResponsive Web Design Test Toolのサービスサイトに接続し、URL入力欄にチェックしたいページのURLを入力してEnterキーを押すと、ページが読み込まれます。

その後、PCやタブレット、スマートフォンなどのアイコンをクリックして、プルダウンメニューの中から確認したいデバイスを選ぶと、それに合わせて表示サイズが切り替わるという、シンプルなツールです。

様々なメーカーの端末が登録されており、選択できる種類が非常に多いのが特徴です。さらに、画面の右端をドラッグして細かくサイズ調整することも可能。上部にピクセル値の定規が付いていますので、それを見ながら幅を調整することができ、視覚的にも使いやすいものになっています(画像では、テストページとしてレスポンシブサイトのギャラリー「RDW JP」のサイトを使わせて頂いています)。

Google Chromeブラウザの機能で確認

WEB担当者のからなら、Google Chromeブラウザを使っている方も多いと思いますが、Chromeを使っても、手軽にマルチデバイスチェックを行うことができます。

03 のコピー

https://www.google.co.jp/chrome/browser/

Google Chrome『デベロッパーツール「Device Mode」』で確認

03-2 のコピー

Chromeブラウザを使っているなら、「一応、デベロッパーツールも入れている…」という方は多くいらっしゃるのではないでしょうか。このデベロッパーツールにある「Device Mode」を使うことによって、マルチデバイスの確認は簡単に行えます。

Google Chromeを起動してデベロッパーツールを開き、Device Modeを有効にすると、Emulation機能が起動。確認したいデバイスを選んで表示のされ方を確認することができます。

このツールは、実際にコーディング作業を行う人がよく利用しているものですが、クライアント担当者の方のマルチデバイスの表示確認ツールとしても手軽に利用できます。このツールの詳しい使い方は、以下の記事で紹介されていますので参考にしてください。

参考ページ

Google Chrome『デベロッパーツール「Device Mode」』の使い方『スマホ、レスポンシブの表示チェックが捗る時短テク

http://ascii.jp/elem/000/000/997/997399/

Chrome拡張機能『Responsive Inspector』で確認!

ここまで紹介したものは、選択したデバイスにあわせて見える範囲を変更し、見え方を確認するというものでしたが、もう少し詳細な確認をしたい時には、
Responsive Inspector」という機能拡張が便利です。これを使うと、見た目の表示確認だけでなく、スタイルシートで、どのようにレスポンシブの定義がなされているかを検証し、それに基づいてページの確認が行えます。

03-3 のコピー

この機能拡張を追加すると、ブラウザのツールバーに赤いアイコンが表示されます。チェックしたいページを表示させた状態で、そのアイコンをクリックするとウィンドウが開き、メディアクエリの定義(CSSでどのようにレスポンシブの設定が行われているか)が、バー状のビジュアルで一覧表示されます。各バーをクリックすると、詳細なCSSの表示や、各サイズでの表示チェックも行えます。

やや専門的なツールになりますが、自分でも簡単なコーディング程度は行うことがある…というWEB担当者の方なら便利に使えると思います。一度試してみてください。以下の記事に詳しい機能が紹介されています。

参考ページ

Chrome拡張機能『Responsive Inspector』の使い方『レスポンシブの確認を見た目だけでなく、CSSに基づいた検証もできるChromeの機能拡張 -Responsive Inspector

http://coliss.com/articles/build-websites/operation/work/chrome-extension-responsive-inspector.html

今回のまとめ

スマホやマルチデバイスの表示チェックを簡単に行う方法、いかがでしたでしょうか?確認する環境や、普段使っているブラウザ、サイトが対象とするデバイスなどによっても、適切な方法は異なるかもしれませんが、少しでもお役に立てたらうれしいです。今後、さらにマルチデバイス時代になっていくことは必至。時代に合わせたワークフローで、効率良くWEBサイトを運営していきましょう。

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  8. 8

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  7. 7

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND