スマホでの動作確認に便利なWebサイト「Responsinator」

2021年6月24日ブログ集客ノウハウ,スマホブログ,ブログ用語集

スマホでの動作確認に便利なWebサイト「Responsinator」
カイエダ

おもてなしブログ®︎専門家カイエダです。
ブログの更新…!久しぶり〜〜!
とかなんとか言って、趣味的なことを書いているブログをオープンさせたりもしていますので、そちらもよかったらご覧ください!
  
さて、この記事では、ご自身のブログやWebサイトが、スマホではどう見えているのかを確認するときに便利なWebサイトをご紹介します。

その名は「Responsinator(レスポンシネイター)」

なんとなく、ターミネーターを思わせるネーミングです。

名前の由来は(推測ですけれども)、間違いなく「レスポンシブWebデザイン」から来てますね^^

※レスポンシブWebデザインについてはページ下に説明をいれました。

動作確認でパソコンとスマホを行き来するのは面倒だから

カイエダ

気持ちよく記事を書いたり画像を入れたりして、満足して公開しても、スマホでどう見えているのかって確認するのが割と大変ですよね。

逆の方もいるでしょうけれどもね。
スマホから入力したけれどもパソコンからどう見えるのか、と。
今回ご紹介のレスポンしネーターは、パソコンで入力する方にとって便利なサイトです。

もちろん、、、、!
公開されているページしか確認できませんのでご注意くださいね。
下書きの状態では確認できません。

Responsinator使い方

  1. https://www.responsinator.com/
    空欄に、URLを入力します。
  2. GOボタンを押します。
カイエダ

たったこれだけで、ご自身のブログやWebサイトが、各種スマホやタブレットでどう見えるのかチェックできます。
会員となってログインすることもできるようですが、会員登録しなくても利用できますよ。

動作確認できる各種デバイス一覧

動作確認できる各種デバイス一覧です。
こちらのページで確認してみました。

  1. iPhone X 以上 縦方向 · width: 375px
    iPhone eXpensive portrait · width: 375px
  2. iPhone X以上 横方向 · width: 734px
    iPhone eXpensive landscape · width: 734px
  3. Android (Pixel 2) 縦方向 · width: 412px
    Android (Pixel 2) portrait · width: 412px
  4. Android (Pixel 2) 横方向 · width: 684px
    Android (Pixel 2) landscape · width: 684px
  5. iPhone 6-8 縦方向 · width: 375px
    iPhone 6-8 portrait · width: 375px
  6. iPhone 6-8 横方向 · width: 667px
    iPhone 6-8 landscape · width: 667px
  7. iPhone 6-8 Plus 縦方向 · width: 414px
    iPhone 6-8 Plump portrait · width: 414px
  8. iPhone 6-8 Plus 横方向 · width: 736px
    iPhone 6-8 Plump landscape · width: 736px
  9. iPad 縦方向 · width: 768px
    iPad portrait · width: 768px
  10. iPad 横方向 · width: 1024px
    iPad landscape · width: 1024px
カイエダ

もちろんすべてのデバイスを網羅しているわけではありません。
あくまでも目安です。
 
欲を言えば…、、、もちろん欲なんて言っちゃいけないんでしょうけど、、、。
もう少し古いデバイスも含まれていると嬉しかった!

とくにAndroid!

まとめとして

カイエダ

いかがでしたでしょうか。
パソコンでブログ執筆の際は、ぜひスマホでの検証もお忘れなく!
便利なサイトResponsinator、使ってみてくださーーい!

用語解説★

レスポンシブウェブデザインとは

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。
加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。

Wikipediaより

カイエダ

Wikipediaの説明だと少し難しいですが、要は同じブログやWebサイトを、パソコンからみてもスマホから見ても、そのデバイスに即した幅やサイズ感で閲覧することが可能なデザイン、ということです。

昨今、スマホが普及したことにより、Webサイトは「モバイルファースト」となっています。

つまり、スマホで見づらいことはNGで、スマホでの見栄えがよいほうが、検索エンジンからも評価されます。
そうすると自ずと訪れる人も多くなるわけです。

スマホアプリとの連携も、スマホでの見た目がよいほうがスムーズですもんね。
たとえばLINEからブログへ、インスタからブログへ、など。

ちなみに、WordPressでWebサイトをつくったり、ブログをつくっている方は、間違いなくレスポンシブWebデザイン対応済みです。
相当昔に作ったサイトでない限り。