Googleがスマホ対応迫る!レスポンシブデザインを確認する

レスポンシブデザインの見た目を確認してみる

世の中はスマホ全盛時代に変わってGoogleも「検索結果をもっとモバイル フレンドリーに」と言っているようにスマホでサイトが綺麗にみれるように推奨してきています。というより強制してるといったほうがよいような感じで4/21までだったかな?対応を迫ってきています。(レスポンシブデザインというよりスマホが綺麗に見えないサイトだと上位表示されなくなるようです恐!)

うちのサイトは放置しているのはもう古くて10年以上放置してるのもあったりして(汗)そんなのはWPとかMTとかは使ってなく素のHTMLとPHPで作ったものなのでもう直せない、というよりメンドウなので直さない。(そろそろドメインを削除するか新たにサイトをリニューアルするかしないといけないけど・・・子供みたいなものなのでなかなか捨てられない)

ワードプレスで今メインで運用しているサイトはもともとレスポンシブデザインのテーマを採用してるのでスマホやタブレットでも適用できてるはず。(このサイト(Bey.jp)もワードプレスのレスポンシブデザインのテーマを使ってます。)

とりあえずは確認がてらXperia Z3で見てるけど他のスマホとかの場合の見た目は確認できてなかったので見てみます。

なぜレスポンシブデザインか?

以前10年くらい前までは、サイトにアクセスしてくるのはパソコンと携帯電話しかなく、スマホとかタブレットとか色々な画面サイズの機器が無かったので、パソコン用と携帯電話用の2つのサイトデザインだけ用意しておけばよかった。

今はスマホ・タブレット・携帯電話・パソコンと多種多様な機器が出て、画面の大きさもまちまちなのでそれに対応するためにいちいちサイトデザインを数十種類とか用意できないのでレスポンシブデザインというのが出てきた。

レスポンシブデザインはアクセスしてくる画面の大きさに対応してレイアウトを変えてくれる便利なもの。

サイトデザインをスマホやタブレットの画面の大きさごとに用意するのが理想だけど、Googleはレスポンシブデザインを推奨してきてるのでそっちにしたほうが良いし1つのデザインだけで簡単にできるので今後はレスポンシブデザインが当たり前の時代になるのかもしれない。

viewport-resizerを使ってみる

Viewport Resizer is a browser-based tool to test any website’s responsiveness.

スマホやタブレットの大きさで表示してくれるサイト

こちらはブックマークレットなのでまずはブックマークします。

「CLICK OR BOOKMARK」の部分を右クリックして「このリンクをブックマーク」を選びます。

「CLICK OR BOOKMARK」の部分を右クリックして「このリンクをブックマーク」を選びます。

Resizerのブックマークレットをブックマークする

Resizerのブックマークレットをブックマークする

 ここまでがちょっとメンドウだけど使い方は簡単

サイトにアクセスした状態でブックマークから「Resizer」を選ぶだけ

サイトにアクセスした状態でブックマークから「Resizer」を選ぶだけ

 こんな風に、スマホ用の画面で見たいサイトにアクセスしてResizerを選ぶ。

 こんな風に上にResizerのバーが表示されて各アイコンをクリックするだけでスマホとかタブレットの見た目に変更して確認できます。

ちょっとパソコンでみると文字が小さい?とあせるくらい小さく表示されるのでどうなんだろう?実際こんな小さい文字なのかな?

XperiaZ3でみると何故か(画面サイズが1,920×1,080なのでパソコンと同じに表示されるのかと思う)パソコンと同じ大きさで右メニュー付きの2カラムで表示されるので普通のスマホとは違う表示みたい。

Responsive Design Testingも試す

 viewport-resizerよりもっとお手軽に1回だけ使いたい場合はこちらが有名ですね。

Responsive Design Testing

丸刈りのMattさんが何人も表示されてます(^_^;)

Responsive Design Testing

240pxから1024pxまで一覧で表示されます。右のほうへスクロールすると1024pxまで見ることができます。

 Responsive Design Testing bey.jpを表示させてみた

Responsive Design Testing bey.jpを表示させてみた

こっちのほうがより現実にスマホで見た画面に近そうな感じがする。

最近のスマホは横幅240pxというのはあまりないかと思うけど、横幅480pxくらいが普通なのかな?

どの画面サイズでもちゃんと問題なく表示されるサイト作りは重要ですけど、レスポンシブデザインですべてまかなえるわけではなさそう。

本当は従来のようにスマホ用、タブレット用、パソコン用といったように画面サイズごとにWebサイトのデザインを別に分けたほうが良いと思うけど・・・維持管理が大変!

画面サイズが10種類以上になると・・・なかなか作れないのが現実で、今後画面サイズが増えていくことは確かなので、やはりレスポンシブデザインが現実的なのかもしれない。

もう少し調べて古いサイトもレスポンシブデザインに手動で変更できるようであればやってみます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする