PCで作ったデザインをスマホ用に直そうとしたら、要素が入りきらずに困ったことはありませんか。
そんなときに役立つのが、スマホの小さな画面から先に設計する「モバイルファースト」という考え方です。
この記事では、モバイルファーストとは何か、なぜスマホから考えるのか、スマホで組んだレイアウトをPCへ広げる手順を、見本を使って初心者向けに解説します。
モバイルファーストの基本
まずは、モバイルファーストとはどんな考え方なのか、従来の進め方と何が違うのかを押さえましょう。
モバイルファーストとは
モバイルファーストとは、Webサイトを設計するときに、PCの大きな画面ではなく、まずスマートフォンの小さな画面を前提にレイアウトを組み立て、そこから大きな画面へ広げていく考え方のことです。
「モバイル」はスマートフォンのような持ち歩ける端末、「ファースト」は「最初に」という意味です。
従来よく行われていた「PC版を先に作り、あとからスマホ版に縮める」進め方とは、順番が逆になります。
この考え方は、2011年に出版された書籍『Mobile First』(ルーク・ウロブレフスキ著、英語)などを通じて広まりました(A Book Apart: Mobile First(英語))。
よく似た言葉に「レスポンシブデザイン」があります。
レスポンシブデザインは、1つのWebページを画面の大きさに合わせて自動で並べ替えて表示する「作り方」のことで、モバイルファーストは、そのレイアウトを「どちらの画面から考えるか」という設計の順番の話です。
なぜスマホから考えるのか
スマホから考える一番の理由は、狭い画面から始めると「本当に必要な情報は何か」を最初に決めざるを得なくなり、優先順位のはっきりしたレイアウトになるからです。
PCの広い画面から始めると、つい多くの要素を横に並べてしまい、スマホに直すときに「どれを残し、どの順に積むか」で迷うことになります。
その結果、スマホ版が「PC版を無理に縮めたもの」になり、狭い画面での使いやすさが後回しになりがちです。
NGの見本では、PCの横並びのレイアウトをそのまま縮めたため、文字もボタンも小さくなり、メニューのリンクも指で押し分けられないほど詰まっています。
OKの見本では、スマホの画面に合わせて要素を縦1列に積み、メニューはボタンの中にしまったので、文字が読みやすく、申し込むボタンも押しやすい大きさになっています。
なお、OKの見本で特長1・2までを表示しているのは、続きはスクロールして見る、というスマホらしい見せ方をイメージしたものです。
Googleもスマホ版のページを基準にしている
検索の面でも、スマホでの見え方を最初から考えておくことは大切です。
Googleは、検索結果に載せるページの内容を調べるときに、スマートフォン向けに表示されたページの内容を使っており、これを「モバイルファーストインデックス」と呼んでいます(Google検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」)。
同じページでは、スマホ版にもPC版と同じ主要なコンテンツを載せることや、作りやすく管理しやすい方法としてレスポンシブデザインを使うことが勧められています。
名前は似ていますが、モバイルファーストインデックスは「Googleがスマホ版のページをもとに検索結果を作る」という検索の仕組みで、この記事のモバイルファーストは「作る人がスマホの画面から設計する」という進め方の話です。
別のものなので混同しないようにしましょう。ただし、どちらもスマホでの見え方を中心に考える点は共通しています。
PCから作る進め方との違い
PCから先に作る進め方は「デスクトップファースト」と呼ばれ、モバイルファーストとは出発点と考え方が異なります。
| 比べるポイント | モバイルファースト | デスクトップファースト |
|---|---|---|
| 最初に作る画面 | スマホ | PC |
| 考え方 | 必要な要素だけで組み、画面が広がったら足す・並べる | 多くの要素を並べ、画面が狭まったら減らす・積む |
| 起きやすい問題 | PCで見ると間延びし、物足りなく見える | スマホ版が詰め込みになり、文字やボタンが小さくなる |
どちらにも起きやすい問題があるので、モバイルファーストで作る場合も、PCへの広げ方をきちんと考えることが大切です。
モバイルファーストの進め方
ここからは、モバイルファーストでレイアウトを組み立てる手順を見ていきます。
「情報に優先順位をつける」「スマホで1列に並べる」「PCに広げる」「両方の画面で確かめる」の4つの手順で進めます。
手順1:載せる情報を書き出して優先順位をつける
最初に、ページに載せたい情報をすべて書き出し、大事なものから順に番号を付けます。
スマホでは要素を縦に1列で並べることが多く、並べる順番がそのまま「見てもらえる順番」になるためです(上にあるものほど先に見られる、位置による優先順位の考え方は重要な情報はどこに置く?で解説しています)。
たとえば料理教室のサイトなら、次のように並べます。
- 何の教室か分かるキャッチコピーと写真(メインビジュアル)
- 体験レッスンの申し込みボタン
- 教室の特長
- 料金
- 受講した人の声
- 教室の場所と地図
番号を付けるときに「これは本当に必要か」と迷う情報は、優先順位が低いサインなので、ページの後ろのほうに回すか、別のページに分けることを考えます。
手順2:スマホの画面で1列に並べる
次に、手順1で決めた順番どおりに、スマホの画面幅で要素を上から1列に並べます(ヘッダーやサイドバーなどの区画を縦1列に並べ替える例はWebページの基本構造とは?で紹介しています)。
1列なら、どの要素も画面の幅いっぱいを使えるので、文字やボタンを十分な大きさで置けます。
このとき、ボタンやリンクは指で押しやすい大きさと間隔にしておきます(押しやすいボタンの大きさはボタンの内側の余白とは?、部品同士の間隔はUIコンポーネントの間隔とは?で解説しています)。
スマホの画面幅は機種によって違うので、手元のスマホに近い幅で作り、それより狭い画面でも崩れないかを確かめます。
Webアクセシビリティ(障害のある人や高齢の人も含め、誰もがWebサイトを使えるようにすること)の国際的なガイドラインWCAG 2.2では、横幅320 CSSピクセル(画面上の見た目の大きさの単位)でも、横スクロールなしで内容が読めることを求めているので、確認の目安になります(WCAG 2.2 達成基準1.4.10 リフロー・WAIC日本語訳)。
CSSピクセルは、画面の実際の点(ドット)の数とは別のものです。
最近のスマホは1 CSSピクセルを複数の点で細かく描いているため、カタログに書かれた画面の解像度よりも、デザインで使う幅の数値はずっと小さくなります。
手順3:PCの画面に広げる
スマホのレイアウトができたら、PCの広い画面に合わせて、要素を横に並べたり、補助的な情報を横に置いたりして広げていきます。
スマホの1列をそのまま横に引き伸ばすだけでは、1行が長くなりすぎて読みにくく、画面の両脇もがらんとして見えるためです。
NGの見本では、スマホで縦に積んでいた特長を、PCの幅でもそのまま縦に積んで横に伸ばしたので、1つひとつの箱が横長になり、文字のない部分ががらんと目立ちます。
OKの見本では、3つの特長を横に並べ、ボタンにしまっていたメニューもヘッダーに広げたので、PCの広さを生かしたレイアウトになっています。
PCに広げるときによく使う方法は、次のとおりです。
- 縦に積んでいたものを横に並べる
特長やカードのように同じ種類の要素は、2〜3列に並べます。 - しまっていたものを表に出す
メニューボタンにしまっていたリンクを、ヘッダーに横並びで表示します。 - 補助的な情報を横に置く
本文の下に置いていた関連情報を、本文の横の列(サイドバー)に移します(ページを本文とサイドバーの2列に分ける考え方は2カラムとは?で解説しています)。 - 中身の横幅に上限を決める
画面がどれだけ広くても、文章の1行が長くなりすぎないよう、中身の幅に上限を設けて中央に置きます。
大きなモニターで文章を画面の端から端まで流すと、行の終わりから次の行の頭まで目を大きく動かすことになり、読みにくくなるためです(読みやすい横幅はコンテンツ幅とは?で解説しています)。
広げるときも、手順1で決めた優先順位は変えません。
横に並べた結果、大事な申し込みボタンが目立たなくなっていないかを確かめましょう。
画面の大きさに合わせた余白の調整はPCとスマホの余白の違いとは?、文字の大きさの調整はレスポンシブタイポグラフィとは?で解説しています。
手順4:両方の画面で確かめる
最後に、スマホとPCの両方の画面で実際に表示して、読みやすさと押しやすさを確かめます。
デザインツールの上で見るのと、実際の端末で指を使って操作するのとでは、感じ方が違うことがあるためです。
Chromeには、パソコン上でスマホの画面幅を再現できる「デバイスモード」という機能があるので、まずはこれで確認し、最後は手元のスマホで確かめましょう(Chrome DevTools「デバイスモード」)。
コーディングでモバイルファーストにする
ここからは、Webサイトを自分でコーディングする人向けの補足です。
デザインツールだけで作る場合は、「スマホ幅の画面を先に作り、それをもとにPC幅の画面を作る」という順番だけ守れば十分です。
CSSでは、まずスマホ向けの1列のスタイルを書き、画面の幅が一定以上のときだけ横並びにする指定を足していくのが、モバイルファーストの書き方です(MDN「レスポンシブデザイン」)。
/* スマホ向け:特長を縦に1列で積む(これが基本) */
.features {
display: grid;
gap: 16px;
}
/* 画面の幅が768px以上のときだけ、3列に並べる */
@media (min-width: 768px) {
.features {
grid-template-columns: repeat(3, 1fr);
}
}min-width: 768pxは「画面の幅が768px以上なら」という条件で、768pxという数値は一例なので、デザインで決めた画面幅に合わせて書き換えてください。
また、スマホで正しい幅で表示させるために、HTMLのheadの中に次の1行を入れておきます。
<meta name="viewport" content="width=device-width, initial-scale=1">この1行がないと、スマホのブラウザがページをPCの幅(多くは980px前後)で表示して全体を縮めてしまい、せっかくのスマホ向けのレイアウトが使われません。width=device-widthは「端末の画面の幅をそのままページの幅として使う」、initial-scale=1は「最初は縮小も拡大もしない」という指定です(MDN: ビューポート meta 要素)。
実践のポイント
モバイルファーストで設計するときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- スマホから作るつもりでも、頭の中にPC版のイメージがあり、つい横並びを前提に考えてしまうことがあります。
最初の画面はスマホ幅の枠だけを用意し、PC幅の画面は手順3まで作らないようにしましょう。 - スマホでは画面が狭いからと、大事な情報までスマホ版から消してしまうことがあります。
Googleもスマホ版に主要なコンテンツを載せることを勧めているので、消すのではなく、順番を後ろにしたり、開いて読める形にしたりしましょう。 - マウスを重ねたときだけ表示される説明やメニューに頼ってしまうことがあります。
スマホにはマウスを重ねる(ホバーする)操作がなく、指で触れるとそのまま押した(タップした)ことになるため、重ねたときだけ出る説明は見られないか、意図しない動きになります。
押せば表示される形にしておきましょう。 - スマホのレイアウトをPCでそのまま引き伸ばし、間延びしたデザインになることがあります。
PCでは要素を横に並べる、中身の幅に上限を設けるなどして、広さを生かしましょう。
よくある質問
- Q. モバイルファーストとレスポンシブデザインは何が違う?
A. レスポンシブデザインは、1つのページを画面の大きさに合わせて並べ替える「作り方」です。
モバイルファーストは、そのレイアウトをスマホから先に考える「設計の順番」で、レスポンシブデザインと組み合わせて使うのが一般的です。 - Q. 社内向けの管理画面のように、PCでしか使わないサイトでもモバイルファーストにするべき?
A. 必ずしもそうではありません。
使う人のほとんどがPCで見ると分かっているなら、PCから設計してもかまいません。
大事なのは、実際に使う人がどの画面で見るかに合わせて出発点を選ぶことです。 - Q. スマホのデザインは何pxの幅で作ればいい?
A. 決まった数値はありません。
手元のスマホや、サイトを見る人がよく使う機種に近い幅で作り、あわせて320px前後の狭い幅でも崩れないかを確かめるのがおすすめです。
まとめ
モバイルファーストとは、スマホの小さな画面から先にレイアウトを考え、そこからPCへ広げていく設計の考え方で、狭い画面で優先順位を決めることで、どの画面でも伝わりやすいレイアウトになります。
載せる情報に優先順位をつけてスマホで1列に並べ、PCでは横に並べたり補助的な情報を横に置いたりして広げ、最後に両方の画面で確かめることがポイントです。
まずは自分が作りたいページに載せる情報を紙に書き出し、大事な順に番号を付けてみましょう。
