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

公開日:2013年5月1日 

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

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

Photo : Responsive Web Design

レスポンシブ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テンプレート「賢威」を使用しております。


SEOに強い戦略的テンプレート「賢威6.2」。レスポンシブWebデザインにも対応!パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属!

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

  1. […] すでにPC向けのページが用意されているサイトでレスポンシブWEB(同一URL、同一HTML)の適用はさすがに不可能でしたので、ダイナミックサービング(Dynamic serving、同一URL、別HTML)で進め […]

  2. 山田 昭 より:

    http://miz2403.com/responsive-web-design/
    初めまして。山田と申します。
    ↑このソースを利用させて頂きました。
    ↓この本家の商売ページのレスポンシブ化を考えていました。
    xxxxxx.com(※すみません諸事情により管理人がURL削除いたしました。)
    が、その前に息子の居酒屋HPを勉強としてソースを借りてレスポンシブ化して作りました。やあー大変でした。ネットで調べてなんやかんや2週間掛かってしまいました。
    index3.htmlはテストページですがなかなか良い感じに
    仕上がったかなと思っています。
    もし宜しければ更に良くなる為のアドバイスを頂戴出来ればと思っています。
    厚かましいお願いで申し訳ありません。
    http://www.kaisanshunsai.com/
    貴社様の更なるご発展を祈っております。
    山田 昭

    • 水口 兼太 より:

      コメントありがとうございます。お役に立てて光栄です。
      テストページを拝見いたしました。とても綺麗にできていると思います。
      デザインについて私からアドバイスできることは特にありませんが、tableタグの多用が気になりました。
      レイアウト目的でtableタグを使用するのは、一般的に推奨されないので、ここはtableタグを使わずに作るのをおすすめします。
      見たところ、縦並びに使っているようなので、tableタグが無くても綺麗に並ぶのではないでしょうか。

      あとは、グーグルマップの幅がスマートフォンの横幅を超えているようなので、幅をスマートフォンに対応させたいところです。
      http://www.lifehacker.jp/2013/12/131209google_maps_responsive.html
      iframeなので若干ややこしいですが、上記ページに詳しくありましたので、よろしければ参考にしてみてください。

      実は以前、海山旬菜さんにメールしたことがあります。私のグーグルの解析タグが貼られているので、海山旬菜さんのホームページへのアクセス数などのデータがこちらに漏れてきてしまってます。
      きっとサンプルソースではなく、ページのソースを利用されたと思いますので、ぜひ私のグーグルアナリティクスのコードは削除していただければと思います。

      • 山田 昭 より:

        ご返信をありがとうございます。
また良きご指摘有難うございます。
マップもfacebookプラグインもページに上手く埋め込めたようです。tableタグは根っからのHPビルダーユーザーなので知らない間に多用しているのかも知れません。
グーグルの解析タグの一件は申し訳ありませんでした。
即刻外しましたので今後は問題ないかと思います。
レスポンシブなかなか難しいですね。
ただまだ構築している企業や店舗もとても少ないのが現状です。
レスポンシブはグーグル推奨と言う事もあり、この3か月間で居酒屋のグーグル検索順位は重要キーワードで既に1ページ目に入っています。
ただやはり手間が掛かるのと自由度に限界があるのが問題ですね。有難うございます。
今後とも宜しくお願い致します。
        山田 昭