フォントサイズが小です　-　モバイルユーザビリティ　-　Google Search Console の使い方　-　SEO対策

Google　Search Console　モバイルユーザビリティの問題　対処法　フォントサイズが小です

フォントサイズが小です

このレポートには、フォントサイズが小さすぎて読みにくく、読むためにはモバイルユーザーがピンチ操作をして拡大する必要があるページが示されます

ウェブページのビューポートを指定した後にフォントサイズを設定して、ビューポート内で適切にスケーリングします

フォントサイズに関するベストプラクティスについて詳しくは、読みやすいフォントサイズを使用するをご覧ください

「モバイルユーザビリティ - Search Console ヘルプ」より

読みやすいフォントサイズを使用する

このルールは、ページ内のテキストが小さすぎて読みにくいことを PageSpeed Insights が検出した場合にトリガーされます

概要

ウェブのフォントサイズは 4 つの一般的な単位（ピクセル（px）、ポイント（pt）、EM（em）、パーセント（%））で指定できます

•		ピクセルは「CSS ピクセル」で、端末のサイズや密度によって異なります
•		ポイントはピクセルとの関連で定義されます 1 ピクセルは 0.75 ポイントです（※．「その他の情報」をご覧ください）
•		EM とパーセントは「相対的」な単位です使用されるフォントの継承されたサイズとプロパティに対して相対的です 1 EM は 100 % に相当します

さらに、ビューポートが携帯端末のフォントの拡大縮小に影響を与えます
ビューポートが適切に設定されていないページは携帯端末上で縮小され、ページ内のテキストのサイズが小さくなって読みにくくなることがよくあります

推奨される解決方法

まず、さまざまな端末でフォントが期待どおりに拡大縮小されるように、ビューポートを設定します
ビューポートを設定したら、以下の追加の推奨事項を実装します

1.		16 CSS ピクセルの基本フォントサイズを使用します使用するフォントのプロパティに基づいて、必要に応じてサイズを調整します
2.		基本サイズに対して相対的なサイズを使って、フォントの拡大縮小を定義します
3.		テキストは文字間に縦方向のスペースが必要であり、フォントごとに調整する必要がある場合があります一般的には、ブラウザのデフォルトの行の高さ 1.2 em をおすすめします
4.		使用されるフォントの数と拡大縮小を制限しますフォントの種類やサイズが多すぎると、乱雑で複雑すぎるページレイアウトになります

たとえば、次の CSS スニペットでは、基準フォントサイズとして 16 CSS ピクセルを定義し、フォントサイズが基準フォントの 75 %（12 CSS ピクセル）の「small」という CSS クラスと、125 %（20 CSS ピクセル）の「large」という CSS クラスを定義しています:

body {
font-size: 16px;
}

.small {
font-size: 12px; /* 75% of the baseline */
}

.large {
font-size: 20px; /* 125% of the baseline */
}

その他の情報（※）

長さの単位の定義を理解するには、CSS 2.1 仕様を慎重に読む必要があります
仕様には、インチ、センチメートル、ミリメートル、パイカなど、この記事で取り上げていない他の単位も登場します
見落としやすいのは、CSS インチは物理的なインチと常に等しいとは限らない点です

絶対的な単位はすべて、相互に相対的な値が定義されています
1 ピクセルは .75 ポイント、1 ポイントは 1/72 インチ、1 インチは 2.54 センチメートルといった具合です
しかし、これらの単位をどのように「固定」するかは、端末によって異なります
たとえば、紙に印刷する場合、1 インチは物理的な 1 インチに固定され、それ以外の単位は物理的なインチに対して相対的になります
しかし、携帯端末に表示されるときは、「参照ピクセル」という単位を使って固定します
1 CSS ピクセルはこの参照ピクセルに従って定義され、それ以外の単位（インチ、センチメートルなど）は CSS ピクセルに対して相対的に調整されます
そのため、携帯端末では通常、1 CSS インチは実際の物理的な 1 インチよりも小さいサイズで表示されます

このような理由から、フォントサイズはピクセルを使って定義することをおすすめします
デザイナーや開発者によっては、インチやポイントが使用されているのを見て誤解する場合もあります
これらは物理的なサイズですが、必ずしも実際のサイズに対応しているとは限らないからです
ピクセルなら、表示される端末に応じてサイズが変わることが常に理解されます

最後に、各フォントには、サイズやスペースなど、それぞれの特性があります
デフォルトでは、ブラウザには各フォントが 16 px（CSS ピクセル）で表示されます
これはほとんどの場合に適したデフォルトですが、特定のフォントでは調整が必要になります
つまり、フォントのさまざまなプロパティに対応するため、デフォルトサイズをこれより小さい値や大きい値に設定することができます
デフォルトサイズを設定したら、それより大きいフォントや小さいフォントを、ピクセルを使ってデフォルトに対して相対的に定義してください
これらのフォントは、ページのプライマリコンテンツ、セカンダリコンテンツ、その他のタイプのコンテンツのテキストサイズを調整するのに使用されます

一部のモバイルブラウザでは、適切に設定されたビューポートがないページでフォントを拡大縮小しようとする場合があります
この拡大縮小の動作はブラウザによって異なるため、携帯端末に読みやすいフォントを配信するためにこの動作に頼るべきではありません
PageSpeed Insights では、ブラウザ固有のフォントの拡大縮小を適用せずに、ページ上のテキストを表示します

「読みやすいフォントサイズを使用する PageSpeed Insights Google Developers 」より

PageSpeed Insights について｜ PageSpeed Insights ｜ Google Developers

Page Speed Insights では、携帯端末やデスクトップ端末向けのページのパフォーマンスを測定します
URL を 2 回（モバイルユーザーエージェントと PC ユーザーエージェントで 1 回ずつ）取得します

PageSpeed のスコアの範囲は 0～100 ポイントです
スコアが大きいほど良好で、85 以上のスコアはそのページのパフォーマンスが高いことを示します
なお、PageSpeed Insights は継続的に改良されているため、新しいルールの追加や分析の改良に伴ってスコアが変わることがあります

PageSpeed Insights では、次の項目について、ページのパフォーマンスをどの程度改善できるか測定します

スクロールせずに見える範囲のコンテンツの読み込み時間: ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間
ページ全体の読み込み時間: ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間
ただし、ネットワーク接続のパフォーマンスは大きく変動するため、PageSpeed Insights では、ページのパフォーマンスのうちネットワークに依存しない部分（サーバー設定、ページの HTML 構成、画像やJavaScript、CSS などの外部リソースの使用方法）のみを考慮します
提案された解決策を実装すれば、ページの相対的なパフォーマンスは改善されるはずです
ただし、それでも、ページの絶対的なパフォーマンスはユーザーのネットワーク接続に左右されます

各提案には、重要性を表す優先度インジケータが表示されます

アイコン	名前	説明
	赤色の感嘆符	この問題を修正すると、ページのパフォーマンスが大幅に改善されます
	黄色の感嘆符	それほど忙しくない場合はこの問題の修正を検討してください
	緑色のチェックマーク	大きな問題は見つかりません。パフォーマンスは良好です

PageSpeed Insights の最近の更新では、モバイルのパフォーマンス向上に力を入れています
詳細については、PageSpeed Insights のモバイル分析についての記事や、Google I/O 2013 で行われた素早いモバイルウェブサイトに関するプレゼンテーションをご覧ください
PageSpeed Insights で実行された分析の詳細なリストもご覧いただけます

フィードバックのお願い
Google では PageSpeed Insights に関する皆様からのフィードバックをお待ちしています
テストツールや推奨されたベストプラクティスについてご意見やご提案がある場合は、ディスカッショングループ（page-speed-discuss）に投稿してください

お問い合わせ
PageSpeed Insights についてご質問がある場合は、よくある質問をご覧いただくか、ディスカッショングループにメッセージを投稿してください

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

最終更新日: 4月 11, 2014

「 PageSpeed Insights について | PageSpeed Insights | Google Developers 」より

モバイルユーザビリティ　フォントサイズが小です

モバイルユーザビリティ　確認方法

Google　Search Console　モバイルユーザビリティの問題　対処法　フォントサイズが小です