企業サイトのスマホ“対応”とその一歩先の“最適化”とは？【レポート】

「企業サイトのスマホ対応」をテーマに、Web担当者Forumとミックスネットワークの共催セミナーが2月22日に東京で開催された。会場では、Webサイト制作に携わる3人のプロフェッショナルが登壇し、スマートフォン市場やスマートフォン対応の最新情報を惜しみなく披露してくれた。本レポートではその模様を詳細に報告する。

スマートフォン対応の重要性と、レスポンシブ・Webデザイン

キャリアからガラケーが消え、ケータイ＝スマホ時代に突入

株式会社エイチツーオー・スペース たにぐち まこと氏

「スマートフォン対応の重要性と、レスポンシブ・Webデザイン」と題し、最初に登壇したのは、Web制作会社エイチツーオー・スペース 代表取締役として、スマホ対応の最前線で活躍するたにぐちまこと氏。Web制作に関するセミナーイベント「CSS Nite」において、2011年のベストスピーカーを受賞しており、トークの巧みさも高く評価されている。

たにぐち氏はまず、「復習」と位置づけて、最近のスマホ市場の動向をデータで紹介した。いくつかの調査会社の発表によると、2011年のスマホの利用率は約20％前後とされており、2011年末の出荷台数ベースでは、携帯電話市場の43％以上がスマートフォンで占められている。このあたりの数字は、おそらく多くの参加者が共通して認識しているだろう。

とはいえスマホがはやっているのは大都市圏が中心。実際に今でも8割ぐらいはガラケー利用者なのだから、「ガラケー対応はまだまだ重要ではないか」と考えるかも人もいるだろう。しかし、ガラケー利用者が多数を占めている今の状況は、ユーザーのニーズとは関係なく、キャリア側の事情によって早晩終止符が打たれることになるという。

「キャリア各社の2011年～2012年冬春モデルを見ると、各社ともラインアップの柱はスマートフォン。auにいたっては、ガラケーが1機種もありません。つまり、利用者ニーズに関係なく、キャリアからガラケーが出なくなっているのです」

こうした状況は20年ほど前、Windowsがシェアを広げ始めた時期によく似ているという。日本ではWindowsが普及したことで、国産の独自アーキテクチャを持つPCはすべて駆逐されてしまったが、モバイルの世界でも同じことが起こりつつある。「数年後にはガラケーはなくなり、携帯電話の100％がスマートフォンという時代が来るのではないか」と、たにぐち氏は予測する。

続いてたにぐち氏は、スマホがモバイル市場だけでなく、ユーザーの行動まで変えてしまうことを示すデータをいくつか紹介した。従来の携帯電話で最も使われていた機能は「音声通話」だ。しかし、スマホでよく利用される機能の上位はWeb閲覧やメールなどであり、音声通話はトップ10にも入らない。しかも、3割近くの人はスマホでは音声通話をしない状況にある。その代わり、1日に5回以上検索したり、Twitterに投稿したりするスマホ利用者は、ガラケーの2～3倍に上っている。

「つまりスマホ利用者は、ガラケー利用者に比べてネットに対してアクティブだと言えます。そしてWeb閲覧やSNS利用時に、いちいちPCを起動する必要はなくなっていることが、ユーザーの利用スタイルから見て取れる。実際に若い世代や女性の非PC化は加速しています。今後はガラケーだけでなくPCも、スマートフォンに置き換えられてしまうかもしれないのです。その意味でも、サイトのスマホ対応は、PCサイト以上に重要だと考えています」

「動き」のあるスマホサイトは過去のもの
シンプルなサイトへと回帰した理由とは

このようなモバイル動向を踏まえて、たにぐち氏のセッションは本題である「Webサイトのスマホ対応」へと移った。まず「2011年までのお手本」として例示したのが、12年1月まで公開されていたYahoo! JAPANのスマホサイトだ。

「PCのWebサイトは、リンクでページを移動させるのが基本です。一方、スマホサイトはカルーセル（画像をスライドして表示）やスライドアップ（タッチしてメニューを表示）、タブの切り替えなどを用いて、その場でさまざまな動きをさせます。いわば3次元的なデザインが“一般的でした”。過去形でお話しするのは、このような動きを意識したデザインは、過去のものになると考えられるからです」

ではこれからのスマホサイトは、どのようになっていくのだろうか。たにぐち氏が紹介したのは、やはりYahoo! JAPANのスマホサイトだ。2012年2月にリニューアルした現在のYahoo! JAPANのサイトは、今後のスマホ対応の方向性を示しているという。

「リニューアル後のサイトでは、カルーセルやスライドアップがなくなり、非常にシンプルな作りになりました。時代に逆行しているのではと一瞬考えてしまいますが、実はそうではありません。リニューアル時のYahoo! JAPANのリリースにも記載されていましたが、機能性を損なわずに表示速度を高速化したことが重要なポイントになります」

動きのあるスマホサイトは、最初のうちは新鮮なユーザー体験を提供できる。しかし、その「動き」を実現するためには、表示速度が犠牲となり、機種依存も激しくなってしまう。ユーザーはいずれ「動き」に慣れ、飽きるだろう。すると新鮮な体験を与えていた「動き」が逆に、「重たい」「（機種によっては）見られない」という不満へと変わってしまう。だからこそYahoo! JAPANは、「非常にシンプルな作り」のサイトへと、いわば回帰したわけだ。

Android端末のシェアが半数を超えた今、iPhoneで動けばそれでよしとする考え方は成り立たない。一方で、Android端末は画面解像度や操作体系、JavaScript対応などが機種によって異なるうえ、OSのバージョンがいくつもあり、ブラウザもさまざまだ。端末とOS、ブラウザの組み合わせによって、少なく見積もっても1,000パターン以上に上ると見られる動作検証作業を行うのは、はっきりいって無理があるだろう。シンプルで機種依存性の低いサイト設計には、動作検証作業を簡略化し、「見られない」というリスクを極力抑えるメリットがある。

スマホ対応ではJavaScriptが重要なテクノロジーになる

そして新しい機種が次々とリリースされる今、注目されているのがレスポンシブWebデザインというデザイン手法だ。レスポンシブWebデザインとは、ブラウザの解像度の違いに合わせて、サイトを自動的に最適化表示させる手法。デザインの制御は、CSS3のメディアクエリという機能を用い「解像度が320ピクセル以下のときはこのCSSを読み込んでください」といった形でCSSを切り替えて行う。解像度にあわせてレイアウトが変わるため、端末ごとの画面サイズを気にする必要はない。HTMLソースは1つなので、メンテナンスも楽になる。

しかし、欠点もあるという。一度すべてのソースや画像を読み込み、CSSによる制御で不要なソース・画像を隠すという表示方法になるため、データ転送量が増え3G回線下などでは表示が遅くなってしまう場合がある。この問題点を解決するには、「モバイルファースト」という発想で、Webサイトを設計することがポイントだと、たにぐち氏は力説する。

「今までのレスポンシブWebデザインは、PCサイトがあり、そこからどの情報を隠してスマホで見せるか、という発想でした。しかしこの考え方では、表示されない余計なデータまで読み込ませることになり、3G回線などでは表示速度が遅くなります。

この発想を逆にして、スマホでの表示を前提にサイトを設計し、PCなど解像度の大きなデバイスで見られた場合に、ナビゲーションなどの要素を付け足していくのです。画像についても、PC向け画像をスマホに表示させるのではなく、スマホ向けの小さな画像に置き換えてしまう。PC向け画像は、PCで見られたときだけ読み込ませるようにするのです」

このような「要素を付け足す」というデザイン制御は、CSSだけでは実現しにくいため、JavaScriptを用いて制御するか、CMSでコントロールすることになる。スマホ対応ではJavaScrpitが重要な技術になるため、Web制作関係者は最優先で習得した方がいいと話すたにぐち氏は、企業のWeb担当者に向けても次のようにアドバイスを送る。

「現時点で確立したスマホ対応のノウハウはありませんし、来年どうなっているかは僕自身もわかりません。ユーザーの進化や変化を感じ、作っては捨てを繰り返しながら試行錯誤して、発信者側も変化していく必要があると思います」