kamenokoki.com

「テキストが小さすぎて読めません」とGoogleに指摘された時の対処法

Posted:  Last Update:

Google Search Consoleの「モバイル ユーザビリティ」で「テキストが小さすぎて読めません」という指摘を受けたけど、どう対処すればいいの?そんな時は、ビューポートを設定するだけで簡単に解決できます!ビューポートの設定方法をご紹介するとともに、ビューポートの設定で表示が崩れてしまった時の対処法もご紹介します。

Google Search Consoleの「モバイル ユーザビリティ」

モバイルユーザビリティとは

「モパイルユーザビリティ」とは、タブレットやスマホでのページの使い勝手の良し悪しのことです。

パソコンでサイトを製作していると、なかなかスマホ画面での表示を確かめる機会はないと思います。しかし、最近ではスマホからWEBサイトを閲覧する方も多いので、モバイル端末でも使い勝手のいいページにしたほうがよさそうです。

モバイルユーザビリティが悪い例

筆者はHTMLとCSS、PHPでサイトを自作しています。Google Search Consoleに登録して数日後から、「モバイル ユーザビリティ」について色々と指摘を受けました。

そのとき、作成したページはスマホではこのように表示されていました。スマホ画面で見ることを想定すると、右のナビゲーションバーの内容などは小さすぎて内容が全く分からない状態です。

モバイルユーザビリティが悪い例

PCからスマホ画面での表示を確認する方法

自分のサイトがどのようにスマホで表示されているか、PCからでも確認ができます。ここではGoogle Chromeを例に確認方法をご紹介しますが、多くのブラウザも手順は同じです。

  1. 自分のサイトをブラウザで表示して右クリック
  2. 表示されたメニューから最下部の「検証」をクリック
  3. コンソールの左上にある「Toggle Device Toolbar」をクリック
    PCからスマホ画面での表示を確認する方法-1

異なる画面幅で確認したいときは、画面中央上部から表示端末を切り替えてみてください。

PCからスマホ画面での表示を確認する方法-2

「テキストが小さすぎて読めません」の対処法

では、「テキストが小さすぎて読めません」とGoogle Search Consoleに指摘された時にはどのように対応すればいいのでしょうか。

Googleの案内は英語…

モバイルユーザビリティが良くない場合の対処法については、Googleのヘルプページ「モバイル フレンドリー テストツール」の「エラーの一覧」にまとめられています。しかし、困ったことに「テキストが小さすぎて読めません」の対処法のページは英語ページに飛びます(2020年10月現在)。

「テキストが小さすぎて読めません」を一発解消する「ビューポート」の設定方法

英語のGoogleのページ内容を要約すると「ビューポートをメタデータに設定しなさい」というものです。

実際の対処法がこちら。HTMLのheadの間に、「<meta name="viewport" content="width=device-width, initial-scale=1">」という一文を入れるだけです。簡単ですね。

<!DOCTYPE html>
<html lang="ja">
<head>
 …
<meta name="viewport" content="width=device-width, initial-scale=1">
 …
</head>

ビューポートの設定を入れるとスマホページの表示が崩れてしまう時の対処法は後ほどご紹介します。

ビューポートとは?

さて、設定したばかりのビューポートですが、いったいどんなものなのでしょうか?

スマホには画面解像度と表示解像度がある

理解のために、PCやタブレット、スマホの画面幅について少しご説明します。画面の解像度の横幅は、PCなら2500px以上のものもあり、タブレットなら750~1600px程度。スマホでは600px~2000px以上と幅があります。スマホは小さな画面でありながら、PC並みの画面が解像度を誇る端末もあるんですね。

画面解像度を考えると、スマホの小さな画面にPCと同じページを表示させることも可能です。しかし、小さな画面にPCと同じ内容を表示されても読めません。そこで端末に設定されているのが「dp(density-independent pixels)」です。

「dp」は「実際の解像度は横幅1200pxだけど、表示は横幅400pxで読み込むよ」と端末側で設定するものです。「表示解像度」とここでは呼びましょう。「表示解像度」横幅400pxで読み込めば、小さなスマホ画面でも文字も読みやすい大きさになります。

スマホ表示解像度に合わせるのが「ビューポート」

ここで、先ほど設定したビューポートをもう一度見てみましょう。「width=device-width」という一文が入っていました。これは、「画面幅をスマホ端末の表示解像度に合わせる」という規定です。

<meta name="viewport" content="width=device-width, initial-scale=1">

ビューポートを設定していない場合には、画面解像度にあわせて表示されてしまうページ。ビューポートを設定することで、表示解像度で表示されるようになります。

また、スマホの縦画面と横画面ではページの横幅が違います。横画面にすると横幅は広くなりますが、端末によっては回転したときにも縦画面と同じ横幅を使うものもあります。このとき、画面幅が広くなっているので、必然的にページが拡大表示されてしまいます。「initial-scale=1」を設定すると、画面幅を正しく認識し、端末を回転したときにもその横幅に合わせて表示をしてくれるようになります。

ビューポートの設定で表示が崩れてしまう時の対処法

ビューポートを設定すると、表示される文字は大きくなりました。しかし、PCで作成していた画面の表示が崩れてしまうこともあります。実際に筆者のサイトも大幅に表示が崩れて、下の画像のような悲惨な状態になってしまいました。

ビューポートの設定で表示が崩れてしまう時の対処法

対処法としては、スマホ画面に対応できる設定を入れ込む必要があります。ここで役立つのが、「media属性」というスタイルシートです。例として、下記スタイルシートでは小見出しの「h1」の文字の大きさや余白を画面幅に応じて変更しています。「max-width: 600px」で600px以下の画面での表示、「min-width: 601px」で601px以上の画面での表示を指定しました。

@media (max-width: 600px) {
h1 {
  font-size: 1.5em;
  padding: 30px 0;
 }
}
@media (min-width: 601px) {
h1 {
  font-size: 2.0em;
  padding: 30px 50px;
 }
}

この対応については、面倒ですが、ひとつひとつの要素を確認しながら変更していくしかありません。変更中もサイトを公開し続けたい場合の対応法は次の小見出しで紹介しています。

スマホ対応移行期のビューポート設定

上で根本的な対処法をご紹介しましたが、対処中にもページを公開しておきたい方もいると思います。しかし、ビューポートの設定を外してしまうと、スマホ画面では読みにくい画面になります。

そんなときには、一時的に最小画面幅を設定してしまいましょう。下記のようにビューポートの設定を変えることで、画面幅が600px以上の時は画面幅に合わせて、画面幅が600px以下の時は600pxで表示されるようになります。

<meta name="viewport" content="width=600">

この設定で、スマホで表示しても文字は小さくなり過ぎず、かつレイアウト崩れは起こさずに表示可能です。適した画面幅はページによって異なりますので、「width=600」の数字を変えて適した画面幅を選んでみてください。

なお、この設定ではGoogle Search Consoleの「モバイル ユーザビリティ」に合格することはできません。あくまでも、「<meta name="viewport" content="width=device-width, initial-scale=1">」に変更する間の一時的な対処法です。最終的には「@media」を利用して、スマホ表示にも対応できるページに変更しましょう。

まとめ

今回は「テキストが小さすぎて読めません」の対処法をご紹介しました。Google Search Consoleの「モバイル ユーザビリティ」に他のエラーが出た場合にも利用できる対処法ですので、参考にしてみてください。

ちなみに、筆者がGoogle Search Consoleのモバイルユーザビリティで受けた指摘は以下の通り。全ての指摘を網羅しているのではないかと思うほどの指摘量です。「<meta name="viewport" content="width=device-width, initial-scale=1">」の設定でエラーは表示されなくなりました。

  1. ビューポートが設定されていません
  2. テキストが小さすぎて読めません
  3. クリック可能な要素同士が近すぎます
  4. ビューポートが「デバイスの幅」に収まるよう設定されていません
  5. コンテンツの幅が画面の幅を超えています

この記事がサイトを自作している同志の方のお役に立てば幸いです。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

RELATED

サーチエンジン対策 ・HTMLの小技集 ・全記事表示 

広告