Bloggerのスマホのブログデザインについて考える

公開日 : 最終更新日 :

カテゴリー :

先日、PC側のブログデザインを変更しました。変更後の細かい作業もひと通り終わったので今度は、スマホ側のブログデザインを作っています。基本は、PC側のブログデザインを継承したものになる予定です。ただ一部のガジェットはスマホ側のブログデザインには実装しない予定です。ある程度は出来ているのですが、Blogger特有の問題によりどのようにスマホに対応させるか考えているところです。今回は、スマホのブログデザインにどのようなものかを紹介していきます。

Bloggerにモバイル対応について

モバイルテンプレートを使う

Bloggerには、スマホに対応させるためのモバイルテンプレートというものがあります。このブログもモバイルテンプレートの「デフォルト」を使ってブログ開設時から暫定的にスマホ対応させています。モバイルテンプレートは、「デフォルト」のほかにも標準のテンプレートが用意されているほか自分でHTMLやCSSの編集したカスタマイズのテンプレートも使えます。多くの方はモバイルテンプレートを使ってスマホに対応させていると思います。

レスポンシブWEBデザイン化

スマホ対応のもうひとつのやり方としてレスポンシブWEBデザインを取り入れることです。レスポンシブWEBデザインとは、ひとつのHTMLに対して複数のCSSでサイトのデザインをカバーしていく概念になります。簡単に言えば、スマホ・タブレット・PCといった複数の環境に対して読み込むCSSを変えることによって楽にサイトのデザインを構築することができます。またSEOにも有効な手段として有名です。実際、Googleは、レスポンシブWEBデザインがユーザー体験を向上する手段として有効だというこで推奨しています。

スマホ対応のブログデザインとしてこれら2つの手段があるのですが、Bloggerの場合、メリット・デメリットが結構でます。ざっくりと2つの手段のメリット・デメリットを紹介します。

モバイルテンプレートのメリット・デメリット

メリット

  • モバイル独自のDataタグが使える
  • 通信が軽くなる

モバイルテンプレートのメリットは、「モバイル独自のDataタグが使える」ということです。Bloggerにはモバイルテンプレートを有効にした時にのみ使えるタグがあってそのタグを使うことでガジェットの制御が行えます。デフォルトでは、一部しか有効になっていませんが、Widgetタグで指定することによりスマホでも表示できるようになったりします。Dataタグを駆使することによりテンプレートの制御ができますので、スマホから読み込むときに無駄な通信を抑えることができます。

デメリット

  • モバイルとPCとでURLが変わる
  • SEOに不利
  • ソーシャルカウントが分散される

デメリットの「モバイルとPCとでURLが変わる」は、これはBloggerの仕様です。モバイルテンプレートを有効にしてスマホなどでアクセスするとURLに「http:// PCのURL/?&m=1」というURLにリダイレクトしてしまいます。このおかげで検索クローラーが2回回ることになりますし、「いいね」ボタンなどのSNSのソーシャルカウントが分散されてしまいます。

レスポンシブWEBデザインのメリット・デメリット

メリット

  • どのような環境でもURLが一緒
  • ソーシャルカウントが分散されない
  • SEOに有利

レスポンシブWEBデザインのメリットは、どのような環境でもURLが一緒ということでしょう。なので、モバイルテンプレートみたいにソーシャルアカウントが分散されたりしませんし、検索クローラーも一回で終わるのでSEOにも有利です。

デメリット

  • 通信が重くなりがち
  • ガジェットの振り分けが厄介

デメリットとして、ファイルサイズが大きくなり通信が遅くなります。レスポンシブWEBデザインは、基本的にどのような環境でもHTMLは完全に読み込むので、それだけでもモバイルテンプレートと比べて処理が多くなりますし、CSSも複数用意しなければいけませんので、処理が多くなります。またソーシャルボタンやAdsenseといった通信が多いガジェットを含めガジェットの振り分けはCSSのみでしか対応できませんので、モバイルのみの表示や、PCのみの表示といった通信もすべて一つのHTMLに実装しないといけないので、処理が多くなります。

まとめ

ざっくりと2つの手段のメリット・デメリットを紹介しました。Bloggerの場合だとどちらを選ぶにしてもメリットもデメリットも大きいので、どちらでスマホのブログデザインを採用しようか悩んでいるところです。

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>