Googleも推奨するSEOも有利なレスポンシブwebデザインのサンプルを作ってみました。

公開日:2013年5月1日 

Googleも推奨するSEOも有利なレスポンシブwebデザインのサンプルを作ってみました。

何かと話題のレスポンシブwebデザイン。ちょっと前にgoogleさんも「レスポンシブwebデザインでどのデバイスでも最適に表示できるようにしろー」って言ってて、今回仕事でサイトを新設する機会がありましたのでどうせならと思い挑戦してみました。

レスポンシブwebデザインってどんなデバイスでみても快適にみれるようなデザインってことです。

ゴールデンウィークってなんでしたっけ?普通に仕事してます水口です。
さて、ブログを始めてから「できるだけ毎日更新しよう」と思ってましたが、さっそく2週間ほどサボっていました。もう4月もおわりですね。書くのが遅くてもう5月です。

仕事でレスポンシブwebデザインって仕組みでサイトを作る案件があったので、いろいろメモっときます。それにしてもこのブログ、基本的に仕事の事は書かない方針なんですが…

レスポンシブwebデザインとは?

ブラウザの幅に合わせ最適なレイアウトになるように組んだデザインのことです。PCで見てる時はPC用のレイアウト、iPadで見てる時はそれ用、iPhoneで(以下略)というように最適なサイズ、レイアウトで表示されます。
実例としてアメリカ本国のスターバックスのサイトが有名です。
【追記:忘れてましたがこのブログもレスポンシブwebデザインです!!】

ブラウザで開いてウィンド幅をギューっと狭くしていくと、幅に合わせてレイアウトが変化します。
昔からあるリキッドデザイン(可変幅デザイン)のように単純に横幅を縮小するだけではなく、サイドバーが本文の下に回りこんだり、画像や文字が小さくなり過ぎないように、レイアウトが変わるのが特徴です。なので、これに対応してないサイトをスマホで見た時のように、文字がすごく小さくなってしまうってことがありません。とってもユーザーフレンドリーなサイトになります。

また、Googleは公式ブログでこんな事言ってます。

複数のサイトを用意すれば、ハードウェアごとに最適化したサイトを提供できます。しかし、1種類のサイトで両環境に対応できるなら、正規化された URLを保持できる上、複雑なリダイレクトを避け、ウェブ アドレスの共有をよりシンプルにできます。このような保守性の観点から、Googleでは、1つのページをモバイル端末とデスクトップの両方に対応させるよう、次のガイドラインを満たす方法の検討を始めました。

  1. ページは、どの画面解像度でも読みやすく表示される
  2. どの端末でも表示できるようにコンテンツをひとかたまりごとにマークアップする
  3. ウィンドウサイズにかかわらず、水平方向のスクロール バーは表示しないようにする

Googleさんが言ってるということはSEO的にもイケてるってことです。PCもモバイルも同じURLでOKってのはSEO的にもメリットがあります。

例えばレスポンシブwebデザインに対応していないアメブロの場合、同じ記事でも

・http://ameblo.jp/blog-no-id/kiji-no-id(PC用)
・http://s.ameblo.jp/blog-no-id/kiji-no-id(スマホ用)

といったようにURLが別になり、Google(のロボット)からみると、別のページとして見られます。

googleの評価基準のひとつに「どれだけリンクされたか?」ってのがあります。
同じ記事で複数のURLがあると見てる人がリンク張るとき、環境によって異なるURLが使われます。そうなると被リンクのパワーが分散されてしまうのです。

(ちなみにアメブロのスマホ用URLにPCでアクセスすると302リダイレクトされます。302リダイレクトは一時的な転送に使うものなので、SEO的にはイマイチだとおもってます。)

そもそもケータイに対応する必要あるのか?

私、以前は「ケータイで調べ物する人なんかいないっしょ」派で、実際データ見てもケータイでアクセスした形跡はほとんどありませんでしたのでモバイルサイトはリソースの都合で軽視してました。
しかし、iPhoneの登場でスマートフォンが多くなりAndroid OSのデバイスも増え今では、

os-retio3

iOSとAndroidで約3割います。もう無視できません。
上データは私のお客さんのサイトのgoogle analyticsデータです。

キモはCSS

レスポンシブwebデザインのキモはCSSにあります。

ん?なんで“max”なの?って気付いた方は鋭い!
800pxの根拠は、ギャラクシータブレットやNexus7の立てて使った時の横幅が800pxだから。iPadは768pxです。480pxはiPhoneの横幅です。

このように「@media〜」と記述して、この条件の時にこのCSSを適用するってブラウザに命令します。

理想はモバイルファースト

HTMLやCSSの理想的な書き方はモバイルファーストです。
モバイルファーストとはモバイル端末や通信回線はPC環境のそれらより処理が遅かったりするので、モバイルに優しくしよーってことです。(たぶん)

なので本来、CSSはスマートフォン用を記述した後で「画面幅が480px以上Xpx以下ならCSSを適用(←タブレット用)」「X+1px以上は・・・(←PC用)」といったように、小さい方から順に書いてモバイルに優しくするほうがカッコイイのです。

PC用を先に書くとスマートフォンで一度PC用のレイアウトなどを処理した後にスマートフォン用のCSSを上書きする事になり、モバイルデバイスにたくさん仕事をさせることになってしまいます。

ie8以下は「@media〜」に未対応(ie9以上は大丈夫)

google analyticsのデータを見ると私の嫌いなダメダメブラウザのインターネットエクスプローラーが圧倒的なシェアを占めています。

browser-ratio

インターネットエクスプローラーのバージョン比率は

ie-version

このようにまだまだie8ユーザーが多いので無視できません。
こういった事情がありie8でも表示できるようモバイルファーストは断念しPCファーストな書き方にしました。

なぜ、旧バージョンのダメダメブラウザie8がいまだに多く使われているかと言うと、Windows XPではie9が使えないからです。私のサブ機のwindowsマシンもXPなのでie8です。
それにしてもie7以下使ってるユーザーってどんな事情があるんでしょうかね?

Respond.jsというjava scriptを使うことで解決する方法もありますがリソースの都合で今回は見送りました。

デモとサンプル

レスポンシブwebデザインのDEMO

上のDEMOのソース置いときますのでご自由にお使いください。
下記のhtmlはfooterの一部にphpを使ってますのでphp形式で保存して使ってください。

CSSファイル

PCでは右にサイドバーがあるレイアウトです。タブレットでもPCの単純縮小表示。
スマホではサイドバーがメイン部分の下に移動します。スマホだと画面が小さく単純縮小だとバナーなどが小さくなりすぎますので、ヘッダーの構造も変えました。ヘッダーにメニューボタンを何個も配置するとスマホの画面上部がバナーだらけになってしまうので、メニューバナーはフッターに移動しました。
あと、スマホは電話がついてますので、ヘッダーに電話をかけるようなリンクを張ってます。

バグやミスや改善点があれば下のコメントから優しくご教示ください。

今回使用したスクリプトやwebサービス

●jquery.smoothScroll.js
上記のDEMOのスマホ状態のfooterへ移動するページ内リンクで使用してるスルーって動くスクロールは、MONKEY WRENCHさん作成のスクリプトを使いました。DEMOでは使ってますが、ソースコードには組み込んでません適宜MONKEY WRENCHさんのブログから使わせてもらってください。

●ダミーイメージ(画像のダミーデータ)
上記DEMOで使ってる画像は、IDEA*IDEAさんで紹介されていたwebサービスを使用してます。今回のようなサンプルを作る時にわざわざダミー画像を用意しなくていいのでたいへん重宝します。

すぐ使えるダミーテキスト
すぐ使えてとても便利なダミーテキスト生成サービス。サイト制作の時ってレイアウト確認用になんでもいいからテキストをぶっこみたい時があります。そんな時「あああああああああああああああああああ」って感じに全部同じ文字だとイマイチよくわからんので、このような漢字も混じったある程度自然文に近いダミーテキストは役に立ちます。


超長文になってしまったと思ったけど、半分はソースコードですね。

仕事のメールなどで「この人日本語おかしいな」ってのを時折見かけますが、いざ自分で文章書くとなると難しいですね。この記事でさえ、何度も読み返したけどまだ変なところあると思います。書き続ければはじめからすらすらと推敲したような文章が書けるようになるんだろうか・・・

ちなみに当ブログは、このページのレスポンシブウェブデザインではなくwebライダー様のWPテンプレート「賢威」を使用しております。


コメントを残す