モバイルファーストデザインとはスマホ版から作ればOK？手順やCSS解説つき

モバイルファーストを意識したサイトデザインが、次々と登場しています。しかし、単純にスマホのデザインを最初に作っただけでは本物のモバイルファーストデザインとは言えません。では、モバイルファーストデザインとは一体どのようなサイトなのでしょうか？本記事では、モバイルファーストデザインの本来の意味を踏まえたうえで、具体的なデザインポイントからCSSの記述方法までを詳しく解説します。

モバイルファーストとは？

日頃からWeb制作に携わっていると、モバイルファーストについて単純に作業手順の問題だと誤解している人が多いように感じます。もちろん、初めて自社のサイトを作ろうとしているクライアント様なら無理もありません。しかし、専門家であるはずのWeb制作者やWebデザイナー、サイト運営者などが間違った認識のままサイトを構築するのは考え物です。

モバイルファーストで多い勘違い

モバイルファーストに対する誤解はさまざまですが、特に多いのが下記のような間違ったイメージです。

• Web制作者：最初にスマホ版を作り、次にPC版を作ればOK
• Webデザイナー：PC版よりスマホ版のデザインにこだわるべき
• クライアント：スマホ版だけ作って貰えれば十分

中には、クライアントに対して「モバイルファーストの時代ですから、スマホ版だけはしっかり作りましょう！」と主張するWeb製作会社も少なくありません。

モバイルファーストの目的と手順は別物！

確かに、モバイルファーストを直訳すると「スマホ用を最初に作る」と解釈したくなるでしょう。事実、需要の高さからPCよりもスマホをはじめとするモバイルユーザーの満足度を優先してサイトを作成する、という考え方は正解です。

しかし、モバイルファーストの本来の意味は作業手順ではなく、「スマホを含めた全てのデバイスに対してユーザーニーズを最適化する」という目的に準じていなければなりません。

▼モバイルファーストの目的と手順の違い

• 目的：全てのデバイスに対するユーザーニーズの最適化
• 手順：全デバイスに共通するベースを作ってから、デバイスごとに調整する

むしろ、モバイルファーストで目指すべきゴールはコンテンツファーストという概念に近いため、スマートフォン用のサイトから制作したからといって解決できる問題ではないのです。

ちなみに、類似ケースとして「スマホファースト」という用語が挙げられます。小さなスマホ画面での操作性を最も重視したデザインが求められますが、ユーザビリティの高いサイト構造やデザインを満たすという根本的な目的はモバイルファーストと同じです。

モバイルファーストのサイト構造

PCが主流だった頃と違い、今ではスマホやタブレットなどサイトを閲覧するデバイスをユーザーが自由に選べるようになりました。だからこそ、モバイルファーストの必要性が重視されているのでしょう。

モバイルファーストで最も重要なのは「ユーザーニーズの最適化」です。状況や使っている端末の種類にかかわらず常に快適に閲覧できる「マルチデバイス対応のサイト構造」、と言った方がイメージしやすいかもしれません。

とはいえ、同じサイトでもPCで見ている人とスマホで見ている人とでは、コンテンツに求めている内容が大きく異なります。そこで重要となるのが、「状況」や「経験値」から導き出した「「コンテンツのレベル（ニーズ）」です。

▼アクセスしている「状況」から使っている端末を推察する

• 移動中や昼休みなどのスキマ時間：スマホやタブレット
• 自宅でじっくり時間をかけて見ている：PCやタブレット

▼ユーザーの「経験値」から使っている端末を推察する

• 非会員など初めてサイトを訪問したユーザー：スマホやタブレット
• 有料会員など何度も閲覧しているユーザー：PCやタブレット、スマホの会員専門ページ

▼端末の種類から「コンテンツのレベル（ニーズ）」を推察

• スマホ：最短距離でゴールに辿りつけるシンプルな構造
• タブレット：スマホより詳しく、PCよりシンプルな構造
• PC：具体的なスタディケースなど、最も詳細で関連情報も閲覧できる構造

例えば、通勤時に電車の中でサイトを閲覧している人はスマホを利用している確率が高く、時間制限があるためシンプルなサイト構造で要点が把握しやすいコンテンツ内容が理想的です。

印象に残るキャッチーなコピーやインパクトのあるデザインであれば、「帰宅してからPCでじっくり見よう！」と思ってもらえるかもしれません。

その反面、制限時間がないシチュエーションで閲覧している人ならPCを利用している確率が高く、より詳しい専門的な情報を求めていると推察できます。

モバイルファーストインデックス（MFI）とは？

モバイルファーストの必要性が広く認知されるようになったきっかけは、Googleによるモバイルファーストインデックス（MFI）の導入でした。

モバイルファーストインデックス（MFI）とは、Google検索アルゴリズムの仕様変更を指しており、検索順位を決定する評価基準が従来のPCサイトからモバイル版のWebサイトへと変更されました。

つまり、スマホやタブレットのページが魅力的であるほど検索順位が有利になるのです。

モバイルファーストインデックスについては以下の記事で詳しく解説しています。

スマホ版はPC版より少ない情報量でもOK？

結論から言うと、たとえスマホ版のサイトでもPC版と同等の情報量が理想的です。確かに、スマホ版のコンテンツはPCより遥かに小さい画面に表示されるため、内容をタイトにまとめることで下記のようなメリットが見込めます。

▼スマホ版の情報量を減らすメリット

• 長文より短文の方が読みやすい
• 短時間で完読できる
• 離脱リスクを減らせる
• データ量が軽く表示速度にストレスを感じない

一見、情報量を減らした方が有利に思えますが、この手法にはサイトを運営するうえで致命的な落とし穴があるのです。

▼スマホ版の情報量を減らすデメリット

• コンテンツの内容が薄くなる
• 全体の文字数が少ない分、入力できるKWの回数や種類が限られる

Googleはモバイルファーストインデックスを本格的に導入して以降、モバイル版Webサイトの内容を基に検索順位を決定しています。ところが、PC版の文章をショートカットしたり必要な画像を削除したりすると、Googleから情報量が足りない低品質のコンテンツだと評価され、検索順位まで下落しかねないのです。

モバイルファーストでデザインするポイント4つ

ここからは、モバイルファーストなサイトをデザインする時に押えておきたいポイントについて、具体的にご説明しましょう。

レスポンシブWebデザイン

PC用にデザインしたコンテンツをそのままスマホに表示させると全体が縮小されるため、いちいち拡大しながら読まなければなりません。反対に、スマホ用にデザインしたコンテンツをそのままPCに表示させると、余分なスペースが邪魔になってしまいます。

つまり、どんな画面サイズの端末でアクセスしても常に最適なサイズで表示される「レスポンシブデザイン」こそが、モバイルファーストデザインの第一条件となるのです。

レスポンシブデザインについては以下の記事で詳しく解説しています。

小さな画面でも見やすいデザイン設計

PCとモバイルの最大の違いは、何と言っても画面の大きさでしょう。特にスマホは極端に画面サイズが小さいため、PC版と同等の情報量を詰め込むためにはデザイン設計に工夫が必要です。

▼デザイン設計の工夫

• ページネーションで複数ページに分割する
• コンテンツ上部に目次を追加し、見出しごとにアンカーリンクを設置する
• 補足的な情報に対し「続きを読む」や「＋」などのモーダルウィンドウを追加する

上記の手法は下記の記事でも詳しく解説していますので、参考にして下さい。

最適なフォントサイズと行間

コンテンツの読みやすさはモバイルファーストデザインの必須要素ですが、PCでは問題なく読めている本文でもスマホにすると読みにくくなりがちです。そこで当社ペコプラがメジャーな30サイトを対象に調査したところ、スマホで最も人気が高かったフォントサイズは16px、行間は1.5emという結果になりました。

ただし、下記の調査結果から意外にも30サイト中50％以上が最初からどのデバイスでも読みやすいフォントサイズを設定していたことが判明しています。

• PCとスマートフォンで「異なる」フォントサイズを設定している：13サイト
• PCとスマートフォンで「同じ」フォントサイズを設定している：17サイト

スマホのフォントサイズや行間について興味がある、実装方法が知りたいという方は、下記の記事を参考にして下さい。

親指の操作性を考慮したタップやスワイプの工夫

タッチパネルで操作するスマホやタブレットだからこそ、ユーザビリティに直結するのが「指先の操作性」です。中でも、片手での使い勝手が重視されるスマホは親指1本での操作性が求められるため、常にタップやスワイプの利便性を考慮しておく必要があります。ユーザーに扱いづらいサイトだと思われないように、下記の工夫をデザイン構成に取り入れてみましょう。

• 上部だけでなく、下部にもボタンを設置する
• タップできる領域を明確にする
• ボタンやリンクを一カ所に密集させない
• 指先の大きさに対し、余裕のあるボタンサイズにする
• スワイプできる要素に拡張矢印などのヒントを与える

モバイルファーストデザインのCSS

モバイルファーストデザインで重要なのが表示させるデバイスによって切り替わる画面幅、いわゆる「ブレイクポイント」です。ブレイクポイントは、新しい機種が発売される度に微妙に変化しますが、参考として2019年の標準値をピックアップしてみました。

• スマホ：320～560px
• タブレット：561～960px
• PC：961px以上

具体的なCSSソースの記述は、メディアクエリ（Media Queries）を利用して設計していきます。まず、全てのデバイスに対して共通するデザインをスマホ版として最初に記述したら、下記のソースを参考にタブレット版からPC版へと画面サイズが大きくなる順番で条件を設定していきましょう。

▼スマホ→タブレット→PCの順で記載するCSS

@media screen and (min-width:768px){
  /*タブレット用として画面幅を768pxまでに設定*/
}
@media screen and (min-width:1024px){
  /*PC用として画面幅を1024pxまでに設定*/
}

PC版をベースとし、タブレットからスマホへと画面が小さくなる順番で記述しても見た目の結果は変わりません。しかし、Googleの意向に沿ったモバイルファーストを意識したデザインを目指すなら、スマホ版をベースにした方が安心です。

まとめ

モバイルファーストでは、サイズの異なるデバイス全てで快適に閲覧できるデザインが求められます。言い換えれば、場所やタイミングを問わず誰もが簡単に利用できるサイトこそ、モバイルファーストデザインの理想形と言えるでしょう。

近い将来、どんなデバイスが主流になって対応できるように、今からモバイルファーストデザインをマスターしておくべきなのです。