モバイル向けに設計されている

Silktide は各ページをシミュレーションしたモバイルデバイスで読み込み、その環境で動作するよう設計されているかどうかをチェックします。狭い画面に適応するのか、それとも単に縮小されたデスクトップページを表示するだけなのかを確認します。

重要な理由

ウェブトラフィックの半分以上はモバイルからのものです。そのため、デスクトップでしか機能しないページは、最初のタップの時点で大半のユーザーを失います。小さな文字や延々と続くピンチ操作によるズームを目にした訪問者は離脱します。また、ページのモバイル版を優先的にインデックスする検索エンジンも、それに応じてサイトを評価します。

このチェックでは、細かな仕上がりの問題ではなく、モバイル向けの設計がまったくないページという根本的な問題を検出します。合格したページにも、他のチェックで対象となる軽微なモバイル上の問題が残っている場合があります。

修正方法

長期的に有効な修正方法はです。これにより、同じページをあらゆる画面幅に適応させられます。サイトがレスポンシブデザインより前に作られたものであれば、通常は再構築または新しいテーマが必要です。最新のテーマの多くは、最初からレスポンシブ対応になっています。具体的には、次のようにします。

すべてのページの head 内で、モバイル用のを宣言します。

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

柔軟なレイアウトとメディアクエリを使用し、狭い画面ではページをデスクトップ幅に固定するのではなく、コンテンツが1列に再配置されるようにします。
モバイルで本文が読みやすいサイズになるようにします。ページ全体を縮小して画面に収めるデザインは避けてください。
実際のスマートフォン、またはブラウザのデバイスエミュレーション機能を使い、画面幅を約320ピクセルまで狭めてテストします。

Silktide によるテスト方法

シミュレーションしたモバイルデバイスでページを読み込みます。
ページで使用可能なビューポートが宣言されているかをチェックします。ビューポートが指定されていない場合、または480ピクセルを超える幅に固定されている場合、ページは不合格になります。これはモバイル対応に必要な最低限の条件です。
表示されるテキストを測定します。テキストの35%を超える部分が判読できないサイズ（ズーム後に10ピクセル未満）で表示される場合、ページは不合格になります。
画面に収めるためにページがどの程度縮小されるかをチェックします。通常サイズの 60%未満まで縮小される場合、ページは実質的にデスクトップ向けのレイアウトであり、不合格になります。
これらの問題がいずれも見られない場合、ページは合格します。Silktide は、モバイル向けに設計されていないページ数の推移も報告します。

トラブルシューティング

スマートフォンではページに問題がないように見えます

ページによっては、上記の判定要素のいずれかで不合格になっていても、問題なく見えることがあります。たとえば、古いツールによって生成された、幅が固定されたビューポートタグなどです。ページのソースを表示し、<meta name="viewport"> タグが推奨される形式と一致しているかを確認してください。

チェックには合格しましたが、モバイルでの使い勝手がよくありません

合格とは、ページが基本的な要件を満たしているという意味であり、最適な状態であるという意味ではありません。小さな文字、小さなタップ対象、ズーム無効化に関する関連チェックを確認してください。