【iPhone 15】最新情報・キャリア別の価格比較

「Resizer」URLを入れるだけでOK!レスポンシブWebデザイン制作時必見のチェックツール

レスポンシブWebデザイン制作時必見のチェックツール

本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。

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

WEBディレクター

WEBサイトのレスポンシブチェックが手軽にできるオンラインツールないかな?
ResizerがあればURLを入れてるだけでPC,タブレット,スマホのデザインチェックが簡単になるよ!

NORI

これからの時代、対応は必須とも言えるサイトの「レスポンシブ」対応。

WEBディレクターのみならず、WEBデザイナーも使える便利なオンラインツール「Resizer(リサイザー)」を今回は紹介するよ!

この記事の監修者

WEBサイトのレスポンシブ対応の重要性

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

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

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

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

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

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

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

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 design 【無料】Facebookが公開するモックアップテンプレート集!各種デバイスなど多数公開

コメントの通知/購読設定
受け取る通知
guest

0 件のコメント
Inline Feedbacks
全てのコメントを見る