Shine Blog

ブログと趣味と音楽と。

はてなブログでレスポンシブデザインを利用するメリットとデメリット

レスポンシブデザイン

 

パソコンやスマホ・タブレット端末など複数の画面サイズに対して、単一のコードでWeb画面表示を対応させる「レスポンシブデザイン」

 

前記事で書いた”はてな利用規約の話”で、はてなブログ標準のスマホ表示でヘッダ・フッタを非表示にする行為が規約違反だったため、とりあえず元に戻しました。

 

とはいえ、スマホで閲覧した時のヘッダって視認できる文章量が変わってくるので、何気に見づらくなります。

 

そんなわけで閲覧時間が短くならないかハラハラしながらアナリティクス眺めてますが、なんか短い気がする…(小心者)

 

精神衛生上よろしくないので早急に変更したいところですが、日に1万近いPVがあるブログを大幅にカスタマイズするのはそれはそれで心臓に悪いので、当ブログ「Shine.jp」を先にレスポンシブデザイン対応のテーマに変更しました。

 

まだ変更して数時間しか経っていませんが、カスタマイズしてみて分かった部分のメリットとデメリットを挙げてみたいと思います。

 

ちなみにスマホ表示をレスポンシブデザインにできるのは「はてなブログPro(有料プラン)」ユーザーのみなので、以下はProであることを前提にお読みください。

 

 

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

ヘッダとフッタを標準機能で非表示にできる

はてなブログProユーザーであればレスポンシブデザイン対応のテーマでなくとも、PC版は「詳細設定」からヘッドとフッタを非表示にすることはできます。

 

ですがスマホ版では”はてなブログ標準のデザイン”になるため、ヘッダとフッタは表示されます。

 

前回記事で触れましたが、私はこれをCSSで強制的に非表示にしていました。それが規約違反だと知ったことがそもそもレスポンシブデザインに変更した理由です。

 

標準のスマホ版デザインよりも情報量が多い

今回変更したテーマ「CONTENTS」では、PC表示時のサイドバーがスマホ表示時に記事の下部に表示されます。

 

カスタマイズにもよるとは思いますが、サイドバー標準の関連記事や新着記事がそのままスマホ版で表示できるので、簡単に情報量を増やすことができます。

 

このデザインテーマは、製作者のJOEさんがCSS等についても丁寧に記事にしてくださっているので、カスタマイズしやすいです。

 

▼CONTENTS製作者のJOEさんが運営する「DREAMARK」

www.dreamark.tokyo

 

PC版とスマホ版でデザインが統一される

レスポンシブデザインなので当たり前ですが、両方ともデザインを統一できるというのは運営側としては何だか嬉しいです。

 

スマホでもパソコンでもネットを利用する人が見た時に、ひと目で同じサイトだと認識して貰えます。

 

他にも、はてな標準のスマホデザインでは変更できない、プロフィールが統一されるのも利点だと思います。

 

ですが、このデザインが統一されるという点こそが、デメリットにも繋がる部分でもあります。

 

 

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

AdSense広告の配置が難しい

レスポンシブデザインにすると、基本的にはPC版とスマホ版で同じ位置に広告を表示させることになります。

 

jQueryで移動させることもできますが、それは同じサイズで動かすだけです。

 

例えば、タイトル下に横長バナーを使用したい場合だと、スマホ版とスマホ版のどちらかのサイズに合わせることになるので使いにくいです。

 

もしかすると上手い解決方法があるのかもしれませんが、私では解決策が浮かばないので、とりあえず「記事上」・「記事中」・「記事下」の3箇所にレクタングルを表示させています。

 

記事中や記事直下への配置方法なども説明したいところですが、CSS関係の説明は苦手なので、非常に分かりやすく解説されている記事をご紹介します。

 

ちなみに、このデザインテーマを知ったのも使ってみようと思ったのも、サイト運営者のてつさんが紹介していたことがきっかけでした。

 

▼サイト運営のエキスパートてつさんが運営する「MUTANT」

www.mutant-tetsu.com

 

ブログタイトルから記事一覧に飛ばない

これはスマホ版の話ですが、ご存知の通り”はてな標準のスマホ版”ではブログタイトルをタップすると「(サイトURL)/archive」という記事一覧ページに飛びます。

 

ですがレスポンシブデザインだと、PC版でもスマホ版でもサイトのトップページに飛びます。「続きを読む」機能を使用していれば何の問題もないのですが、私はこの機能に苦手意識があり使用していません。

 

ですので、ほとんどの方は問題にならないことだとは思いますが、個人的には残念な点です。

 

ちなみに当ブログでは、「ブログタイトル」からJavaScriptで「一覧ページ」にリダイレクトさせていますが、これはSEO的に思いっきり良くないらしいのでお勧めしません。

 

後から変更すると手直しが大変

これまた一部の方のみの話ですが、このデザインテーマでは画像の高さ(height)をHTMLで指定していた場合、横長の画像でも縦に伸びてしまいます。

 

ページ読み込み速度向上のために、画像の横幅と高さを指定していたので、貼り付けていたほぼ全ての画像から”高さ指定を削除"しました。

 

この”画像のサイズ指定”と”続きを読む機能”の両方を修正するとなると、記事数によっては結構な時間が掛かりそうです。

 

 

メリット・デメリットのまとめ

今回の記事では同じ数だけメリットとデメリットを挙げましたが、デザイン性やユーザビリティの面で、実際はメリットの方を強く感じました。

 

デメリットの中の2つは、最初から注意していれば問題にならないことですし、なによりもスマホ版の見た目が良くなるというのは非常に魅力的です。

 

ただ、AdSense広告のサイズや位置を変更することは、多かれ少なかれ収益に影響する部分です。ですが、こればかりは変更してみないとどうなるかは分かりません。

 

逆にこのAdSenseの収益にも良い影響が出るのであれば、PC版とスマホ版で別々にカスタマイズする必要もなくなりますし、もはやレスポンシブデザインを選ばない理由はほとんど無いかもしれません。

 

残るはSEO対策としてどうかという点ですが、以下のサイトを見る限りGoogle側もレスポンシブデザインの優位性を強調しています。

参考リンク▶レスポンシブ ウェブ デザイン - ウェブマスター向けモバイルガイド

 

現状では全ての部分をチェックできているわけではないので、あくまで現時点での考察となりますが、また新たに気づいたことがあれば追記したいと思います。

 

私の知識量に対してテーマが少し大きくなってしまったので、内容についての誤りや分かりにくい点などがありましたら、コメント欄等でご指摘頂ければ幸いです。

 

スポンサーリンク

Copyright © 2016 Shine Blog All rights reserved.