モバイルファーストを意識したデザインに!知っておきたいことまとめ

eyec

こんにちは、あゆこです。
いよいよiphone6sが発売されましたね!
私の周りでも購入者の報告が続々上がってきています。

世間ではスマホユーザーが増加の一途を辿り、
いよいよモバイルファーストの重要性に注目が集まっています。
そこで振り返りの意味もこめつつ、スマートフォンの現状と、「モバイルファースト」を意識したデザインを制作する上で、気をつけたいことをザッとまとめてみました。

そもそもモバイルファーストとは?

モバイルファーストとは、Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。

IT用語辞典より

今まではPCを先行してデザインをつくり、その後量産的にモバイル版のデザインをつくる…ということが殆どでした。
しかし、スマートフォンのユーザーや利用時間の急増から、よりスマートフォンユーザーに対する親切設計が求められるようになったんですね。

スマホからのインターネット利用時間が、PCの2倍以上に

ニールセン株式会社から発表された、国内インターネット利用動向の調査によると、
今年遂にスマホからのインターネット利用者数がPCからのインターネット利用者数と横ばいにまで至りました。

20150526_01

 (インターネット利用者数 25ヶ月推移より)

利用時間に至っては、スマホからの利用時間がほぼ2倍という結果に。

 20150526_02

 (1日あたりのインターネット利用時間 2015年4月より)

ECサイトやファッションサイトでは、スマホからのインターネット利用時間シェアがいまや7割を占め、
PCからの利用時間シェアの3割を大きく超えるという報告も出ています。

nielsen1

インターネット利用時間シェア PC vs. スマートフォン 2015年7月より)

 つまり、ユーザー数は同等程度といえど、利用時間ではいまやスマートフォンがPCを大きく上回っているようです。
冬頃には利用者数もスマートフォンがPCを上回る可能性があるとのこと。

弊社藤村がまとめているように、Googleも「モバイルフレンドリー」を実地し、各デバイスへの最適化を進めています。
そういえばインストール広告についてのアルゴリズム変更もあと1ヶ月に迫りましたね。
(くわしくはこちらなどがとても参考になります!)

iPhone6sの発売と併せて、モバイル端末への最適化がますます高まりそうです!

では次に、モバイルファーストを意識したデザインで気をつけたいことを、大きく分けて見ていきましょう

【ポイント1】情報が見やすい

一言で見やすいといっても、そこには様々な思わくを忍ばせなければなりません。
見やすくなるポイントをあげてみましょう

■サイズにこだわる
スマートフォンは画面が小さいですから、表示される領域やテキストのサイズにはぜひ気を配りたいものです。

たとえば、画面サイズはデバイスによって大きく異なりますね。
特にアンドロイド端末は機種によってサイズがまちまちになりがちなので、もしターゲット層がアンドロイドユーザーの場合は注意が必要かもしれません。
iPhoneシリーズはある程度比率が同等程度で想定されていますので、こちらがターゲット層であれば比較的つくりやすいかと思います。

 比較一覧

こちらを知っておけば、ユーザが訪れた際のファーストビューにも配慮できますね。

テキストサイズに関しては「PCでデザインを確認したときはちょうど良く感じたのに、スマホで見たら小さく感じる!」という落とし穴にはまる人が割と多いのではないでしょうか。
手前味噌ではありますが、弊社小林が以前制作した記事を見ると良く分かるかと思います!

(→“スマホデザインで見やすいサイズ、行間は?デフォルトのアプリ等を調べてみた”)

ちょっと大きいかな?と感じるくらいがちょうどいいかもしれません。

情報を精査し、シンプルにする

画面が小さいスマートフォンですから、もちろん表示される情報にも限りがあります。
そこで、「ユーザーが欲しがっている情報は何か」「どの情報を提供すればコンバージョンにつながるか」をよくよく精査する必要があります。

FV

必ずしもPCと同じ情報を掲載する必要はないかとおもいますので、テキスト量を少なめにしたり、アイコンや画像でより直感的に分かりやすくするなどの工夫も良いと思います。

【ポイント2】情報が探しやすい

見やすくした情報をより整理して、ユーザーが欲しがっている情報へより簡単に誘導できるようにしましょう。

メニューボタンにまとめる

サイト規模によるかと思いますが、ページ数が複数ある場合はぜひメニューボタンを制作しておきたいところです。

glonavi

menu

このメニューボタンのデザインでコンバージョンが違ったりしてくるんです!
ですから、そのサイトのトンマナに合った、扱いやすいメニューを考えてあげたいですね。

■アクションで、詳細情報を切り替える・表示する

どうしても掲載したい情報が多い…でもページを長くしたくないし…
という悩みがある際は、情報の切り替えやその場での表示を検討してみてはいかがでしょうか。
必要な情報だけを詳しく知ることができるので、ユーザーのストレス緩和にも繋がります。

slider

環境に左右されない情報取得

使うデバイスによって見えなかったり、ネット環境によって見えなかったり…
難しい問題ではありますが、できるだけ解決してあげたいところですね。

■容量が重くない

「Wifiに繋がないと見られない」なんてことにならないよう、全体の容量には気を配っておきたいところ。
特に今人気の写真メインのサイトや、背景に動画を流すサイトなどを作るときは気をつけるといいかもしれません。

■状況に合わせて選択肢をつくる

家で一人で見るのと、電車の中大勢の中で見るのではかなり状況が変わってきますよね。
たとえば音声が売りのサイトでも最初にON/OFFの選択ができたり、
サイトによってはスマホ表示なのかパソコン表示なのか?選べるのもいいかもしれません。

おわり

日々ユーザーに合わせて進化していくスマートフォンUI。
より使いやすく、楽しいデザインを実現していきたいですね!