ブログのレスポンシブ対応でお悩みですか？
本記事では、ブログで必須なレスポンシブ対応の重要性を解説します。
この記事を読むと、ブログをレスポンシブ対応させつつ、SEO最適化する方法を理解できます。
レスポンシブとは、PC、タブレット端末、スマートフォンなど、どのデバイスでも、Webデザインを崩すことなく表示させる技術のこと。
たまに、レスポンシブ対応されてないサイトも散見されますが、、、「あ〜、Webの常識に欠けてるな〜」と思ったりです。謎の上から目線でウザいかもですが、レスポンシブ対応は常識ですよ。
特に、ブログ初心者さんは見落としガチなので、ブログにおけるレスポンシブ対応の重要性についてわかりやすく解説します。プログラミング知識は不要です、ご安心ください。
＼WordPressブログの始め方／
WordPressブログを始めるなら、僕も愛用する「エックスサーバー」一択ですよ。
- 初期費用が無料
- ドメイン2つまで永久無料
- 国内シェア&サーバー速度No.1【hostadvice.com（2024年）】
たったの月額ワンコインで始められます。10分でブログデビューしましょう！
-
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
【執筆者】
【ミヤビ：当サイトの編集長】
- ブログ歴３年
- ブログ収益７ケタ達成
- ブロガー/デジタルノマド
レスポンシブ対応とは？【Webデザイン最適化】
レスポンシブとは、ブログやLPなどのWebデザインを、どのデバイス端末でも崩れることなく表示させる技術のことです。
- パソコン：横に長いので、コンテンツは、複数（3つほど）のカラムで表示される
- スマホ：縦に長いので、コンテンツは、単一のカラムで、積み上げ式に表示される
スマホでパソコン画面を見たら、横幅が狭い分、見づらいですよね？
モバイル端末のWebデザインは、縦長に設計されてるハズです。なぜなら、PCのように横長じゃないから。
PC、タブレット、スマホ、どのデバイス端末でもWebデザインが崩れないよう、最適化する必要があります。これを「レスポンシブ対応」といいます。
※デザインの良し悪しもそうですが、何よりSEOに影響大です。Googleは、モバイル端末の利便性を特に重視してまして、ユーザー体験を損なうサイト設計は、マイナスです。
ブログをレスポンシブ対応すべき理由3つ
ブログも、レスポンシブ対応は必須です。
理由は、下記のとおり。
- 理由①：モバイルユーザーの増加
- 理由②：モバイルフレンドリーアップデート
- 理由③：ユーザー体験を損なう
レスポンシブ対応じゃないと、ユーザーとGoogleから嫌われます。それが嫌なら、レスポンシブ対応しましょう。
理由①：モバイルユーザーの増加
いうまでもなく、検索トラフィック量は「スマホ > PC」です。
SEOツールを提供するドイツのSISTRIX（シストリックス）社が行ったデバイス使用率の調査結果によると、下記が判明しています。
PC検索とモバイル検索の比率｜引用元：SISTRIX
やはり、スマホで検索するユーザーの方が多いようですね。
PC検索とモバイル検索の比率（国別）｜引用元：SISTRIX
さらに、国別の調査によると、日本は「75%」がモバイル検索するようですね。世界と比べてみても、スマホで調べる人の割合が高いようです。
調査結果から、わかること
ブログなどのWebサイトは、レスポンシブ対応が必須ということ。
スマホに最適化されてないと、ユーザー体験を損います。よって、サイトを訪れては即離脱され、平均滞在時間も悪くなり、SEO評価が下がります。
理由②：モバイルフレンドリーアップデート
2015年4月21日より「モバイルフレンドリーアップデート」が実施されてます。
1.検索結果にもっとモバイル-フレンドリーなウェブサイトを
Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。この変更によって、検索ユーザーは、クエリへの関連性が高く使用端末にも適した高品質な検索結果を見つけやすくなります。引用元：Google検索セントラル｜検索結果をもっとモバイル フレンドリーに
- モバイル端末のみ検索順位に影響する
- 世界中のすべての言語で検索結果に影響する
- ウェブサイト全体ではなく、個々のページが対象
こーいったアプデ内容です。
2015年からGoogleは対策に乗り出してますが、レスポンシブ知識のない人は、もはや「オワコン」です。ブログだけでなく、Web制作・デザイン関係者もです。
もちろん、現代は便利でして「NoCode（ノーコード）」をいうプログラミング不要のサイト制作ツールも出てきており、レスポンシブもサクッと実装できます。
理由③：ユーザー体験を損なう
モバイルフレンドリーでないサイトは、見づらくて使いにくい。
文章を読むために、わざわざ「ズーム」「ピンチ」をしてたら、ストレスですよね？ぶっちゃけ、即離脱です。
コンテンツ制作者は、ユーザーに対して「おもてなし」を目指すべきでして、サイトがレスポンシブ対応されてるのは、もはや「当たり前」です。
記事を訪れた読者に、少なくともデザインで不快を与えないことは、とても、とても、重要です。それは、記事を読む以前の問題でして、無料サービスとして奉仕すべきかと。
ブログでレスポンシブ対応する具体例3つ
Webサイトにおけるレスポンシブ対応の重要性を理解できたと思います。
しかし、ブログをレスポンシブ対応させる方法について、モヤっとしてますよね？
本来、サイト構築する際は、手書きでレスポンシブコードを書きますが、現代は不要です。というわけで、ブロガー向けに、レスポンシブ対策の方法論を解説します。
前提：WordPressブログを使おう
あなたのブログは、WordPressですか？
もしそうでないなら、収益化に最適で、カスタマイズ性も抜群な「WordPressブログ」をおすすめします。
WordPressのシェアは、全ウェブサイトの43.2%、CMSの65.2%です。世界でも日本でも圧倒的No.1でして、とりま、ブログといったらWordPress一択ですね。
詳しくは【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】をどうぞ。
-
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
有料テーマを導入しよう
WordPressとセットで「有料テーマ」も導入しましょう。SEO対策はもちろん、デザインもレスポンシブ対応でバッチリです。
- 1位：AFFINGER6←有料テーマで悩んでるなら、迷わずコレ一択！
- 2位：THE・THOR←オシャレで美しく、SEO対策に特化したテーマ！
- 3位：SANGO←デザイン重視のサイト設計におすすめ！「ConoHa WING - WINGパック」経由で申し込むと「1,000円」ほど割引！
上記の有料テーマをチョイスしておけば、シンプルに「無難」です。
初期費用は発生しますが、ここをケチる人はブログで稼げません。詳しくは【初心者】WordPressでおすすめな有料テーマ7つ比較【AFFINGER6一択】をどうぞ。
-
-
【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】
続きを見る
具体例①：表
レスポンシブデザインで大切なのが「表」ですね。
| ヘッダー | ヘッダー | ヘッダー | ヘッダー | |
|---|---|---|---|---|
| 項目A | AAA | aaa | A'A'A' | a'a'a' |
| 項目B | BBB | bbb | B'B'B' | b'b'b' |
| 項目C | CCC | ccc | C'C'C' | c'c'c' |
See the Pen
Untitled by miyavi-is-apple (@miyavi-is-apple)
on CodePen.
なお、AFFINGER6をお使いの場合、Tableタグを「<div class="scroll-box pc"></div>」で囲むと、自動的にレスポンシブ対応になります。
スマホの場合、横スクロールになっているのが、お分かりいただけるかと。このように、表はレスポンシブ対応させましょう。
具体例②：画像
画像もレスポンシブ対応させましょう。画像ファイルが大きすぎると、サイト速度の遅延につながります。何度もいいますが、スマホ表示が最優先ですよ。
- NG：画像の横幅←1920px
- OK：画像の横幅←700px
たった、横幅400pxほどのスマホ画面ですから、バカでかい画像は必要ありません。無駄です。画像は凝縮されれば、高画質に見えますので。
僕の場合、パソコンでも画像が荒くならないよう、横幅「700px」で統一。重さは、数十KBほど。サクサクです。
パソコンユーザーのストレスを減らしつつ、スマホユーザーの快適さに応えてます。こーいった姿勢が大切かと。
WordPressのプラグイン「EWWW Image Optimizer」を使うと、画像ファイルを好きな大きさに圧縮できます。画像圧縮されてないサイトをよく見かけますが、オワコンですね...
画像の適切なサイズ感については【簡単】ブログ画像の適切なサイズ・容量とは？【最適化・圧縮化のススメ】をご覧ください。
具体例③：サイト速度
ユーザーは「3秒」すら、待てない生き物です。論より証拠、下記の調査結果をどうぞ。
- 1〜3秒：直帰率「32%」
- 1〜5秒：直帰率「90%」
- 1〜6秒：直帰率「106%」
- 1〜10秒：直帰率「123%」
ページ読み込み速度が「3秒」オーバーすると、一気に離脱率が上がります。
サイトスピードは、Googleが無料提供する「Page Speed Insights」が有名です。とはいえ、スマホの基準は厳しめなので、70点以上であれば、問題ありません。
ブログの表示速度は「SEO」で重要です。改善方法は【13個】WordPressブログの表示速度を高速化する方法【プラグインなしで実現】をどうぞ。
レスポンシブ対応じゃないブログはオワコンです
本記事では、ブログで必須な「レスポンシブ対応」の重要性を解説しました。
- 理由①：モバイルユーザーの増加
- 理由②：モバイルフレンドリーアップデート
- 理由③：ユーザー体験を損なう
レスポンシブ対応でないWebサイトは、ユーザーとGoogleの検索体験を損ない、SEOでマイナスです。検索ユーザーの多いスマホ設計に、フォーカスしてください。
レスポンシブWebデザインは、Googleの推奨構成です。ここを無視する人は、相手目線に立てないので、ビジネスでも成果は出しづらいかと。
Googleの掲げる第一信念「ユーザーに焦点を絞れば、他のものはみな後からついてくる」こそ、まさに「本質」ですね。
モバイルフレンドリーサイトを確認する方法
Googleサーチコンソールが提供する「モバイルフレンドリーテスト」を使えば、あなたのサイトが「モバイルフレンドリー」かどうかを確認できます。
使い方は、カンタン。サイトURLを入力するだけ。
試しに、使ってみましょう。
質問：レスポンシブデザインをどーやって学べますか？
Webデザインの領域を学んでみましょう。
- HTML/CSS
- NoCodeツール
この辺りを学んでみてください。HTMLやCSSはググれば無料で学べる時代です。プログラミングスクールに通うほどではないため、独学でスキル習得できますよ！
手っ取り早くレスポンシブ対応にする方法
-
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
-
-
【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】
続きを見る
