サイトのレンスポンシブデザインをオンラインでチェックできる「Resizer」

レスポンシブ デザイン チェックツール

最近もいろいろなサイトを作っている、NORI(@norilog4)です。

いまはパソコンのみならず、タブレットやスマートフォンにもサイトのレイアウトを対応する必要があります。

とくにモバイル フレンドリーなウェブサイトは、オンラインでの存在感を高めるうえで欠かせないものです。現在では、多くの国でスマートフォンのトラフィックがパソコンのトラフィックを上回っており、Googleでも「モバイルフレンドリー テストツール」を公開しています。

また、2018年3月27日にGoogle ウェブマスター向け公式ブログにおいて、正式にモバイルファーストインデックスの開始が発表されており、スマートフォンからの検索順位・SEOにも影響が出ているとされてます。

こうなると、会社のホームページ、お店のページを作るときに最低でもパソコン、スマートフォンには対応しておかなければ、せっかく作ったお店も誰にも見られることもなくなる可能性が高くなります。

そこでレスポンシブ対応が必須とも言える中で、作ったサイトがパソコンタブレットスマートフォンでどのように表示されているのかオンライン上で無料でチェックができる、おすすめのツールがあるので紹介したいと思います。

レンスポンシブデザイン チェッカー Resizerって?

Resizer(リサイザー)はGoogleが公開している material.io のサイトの一部でホームページのレスポンシブでの表示状況をURLを入れるだけでチェックができるオンラインツールです。

関連リンク Resizer

 

Resizerの使い方

使い方は非常に簡単で、以下の赤枠部分にチェックしたいURLをコピペで入力してENTERキーを押すだけ。

Resizerの使い方

すると以下のように、サイトがそれぞれの端末でどのように表示されているのかをパソコン上で確認するとことができます。

Resizer-チェック方法

Resizerは各端末がチェック可能

マウスを画面上の各端末の上に持っていき、スクロールすると動きます。右上にあるアイコンボタンを押すと、全部一緒に表示・画面サイズを指定して表示・スマートフォンの3つの表示方法を切り替えが可能。

Resizer-チェック方法

画面サイズの切り替えも簡単

タブレットからパソコン画面のサイズ切り替えチェックも非常に簡単です。画面右上にある真ん中のアイコン(ノートパソコン)をクリックして画面を切り替えます。

Resizer-使い方

変更可能な画面サイズ

  • 480 xsmall
  • 600 small
  • 800 medium
  • 960 medium
  • 1280 large
  • 1440 xlarge
  • 1600 xlarge

Resizerがあれば、検証端末がなくても表示崩れなどのチェックが可能となるのは非常に便利です。しかも無料です!

Resizerの使い方まとめ

自分の過去の経験上、いろいろな実機検証端末を使ってアクセスして表示崩れのチェックをしていた時代は一旦なんだったんだろうと思えるとにかく便利で素晴らしいツールです。このブログでもたまにCSSをいじったあとの表示チェックをしていたりしています。

こんな便利な無料チェックツールがあるなら使わない理由はないですよね!

デザイナーのみなさんぜひ使って素敵なレスポンシブサイトを作ってくださいませ。
どうも、NORI(@norilog4)でした。

デザインに関わる方全てに是非見て欲しい!!Google の新しいデザインガイドライン「Material Design」 マテリアルデザイン用のカラーがワンクリック1回でコピーできる 「Material Design Colors」 Facebookの無料素材デザインツール集 モックアップやデバイスなど多数公開

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です