モバイル ファースト デザインの実際の意味、レスポンシブ デザインとの違い、モバイル ファースト サイトの設計と構築方法 (コンテンツの順序、タッチ ターゲット、CSS の最小幅ブレークポイント、画像とテスト、さらに複数拠点のビジネス向けの注意事項)。
レスポンシブ デザインとは、レイアウトを任意の画面サイズに適応させる 1 つのサイトを意味します。モバイルファーストとは、設計とコーディングの順序です。小さな画面から始めて、大きな画面用のレイアウトを追加します。モバイルファーストのサイトはレスポンシブですが、デスクトップファーストで構築されたレスポンシブサイトは、窮屈で後付けのモバイルバージョンになることがよくあります。
Google はモバイル ファースト インデックスを使用しています。これは、インデックスとランキングに主にページのモバイル バージョンを使用することを意味します。モバイルでコンテンツ、見出し、構造化データ、リンクが欠落している場合、Google はそれらを認識できない可能性があります。
コンテンツに合わせて決定します。レイアウトが引き伸ばされたように見えるまでブラウザーを広げ、そこにブレークポイントを追加します。一般的な開始点は約 640px、768px、1024px、1280px であり、多くの CSS フレームワークで使用され、最小幅のメディア クエリとして記述されます。
WCAG 2.2 では、最小ターゲット サイズを 24 × 24 CSS ピクセル (レベル AA) に設定し、44 × 44 (レベル AAA) を推奨します。 Apple のガイドラインでは 44 ポイントが使用され、Google のマテリアル ガイドラインでは 48 dp が使用されます。メニュー内の主ボタンとリンクのサイズは約 44 ～ 48 ピクセルを目指します。
フランチャイズごとに場所ページを持つ 1 つの共有テンプレートを使用します。それぞれの上部には、クリックして電話をかける、タップして道順を取得する、営業時間、店舗固有の予約または注文のアクションが含まれます。 「近く」を検索しているモバイル訪問者はすぐに行動したいと考えているため、位置検索と主要なアクションは親指 1 つで機能する必要があります。
結論: モバイルファーストのウェブデザインとは、まずスマートフォン向けにページを設計・構築し、画面が広くなる段階でタブレットやデスクトップ向けのレイアウトを加える方法です。コードではモバイル向けのCSSを基本とし、min-widthのメディアクエリで表示を拡張します。各ページで何を優先するかが明確になり、現在のGoogleのインデックス方法にも合っています。
この二つの言葉は同じ意味で使われることがありますが、表しているものは異なります。
| レスポンシブデザイン | モバイルファーストのデザイン | |
|---|---|---|
| 意味 | 画面サイズに合わせてレイアウトが変わる一つのサイト | 小さな画面から作り、大きな画面へ段階的に拡張する制作手順 |
| CSSの考え方 | デスクトップを縮小するmax-width、またはモバイルから広げるmin-width | モバイルを基準に広げるmin-width |
| コンテンツの優先順位 | デスクトップで決めてから、画面に合わせて削ることが多い | 最小画面で必要なものから決める |
| よくある失敗 | コンテンツが隠れる、タップ領域が小さい、スマートフォンで表示が重い | デスクトップ向けに拡張しないと、余白が多く感じられる |
理想は、モバイルファーストで制作したレスポンシブサイトです。
狭い画面ではコンテンツが一列に並ぶため、掲載する順序がレイアウトそのものになります。訪問者がスマートフォンで必要とする順に、各ページのセクションを番号付きで並べましょう。
地域のサービス事業者のホームページなら、たとえば次の順番です。
この一覧に入らない要素は、デスクトップでも優先度が低い可能性があります。
autocomplete属性を使えば、名前や住所をブラウザーが入力できます。まず、各ページのheadにビューポートの設定を入れます。
``html <meta name="viewport" content="width=device-width, initial-scale=1"> ``
メディアクエリを使わずに、スマートフォン向けの基本スタイルを作ります。画面に余裕が出る幅で、min-widthの条件を加えます。
```css .services { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .site-nav { display: flex; } /* ナビゲーション全体を表示し、メニューボタンを隠す */ } ```
次の方法を使うと実装しやすくなります。
clamp()を使います。たとえば見出しにfont-size: clamp(1.75rem, 5vw, 3rem)を指定すると、ブレークポイントを減らせます。grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))なら、空間がある場合にだけ列が増えます。md:などの接頭辞は指定幅以上に適用されます。特定の端末モデルに合わせるのではなく、コンテンツが崩れ始める幅にブレークポイントを置きます。
スマートフォンは、設計に使うノートパソコンより処理性能が低く、ネットワークも不安定になりがちです。GoogleのCore Web Vitalsでは、Largest Contentful Paint（表示速度）、Interaction to Next Paint（応答性）、Cumulative Layout Shift（表示の安定性）を測定します。
srcsetとsizesを使ってスマートフォンには小さな画像を配信し、WebPやAVIFなどの新しい形式も活用します。loading="lazy"を設定します。メインのヒーロー画像には使いません。スマートフォン向けのレイアウトができたら、ブラウザーの幅を広げます。横幅を増やすだけでなく、画面が広いことで便利になる要素を追加しましょう。
フランチャイズや多店舗サイトには、モバイル特有の課題があります。訪問者の多くはスマートフォンで「近くの」と検索し、特定店舗の情報をすぐに探しています。
min-width条件があるWe.Incで作るサイトは、最初からレスポンシブです。エディターでスマートフォン表示を確認し、画面上の操作またはコードで調整できます。テンプレート一覧でレイアウトが一列表示に変わる様子を見たり、事業内容を説明して初稿を作り、自分のスマートフォンで確認したりできます。
無料で始める · クレジットカード不要