[WordPress]モバイル対応するにはレスポンシブデザインとユーザーエージェントで切り替えるのとどっちがいいのか。

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

responsive1-1

Hello World with a Big Smile (^^) @conchikuwaです。

最近では当ブログでもPCと同じくらいスマホ、タブレット等のモバイルでのアクセスが増えてきました。通信速度も早くなり、画面も大きく軽いデバイスが増えてきたので、快適にチェックできますからね。当然の流れだと思います。

そうなるとやはりモバイルに合わせたデザインというものが重要になってくると思います。モバイル対応する方法としてレスポンシブデザインでテーマを作る方法とてモバイル専用のテーマを作ってユーザーエージェントで切り替え方法があると思います。今回はそれぞれの方法についてちょっと纏めてみようと思います。

うまく纏まってなかったらゴメンネ。。。

----- Sponsored Link -----

レスポンシブデザインでテーマを作る方法

レスポンシブデザインについてご存じない方の為に簡単に説明すると、

デバイス毎に表示できる横幅が違うので、その横幅に合わせて柔軟にレイアウトデザインを変更する手法。

です。

よくあるレスポンシブデザインのサイトだとPCで見るとヘッダー部にいろいろコンテンツがあって、サイドバーがあるデザインだけど、モバイルで見るとヘッダー部がシンプルになって、サイドバーがメインコンテンツの下に移動する感じになります。

モバイルのデバイスがいくら大画面になってきたからといって、PCと同じようにヘッダーが大きく、サイドバーがあると一番見てもらいたいコンテンツ部分の表示領域が狭くなり、文字が小さく見づらいですからね。

ちなみに当ブログもリニューアルの際にレスポンシブデザインのテーマに変更しました。

▼ PC、MACでみるとこんな感じ。

responsive1-2

▼ ipadで見るとこんな感じ。

responsive1-3

▼ iPhoneで見るとこんな感じ。

responsive1-4

デバイスの幅に合わせてデザインが変わっているのがわかると思います。試しにブラウザの横幅を変更してもらえると、ゴニョゴニョとレイアウトが変わっていくのがわかります。

レスポンシブ対応のテーマも充実している。

1からレスポンシブテーマをつくり上げるのは、時間も労力もかかりますが、そこはWordpress。高品質なレスポンシブ対応のテーマが多数存在しています。なので、それを元にオリジナルのテーマをつくり上げることもできます。当ブログも「twenty twelve」を元にしていますしね。

厳選!高品質なのに無料で使用できるレスポンシブ対応のWordPressのテーマのまとめ -2012年版 | コリス
2012年にリリースされたものを中心に、無料で利用できる高品質なレスポンシブ デザイン対応のWordPressのテーマファイルを紹介します。 まだちょっと早いですが、「2012年ベスト」な感じです。 …
いつもありがとうございます!

スマートフォン対応、レスポンシブデザインのWordPressテーマ厳選12個 – Photoshop VIP
先日ご紹介したエントリー「2012年に流行りそうなWebデザイントレンド厳選10個まとめ」の中に、レスポンシブデザインを利用したサイトが増えているということを書いたのですが、その流れはWordPres …
いつもありがとうございます!

比較的最近発表された「レスポンシブ」かつ美麗な無料のWordPressテーマ12種*frasm
いつもありがとうございます!

【まとめ】今後使えそうなWordPress 無料レスポンシブデザインテーマ | HaLPosT
今度知り合いのホームページを構築することになりました。そこで自分のサイトもレスポンシブデザインテーマなんですが、知り合いのサイト構築するのにいろいろ探しまわったら、なかなかよいものを見つけましのでご紹 …
いつもありがとうございます!

1つのテーマファイルをデバイスに合わせて最適化する。

レスポンシブデザインのメリットとしてはテーマを作ると1つのテンプレートをデバイスの横幅に合わせてCSSで調整するので、修正、変更すれば全てのデバイスの表示に反映されので、メンテナンスが楽チンです。また同じテンプレートを使うので、どのデバイスで見てもデザインに一貫性を持たせることが容易にできます。

でもこれ逆にデメリットになることがあります。

アドセンス広告の設置に四苦八苦。

具体的な例を挙げると、ブログにアドセンス広告を貼っている方も多いと思いますが、アドセンスの広告ってデバイスごとに縮小されません。なのでデバイスより横幅の大きなモノを使用しているとはみ出してしまいます。はみ出すだけならまだいいのですが、広告の幅を基準にしてコンテンツ時代が縮小されて表示されてしまいます。

なので、PCとモバイルで貼るアドセンス広告のコードを変更するのですが、CSSで切り替える(コードの改変)はGoogleの規約違反になってしまうので、結局ユーザーエージェントを判定してコードを切り替える事になります。

ユーザーエージェントを判定しちゃうとレスポンシブデザインでもなんでもなくなっちゃいますからね(^_^;)

PC、モバイルで表示コンテンツを変更しづらい。

例えば、モバイルの場合、表示領域の関係であんまり必要でないコンテンツを表示しないようにしたいなと思ってもPCと同じテーマファイルを使用しているので、できなかったりします。必殺「display:none」を使う方法もありますが、Googleさん的にあんまりよろしくない方法だったりしますし、非表示にしているだけであって、コンテンツ自体は読み込んでいるので、ファイル自体の容量は変わりません。

モバイル専用テーマをユーザーエージェントで切り替える方法

以前、当ブログでもやっていた方法なのですが、PCはPC専用、モバイルはモバイル専用のテーマを複数用意しておき、アクセス元のデバイスをユーザーエージェントで判定してテーマを切り替える方法です。

詳しくは以前まとめた記事をご参考にして下さい。

[wordpress]PCサイトのテーマをカスタマイズしてモバイルテーマを作成する方法! | コンチクワブログ

[wordpress]プラグイン「WPtap Mobile Detector」を使ってAndroidのスマホとタブレットでブログテーマを変更する方法 | コンチクワブログ

またWordpressには「Wptouch」というインストールするだけで、モバイル専用のテーマを作ってくれる便利なプラグインがあります。

デフォルトのままだとテーマにオリジナル性がありませんが、ゴニョゴニョいじれば自分色に染めることも可能です。

[Å] 【お知らせ】WPTouchをカスタマイズしてスマホ用のブログデザインを変更しました | あかめ女子のwebメモ
こんにちは、あかめ(@mk_mizuho)です❦ スマホからブログを見てくださっている方々が当ブログ全体の50%。前から思っていたことが1つ。過去のブログ記事が埋もれている。読者さまからするとどこに何 …
いつもありがとうございます!

私がWPtouchのトップページ画面をカスタマイズするために行った5つのこと
WordPressのテーマにこだわっている人はたくさんいらっしゃいますが、スマートフォン用のテーマにも少しこだわってみましょう。多くの方が使用しているWordpressのスマートフォン用プラグインWP …
いつもありがとうございます!

WPtouchをカスタマイズしてブログをオリジナルデザインでスマフォ対応させたよ!(カスタマイズ編) | クリエイティブメモメモ
最近布団から出られません。井畑です。 今回は前回の「プラグイン導入編」に引き続き、Wptouchをカスタマイズしてスマートフォン対応させていったのメモ、「カスタマイズ編」を書いていきます。 (※ここか …
いつもありがとうございます!

テーマが分かれているので、表示するコンテンツの変更も簡単

そのまんまですが、PC、モバイルで違うコンテンツを表示したい場合、簡単です。アドセンス広告に関してもそれぞれのテーマに別のコードを張り付ければいいだけですしね。そういう意味ではいろいろと自由度があると思います。

テーマが分かれてると管理が何かと大変

これも当たり前ですが、デザインに一貫性を持たせようとしたら、それぞれのテーマファイルを修正する必要があります。PC用、モバイル用の2つだけの場合はまだいいですが、同じスマホ、タブレットでも画面サイズは機種によって異なりますから、もっと細かくタブレット用、iPad用、Android用等々、増やした場合、かなり面倒ですね。

まぁこれはレスポンシブデザインでも言えることで、どこまでチェックするかによりますが。。。

あとがき

案の定纏まりませんでした。。。(^_^;)

ぶっちゃけレスポンシブデザインでテーマを作る方法でもモバイル専用テーマをユーザーエージェントで切り替える方法でもお互いにメリット、デメリットがあり、運用に関しても同じくらいの労力が必要なのでどっちでもいいと思います。Wordpressの既存のテーマを使ってゴニョゴニョをオリジナル性を出し行くのであれば、元のテーマがレスポンシブ対応していればレスポンシブデザインを意識して、してなければ、ユーザーエージェントを切り替えてって感じで。。。

今からテーマを選ぶ方やフル自作する方は世の流れはビバ!レスポンシブなのでレスポンシブを意識したほうがいいかなと思いますが。

どちらにしても結局はアクセスしてくれる方に気持よく、迷うことなく見てもらえるようにって事が重要ですね。

そういえばブロネクでもブログデザインが取り上げられていて、同じように記事にされている方がいました。考えることは同じなのね(^^♪

#ブロネク の9回目がブログデザインの話しなので、僕も何か書こうと思ったのだけれども*frasm
ノンデザイナーとか嘘だろ!という感じで、かなり的確ですね。新しいテーマもとても楽しみです! と、激しくハードルを上げた後で、少し個人的な雑感を。 …
いつもありがとうございます!

第9回ブロネクオンエアー視聴!非デザイナーだけどテーマ自作中なので思うところを語ってみる #ブロネク | こけらブログ_
デザインて奥が深いすわ。こけら(@kokera_beniiro )です! 語り出したら止まらないブログデザインがテーマだった第9回ブロネクオンエアー。 僕も現在自作テーマを作成すべく勉強中なので、 …
ご紹介感謝です!

僕自身Wordpressをゴニョゴニョするのが好きなので、これからもアクセスしてくれる方に楽しんでもらえるようにカスタマイズしていこうと思っておりますので、お楽しみに(^^♪

ではでは。。。

コンチクワブログのRSS & ソーシャルページ