『レスポンシブデザイン』と『モバイルユーザビリティ』の違いと『はてなブログ』での対応について

　最近、はてなブログのブロガーさんが、Google Serch Console の『モバイルユーザビリティ』でエラーになってしまっているということで、悩まれていたので、チェック方法とレスポンシブデザインの意味を紹介したいと思います。

　はてなブログは、デザイン→モバイル設置にレスポンシブデザインを設定するという機能がありますが、使用しているテーマによっては、『モバイルユーザビリティ』にならないです。
本来、PCとモバイルとで共有可能なデザインにするか、PCとモバイルとで別々のデザインにする必要があります。

　正直、デザインテーマの作者の説明不足か最悪、認識不足。もしくは「はてな」が作者に対する説明不足もしくは理解不足ではないかと思います。
こういったことは、サイト開発経験が十分にある人がデザインテーマするべきことなのですが...。

　では、基礎から順に説明しています(^^ゞ

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

はてなのレスポンシブデザインの設定の説明から

スマートフォンでもPCと同じデザイン設定でブログを表示します。レスポンシブデザインのテーマを設定しているときのみ使用してください。

Wikiから

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。
(中略)
RWDでデザインしたサイトは、比率ベースのフルードグリッド、フレキシブルイメージ@mediaルールの拡張であるCSS3メディアクエリを以下のように使用することで、レイアウトを表示環境に適応させる。
フルードグリッドは、ページ要素にピクセルやポイント等の絶対単位ではなく、百分率等の相対単位を使用する。
可変サイズの画像も、コンテナ要素の外にはみ出て表示されるのを防ぐため、相対単位を使用する。
メディアクエリにより、サイトを表示しているデバイスの特徴 (ブラウザの幅が最も一般的) に基づいて、ページに異なるCSSスタイルを使用することができる。

　ちょっとむずかしいですね！

　実際にレスポンシブデザインでPCとスマフォとの表示を並べてみると...

と、このように縮小された状態になるわけです。

2.『モバイルユーザビリティ』からみて、エラーとなるのは

　上のスマフォの画像のように表示されてしまうと、スマフォユーザーは使いづらいですよね！
このため、Googleは登録時に文字等のサイズ比率等を「スマフォユーザーが使いやすかどうか」等をチェックした際に、上の画像の表示の場合に以下のようなエラーを表示するのです。

3.『モバイルユーザビリティ』からみて、合格となるのは

　レスポンシブデザインを適用しない場合、「はてなブログ」はモバイル対応の標準デザインテーマを適用します。
NGのときのデザインより、なるかに使いやすいですよね！
これをGoogle Search Console でチェックすると

このように、合格となります(^o^)v

　つまり、『レスポンシブデザイン』と『モバイルユーザビリティ』はまったく意味が違うものだと、理解できたと思います。

しかし、WEBサイトデザインを専門にしているプロは、『レスポンシブデザイン』と『モバイルユーザビリティ』とで共有できるCSS等をデザイン・設計するのが、一般的です。
ただ、そういうデザインは、基本ベースが同じような感じになることが多く、ユーザー側の要望などで、PC,タブレットとスマフォサイズとで、デザインを分けることが多いです。

4.『はてなブログ』で『モバイルユーザビリティ』を実現し、オリジナリティを実現するためには

　はてなブログの無料版では、『モバイルユーザビリティ』でオリジナリティをモバイル表示で実現することはできません。
はてなブログのモバイル標準の表示を使うか、『モバイルユーザビリティ』に特化したデザインテーマを適用した後に、PC側のCSSに手を入れるのが現実的です。正直、面倒くさいですねw

　一方、プロ版では、PCとモバイルのCSSを別々に設定できるので、モバイル表示に対して手を加えることができます。

　よく出来たブログシステムでは、PC側のデザインテーマとモバイル側のデザインテーマは別々に設定できます。

5.モバイル表示の確認方法

　はてなブログの場合、

https://retiresaki.hatenablog.com/?device=touch
https://retiresaki.hatenablog.com/entry/2019/03/24/095100?device=touch

というように、URLの最後に『?device=touch』を付けることでモバイル表示の確認ができます。
または、ブラウザーのモバイルエミュレータなどのアドオンを導入します。

　Chromeでは、右クリック→検証を選択すると、『?device=touch』を付けなくても簡単に様々な画面サイズのスマフォ等の表示を確認することができます。

6.Gppgle Search Console で『モバイルユーザビリティ』の合否の確認と再リクエストの方法

　最後に『モバイルユーザビリティ』でエラーになってしました記事を再チェックし、再リクエストする方法を紹介します。

(1) Google Search Console のサイドメニューの『モバイルユーザビリティ』をクリックします。

(2) チェック・再リクエストしたいURLの行の「虫眼鏡マーク」をクリックします。

(3) しばらくすると、別の画面に切り替わりますので、「公開URLをテスト」をクリックします。

(4) テスト後、
　　● 不合格ならブログデザインの設定をし直したり、はてなブログのプロ版であればモバイルCSS等を変更し、最初からやり直します。
　　◎ 合格であれば、『フレンドリーです』と表示されるので、「URL 検査」をクリックします。

(5) 画面が切り替わったら、「インデックス登録をリクエスト」をクリックします。

　これで、インデックス登録のリクエストが完了しました。
混雑している場合、その旨の表示がされるので、指示に従います。

7.理想的な『モバイルユーザビリティ』デザイン

　Google Search Console のモバイルデザインを見てみたら、理想的なデザインでしたので、紹介します。

・PC画像

・モバイル画像

　このように、サイドメニューがある場合は、モバイルのメニュアイコンに格納するように、デザインされます。

　以上です。

このように、はてなブログの場合、有料無料に関わらず、多くの場合『レスポンシブデザイン』のチェックは外すべきです。
有料の場合は、『モバイルユーザビリティ』に適したCSSを探して当てはめるか、CSSを作成することができるので、チャレンジしてみるのも、良いかも知れませんね (^^)/