ここ数日、ちょっと気になることがありまして。というのは、知り合いのブログを訪問したときに、レスポンシブWebデザインのWordPressテーマを使用しているのにも関わらず、WPtouchというスマホ表示最適化プラグインを使用していること。
要はレスポンシブWebデザインというのがなんなのかがよくわからないままテーマを使用している、ということなんですね。これって、見る人がみればちょっと恥ずかしい状態なわけで。だって、「私、WordPressのことなーーーんにも知らずに運営してますﾃﾍﾍﾟﾛ（古）」ってことでしょ？（きついこと書いてゴメンナサイ･･･）
例えるならば･･･うーん･･･自動車の保険でファミリーバイク特約に入ったのに別個で二輪車用の任意保険にも入ってしまった、とか。テレビにHDDがついていてハイビジョン録画ができるのに、しかも容量はたっぷりあるのにそれを知らずに録画機器を買ってしまった。しかもハイビジョンじゃないやつ･･･みたいな感じかな？
おかしくね？もったいなくね？恥ずかしくね？ということで、今日はレスポンシブWebデザインのお勉強(･∀･)b
目次
レスポンシブWebデザインとは？
まずはわかりやすいこちらの画像をご覧ください。
http://responsive-jp.com/のスクリーンショットです（リンク先ではもっと沢山の事例がご覧いただけます）
見てのとおり、表示するブラウザの種類や幅に応じてレイアウトが変わるのがお分かりいただけますでしょうか。では実際にひとつサイトを開いてみましょう。
では日大経済学部のサイトhttp://www.eco.nihon-u.ac.jp/entrance/を開いてみます。
ブラウザを最大化せず、ウィンドウの大きさを調整しながら、横幅を縮めていくと･･･
最初はこうでした。
少し幅を狭めると･･･
サイト下部の三つ並んでいたボックスが二つになりました。
さらに狭めると･･･
サイドバーのコンテンツがサイト上部に移動しましたね。こうしてユーザーが見るブラウザに応じて、サイトのレイアウトを最適化していくのがレスポンシブWebデザインです。
ちなみに、この日大のサイトでいくと、最初のレイアウトがPC用、二番目がタブレット端末用、最後がスマホ用、になってます。
レスポンシブWebデザインを使うメリットとは
レスポンシブデザインを使うことによるメリットってなんなんでしょう。考えられるいくつかを列挙してみたいと思います。
- どんなデバイスから見てもデザインに統一感がある
- 管理が楽
- 検索エンジン最適化
レイアウトが変わるだけですから、配色や<h3>タグや<blockquote>タグのスタイルシートも当然同じ。PCで見ているいつものサイトと同じイメージで違和感がありません。
また、管理もスマホ用サイトを別管理する必要はなく、一括管理が可能ですからそれだけ管理の手間が省けます。そしてスマホ用サイトとURLが同じということは、ひとつのページに対する被リンクなども分散することがなく、必然的にSEOにも強くなってきます。
レスポンシブWebデザインを使うデメリットとは
逆にレスポンシブWebデザインを使うデメリットってなにかあるんでしょうか。
- CSSによっては見にくい
- 画像は小さくならない
- IE8では動かない
CSSの設定によっては引用部分が幅が狭くなったりしてますよね。スマホでもそのまんま狭くなりますので下手すりゃ一行に6-7文字程度しかなかったり、ということも起こり得る話です。また、基本的に画像は小さくなりませんので不自然にぴょーーんと横長になる画像ができてしまったりもしますw
そして、いまどきいるのかよ!?というIE8ですが、なんのなんの、IE6で動くようにしてくれ、という人がいまだにいるくらいですから･･･
スマホ持ってない･･･
スマホ持ってないと実際にどういう表示がされているのか、プレビューできなかたいですよね。そうすると表示テストとかもできないわけです。そこで役に立つのがコチラ。
てってれ～～
FireMobileSimulatorというアドオン。Google Chrome用とFirefox用があります。
FireMobileSimulatorは、主要３キャリア（DoCoMo/Au/SoftBank）の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたGoogle Chrome/Firefoxの拡張機能です。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。
モバイルサイトをPCで閲覧するために、従来からある方法として、キャリア公式シミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法はそれぞれに不足している機能があったり、またITに詳しくない人にとっては導入が面倒かつ困難という面があります。
FireMobileSimulatorは、「誰でも簡単に導入できる」かつ「高機能である」ことを目的に作成された新しい携帯シミュレーターです。
平たく言うとPC上で携帯やスマホの表示を再現できる、ということ。これで実際にスマホで表示しなくても、自分のサイトがスマホユーザーからどう見えているかがわかりますね(･∀･)b
無料のWordPressのレスポンシブテーマ
では、いくつかのレスポンシブテーマを紹介しておきます。一応無料のものばかりをならべときますね。拾って使え!!乞食どもが!!wwwww最初は無料のテーマを使った方がいいと思います。レスポンシブのことがちょっと掴めたら購入するのもいいかもしれませんね。あ、自作できるレベルの人は置いといて(･∀･)b
ではどうぞ。
テーマのリンクばかりのまとめ記事です。
【スマホ対応！！】フリーでクールなWordPressデザインテーマまとめ【レスポンシブデザイン】
【保存版：85テーマ集めました】本当に無料？と見紛うほどハイクオリティなWordPress用レスポンシブWEBデザイン対応テーマ
レスポンシブは当たり前、最新プレミアムWordPressテーマ素材40個まとめ