無料モバイルフレンドリーチェッカー

このツールのチェック内容

• viewport タグ

  ページに viewport メタタグがあるか。ないと、スマートフォンでは縮小されたデスクトップ版のレイアウトが小さな文字で表示されます。

• 画面より幅の広いコンテンツ

  各サイズでページが画面より広くなっていないか。広いと横スクロールやコンテンツの切れが発生します。

• 3 つの画面サイズ

  デスクトップ（1280×800）、タブレット（768×1024）、スマートフォン（390×844）。タブレットとスマートフォンの表示はモバイルブラウザをエミュレートします。

• スクリーンショット

  各サイズの最初の画面のスクリーンショット。訪問者に見えているものを確認できます。

• 読み込みの問題

  いずれかのサイズでページの読み込みが失敗したり、タイムアウトしたりしていないか。

チェックの仕組み

よく見つかる問題

• viewport タグがない

  古いサイトや手作りのページによくあり、スマートフォンでは縮小したデスクトップ版のように見えます。

• 固定幅の要素

  スマートフォンの画面より広い固定のピクセル幅が設定されたコンテナ、表、埋め込み。

• 縮まない画像や動画

  max-width: 100% が指定されていないメディアが、ページを画面より広げてしまいます。

• 幅の広い表

  列の多い料金表や比較表。

• 改行されない長いテキスト

  次の行に折り返せない長い URL、メールアドレス、コード。

直し方

1. 1

   viewport タグを追加する

   ページの head に <meta name="viewport" content="width=device-width, initial-scale=1"> を追加しましょう。最近のテーマのほとんどには、すでに含まれています。

2. 2

   柔軟な幅を使う

   ピクセル単位の固定幅を max-width やパーセント指定に置き換え、CSS grid や flexbox を使って小さな画面ではレイアウトが折り返されるようにしましょう。

3. 3

   メディアが画面に合わせて縮むようにする

   CSS で、画像、動画、iframe に max-width: 100% と height: auto を指定しましょう。

4. 4

   幅の広い表は枠内でスクロールさせる

   表を overflow-x: auto を指定したコンテナで囲むか、小さな画面では列を縦に並べましょう。

5. 5

   長い単語を改行できるようにする

   長い URL が含まれる可能性のあるテキスト領域には overflow-wrap: anywhere を使いましょう。