デバイス別レイアウト確認ツール「Responsinator」が超便利！！

えー、いわゆる「レスポンシブデザイン」が現在のブログシーンに於けるレイアウトの標準となりつつありますが、それに伴って頭の痛い問題が発生するようになりました。

レスポンシブデザインとは？

Memo

正確には「レスポンシブ・ウェブデザイン」(Responsive Web Design)であり、デスクトップPCやタブレットPC、あるいはスマートフォン等の異なるデバイスから同一のサイト(URL)を閲覧した場合に於いても、可能な限り同一のデザインや操作方法を維持できるように、各コンテンツのサイズを最適に調整するデザイン手法の事。

特にサードパーティー製のテンプレートやウィジェットを導入した時に起こりやすい問題ですが、PCで編集している時は画像や動画、ボタンやサイドバーといった各コンテンツやウィジェット類が適切な位置にキレイに収まっているのに、いざ更新して後からスマートフォンやタブレットから閲覧してみたら、画像が画面の外にハミ出ているわ、文字と文字が重なっているわで、恥ずかしい思いをした事はブロガーであれば一度は必ずあると思います。

もちろん、理想を言えばデスクトップPCだけでなく、ノート型PCや8,10,12インチといった各サイズのタブレット、そしてもちろんスマートフォンも全て準備して、全てのデバイスでレイアウトがキチンと収まっているかチェックしたいところではあります。

しかし、ブログの為だけにそこまでするのも大変なので、「各デバイスでの表示をシミュレートしてくれるツールはないものだろうか？？」と常々思っていたら…

それに近いものがありました！！

Responsinator（レスポンシネーター）

https://www.responsinator.com/

この「Responsinator」の便利なところは、レイアウトを確認したい任意のページのURLを入力すると、現在主流のスマートフォンで採用されている375px幅（iphone6～8等）や412px幅（Pixel2等）の「portrait」（縦向き表示）で表示した場合はもちろんの事、それを「landscape」（横向き表示）した場合の667px幅や684px幅の場合まで表示してくれる事です。

論より証拠という事で、早速、当ブログの記事を一つ選んでシミュレートしてみましょう。

参照

Blogger用レスポンシブ対応日本語テンプレート「Vaster2」の導入とカスタマイズ

画面左上の窓にレイアウトを調べたいページのURLを入力して「GO」をクリックします。

すると…

まず最初に「縦向き:375px幅」（iphoneⅩ等）で
表示した場合のシミュレート結果が表示されます。

以下、画面をスクロールさせていくと…

↓
↓

↓
↓

このように、
横向き:734px幅（iphoneⅩ等）
縦向き:412px幅、横向き:684px幅（Android Pixel2等）
縦向き:375px幅、横向き:667px幅（iPhone6～8等）
縦向き:414px幅、横向き:736px幅（iPhone6～8 Plus等）
縦向き:768px幅、横向き:1024px幅（ipad等）

10パターン（2018年1月現在）
の表示がシミュレートできます。

しかも、このツールが便利なのは、例えばGoogleの「PageSpeed Insights」のように、単にページの読み込みが完了した瞬間のスクリーンショットを撮っているワケではなく、スクロールバーを動かせばページ全体をちゃんと閲覧できる点です。

実際にスクロールさせる事ができる

このツールを使って、ワタクシが所有する全てのブログの主要な記事を再点検した結果、画像や広告がハミ出していたり、<blockquote>内の文字列がハミだした場合の処理の指定（overflow: auto; や word-wrap: break-word;等）を忘れているページが数多く確認されました。

これは服装に例えて言うなら、上着のボタンを掛け間違えていたり、ズボンのチャックが空いているのに気付かずに外を歩いているような、まさに恥ずかしい状態ですww

もちろん、この上で更にブラウザ別の表示状態の確認も…などと言い出したらキリがありませんが、いつも特定のデバイスからしか自ブログの更新をしない方は、一度、このツールを使って画像や広告のハミ出しだけでもチェックしておいた方が良いでしょう。