モバイルファーストで考えるWebサイト構築 | ネットPR.JP

こんにちは。デザイナーのやまざきです。
IT業界人ではない友人達から「スマホにしてから自宅でPCをあまり開かなくなった」と聞き、日本でのモバイルデバイスの普及率と、最近よく耳にする「モバイルファースト」について調べてみました。

出典：ビデオリサーチインタラクティブ

ビデオリサーチインタラクティブが2014年2月7日から11日の間に行った調査によると、今年の2月時点でのスマートフォンの所有率は全体で 54.0%、今までフィーチャーフォン（携帯電話）の方が多かった所有率が、じわじわとスマートフォンに追い上げられ、昨年ついに入れ替わったようです。

出典：ビデオリサーチインタラクティブ

タブレットの所有率は、全体で16.3%、こちらもじわじわと伸びてきておりますね。
さらに詳しい調査結果は下記をご覧ください。

• スマートフォン所有率は、2年前の2倍、過半数の54.0%に。僅かではあるが、はじめて女性のスマートフォン所有率が男性を上回る。～2014年3月下旬リリースの「スマコン(SmartDevice Contents Report)vol.06」予備調査結果より～ー株式会社ビデオリサーチインタラクティブ

PCユーザーが減るということではないにしろ、ここまで普及してくるとモバイルサイトで適切な情報発信が出来ているか気になります。そこで「モバイルファースト」。

モバイルファーストとは、米国のインタラクションデザイナーのルーク・ウロブルスキー氏がモバイルユーザーの増加を見据え2009年に提唱した概念です。

• 「Mobile First」-Luke Wroblewski

今までモバイルサイトを構築するとなると、既存のPCサイトをモバイルデバイスに合わせて作り直す「PC→モバイル」というプロセスが主流でした。メインはPCユーザーで、モバイルユーザーは付随してくるものといった印象です。

モバイルファーストは“ファースト”という言葉通り、モバイルサイトを最初に構築してからPCサイトに展開していく手法です。PCサイトがモバイルデバイスで見やすくなればOKということではありません。

モバイルデバイスには下記のような“制限”とも言える特徴があります。

1. 画面サイズの小ささ
2. 不安定な通信環境
3. タップやスワイプなどの独自UI

モバイルデバイスはPCに比べファーストビューで得られる情報量や操作性は限られています。しかし、どこにでも手軽に持ち運べていつでも利用できることから、情報を得る機会はPCよりも多いでしょう。とりわけスマートフォンにおいては肌身離さず持ち歩いている人がほとんどだと思います。

移動の電車の中で、ランチを食べながら片手で、半身浴をしながら、ショッピングをしながら（店舗で実物を見ながらオンラインショップをチェック→オンラインショップ限定割引があればでネットで購入……個人的によくやります）などなど。暇つぶしの手段でもあれば、今すぐ知りたい！時もあります。

そうした状況の中でユーザーに最適な体験を届けるにためには、利用シーンやニーズに合わせて、価値あるコンテンツが、適度な量で、スマートに提供されることが必然的に求められます。モバイルファーストのポイントはここだと思います。最初に本当に必要なコンテンツ・設計・デザインに絞り込むためにモバイルという“ふるい”にかけるのです。

デザイナーとしても、モバイルサイトをPCユーザーに最適なWebサイトに展開していく流れは理に適った方法だと思います。 実際“PCサイトをスマートフォンで閲覧できるように作り替える”制作をしてみると、個人的には導線の見直しやファーストビューの調整、時には細かなデザイン処理を簡素化しなければならないなど、元々あるものが障害になってしまい中途半端なデザインになりがちです。モバイルファーストでも行う作業は変わらないかもしれませんが、シンプルでストレスのない土台をカスタマイズしていく方が目的が明確なままデザインすることができ、楽しい気がします。

よりニーズに合わせることを重視してスマートフォン、タブレット、PC向けの専用サイトをそれぞれ構築する方法もありますし、コンテンツの一元管理ができる「レスポンシブ・デザイン」で構築してもよいでしょう。

この「レスポンシブ・デザイン」で気に留めておきたいことが1点。
「レスポンシブ・デザイン」と混同されやすい「アダプティブ・デザイン」という構築方法があります。この2つの違いには諸説あり、2つを同一と捉えている方も多いのですが、設計・デザインが大きく変わってくる可能性もありますので、実制作に入る前に担当者と制作会社でお互いの認識を擦り合わせておきましょう。現時点で個人的には下記の認識で分けております。

1. あらゆる画面サイズにレイアウトや画像・文字サイズなどの視覚的な情報を対応させることで、どのようなデバイスでも同じコンテンツを利用できるようにすること。

1. デバイス毎の特定の画面サイズに最適化したサイトを構築すること。指定したサイト幅以外では正しく表示されない可能性があります。
2. ユーザーのコンテキスト（利用背景・利用条件等）に合わせて、表示するコンテンツを最適化する手法。

※今回は技術的な詳細は省かせていただきます。

モバイルデバイスと共にどんどん変化していくインターネットの利用スタイル。冒頭の友人達のように手のひらの上でネットライフを完結させている人が増えて始めているとなると、モバイルファーストの考え方は今後当たり前でなくてはならないのかもしれません。情報発信をする側としては、ユーザーがどんな“体験”を求めているのかをいかにキャッチできるかが重要ですね。

• モバイルファーストって何だーall Web blog

• モバイルファーストの本当の意味と実践方法 – ＠IT

• モバイルファーストで考えるデザイン 第2回 「日本に企業サイトに見るモバイルファースト」ーデジウマBLOG

• 最近よく聞く「モバイルファースト」って結局どういうこと？調査まとめ。ーバシャログ。

• レスポンシブからアダプティブへ 〜 必要な情報を、必要なときに、必要としている人へーDX.univ | 国内・海外のWebマーケティング&テクノロジー&デザインを解説