本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。
最近もいろいろなサイトを作っている、NORI（@norilog4）です。
WEBディレクター
NORI
これからの時代、対応は必須とも言えるサイトの「レスポンシブ」対応。
WEBディレクターのみならず、WEBデザイナーも使える便利なオンラインツール「Resizer（リサイザー）」を今回は紹介するよ！
Apple製品の他、カメラやドローンが好きです。趣味で2021年から登山やキャンプもはじめました。国交省全国包括許可承認取得済 三陸特/アマ無線4級/DJI CAMPスペシャリストを取得。運営者の詳しい情報はこちら
WEBサイトのレスポンシブ対応の重要性
いまはパソコンのみならず、タブレットやスマートフォンにもサイトのレイアウトを対応する必要があります。
とくにモバイル フレンドリーなウェブサイトは、オンラインでの存在感を高めるうえで欠かせないものです。現在では、多くの国でスマートフォンのトラフィックがパソコンのトラフィックを上回っており、Googleでも「モバイルフレンドリー テストツール」を公開しています。
また、2018年3月27日にGoogle ウェブマスター向け公式ブログにおいて、正式にモバイルファーストインデックスの開始が発表されており、スマートフォンからの検索順位・SEOにも影響が出ているとされてます。
こうなると、会社のホームページ、お店のページを作るときに最低でもパソコン、スマートフォンには対応しておかなければ、せっかく作ったお店も誰にも見られることもなくなる可能性が高くなります。
そこでレスポンシブ対応が必須とも言える中で、作ったサイトがパソコン・タブレット・スマートフォンでどのように表示されているのかオンライン上で無料でチェックができる、おすすめのツールがあるので紹介したいと思います。
レンスポンシブデザイン チェッカー Resizerって？
Resizer（リサイザー）はGoogleが公開している material.io のサイトの一部でホームページのレスポンシブでの表示状況をURLを入れるだけでチェックができるオンラインツールです。
Resizerの使い方
使い方は非常に簡単で、以下の赤枠部分にチェックしたいURLをコピペで入力してENTERキーを押すだけ。
すると以下のように、サイトがそれぞれの端末でどのように表示されているのかをパソコン上で確認するとことができます。
Resizerは各端末がチェック可能
マウスを画面上の各端末の上に持っていき、スクロールすると動きます。右上にあるアイコンボタンを押すと、全部一緒に表示・画面サイズを指定して表示・スマートフォンの3つの表示方法を切り替えが可能。
画面サイズの切り替えも簡単
タブレットからパソコン画面のサイズ切り替えチェックも非常に簡単です。画面右上にある真ん中のアイコン（ノートパソコン）をクリックして画面を切り替えます。
変更可能な画面サイズ
- 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が公開するモックアップテンプレート集！各種デバイスなど多数公開
