attention admin about comments trackbacks you may also like

あなたのウェブページはモバイル フレンドリーですか?

2019年06月22日
レスポンシブ
0
FC2ブログ Google モバイルフレンドリー クリック可能な要素同士が近すぎます テキストが小さすぎて読めません

FC2ブロガーの皆さん。
Googleのツールの1つに「モバイル フレンドリー テスト」と言うものがありますが、ご自身のブログをそれでチェックしてみたことはありますか?
このテストツールは、ブログが「スマートフォン等のモバイル画面で最適に表示されているか」を確認出来るツールなんです。

その画面表示は、、、

こんな画面なんですが、そのURL欄にブログトップページとか記事ページのURLを入れて「URLをテスト」のボタンを押下するだけでテストが出来る簡単操作です。


ブロガーでしたら必須的に モバイル フレンドリー テスト をしてみましょう

モバイル フレンドリー テストの方法

そのツールは 【 モバイル フレンドリー テスト 】 にアクセスすると表示されますので、とりあえずはササッとテストしてみてください。

どうでした? 下図スクショのような良い結果になりましたか?

テスト結果はモバイル フレンドリーで合格表示

上のスクショのような結果でしたら良いんですが、下図スクショのような残念な表示がされる場合があるんです。

知らないと「このページはモバイルフレンドリーではありません」を引き起こす

テスト結果はモバイル フレンドリーではありませんの表示

ご自身のブログがもしこんな結果になってしまったら ( ̄□ ̄;)が~ん!!と顔面蒼白になってしまうことでしょう。

このページはモバイルフレンドリーではありません
  1. クリック可能な要素同士が近すぎます
  2. テキストが小さすぎて読めません
  3. ビューポートが設定されていません

これ、FC2ブログでは「ブログ運営者が起こしやすい設定ミス(知識を持たない為の設定ミス)」でこのようになってしまうので、気をつけなければなりませんね。

注意) 「 3. ビューポートが設定されていません」
これは、どのようなモバイルデバイス画面幅にも、最適にブログ表示させる為のテンプレート設計技術に関わる表示であるので、基本的にはテンプレート作者の範疇の作業のことであり、ブログ運営者が必要とする作業にはなりません。(ブログ運営者として出来る作業は、レスポンシブテンプレートを選択することが一番簡単な作業です)

FC2ブログはいろいろと自由度が高い為ミスも起こしやすい

FC2ブログって、他の何処のブログサービスよりも「ユーザーのWeb知識の習熟度合いにより、自由度が大きく解放されているブログサービス」なんですよね。 つまりは、利用するテンプレートのカスタマイズや記事編集に於いて ユーザーの持ち得るHTMLやCSS知識やJavaScript等を自在に駆使できる自由度がとても大きいブログサービスと言うことなんです。

だからこそ、ミスも起こしやすいとも言えますが、Web知識豊富な識者でしたらこのようなミスは起こしません(爆)
では、どんな設定ミスを行っているんでしょうか?

この設定は絶対にやってはいけません

利用するブログテンプレートが、パソコン用固定幅テンプレートスマートフォン版テンプレート の2部構成でブログ運営していて「スマートフォン版の表示設定を 無効にする」設定をすると「このページはモバイルフレンドリーではありません」が起きるんです。

例として、仮に筆者が下図のようなデザインの2カラムの パソコン用固定幅テンプレート でブログ運営をしていると仮定します。

ところが、この状態でブログをスマホで閲覧すると、全く別のデザインのスマートフォン版テンプレートで表示されてしまうので「そうだ! スマホからでも、パソコン版の気に入っているこのテンプレートのままで表示出来る設定にしたら良いじゃん ( ̄ー ̄)ニヤリ」と、FC2ブログ知識(笑)を駆使して、ほくそ笑みながら下図スクショのように設定してから、

パソコン用固定幅テンプレート利用で行ってはいけない誤った設定
スマートフォン版の表示設定を 無効にする設定画面

「ほらぁ、同じデザインで表示出来るようになったじゃん♪」と、してやったり!(笑)気分で、スマホ画面に表示される自身のブログを、下図スクショのように眺めることでしょう。 私って頭良いよね~(笑)って悦に入った気分で(爆)

パソコン版テンプレートのままでスマホ画面に表示されたブログの見え方

ほらほら、もくろみ通りに、みごとにパソコンでのブログ画面が、同じデザインでそのままギュ~っと小さなスマホ画面に押し込められておりますよね(笑)

ところが、スマホ画面をよく見ると当然のように「リンクがクリック(タップ)しにくいよね~・文字がちっちゃくて読みにくいよね~」って感じるんです。 自身だけでなく「閲覧者さんも当然そう感じる」のです(笑)
ですから、記事を読むには「スマホ画面をピンチアウト(指で画面を拡大する操作)しなくちゃ」ってことでその操作をして、それでやっとブログを読める状態になるのです。
閲覧中には、何度も何度もそのピンチアウトや逆のピンチインもしなくてはなりません(笑)

Googleはモバイルフレンドリー を推奨している

それをGoogleは「閲覧者さんにそんな操作を強いるのはダメ! それはユーザーフレンドリーではありません!」と判定する次第なんです。
閲覧ユーザーにそのような操作を強いるんではなくて「ブログ管理者側が表示をモバイル機器に最適化させてください」と言うことなんです。

つまりは「どんな画面幅のモバイルデバイス(機器)閲覧でも、それぞれの画面幅に自動的に見やすくフィットさせて閲覧出来るようなブログ構造にしてください」ということがモバイルフレンドリーと言うことなんです。 それはブログ管理者が実施するべきことなんです。

ブログをパソコンでもスマホでも同じデザインで最適化表示したい場合の設定

上記の「このページはモバイルフレンドリーではありません」の問題を解決し、尚かつ「パソコンでもスマホでも同じデザインで表示する簡単な方法がある」んです。それが「レスポンシブテンプレートを利用する」ことなんです。

レスポンシブテンプレート利用の時は必須設定です
スマートフォン版の表示設定を 無効にする設定画面

弊ブログでは、過去にもレスポンシブテンプレートに関わる記事をたくさん書いて来ましたので、カテゴリ 「レスポンシブ」 を下記ブログカードにまとめてありますので、クリックしてカテゴリ内の個々の記事をご参照ください。


Webテク倉庫

FC2ブログのレスポンシブテンプレートで初級Webテクニックを分かり易く解説するブログです。 カテゴリ「レスポンシブ


もしあなたが「このページはモバイルフレンドリーではありません」のブログ運営者でしたら、早急にそこから脱出しましょう。


スマホ画面を眺めてほくそ笑むブロガー

やっぱり
レスポンシブだと
読みやすいよね~♪


自身のブログを各種ツールで分析しましょう

ブログがスマホで正しく表示されるかテストする!
モバイル フレンドリー テスト

ブログのスマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

ブログのPC表示速度分析は GTmetrix が強力です!
GTmetrix

検索からの方はトップページへもどうぞ


関連する記事
ぼっちん
Author: ぼっちん
記事に関わらないコメントでもOKですからね~ ^^

コメント(0)

There are no comments yet.