みなさんこんにちは。
aishipの上林です。
今回は情報サイトでもよく触れている「モバイルファースト」の概念を再度おさらいして、レスポンシブウェブデザインについて実例を交えながらまとめてみたいと思います。
Appleも採用するモバイルファーストとは
モバイルファーストとは、読んで字のごとくウェブサイトを制作する際に「モバイル」での利用を前提とした考えのもと構築し、必要に応じてPCやタブレットに展開していく概念のことを言います。
そしてそれは単にサイトの制作だけでなく、企業の戦略やサービスの設計を策定する上でもモバイルを中心とした事業展開を広げていくことを意味します。
モバイルファーストが注目される3つの理由。
1,スマートデバイスの普及
aiship利用サイトの直近のデータからですが、アクセス比率、購入回数比率ともに6割を超え、前年同期比で8.6倍と驚異的な伸びを示しています。
一般市場では2割程度と考えられますが、今後も大きく伸長していくのは確実です。
MM総研のデータ( スマートフォン市場規模の推移・予測(12年3月) )でも今から3年後の2015年には出荷台数ベースでモバイル端末の8割以上がスマートフォンになるとの予測が出ています。
2,コンテンツへの制約と集中
スマートフォンを中心としたモバイル端末はPCに比べ物理的なスクリーンサイズや機能が限られます。
そのためユーザーが本当に必要としている(ユーザーのためになる)機能に絞ることで、シンプルでよりユーザーメリットの高いサービスを提供することが可能となってきます。
例えばFacebookとLINEのモバイルアプリを比較すると、モバイルファーストの考え方で構成されたLINEの方がより機能を絞り、感覚的でシンプルに使いやすく設計されていることが分かります。
3,スマートデバイス独自の機能
マルチタッチ技術、位置情報取得、画面回転(オリエンテーション機能)などPCにはないスマートデバイス独自の機能を備えており、今後このようなシステムを有効活用したサービスが多く登場するでしょう。
これらはPCにはないよりパーソナルでインタラクティブ(双方向)性の高いユーザー体験を実現させることが可能になります。
Appleにおけるモバイルファースト
iPhoneやAndroidなどのスマートフォンでは、App StoreやAndroid Marketを通してアプリをダウンロードし、使用します。
一般のPCではアプリケーションをインストールする場合、CDやDVDを購入しインストールを行なっていましたが、OSX(Appleのオペレーションシステム)ではMac App Storeを通してアプリをダウンロードする方法を採用しています。
今までDVD-ROMで販売していたApple純正のソフトやサードパーティ製のアプリもこのMac App Storeからダウンロードできます。
またOS自体のダウンロード、インストールもこのMacApp Storeから可能です。(むしろこのstoreからしか購入できません)
モバイルベースで考えられた、iPhoneやiPadで採用した販売方法をそのままOSXへ踏襲することで、流通コストや在庫切れの回避をすることができるため、大きなアドバンテージを得ることに成功しました。
ユーザーにとってもいちいち店舗に足を運んだり、記録媒体が手元に届くのを待ったりする必要なく、さらにより安いコストでその場でインストールができるので非常にメリットがあります。
マルチタッチの採用
こちらもiPhoneやiPadなどのiOSで活用されていた機能を、OSXに還元して活用しています。
http://www.apple.com/jp/osx/what-is/gestures.html
MacBook ProなどのAppleのノートPC端末に搭載されているトラックパッドを2本指、3本指で操作をすると画面の拡大、縮小やアプリ間の移動などのUXを搭載し、まるでiPhoneの画面を操作しているかのようななめらかで直感的な動作を実現しています。
Appleの他にも、GoogleやMicrosoftなど大手企業もモバイルファーストの概念のもと、サービスの再設計やビジネスモデルの再構築を行なっており、今後世界的にもスタンダードとなっていくでしょう。
モバイルファーストでサイト構築を考えなおす
このようにモバイルファーストの考え方をベースにすることで、ユーザーにとって本当に必要な機能やコンテンツを再編成し、サイト本来の目的をもう一度再確認し、使いやすい、価値のあるサイトを提供することができます。
そしてモバイルファーストで構築されたサイトはPCやタブレットの機能やUIにも大きく影響を及ぼすことになり、ワンソースで複数のデバイスに対応することができる「レスポンシブウェブデザイン」で運営していくことが大きなポイントになってきます。
レスポンシブウェブデザインの重要性については、以前の記事で解説しておりますのでご参照ください。
【Googleがレスポンシブウェブデザインを推奨する3つの理由】
https://www.aiship.jp/knowhow/archives/2555
レスポンシブウェブデザインを採用した企業サイト事例
CASIO Baby-G
http://baby-g.jp/
メニューの設計がとても分かりやすくなっています。
シットバックチル工房
http://swwwitch.com/mycom/Dw55/HTML/index.html
NHKスタジオパーク
http://www.nhk.or.jp/studiopark/
レスポンシブウェブデザインの事例としてはあまりにも有名ですが、デバイスサイズ毎のコンテンツの変化を上手く対応しています。
カネボウ化粧品
http://www.kanebo-cosmetics.co.jp/
ECサイトのレスポンシブウェブデザイン化
国内でも大手企業を中心にモバイルファーストの考えの元、サイトのレスポンシブ化が進んでいますが、ECサイトという観点で見れば世界的にもまだ例がありません。
間違いなく今後のECサイトを構築する上では避けては通れない道であるレスポンシブウェブデザインでのサイト構築、そしてモバイルファーストを取り入れたコンテンツの作成。
まだまだブルーオーシャンな部分がありますが、他社がやっていない今だからこそいち早く対応し、PDCAを回し早い段階でノウハウを蓄積することができます。
ユーザーにとって本当に価値のあるサイトを提供するには、モバイルサイト対応はまだまだ先とは考えずに、「まずはモバイルありき」の考えのもと、モバイルファーストで自社サイトを再構築していく必要があります。