“モバイルファースト”の本当の意味と、Web担当者が知っておきたい基本＆実践3ステップ

Web担当者として知っておきたいモバイルファーストの基本を解説

[PR]

モバイルファーストは、モバイルサイトから制作するという順番の話ではない

「モバイルファースト」というキーワードをご存知だろうか。その名の通り、まずモバイルサイトを中心にコンテンツを考え、PCなど他のデバイスへと対応させていく考えだが、その本当の意味を勘違いしている人も多いようだ。
スマートフォンの登場で注目を集めているモバイルファーストでは、「ワンソースから各デバイスに対応していく考え方」がポイントになる。そのとき重要になるのが、コンテンツを一元管理できるマルチデバイス対応CMSの存在だ。
この記事では、Webサイト制作現場だけでなく、企業Web戦略の面でも重要な意味を持つ、モバイルファーストの基本について解説する。

スマートフォンの普及で見直しが迫られるPCサイト

スマートフォンの普及が加速している。ケータイキャリアのプロモーションや新製品ラインナップを見れば、これは当然の流れだろう。インターネットにアクセス可能なデバイスとして見ると、PC、フィーチャーフォン（ガラケー）があり、そこにスマートフォンが加わった形だ。しかし、Webサイトとの関係で見るとそう単純ではない。

「フィーチャーフォンがスマートフォンに置き換わることで、PCサイトの見直しとモバイルサイトの再定義が必要になる」と語るのは、Webサイトのスマートフォン対応に早くから着目し、制作も数多く手がけてきた株式会社エイチツーオー・スペースの谷口允氏だ。

株式会社エイチツーオー・スペース
代表取締役
谷口允氏

「スマートフォン対応の相談を数多く受けますが、特にニーズが高いのは、これまでフィーチャーフォンからのアクセスが中心だったBtoCのECサイトです。女性向け化粧品やファッション関連の商品は、フィーチャーフォンからの購入が多く、むしろPCサイトはサブ的な存在でした。ところが、スマートフォンでPCサイトへとアクセスするユーザーが増えてきているのです。

というのも、スマートフォンはPCブラウザと判断されるためPCサイトへのアクセスになるのです。しかし、スマートフォンはPCページを表示できても、使い勝手までPCと同じというわけではありません。PCの画面や入力方法を想定したデザインは、スマートフォンでは厳しいものがありますし、そもそもIEしか想定していなかったために表示が崩れてしまうという話もよく聞きます」（谷口氏）

大手アパレル企業では、スマートフォン経由の売上成長率がPCサイトを上回るケースも少なくない。スマートフォンの普及によってユーザーのガラケー離れだけでなくPC離れまでもが加速している今、もはやスマートフォンはPCの代用品ではなく、別個の存在になりつつある。

モバイルファーストの本質はスマホ対応だけではない

市場拡大を背景に、スマートフォン用のサイトが必要というのは至極もっともな話だ。このような状況にあって、これまでのようにPCサイト主導の考えでいいのだろうか。既存のPCサイトをベースに作り替えていくような従来の方法は、ベターではあってもベストとは言えない。スマートフォンを意識せず、あくまでもPC向けのコンテンツを流用しているに過ぎないからだ。

スマートフォンをはじめとした、モバイルユーザーにとって本当に必要な情報や機能は何なのか、コンテンツをモバイルサイト中心に考えていくべきではないか。そうしたユーザー中心の考え方から現れたキーワードが「モバイルファースト」だ。

「モバイルファーストという言葉は、情報感度の高いWebクリエイターには知られつつあるものの、決して広く認知されてはいません。また、マーケティングや技術など、それを語る観点によって意味が異なるため、正直バズワード的な印象もあります。しかし、根本にあるのはユーザーの非PC化の流れで、これは皆さんも実感しているはずです。

たとえば、以前は家族共有のPCを使っていたけど、スマートフォンだけで十分になったというケースです。このような現状にあって、これまで通り『はじめにPCサイトを作り、それをもとにモバイルサイトも用意しましょう』というプロセスが、果たして正しいのかということです。まずはスマートフォンやタブレットを中心に設計すべきではないか。それがモバイルファーストの考え方であり、今後主流になると思っています」（谷口氏）

「モバイルファースト」は、まずモバイルからユーザーを考えてコンテンツを企画し、制作していくという考え方であり、決して「スマートフォン向けサイトを先に作る」という作業手順ではない。

モバイルサイトを所有していないから自分には関係ない話だ

というわけではない。モバイルというPCよりも制約の多い環境におけるユーザーのことをまず考えることによって、よりユーザーのためになる良いサイトにできるのだ。つまり、結果としてPCサイトでもユーザーにとって大切なコンテンツが見えるようになってくる。

モバイルファーストの実践基本ステップ

では実際にモバイルファーストを取り入れていくにはどうすればいいのか。企画するなかで基本のポイントとなるのは、次の3つだ。

モバイルユーザーのゴール設計
サイトの情報・UI設計
コンテンツにフォーカスする

1. モバイルユーザーのゴール設計

まず、モバイルサイトでユーザーにどのような課題を解決してもらいたいのか、ゴールを設計する。たとえば、PCとモバイルでは次のようなユーザー環境の違いがある。

	PCユーザー	モバイルユーザー
位置	ほぼ一定	移動する
利用場所	室内がほとんど	室内・屋外などさまざま
画面サイズ	大きな画面	小さな画面
通信環境	安定	不安定

つまり、PCとは異なる、スマートフォン特有の機能や利用シチュエーションを踏まえたサイト設計が必要になる。単にPCサイトの見せ方を変更するだけでは不十分であり、モバイルファーストがコンテンツの見直しからスタートする理由もここにある。フィーチャーフォンのサイト制作にも共通していた点だ。

「実装レベルの話としては、データ通信量を抑えるような工夫が求められます。HTMLソースや無駄な画像を減らすことはもちろんですが、メディアサイトなどではページネーションを少なくすることもその1つです。地下鉄に乗っている時など、通信が断続的な環境では、コンテンツを1度で読み込ませるほうがユーザーに親切です。

また、ECサイトの入力フォームなどでは、文字入力の手間を減らすために、なるべく選択式にします。PCサイトと同じ感覚でテキスト入力フォームを設けてしまうと、入力が大変です。さらに、スマートフォンは“電話”なので、申し込み方法に“電話をする”という選択肢があってもいいわけです。コンバージョンに至るまでのシナリオを書き直すことが求められるわけですから、単なるHTMLのデータ変換で済まないことは明らかです」（谷口氏）

2. サイトの情報・UI設計

さらに最適化を突き詰めると、ユーザーインターフェイス（UI）の設計にも関わってくる。小さな画面でいかにして見せるか。縦と横が限られているなら、重ねるというアイデアもある。

「モバイル対応の試行錯誤をしているうちに、サイト構造を3次元で考えるようになりました。3次元というのは、奥行きを意識するというか、ページを重ねたり、コンテンツを折りたたんで隠したりすることです。最初は折りたたまれていて、ユーザーが必要に応じて開けるようにしたり、スクロールに合わせて読み込ませたりします。

スマートフォン用サイトとして最適なデザインを突き詰めていくと、スマートフォンアプリのUIがヒントになります。また、これまで表現のリッチ化、データの肥大化にあったWebデザインのトレンドも、原点回帰とも言えるシンプル化の流れに変わるのではないかと思っています」（谷口氏）

スマートフォン対応のUI設計などで参考になるのがYahoo! JAPAN。PCサイト（左）とスマートフォンサイト（右）。
スマートフォンサイトでは、地域情報を取得して外出先で必要な情報にすばやくアクセスできる工夫がされている。2012年2月のリニューアルではテキスト中心のシンプルなデザインに見直したことで、表示速度は2～3倍に向上したという。

3. コンテンツにフォーカスする

モバイルファーストを採用するうえで重要なのが、コンテンツにフォーカスするということ。本当にユーザーにとって必要な情報を絞り込むことだ。そのためには、前述の「ゴール設計」も必要になる。

繰り返しになるが、モバイルファーストとは、決してモバイルサイトから制作するという、順番だけの話ではない。モバイルファーストが意図するのは、コンテンツそのものを見つめ直してモバイルへの最適化を考えるということ。エンジニアやデザイナーだけでなく、コンテンツを企画するWeb担当者にもかかわる問題だ。

「モバイルファーストと言っても、多くの方はすでにPCサイトをお持ちでしょう。そこからスマートフォン環境向けのサイトにする場合、PC向けサイトの不要な要素を見つけて削っていくことになるでしょう。そうすると、PC向けサイトでは『なんとなく見栄えがいいから』『派手に見えるから』といった理由でサイトに表示していたものは削除されていき、本当に必要なコンテンツやユーザーに一番伝えたい内容にフォーカスが当たります。これは、Webサイトの役割や目的を再確認することでもあります。そして最後には、モバイルという制限のある環境で見せるべきコンテンツが厳選されるわけです」（谷口氏）

PCと比較して情報量が制限される、モバイル端末を中心に設計することでコンテンツが絞り込まれ、ユーザーの必要な情報にフォーカスできる。

PCと比較して画面が小さく、通信環境の遅いモバイル環境では、不要なコンテンツがあってはユーザーの目的達成を妨げてしまうことになる。余分な情報を削り、本当に必要なコンテンツにフォーカスできるのもモバイルファースト採用のメリットだ。こうして絞られた核となるコンテンツを中心に、改めてPCサイトの企画・設計していくことで、PCサイトも、以前よりも整理されたサイトへと改善できるだろう。

ワンソース（1つのHTML）から、スクリーンサイズに応じてデザインを切り替える「レスポンシブWebデザイン」といった手法も注目されているが、どのようにデザインを切り替えるのかは、担当者が自分の頭で考えなくてはならない。そういった意味でも、コンテンツへのフォーカスが重要だ。ユーザーが必要とするコンテンツをアクセス解析から判断するのも有効だろう。

モバイルファースト時代のキーとなるワンソース・マルチデバイス管理

Webサイトのアクセスに使われるデバイスは、PCからモバイルへと移行しつつあり、モバイルが主となれば「モバイルファースト」という流れは必然だ。しかし、現在は転換期であり、多くの企業の場合、現在のPCサイトを中心に設計していくことになるだろう。スマートフォンが普及したといっても、PCとフィーチャーフォンのシェアが圧倒的であることも確かだ。

また、モバイルファーストを採用したとしても、ユーザーの環境に合わせたサイトの管理が必要なことに変わりはない。今後さらに、スマートテレビなど、さまざまなデバイスが登場してくることを考えると、Web担当者の負担はより一層大きくなることが予想される。

こうした流れのなか、「ワンソースから各デバイスに対応していく考え方」がポイントになると谷口氏は話す。そのためには、膨大な種類のデバイス1つひとつに合わせたページ管理ではなく、コンテンツを一元管理できる、コンテンツ管理システムの存在がより一層大きくなる。もちろん、そのコンテンツはモバイルファーストの視点で考えられるべきだ。

マルチデバイスに対応した「SITE PUBLIS 3」

さまざまなデバイスが登場し、Webサイト管理が複雑化する現在、これまで以上にWebサイト管理におけるCMS活用は必至となる。特に、スマートフォン向け・タブレット向け・PC向け、そして国内ならばフィーチャーフォン向けと、多くのサイトを管理していかなければいけないWeb担当者にとって、マルチデバイス管理が可能なCMSの需要は今後さらに高まるだろう。

そうしたなか、ミックスネットワーク社の「SITE PUBLIS 3」（サイト・パブリス）シリーズは、フィーチャーフォン対応はもちろん、多様な端末が登場しているAndroidスマートフォンのサポートもきめ細かく行われているCMS製品の1つ。スマートフォンやPCサイトの個別管理はもちろん、今あるPCサイトをもとにワンソースで管理することも可能だ。スマートフォンサイトから制作するにしても、対応したCMSを利用すれば技術的な障壁を低くできる。

モバイル市場の成長によって、ユーザーに身近なインターネット端末がPCからモバイルへと移り変わっていけば、モバイルファーストはさらに浸透していくだろう。モバイルサイト対応はこれからという企業もいるだろうが、モバイルファーストを自社サイトに取り入れてみてもらいたい。

PC/モバイル/スマートフォンを一元管理して
モバイルファーストを推進するコンテンツ管理システム
「SITE PUBLIS 3」

「SITE PUBLIS 3」
詳細情報を今すぐ調べる

「SITE PUBLIS 3」は、PC、モバイル（フィーチャーフォン）、スマートフォン、タブレットPCまで、進化するWEBマーケットに最先端で対応するCMS。スマートフォン向けのページが作れるだけでなく、「1つのコンテンツ」を、PC、モバイル、スマートフォン向けに連動、最適化して配信できる「ワンソースマルチデバイス対応」を実現。

WEBサイト訪問者が利用する端末に合わせた「最適なプロモーション」を実現するとともに、WEBサイト運用の手間を劇的に削減します。

株式会社ミックスネットワーク

設立：1997年8月7日
代表者：代表取締役吉川隆二
住所：【東京本社】東京都千代田区神田神保町1-11-1 DSM神保町ビル4F
【福岡本社】福岡市博多区博多駅東2-6-26 安川産業ビル8F
【関西支社】大阪市北区豊崎2-10-17 サン・オークスビル405
URL：http://www.micsnet.co.jp/