えー、いわゆる「レスポンシブデザイン」が現在のブログシーンに於けるレイアウトの標準となりつつありますが、それに伴って頭の痛い問題が発生するようになりました。
レスポンシブデザインとは?
Memo
正確には「レスポンシブ・ウェブデザイン」(Responsive Web Design)であり、デスクトップPCやタブレットPC、あるいはスマートフォン等の異なるデバイスから同一のサイト(URL)を閲覧した場合に於いても、可能な限り同一のデザインや操作方法を維持できるように、各コンテンツのサイズを最適に調整するデザイン手法の事。もちろん、理想を言えばデスクトップPCだけでなく、ノート型PCや8,10,12インチといった各サイズのタブレット、そしてもちろんスマートフォンも全て準備して、全てのデバイスでレイアウトがキチンと収まっているかチェックしたいところではあります。
しかし、ブログの為だけにそこまでするのも大変なので、「各デバイスでの表示をシミュレートしてくれるツールはないものだろうか??」と常々思っていたら…
それに近いものがありました!!
Responsinator(レスポンシネーター)
この「Responsinator」の便利なところは、レイアウトを確認したい任意のページのURLを入力すると、現在主流のスマートフォンで採用されている375px幅(iphone6~8等)や412px幅(Pixel2等)の「portrait」(縦向き表示)で表示した場合はもちろんの事、それを「landscape」(横向き表示)した場合の667px幅や684px幅の場合まで表示してくれる事です。
論より証拠という事で、早速、当ブログの記事を一つ選んでシミュレートしてみましょう。
参照
画面左上の窓にレイアウトを調べたいページの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月現在)
の表示がシミュレートできます。
すると…
まず最初に「縦向き: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
もちろん、この上で更にブラウザ別の表示状態の確認も…などと言い出したらキリがありませんが、いつも特定のデバイスからしか自ブログの更新をしない方は、一度、このツールを使って画像や広告のハミ出しだけでもチェックしておいた方が良いでしょう。