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

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

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

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

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

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

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

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

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

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

参照

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

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


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

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

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