「はてなブログ」レスポンシブデザインのメリット・変更時の注意点

ここ数日間、当ブログのデザインをカスタマイズしていました。

最大の変更点は「レスポンシブデザイン」の導入です。

今回は「はてなブログ」におけるレスポンシブデザインのメリットや変更時の注意点などをまとめました。

レスポンシブデザインとは

はてなブログをスマホやタブレットなどのモバイル端末から見た場合、通常はPCと異なるデザインで表示されます。

トップに丸いアイコン、白背景にテキストのみの見出しと、とてもシンプルなデザインです。

ひと目で「はてなブログだ！」とわかります。

一方、「レスポンシブデザイン」では、Webサイトのデザイン設定をデバイスごとに分けずに、PC、スマホ、タブレットすべてで共通の設定を使用します。

モバイル端末では単にPC版を縮小表示するのではなく、画面の幅に合わせて自動的にレイアウトされ、サイドバーの部品は記事の下に表示されます。

はてなブログでは一部のテーマがレスポンシブデザインに対応しており、テーマのインストール後に設定を有効化することでモバイル端末の表示にも反映されます。

PCでの表示例

スマホでの表示例

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

モバイル端末での表示を個性的に

対応テーマに変更してレスポンシブデザインを有効化するだけでも、標準のスマホ版とは異なる個性的なデザインにできます。

背景画像や見出しのデザインを変更すれば、オリジナリティを更に高めることができます。

見出しの表示を強調することで、記事の段落がわかりやすくなるメリットもあります。

PC・モバイル端末のデザインをまとめて管理

レスポンシブデザインの導入後は、PC、モバイル端末のデザイン設定を一元管理できます。

デザインを変更する際、1箇所の設定で済むので作業が楽になります。

Google推奨のため安心して使える

検索エンジンからのアクセスアップを目指す場合、Googleの意向は重要です。

Googleはモバイルサイトの構成方法としてレスポンシブデザインを推奨しています。

Responsive Web Design  |  Search  |  Google Developers

はてなブログ標準のスマホ版表示でも問題はないため、レスポンシブデザインへの変更でGoogleからの評価が特別向上することはないと思いますが、推奨デザインなので安心して導入することができます。

レスポンシブデザインのデメリット・注意点

常にPC・モバイル両方を考慮して設定する必要がある

デザインが共通化されるため、変更時はPC・モバイル両方の表示を考慮する必要があります。

「この部分はPCのみで表示する」といったことが難しくなり、デザインの自由度が制限される場合があります。

また、Google AdSenseを導入している場合は広告ユニットのサイズにも注意が必要です。

横幅の大きい広告ユニットでは、スマホで表示した際に画面からはみ出てしまいます。

現在当ブログでは、各デバイスで最適なサイズで表示される「レスポンシブ」と、336x280の「レクタングル（大）」を使用しています。

ページの表示速度に注意

モバイル端末は通常、PCよりも処理能力が低く回線速度も遅いです。

画像やスクリプトの使い方によっては、モバイルでの表示速度に影響が出る可能性があります。

画像のサイズ・容量は必要以上に大きくせず、スクリプトも表示速度を意識しながら組み込む必要があります。

表示の遅いページは読者にとってストレスですし、Googleからの評価にも影響するそうです。

スマホアプリで正しくプレビューできない

はてなブログのiPhone版アプリで記事をプレビューする際、レスポンシブテーマではなく標準のテーマで表示されます。

記事を公開するまで、テーマ適用状態の表示を確認できません。

※Android版は未確認です。

当ブログのテーマは「Innocent」に

はてなブログで使用可能なテーマは、レスポンシブ対応のものと非対応のものがあります。 対応状況については、各テーマの紹介ページで確認できます。

当ブログでは、半月さんが公開されている「Innocent」を導入させていただきました。

シンプルでカスタマイズしやすく、ナビゲーションバー（当ブログ上部のグレー部分）やパンくずリスト（記事上部のカテゴリー階層表示）の設定方法も詳しく解説されています。

見出しのデザインを少しカスタマイズするだけで、好みのデザインを実現することができました。

カスタマイズの結果はすべて、モバイル端末での表示にも反映されています。

レスポンシブデザインの有効化

レスポンシブ対応テーマに変更するだけでは、モバイル版の表示は以前のままです。

ブログ管理画面より[デザイン]を開き、右列（スマートフォン）最下部の[詳細設定]→[レスポンシブデザイン]にチェックし、[変更を保存する]で、モバイル版のテーマが変更されます。

まとめ

はてなブログにレスポンシブデザインを導入すると、PC版のデザイン変更と同時にモバイル端末での表示もカスタマイズできるようになります。

モバイル端末での表示にもこだわりたい方は、導入してみてはいかがでしょうか。

はてなブログ関連の記事