ホーム > SEO > Search Console > モバイル > フォントサイズが小です
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

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


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


ウェブサイトのモバイル フレンドリー 度について、下枠左側の 「 モバイル フレンドリー テスト 」 にて、URLを指定して、ページ毎に確認することができます

検出された問題の詳細については、同様に、下枠右側の 「 PageSpeed Insights 」 で確認します

モバイル フレンドリー 度確認 検出された問題の詳細確認
モバイル フレンドリー テスト PageSpeed Insights




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 Google AdSense 等 Googleで使用、表示される日時について


Google Search Console Google AdSense 等 Googleで使用、表示される日時は、Google アメリカ本社のある「アメリカ合衆国 カリフォルニア州 マウンテンビューアンフィシアターパークウェイ1600番」の時間である「ロサンゼルス時間」(タイムゾーンの名称 「アメリカ合衆国 太平洋時間」)になっています
日本との時差は、「-16」で、日本の方が、16時間進んでいます (日本で日付が変わっても、現地で日付が変わるのは 16 時間後です)

日本時間に置き換えたい時は、Google Search Console で表示される日時に、16 時間足すことにより求められます
例えば、、Google Search Consoleでの表示時間、「2014.4.27 0:00」 は、日本時間、「2014.4.27 16:00」のことになります

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > SEO > Search Console > モバイル > フォントサイズが小です
   

© 2014 abhp.net All Rights Reserved.

関連情報サイト


 はじめる - ウェブマスター向けモバイルガイド

コンテンツ一覧

ページTOP
ページTOP
ページTOP
ページTOP