本文へスキップ
Mera News

パブリッシャー向けガイド 第2章

モバイルとデスクトップでのページ構成

最終確認：2026年11月

読者は、ニュースのページにとどまる価値があるかどうかを、すぐに判断します。見出しは素早く表示され、ページは動かず、どのタップにも反応が返ってくるべきです。GoogleはページのモバイルバージョンをインデックスするのでSearchでも、スマートフォンのレイアウトが基準になります。

目指す数値

GoogleのCore Web Vitalsには、3つの指標と、それぞれの明確な目標があります。

指標測るもの良好
Largest Contentful Paint（LCP）読み込み2.5秒以内
Interaction to Next Paint（INP）入力への応答200ミリ秒以内
Cumulative Layout Shift（CLS）視覚的な安定性0.1以下

ページ読み込みの75パーセンタイルを、モバイルとデスクトップを分けて測ります。3つの指標すべてが、そのパーセンタイルで目標を満たしたとき、ページは合格です。

実際の訪問から得たフィールドデータを使います。Search ConsoleのCore Web Vitalsレポート、PageSpeed Insights、Chrome User Experience Reportなどです。Lighthouseはラボでの確認に役立ちますが、INPを測れず、代わりにTotal Blocking Timeを報告します。

Googleは、ページエクスペリエンスの単一のシグナルは存在しないとしています。一方で、Core Web VitalsはGoogleのランキングシステムで使われているとし、ページエクスペリエンスのほかの側面は、サイトの順位に直接は寄与しないものの、使いやすさを高められると述べています。

両方の画面に1つのページ

Googleは、実装と保守がいちばん簡単なパターンとして、レスポンシブデザインを推奨しています。同じHTMLがすべての端末に配信されるため、余計な作業なしに、コンテンツとメタデータが一致します。モバイル用のページを別に運用する場合は、次の点をデスクトップと同一に保ってください。

  • 主要なコンテンツ
  • 見出し
  • 構造化データ
  • robotsメタタグ（誤って残った noindex が、モバイルページをインデックスから外すことがあります）

まずviewportタグを設定し、そのうえで、幅320 CSSピクセルで横スクロールなしにページがリフローされることを確認します。

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

モバイルでは

  • 見出し、署名、目に見える日付を最初に置き、次にリード画像か冒頭の段落を置きます。
  • 記事の本文はHTMLに含めてください。タップすると残りを取得する「続きを読む」ボタンは、クリックも、スワイプも、入力もしないGoogleから、その本文を隠してしまうことがあります。
  • タッチターゲットは、WCAG 2.2 AAの最小である24×24 CSSピクセル以上にします。メニューや閉じるボタンは、AAAレベルの44×44を目指してください。
  • 固定ヘッダーは低く保ち、scroll-padding-top にその高さを設定して、フォーカスされたリンクがヘッダーの陰に隠れないようにします。

デスクトップでは

  • 本文は1行80文字以内にします。中国語、日本語、韓国語では40文字です。これはWCAGのAAAのガイドラインで、すべての読者の助けになります。
  • 段落内の行間は、1.5以上にします。
  • 補足のコンテンツは、読み込まれても記事を動かさないサイドバーに置きます。

読み込みを速く

ニュースのページで最も大きな要素は、多くの場合リード画像です。ページで最も重要なリクエストとして扱ってください。

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • LCPの画像は、決して遅延読み込みにしないでください。
  • スクリプトが動く前にブラウザーが見つけられるよう、最初のHTMLに含めます。
  • fetchpriority="high" は、多くても1〜2枚の画像にだけ使います。それ以上は効果がなくなります。
  • loading="lazy" は、最初のビューポートの外にある画像とiframeにだけ使います。
  • リダイレクトを減らし、ページをキャッシュ可能に保ちます。固有のURLパラメーターがあると、リクエストがCDNではなくオリジンサーバーに戻ってしまうことがあります。

動かないページ

  • すべての画像と動画に width と height を設定し、CSSでは height: auto を保ちます。
  • srcset 内のすべての画像で、同じアスペクト比を使います。
  • 広告、埋め込み、iframeは、読み込まれる前に場所を確保します。枠のサイズは、広告の章で扱っています。
  • Cookieの通知や登録の案内は、重ねて表示するか、場所を確保して、記事を押し下げないようにします。
  • font-display: optional を使うか、Webフォントの寸法に合わせて調整した代替フォントを使います。
  • アニメーションには transform を使います。top や left をアニメーションさせると、レイアウトのずれが起きます。

すばやい応答

操作にかかる時間は3つの部分で成り立っています。コードが動き出すまでの待ち時間、コードそのもの、そしてその後の描画です。50ミリ秒を超えるタスクは、すべてロングタスクです。

  • イベントのコールバックでは、できるだけ何もしません。まず画面を更新し、残りは後回しにします。
  • 長い処理は scheduler.yield() で分割し、対応していないブラウザーでは setTimeout で代用します。
  • DOMを小さく保ちます。長い記事一覧では、content-visibility を使って、画面外の項目の描画を後にできます。
  • iframeごとに専用のメインスレッドがあることを覚えておき、遅い操作がどのフレームから来たのかを確認します。

長いページと無限スクロール

セクションのページが際限なくスクロールする場合は、?page=12 のような絶対的なページ番号で、各まとまりに固有の永続的なURLを与え、それらのページを順番にリンクします。読者が進むにつれて、History APIでアドレスを更新します。Googleはスクロールもクリックもしないため、遅延読み込みされるコンテンツは、何も操作しなくても、ビューポートに入った時点で読み込まれる必要があります。

チェックリスト

  • Search Consoleで、モバイルとデスクトップを分けて、LCP、INP、CLSを確認する。
  • いちばんアクセスの多い記事テンプレートをスマートフォンで開き、見出しと日付が最初の画面にあることを確認する。
  • 記事の全文が、サーバーが送るHTMLに含まれていることを確認する。
  • モバイルとデスクトップで、コンテンツ、見出し、構造化データ、robotsタグが一致しているかを比べる。
  • リード画像から loading="lazy" を外し、fetchpriority="high" を追加する。
  • すべての画像と動画に width と height を追加する。
  • すべての広告、埋め込み、バナーの場所を確保する。
  • scroll-padding-top を、固定ヘッダーに合わせて設定する。
  • 幅320 CSSピクセルでページをテストする。
  • 無限スクロールのページの、すべてのまとまりに固有のURLを与える。

出典