ホーム > SEO > Search Console > モバイル > ビューポートが設定されていません
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

モバイル ユーザビリティ ビューポートが設定されていません


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



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

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


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




ビューポート( viewport ) 設定(指定) 方法



ビューポート( viewport )の設定(指定)には、ページに固定幅を設定するパソコン用の指定と、表示媒体に対し、レスポンシブな指定方法があり、 レスポンシブな指定を行うと、パソコン、モバイル含め、全ての端末でページが適切にレンダリングされるようになります

ビューポート( viewport )は、HTMLソース上のヘッダー部 ( <head> ~ </head> の間) の任意の場所に記述します


下記は、当サイトのトップページに、各ビューポート( viewport )設定を行った際の「 モバイル フレンドリー テスト 」、「 PageSpeed Insights 」、それぞれの結果メッセージです


ビューポート ( viewport )  レスポンシブ 指定 initial-scale=0.54

<meta name="viewport" content="width=device-width, initial-scale=0.54">
モバイル フレンドリー テスト PageSpeed Insights
モバイル フレンドリーではありません 78 / 100 ユーザー エクスペリエンス
テキストが小さすぎて読めません 修正が必要 判読可能なフォント サイズの使用
リンク同士が近すぎます 修正を考慮 タップ ターゲットのサイズを適切に調整する
4 個のルールに合格
71 / 100 速度
修正が必要 圧縮を有効にする
修正を考慮 ブラウザのキャッシュを活用する
JavaScript を縮小する
HTML を縮小する
CSS を縮小する
画像を最適化する
4 個のルールに合格

ビューポート ( viewport )  レスポンシブ 指定 initial-scale=1.0

<meta name="viewport" content="width=device-width, initial-scale=1.0">
モバイル フレンドリー テスト PageSpeed Insights
モバイル フレンドリーではありません 67 / 100 ユーザー エクスペリエンス
コンテンツの幅が画面の幅を超えています 修正が必要 コンテンツのサイズを表示域に合わせる
リンク同士が近すぎます 修正を考慮 タップ ターゲットのサイズを適切に調整する
4 個のルールに合格
70 / 100 速度
修正が必要 圧縮を有効にする
修正を考慮 ブラウザのキャッシュを活用する
JavaScript を縮小する
画像を最適化する
HTML を縮小する
CSS を縮小する
4 個のルールに合格

ビューポート ( viewport )  固定幅 指定

<meta name="viewport" content="width=920">
モバイル フレンドリー テスト PageSpeed Insights
モバイル フレンドリーではありません 66 / 100 ユーザー エクスペリエンス
テキストが小さすぎて読めません 修正が必要 判読可能なフォント サイズの使用
リンク同士が近すぎます viewport の設定
モバイル用 viewport が設定されていません ※ 修正を考慮 タップ ターゲットのサイズを適切に調整する

※.ビューポート ( viewport ) に固定幅を指定すると、モバイル用 viewport になりません


3 個のルールに合格
70 / 100 速度
修正が必要 圧縮を有効にする
ブラウザのキャッシュを活用する
修正を考慮 画像を最適化する
JavaScript を縮小する
HTML を縮小する
CSS を縮小する
4 個のルールに合格

ビューポート ( viewport )  記述無 (無指定)

(記述無)
モバイル フレンドリー テスト PageSpeed Insights
モバイル フレンドリーではありません 66 / 100 ユーザー エクスペリエンス
テキストが小さすぎて読めません 修正が必要 判読可能なフォント サイズの使用
リンク同士が近すぎます タップ ターゲットのサイズを適切に調整する
モバイル用 viewport が設定されていません viewport の設定
3 個のルールに合格
70 / 100 速度
修正が必要 圧縮を有効にする
ブラウザのキャッシュを活用する
修正を考慮 JavaScript を縮小する
画像を最適化する
HTML を縮小する
CSS を縮小する
4 個のルールに合格





ビューポート( viewport ) 設定(指定) 表示例



下記は、当サイトのトップページに、各ビューポート( viewport )設定を行った際の「 モバイル フレンドリー テスト 」、「 PageSpeed Insights 」、それぞれのモバイル表示例です


ビューポート ( viewport )  レスポンシブ 指定 initial-scale=0.54

<meta name="viewport" content="width=device-width, initial-scale=0.54">
モバイル フレンドリー テスト PageSpeed Insights

モバイル フレンドリー テスト ビューポート( viewport ) レスポンシブ initial-scale0.41 表示例


PageSpeed Insights ビューポート( viewport ) レスポンシブ initial-scale=0.54 表示例


ビューポート ( viewport )  レスポンシブ 指定 initial-scale=1

<meta name="viewport" content="width=device-width, initial-scale=1">
モバイル フレンドリー テスト PageSpeed Insights

モバイル フレンドリー テスト ビューポート( viewport ) レスポンシブ initial-scale=1 表示例


PageSpeed Insights ビューポート( viewport ) レスポンシブ initial-scale=1 表示例


ビューポート ( viewport )  固定幅 指定

<meta name="viewport" content="width=920">
モバイル フレンドリー テスト PageSpeed Insights

モバイル フレンドリー テスト ビューポート( viewport ) 固定幅 表示例


PageSpeed Insights ビューポート( viewport ) 固定幅 表示例


ビューポート ( viewport )  記述無 (無指定)

(記述無)
モバイル フレンドリー テスト PageSpeed Insights

モバイル フレンドリー テスト ビューポート( viewport ) 記述無 表示例


PageSpeed Insights ビューポート( viewport ) 記述無 表示例




ビューポートが設定されていません


サイトにアクセスするユーザーは、大きなデスクトップ モニター、またはタブレットや小型のスマートフォンなど、画面サイズの異なるさまざまな端末を使用しています
そのため、ページでは meta viewport タグを使用してビューポートを指定してください
このタグは、端末に合わせてページのサイズとスケーリングを調整する方法をブラウザに指示します

詳しくは、レスポンシブ ウェブデザインの基礎をご覧ください

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




ビューポートを設定する


このルールは、ページでビューポートを指定していないことや、さまざまな端末に適応しないビューポートを指定していることを PageSpeed Insights が検出した場合にトリガーされます。


概要


ビューポートは携帯端末でのウェブページの表示方法を制御します。ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。


推奨される解決方法


携帯端末に適切に表示されるよう最適化されたページには、ドキュメントの先頭に width=device-width、initial-scale=1 を指定したメタ ビューポートが含まれています。

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



用語


•ハードウェア ピクセル: ディスプレイ上の物理的なピクセル。たとえば、iPhone 5 には 640 水平ハードウェア ピクセルの画面が搭載されています。
•デバイス非依存ピクセル(dip): 通常の表示距離で統一の参照ピクセルに一致させるための、デバイス ピクセルのスケーリング。すべての端末でほぼ同じサイズになります。iPhone 5 は幅 320 dip です。
•CSS ピクセル: ビューポートによって制御されるページ レイアウトに使用する単位。スタイル内のピクセル サイズ(width: 100px など)は CSS ピクセル単位で指定します。CSS ピクセルとデバイス非依存ピクセルの比率は、ページのスケール係数やズームです。


携帯端末上の PC ページ


ページでビューポートが指定されていない場合、モバイル ブラウザではそのページを 800~1024 CSS ピクセルの代替幅でレンダリングします。ページがディスプレイに収まるようにページのスケール係数が調整されるため、ユーザーはそのページを操作する前にズームする必要があります。


メタ ビューポート タグ


メタ ビューポート タグは、ページのサイズとスケーリングの制御方法についてブラウザに指示を与えるもので、ドキュメントの先頭に含める必要があります。


固定幅のビューポート


ビューポートは width=320 や width=1024 などの特定の幅に設定できます。おすすめしませんが、この方法は、固定サイズのページを期待どおりに確実に表示するための応急措置として便利です。


レスポンシブなビューポート


メタデータ ビューポート値 width=device-width を使用すると、デバイス非依存ピクセル単位の画面の幅に合わせるようにページに指示します。さまざまな画面サイズに合わせてページのコンテンツをリフローできるようになります。

iOS や Windows Phone などの一部のブラウザでは、横向きに回転させたときにページの幅を一定に保ち、リフローせずにズームして画面を表示します。属性 initial-scale=1 を追加すると、画面の向きにかかわらず CSS ピクセルとデバイス非依存ピクセルを 1 対 1 の関係に保つようブラウザに指示するため、ページで横向きの幅全体を利用できるようになります。

iPhone 5 で width=device-width を回転させた場合、横向きの幅は 320px になります iPhone 5 で width=device-width を回転させた場合、横向きの幅は 320px になります
iPhone 5 で width=device-width、initial-scale=1 を回転させた場合、横向きの幅は 568px になります iPhone 5 で width=device-width、initial-scale=1 を回転させた場合、横向きの幅は 568px になります

レスポンシブなビューポートを使用するには、さまざまな幅で機能するようにページを設計する必要があります。ヒントについては、ビューポートに合わせたコンテンツのサイズ変更に関する推奨事項をご覧ください。


その他の考慮事項


minimum-scale、maximum-scale、user-scalable を避ける

最小および最大ズームを設定したり、ビューポートをズームする機能を完全に無効にしたりできます。これらのオプションはアクセシビリティに悪影響を与えるため、通常は避けてください。

@viewport

メタ ビューポート タグは広くサポートされていますが、正式な標準の一部ではありません。この動作は CSS Device Adaptation 仕様の一部として CSS に含まれます。この仕様が最終承認されて幅広く実装されるまでは、互換性のために、単独で、または対応する @viewport スタイルと一緒に、メタ ビューポート タグを使用し続けてください。

ビューポートを設定する    PageSpeed Insights    Google Developers 」 より





モバイル ユーザビリティの問題 固定幅のビューポート



固定幅のビューポート


このレポートには、ビューポートが固定幅に設定されているページが示されます。ウェブ デベロッパーによっては、レスポンシブ以外のページを一般的な携帯端末の画面サイズに合わせて調整するために、ビューポートを固定のピクセルサイズに定義している場合があります
このエラーを修正するには、サイトのページにレスポンシブ デザインを導入し、デバイスの幅とスケーリングに合わせてビューポートを設定します
詳しくは、ウェブの基礎ガイドのビューポートを正しく設定する方法をご覧ください

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





モバイル ユーザビリティの問題 コンテンツのサイズがビューポートに対応していません



コンテンツのサイズがビューポートに対応していません


このレポートには、ページ上の語句や画像を表示するために水平スクロールを必要とするページが示されます
このエラーは、ページの CSS 宣言で絶対値を使用している場合や、ページの画像が特定のブラウザ幅(980px など)で最適に表示されるように設計されている場合に発生します
このエラーを修正するには、ページの CSS 要素に対して相対的な幅と位置の値を使用し、画像も同様にスケーリングできるようにします
詳しくは、コンテンツのサイズをビューポートに合わせるをご覧ください

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





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.

関連情報サイト


 はじめる - ウェブマスター向けモバイルガイド
 スマホ対応ページを作成するためのviewportまとめ eturlt.net

コンテンツ一覧

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