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

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


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



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

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


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




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



フォントサイズが小です


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

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

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

モバイル ユーザビリティ - 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 」 より





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