モバイルファーストで「デザイン」する時に注意すべきポイントまとめ【2018年最新】

2018年からGoogleでもモバイルファーストインデックスが正式にスタートし、モバイルファーストという言葉の存在感がさらに高まりました。

モバイルファーストにおける正しいデザインとは、どのようなデザインなのでしょうか。

今回は、モバイルファーストでデザインするときに気をつけるべきポイントについてご紹介したいと思います。

INDEX

モバイルファーストでのデザインとは
モバイルファーストでデザインする時のポイント
モバイルファーストインデックス
モバイルファーストなデザインのCSSの書き方
まとめ

モバイルファーストでのデザインとは

モバイルファーストという言葉をそのまま捉えると、「スマホ向けのデザインを先に作る」という意味に捉えてしまいますが、実際には「スマホ向けのデザインをより重要視する」という意味で使われている場合が多いです。

例えば、小さな画面でもコンテンツを分かりやすく表示することであったり、タップ＆スワイプというタッチパネルでのユーザビリティを考慮するなど、スマホユーザーの視点に立ってデザインとコンテンツを設計することが求められています。

モバイルファーストでデザインを行う場合は、結果的にスマホ版ページのデザインを先に作成するというケースが多いですが、それよりもスマホユーザーにとって使いやすく、PCユーザーにも使いやすいデザインを作るということを意識することが大切です。

最近では、「スマホファースト」という言葉も登場しています。

スマホファーストとは、モバイルファーストよりもさらに範囲を狭め、スマホ画面でのデザインを最重要視するという考え方ですが、言葉が異なるだけで、基本的にユーザーにとって使いやすい情報設計、デザインを行うという目的自体は同じです。

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

では、モバイルファーストでデザインする時に気をつけるべきポイントを確認していきましょう。

レスポンシブデザインが基本

現在ではすでに一般的が方法になっていますが、モバイルファーストを意識してデザインを作成する場合にはレスポンシブデザインを使うのが基本です。

モバイルファーストでデザインされたページをPCでそのまま表示してしまうとスペースを持て余して読みづらいページになってしまいますし、PC版ページをそのままスマホで表示すると文字が小さくて読みづらいページになってしまいます。

あらゆる画面サイズの端末でアクセスした場合も最適に表示されるように、レスポンシブデザインを使ってデザインを行いましょう。

タップ・スワイプ操作を意識する

スマートフォンやタブレットなど、モバイルデバイスは主にタッチパネルを搭載しており、PCのようなクリック操作ではなく、タップ操作、スワイプ操作によってユーザー体験が構成されています。

タッチパネルであることによって気をつけなければならないポイントは下記のようなものがあります。

ボタンやリンクを余裕のあるサイズにする
ボタンやリンクを近くに配置しすぎないようにする
タップできる領域を明確にする
スワイプできる要素にはヒントを与える

PCでは、ボタンの上にマウスカーソルを動かした時のアニメーションをつけることができますが、スマホではボタンを押すまでアニメーションを表示できません。

そのため、タップやスワイプできる要素をより明確にしてデザインを作ることが求められます。

小さな画面での表示を意識する

スマートフォンはPCと比べると明らかに画面サイズが小さく、一度に表示することができる情報量も限られます。

そのため、いかに小さな画面で伝えたいことが伝わり、探している情報が見つけやすい情報設計、デザイン設計が重要となります。

PCで表示した場合とスマホで表示した場合で表示される情報量が違っても問題ありません。大切なことは、それぞれのユーザーのニーズに応えた情報設計、デザイン設計を行うことです。

親指での操作を意識する

右利きの人の場合、画面の左上というのは手の届きにくい領域であり、そこによく使うボタンを配置してしまうと、押す時にいちいちスマホを持つ手を大きく動かさなければなりません。

Webの場合、ナビゲーションメニューは画面上部に表示するのが一般的です。それはスマホ向けページでも同様で、多くのWebサイトが画面の上部にナビゲーションメニュー、もしくはナビゲーションメニューへの動線を配置しています。

ナビゲーションメニューをあまり使わないタイプのサイトであれば問題ありませんが、何度もメニューを行き来するようなWebアプリケーションやスマホアプリの場合は、ナビゲーションメニューをもっと使いやすい位置に配置することで使いやすいサービスを提供することができます。

その1つの方法が、画面下部に固定のナビゲーションメニューを配置するというデザインです。

InstagramやFacebookのスマホアプリでは、画面下部に固定のメニューが表示されており、スマホを持っている手の親指で簡単に操作できるようになっています。

最近ではディスプレイサイズの巨大化も進んでおり、さらに気をつけてデザインを行う必要があるでしょう。

モバイルファーストインデックス

モバイルファーストの考え方が一般的に広まったのが、モバイルファーストインデックスの登場です。

モバイルファーストインデックスは、Googleの公式ブログで下記のように説明されています。

モバイルファーストインデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイルユーザーが探しているものを見つけやすくすることを意味します。

引用：モバイルファーストインデックスを開始します

これまでPC向けページがインデックスやランキングの評価対象として使われてきましたが、スマートフォン向けのモバイル版ページがメインの評価対象として扱われるようになりました。

これにより、UIデザインの観点だけでなく、SEO対策の観点でもモバイルファーストの重要性が高まりました。

モバイルファーストなデザインのCSSの書き方

モバイルファーストなデザインのCSSの書き方は、これまでとどのように違うのでしょうか。

まず、従来一般的だったCSSの記述方法を見てみましょう。

p { font-size: 16px; }

@media screen and (max-width:768px) { 
	p { font-size: 14px; }
}

@media screen and (max-width:480px) { 
	p { font-size: 12px; }
}

このように、まずPC向けの画面サイズでのCSSを記述し、その下に画面幅が768px以下の場合、さらに480px以下の場合といったように、PC向けページのデザインをベースにしてモバイル版の表示を調整していました。

これが、モバイルファーストなデザインだと下記のような書き方になります。

p { font-size: 12px; }

@media screen and (min-width:768px) { 
	p { font-size: 14px; }
}

@media screen and (min-width:1024px) { 
	p { font-size: 16px; }
}

メディアクエリの部分が、max-widthからmin-widthに変わっています。

このように、スマホ向けのデザインをベースにして、ディスプレイサイズが大きな場合のデザインを調整していくのがモバイルファーストなデザインのCSSの書き方になります。