スマホでの動作確認に便利なWebサイト「Responsinator」
【景品表示法に基づく表記】本サイトのコンテンツには、商品プロモーションが含まれている場合があります。
カイエダです。
この記事では、ご自身のブログやWebサイトが、スマホではどう見えているのかを確認するときに便利なWebサイト「Responsinator」をご紹介していたのですが、2023年4月現在、どうやら該当サイトが閉鎖されてしまったようです。同様のサービスの紹介をしている記事もありますので、そちらをご覧くださいませ（10秒後に自動でジャンプします）。
この記事の目次
その名は「Responsinator（レスポンシネイター）」
なんとなく、ターミネーターを思わせるネーミングです。
名前の由来は（推測ですけれども）、間違いなく「レスポンシブWebデザイン」から来てますね＾＾
動作確認でパソコンとスマホを行き来するのは面倒だから
気持ちよく記事を書いたり画像を入れたりして、満足して公開しても、スマホでどう見えているのかって確認するのが割と大変ですよね。
逆の方もいるでしょうけれどもね。
スマホから入力したけれどもパソコンからどう見えるのか、と。
今回ご紹介のレスポンしネーターは、パソコンで入力する方にとって便利なサイトです。
もちろん、、、、！
公開されているページしか確認できませんのでご注意くださいね。
下書きの状態では確認できません。
Responsinator使い方
- https://www.responsinator.com/
空欄に、URLを入力します。 - GOボタンを押します。
たったこれだけで、ご自身のブログやWebサイトが、各種スマホやタブレットでどう見えるのかチェックできます。
会員となってログインすることもできるようですが、会員登録しなくても利用できますよ。
動作確認できる各種デバイス一覧
動作確認できる各種デバイス一覧です。
こちらのページで確認してみました。
- iPhone X 以上 縦方向 · width: 375px
- iPhone X以上 横方向 · width: 734px
- Android (Pixel 2) 縦方向 · width: 412px
- Android (Pixel 2) 横方向 · width: 684px
- iPhone 6-8 縦方向 · width: 375px
- iPhone 6-8 横方向 · width: 667px
- iPhone 6-8 Plus 縦方向 · width: 414px
- iPhone 6-8 Plus 横方向 · width: 736px
- iPad 縦方向 · width: 768px
- iPad 横方向 · width: 1024px
もちろんすべてのデバイスを網羅しているわけではありません。
あくまでも目安です。
欲を言えば…、、、もちろん欲なんて言っちゃいけないんでしょうけど、、、。
もう少し古いデバイスも含まれていると嬉しかった！
とくにAndroid！
まとめとして
いかがでしたでしょうか。
パソコンでブログ執筆の際は、ぜひスマホでの検証もお忘れなく！
便利なサイトResponsinator、使ってみてくださーーい！
用語解説★
レスポンシブウェブデザインとは
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。
加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。
Wikipediaの説明だと少し難しいですが、要は同じブログやWebサイトを、パソコンからみてもスマホから見ても、そのデバイスに即した幅やサイズ感で閲覧することが可能なデザイン、ということです。
昨今、スマホが普及したことにより、Webサイトは「モバイルファースト」となっています。
つまり、スマホで見づらいことはNGで、スマホでの見栄えがよいほうが、検索エンジンからも評価されます。
そうすると自ずと訪れる人も多くなるわけです。
スマホアプリとの連携も、スマホでの見た目がよいほうがスムーズですもんね。
たとえばLINEからブログへ、インスタからブログへ、など。
ちなみに、WordPressでWebサイトをつくったり、ブログをつくっている方は、間違いなくレスポンシブWebデザイン対応済みです。
相当昔に作ったサイトでない限り。
LINEお友だち登録で、
ランディングページBasicテンプレートをプレゼントしています
