SEO内部対策 SEO対策

【必須】レスポンシブ対応じゃないブログはオワコンです【プログラミング不要】

2022年11月29日

【必須】レスポンシブ対応じゃないブログはオワコンです【プログラミング不要】
ミヤビ

ブログってレスポンシブ対応にすべきですか?最近よく聞くけど、そもそも、レスポンシブって何だろう...?レスポンシブ対応の重要性や理由、具体例を教えてください。

こんなお悩みを解決します。

本記事の内容

  • レスポンシブとは?【Webデザイン最適化】
  • ブログをレスポンシブ対応すべき3つの理由
  • ブログでレスポンシブ対応する具体例3つ
  • レスポンシブ対応じゃないブログはオワコンです

この記事を書いてる僕は、ジョージアで暮らすデジタルノマド。ブログ歴は3年ほどでして、ブログの最高月収は20万円です。

ブログのレスポンシブ対応でお悩みですか?

本記事では、ブログで必須なレスポンシブ対応の重要性を解説します。

この記事を読むと、ブログをレスポンシブ対応させつつ、SEO最適化する方法を理解できます。

レスポンシブとは、PC、タブレット端末、スマートフォンなど、どのデバイスでも、Webデザインを崩すことなく表示させる技術のこと。

たまに、レスポンシブ対応されてないサイトも散見されますが、、、「あ〜、この企業は、Webの常識に欠けてるな〜」と思ったりです。謎の上から目線でウザいかもですが、レスポンシブ対応は常識ですよ。

特に、ブログ初心者さんは見落としガチなので、ブログにおけるレスポンシブ対応の重要性についてわかりやすく解説します。プログラミング知識は不要です、ご安心ください。

レスポンシブとは?【Webデザイン最適化】

レスポンシブとは?【Webデザイン最適化】

レスポンシブとは、ブログやLPなどのWebデザインを、どのデバイス端末でも崩れることなく表示させる技術のことです。

  • パソコン:横に長いので、コンテンツは、複数(3つほど)のカラムで表示される
  • スマホ:縦に長いので、コンテンツは、単一のカラムで、積み上げ式に表示される

スマホでパソコン画面を見たら、横幅が狭い分、見づらいですよね?

モバイル端末のWebデザインは、縦長に設計されてるハズです。なぜなら、PCのように横長じゃないから。

PC、タブレット、スマホ、どのデバイス端末でもWebデザインが崩れないよう、最適化する必要があります。これを「レスポンシブ対応」といいます。

※デザインの良し悪しもそうですが、何よりSEOに影響大です。Googleは、モバイル端末の利便性を特に重視してまして、ユーザー体験を損なうサイト設計は、マイナスです。

ブログをレスポンシブ対応すべき3つの理由

ブログをレスポンシブ対応すべき3つの理由

ブログも、レスポンシブ対応は必須です。
理由は、下記のとおり。

  • 理由①:モバイルユーザーの増加
  • 理由②:モバイルフレンドリーアップデート
  • 理由③:ユーザー体験を損なう

レスポンシブ対応じゃないと、ユーザーとGoogleから嫌われます。それが嫌なら、レスポンシブ対応しましょう。

理由①:モバイルユーザーの増加

いうまでもなく、検索トラフィック量は「スマホ > PC」です。

SEOツールを提供するドイツのSISTRIX(シストリックス)社が行ったデバイス使用率の調査結果によると、下記が判明しています。

PC検索とモバイル検索の比率

PC検索とモバイル検索の比率|引用元:SISTRIX

やはり、スマホで検索するユーザーの方が多いようですね。

PC検索とモバイル検索の比率(国別)

PC検索とモバイル検索の比率(国別)|引用元:SISTRIX

さらに、国別の調査によると、日本は「75%」がモバイル検索するようですね。世界と比べてみても、スマホで調べる人の割合が高いようです。

 調査結果から、わかること

ブログなどのWebサイトは、レスポンシブ対応が必須ということ。

スマホに最適化されてないと、ユーザー体験を損います。よって、サイトを訪れては即離脱され、平均滞在時間も悪くなり、SEO評価が下がります。

理由②:モバイルフレンドリーアップデート

2015年4月21日より「モバイルフレンドリーアップデート」が実施されてます。

1.検索結果にもっとモバイル-フレンドリーなウェブサイトを

Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。この変更によって、検索ユーザーは、クエリへの関連性が高く使用端末にも適した高品質な検索結果を見つけやすくなります。引用元:Google検索セントラル|検索結果をもっとモバイル フレンドリーに

  • モバイル端末のみ検索順位に影響する
  • 世界中のすべての言語で検索結果に影響する
  • ウェブサイト全体ではなく、個々のページが対象

こーいったアプデ内容です。

2015年からGoogleは対策に乗り出してますが、レスポンシブ知識のない人は、もはや「オワコン」です。ブログだけでなく、Web制作・デザイン関係者もです。

もちろん、現代は便利でして「NoCode(ノーコード)」をいうプログラミング不要のサイト制作ツールも出てきており、レスポンシブもサクッと実装できます。

理由③:ユーザー体験を損なう

モバイルフレンドリーでないサイトは、見づらくて使いにくい。

文章を読むために、わざわざ「ズーム」「ピンチ」をしてたら、ストレスですよね?ぶっちゃけ、即離脱です。

コンテンツ制作者は、ユーザーに対して「おもてなし」を目指すべきでして、サイトがレスポンシブ対応されてるのは、もはや「当たり前」です。

記事を訪れた読者に、少なくともデザインで不快を与えないことは、とても、とても、重要です。それは、記事を読む以前の問題でして、無料サービスとして奉仕すべきかと。

ブログでレスポンシブ対応する具体例3つ

ブログでレスポンシブ対応する具体例3つ

Webサイトにおけるレスポンシブ対応の重要性を理解できたと思います。

しかし、ブログをレスポンシブ対応させる方法について、モヤっとしてますよね?

本来、サイト構築する際は、手書きでレスポンシブコードを書きますが、現代は不要です。というわけで、ブロガー向けに、レスポンシブ対策の方法論を解説します。

  • 具体例①:表
  • 具体例②:画像
  • 具体例③:サイト速度

前提:WordPressブログを使おう

あなたのブログは、WordPressですか?

もしそうでないなら、収益化に最適で、カスタマイズ性も抜群な「WordPressブログ」をおすすめします。

WordPressのシェアは、全ウェブサイトの43.2%、CMSの65.2%です。世界でも日本でも圧倒的No.1でして、とりま、ブログといったらWordPress一択ですね。

詳しくは【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】をどうぞ。

【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】

WordPressブログの始め方を知りたいですか?本記事では、WordPressブログの始め方やブログの全体像、開設後の初期設定やよくある質問にお答えします。たった10分でブログを始められますよ。

続きを見る

 有料テーマを導入しよう

WordPressとセットで「有料テーマ」も導入しましょう。SEO対策はもちろん、デザインもレスポンシブ対応でバッチリです。

  • 1位:AFFINGER6←有料テーマで悩んでるなら、迷わずコレ一択!
  • 2位:THE・THOR←オシャレで美しく、SEO対策に特化したテーマ!
  • 3位:SANGO←デザイン重視のサイト設計におすすめ!「ConoHa WING - WINGパック」経由で申し込むと「1,000円」ほど割引!

上記の有料テーマをチョイスしておけば、シンプルに「無難」です。

初期費用は発生しますが、ここをケチる人はブログで稼げません。詳しくは【初心者】WordPressでおすすめな有料テーマ7つ比較【AFFINGER6一択】をどうぞ。

【初心者】WordPressでおすすめな有料テーマ7つ比較【AFFINGER6一択】
【初心者】WordPressでおすすめな有料テーマ7つ比較【AFFINGER6一択】

WordPressでおすすめな有料テーマを知りたいですか?本記事では、ブログ収益化に必須なWordPressおすすめ有料テーマを7つ厳選し、徹底比較しました。ブログで稼ぎたいなら、ポチりましょう。

続きを見る

具体例①:表

レスポンシブデザインで大切なのが「表」ですね。

ヘッダー ヘッダー ヘッダー ヘッダー
項目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点以上であれば、問題ありません。

>> Page Speed Insights

レスポンシブ対応じゃないブログはオワコンです

レスポンシブ対応じゃないブログはオワコンです

本記事では、ブログで必須なレスポンシブ対応の重要性を解説しました。

  • 理由①:モバイルユーザーの増加
  • 理由②:モバイルフレンドリーアップデート
  • 理由③:ユーザー体験を損なう

レスポンシブ対応でないWebサイトは、ユーザーとGoogleの検索体験を損ない、SEOでマイナスです。検索ユーザーの多いスマホ設計に、フォーカスしてください。

レスポンシブWebデザインは、Googleの推奨構成です。ここを無視する人は、相手目線に立てないので、ビジネスでも成果は出しづらいかと。

Googleの掲げる第一信念「ユーザーに焦点を絞れば、他のものはみな後からついてくる」こそ、まさに「本質」ですね。

 モバイルフレンドリーサイトを確認する方法

Googleサーチコンソールが提供する「モバイルフレンドリーテスト」を使えば、あなたのサイトが「モバイルフレンドリー」かどうかを確認できます。

使い方は、カンタン。サイトURLを入力するだけ。

試しに、使ってみましょう。

>> モバイルフレンドリーテスト

質問:レスポンシブデザインを学べきですか?

余裕があれば、学んでみましょう。
経験より、おすすめです。

  • HTML/CSS
  • NoCodeツール

この辺りを学んでみてください。詳しくは【未経験】WEBデザイン学習の独学ロードマップで解説してます。

 手っ取り早くレスポンシブ対応にする方法

【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】

WordPressブログの始め方を知りたいですか?本記事では、WordPressブログの始め方やブログの全体像、開設後の初期設定やよくある質問にお答えします。たった10分でブログを始められますよ。

続きを見る

【初心者】WordPressでおすすめな有料テーマ7つ比較【AFFINGER6一択】
【初心者】WordPressでおすすめな有料テーマ7つ比較【AFFINGER6一択】

WordPressでおすすめな有料テーマを知りたいですか?本記事では、ブログ収益化に必須なWordPressおすすめ有料テーマを7つ厳選し、徹底比較しました。ブログで稼ぎたいなら、ポチりましょう。

続きを見る

  • この記事を書いた人
  • 最新記事

ミヤビ

ブログ・アフィリエイト・AIを愛するデジタルノマド|海外移住のため皇室を去る|日本⇄ジョージア⇄トルコ⇄ASEANで永久機関生活|ブログ歴3年→ブログ最高月収20万|普段はイスタンブールに隠遁しつつ、徒然なるままに日暮し365日ブログを書いてます|ブログで「ゆとり」ある人生設計を発信します。

-SEO内部対策, SEO対策
-