企業サイトのスマホ“対応”とその一歩先の“最適化”とは？【レポート】 [イベント・セミナー] | Web担当者Forum

Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

「企業サイトのスマホ対応」をテーマに、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担当者に向けても次のようにアドバイスを送る。

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

事例で見るスマホ対応から始めるWeb運営の効率化

スマホ最適化の4つの方法とそれぞれの問題点とは

2番目に登壇したのは、マルチデバイス対応の本格CMS「SITE PUBLIS 3」を開発するミックスネットワーク 執行役員の布施貴規氏だ。布施氏は、「事例で見るスマホ対応から始めるWeb運営の効率化」をテーマに、同社の豊富なCMS導入事例に基づいて、具体的な企業サイトのスマホ対応の取り組み方、考え方を紹介した。

まず布施氏は、従来の企業のスマホ対応の仕方を次の4パターンに分類し、それぞれの対応策の問題点を整理していった。

1. PCサイトをそのまま表示
2. モバイルサイトと同じ内容を表示
3. スマートフォン向けサイトを別途に構築して運用
4. レスポンシブWebデザインによる運用

1つ目は、PCサイトをそのままスマホに表示させる方法だ。つまり、スマホ対応は何もしないということだが、その問題点は容易に想像できるだろう。スマホではPCに比べてはるかに小さいサイズでサイトが表示されるため、リンクを正確にタッチできなかったり、ズームなどの余分な操作が必要になったりする。加えてPCサイトには、Flashなど機種によっては閲覧できないコンテンツが混在していることもある。「結果として離脱率の上昇や、ユーザビリティ低下にともなうユーザーの心証悪化を招き、コンバージョン目標が達成できなくなる」と布施氏は分析する。

2つ目は、モバイル（ガラケー）サイトをスマホにそのまま表示させる方法。この方法では、スマートフォンの大きな画面を生かしきれないのに加え、絵文字やXHTMLなど、ガラケー独自の規格や、アクセスキーを前提とする操作体系が残るといった面でも弊害が出る。「操作性という意味では、PCサイトをそのまま表示した場合よりも、ユーザーの心証は悪化する」という。

3つ目は、PCサイトとは別途にスマホ向けサイトを構築・運用する方法だ。スマホに特化してサイトを作れば、技術面や表現面の課題は解決できる。しかし、2つのサイトを別々に運用するのに、多くのリソースが必要になるという問題が生じる。PCサイトは更新されているが、スマホサイトは未更新といった更新漏れも発生しがちだ。「リソースに余裕があればいいかもしれないが、運用を完璧にこなすのは難しく、コスト的にも最適化とは言えないのではないか」と布施氏は指摘する。

そして4つ目が、レスポンシブWebデザインによる対応だ。レスポンシブWebデザインは、1つのソースで端末に合わせた多様なデザインに対応する。このため表現の問題も運用面での問題もクリアできる。しかし、必要のないソースまで読み込むことがあるため、回線次第では表示が遅くなってしまうのが弱点だ。「表示速度が遅くなれば、当然、離脱率が上昇します。ベターな方法ではありますが、ベストとは言えない。最適化には別の方法があるのではないか」と布施氏は話した。

スマホサイト単体ではなく、企業のWeb全体を俯瞰して考える

ではどのようなやり方が、ベストなスマホ対応なのか。布施氏は「ワンソース・マルチデバイスであることが理想」と強調する。つまり1つのHTMLソースをもとに、PCサイトやモバイルサイト、スマホサイトを一元管理できるようにすることだ。スマホやタブレットPCが続々と誕生し、加速度的に普及する今日では、ワンソース・マルチデバイスによる運用はますます重要になってきている。

このワンソース・マルチデバイスは、レスポンシブWebデザインにおいてもポイントとなる考え方だ。従ってワンソース・マルチデバイスを実現し、なおかつレスポンシブWebデザインの弱点である「表示の遅さ」を克服した仕組みが、ベストなスマホ対応ということになる。そしてまさにその仕組みを実現するCMSツールが、ミックスネットワークのSITE PUBLIS 3だという。

SITE PUBLIS 3では、1つのソースで機種に合わせたデザインを設定できるだけでなく、デバイスごとに異なる表現を出力したり、ブロック単位で出力する内容を切り替えたりできる。たとえば、コンテンツの一部に対し、Android端末向けにはFlashを、iPhone向けには画像を出力するといったことが可能だ。ブログのように簡単に編集でき、スマホ、タブレット、モバイルの全機種プレビューを管理画面から確認できる。次々と登場する新機種の管理も、簡単にできるように随時パッチを発行しているという。

布施氏はこのSITE PUBLIS 3を用いたスマホ最適化事例を、いくつか紹介してくれた。セッションでは、PC・モバイル・スマホのサイトをCMSに集約して運用コストを削減し、さらにはアクセシビリティの自動チェックまで実現した金融機関の事例などが取り上げられた。

SITE PUBLIS 3を導入した企業に共通して存在する考え方として、布施氏が指摘したのは、「スマホサイト構築という目先の問題ではなく、既存のWebサイトも含め、サイト全体を将来にわたってどう最適化するかを検討している」ということだ。「スマホサイト単体ではなく、会社のWeb全体を俯瞰して、どうするのがベストかを判断するのが大事」だと布施氏は説明する。

最後に布施氏は、「スマートフォンに対応するアプローチ」として、いくつかのポイントを紹介してくれた。「モバイルファーストと異なる話に聞こえてしまうかもしれませんが」と断ったうえで、布施氏はスマートフォン対応は「PCサイト」からが基本だと話した。（モバイル向けの考え方でなく作られた）フィーチャーフォン向けのサイトをベースに構築すると、ケータイ独自の規格などが弊害となり、ユーザビリティ低下の要因になりかねないという。

「コンテンツに関しては、フィーチャーフォン向けサイトではなく、PCサイトをベースにするのが基本。コンバージョンを何に設定し、どの規模でどんなサイトを作るのかを考えたうえで、PCをベースにするか、モバイルファーストにすればいいのか考えるのがいいでしょう」と補足した。そのほか、布施氏が取り上げたポイントは次の通りだ。

• メニューやバナーなどは絞って「シンプル」に
• ナビゲーションが「リンクだとわかる」ように
• タッチパネル操作を意識した「行間・余白」を
• 縦でも横でも崩れない「リキッドデザイン」で
• さまざまな機種に対応した「コンテンツ」を

とはいえ、これらはキーポイントではあるが、最適化の本質ではないという。「マルチデバイスの一元管理を実現することで、運用を効率化します。そして効率化によって生み出されたリソースやコストを、Web運用で最も重要なPDCAサイクルに投下し、データを見ながらサイトを改善していく。これが本当の最適化だと思います」

未来へレスポンシブに対応するための設計と戦略

「コンテンツ」と「制作プロセス」がレスポンシブWebデザインの鍵になる

最後のセッションに登壇したのは、デザインやコンサルティングを通じてWebの仕事に携わる長谷川恭久氏だ。長谷川氏は「未来へレスポンシブに対応するための設計と戦略」というテーマで、レスポンシブWebデザインの本質に迫る考え方を、米国の最新事例を交えながら、説得力あふれる語り口で惜しみなく披露してくれた。

なお、講演内容は長谷川氏のブログ記事「レスポンシブWebデザインから始まる適応への道」でも触れられているので、そちらも参照してもらいたい。

登壇した長谷川氏は、まずレスポンシブWebデザインの主な対象が、スマートフォン、タブレット、PCに限定されている状況はあと1～2年で終わると述べる。

「テレビやウェアラブルデバイスなど、今後はさまざまなスクリーンでWebにアクセスする機会が増えてきます。またレスポンシブWebデザインは、小さなスクリーンへの対応という話になりがちですが、逆に大きなスクリーンでどう見せるかという方向性もあります。デバイスもますます増えてきて、iPhone、iPad、Androidという単純な構図ではなくなってきています」

Android端末だけを見てもスクリーンのサイズは多様化している。また、さまざまなブラウザに搭載されているWebKitも27種類のバージョンがある。「何百パターンもの組み合わせをテストし、同じデザインを再現するのは正気の沙汰ではない」ということから登場したのが、レスポンシブWebデザインだという。

長谷川氏は、このレスポンシブWebデザインを設計するうえでのキーポイントを、「コンテンツ」と「制作プロセス」の2点に分けて紹介した。長谷川氏が改めて指摘したのは、コンテンツの重要性だ。

「コンテンツがなければ、コンバージョンもシェアも起こらない。ではコンテンツとは何なのか。さまざまなデバイスに情報発信するなかで、何が御社の最高のエッセンスなのか。このコンテンツについては、もっと議論されなければならないでしょう」

従来のPCサイトには、本当にそこになければならないコンテンツが非常に少ないケースが実際にあるという。スクリーンサイズが大きく、さまざまな情報を詰め込むことができてしまうことがその原因だ。

「Web制作のプロセスでは、スマホの小さなスクリーンに、PCサイトのコンテンツをどうやって載せたらいいか悩むことが多いと思います。しかし、それは考え方が逆で、今まではコンテンツの本当の重要性を見ずに、何でもサイトに入れていたに過ぎません。PCを前提とするサイト構築から脱却し、モバイルファーストの考え方で、そのページで最も出さなければいけないコンテンツのエッセンスをまず把握する。これが設計のスタートになります」

重要なコンテンツを見いだすために、長谷川氏が勧めるのが「コンテンツシート」の作成だ。「それぞれのWebページで、利用者に何を見てもらいたいのか、目的を明記し、そのためのコンテンツの入手先を洗い出してシートにします。そして3段階くらいでプライオリティを付けるのです。こうすることでレスポンシブにしたときに、どのコンテンツを上位に持ってくるか、下に下げるかが見えてくると思います。コンテンツは最初から揃っていることはまれで、Web制作と同時進行で作っていくことがほとんどでしょう。しかし、1つのシートで、どこにどんなコンテンツを入れるかを管理していれば、たとえコンテンツそのものがなかったとしても、設計しやすくなります」

長谷川氏はさらに、次のように付け加えた。「今後、コンテンツが自分たちのページから離れて、たとえばソーシャルメディアに行き、未知のデバイスでまったく違う形で化けることもあるでしょう。想定していないような未知のデバイスへの対応は、コンテンツの意味付けから始まると思います」

2点目はレスポンシブWebデザインの「制作プロセス」についてだ。結論として長谷川氏は、「従来のWeb制作プロセスと、レスポンシブWebデザインの制作プロセスは変わってくる」と話す。ブレークポイントごとにワイヤーフレームつくり、それを見せただけでは、多くのクライアントは何がどうレスポンシブになるのか、想像できないからだ。

「従来のWeb制作は、まず見た目を作り、その後マークアップして、時間が空いたらコンテンツを流し込むというプロセスになっていると思います。しかし、レスポンシブWebデザインではコンテンツの位置付けが重要ですから、まずデザインをしてからテストをし、その結果をレビューするという流れになるでしょう。簡単なものを最初に作り、レスポンシブWebデザインとは何かをクライアントに体感してもらったうえで、徐々に作っていく形が最適だと思います」

“すべてのブラウザで同じデザインにする”という固定概念を捨てる

レスポンシブWebデザインにする方法としては、CSSによって要素を隠す、ナビゲーションをコンパクトにするなどさまざまな方法がある。長谷川氏は、こうしたテクニックは「この数年、Webデザインをやってきた方であれば、簡単に実装できる」と話すが、レスポンシブWebデザインには、実装以外の部分で2つの課題が残っていると説明する。

1つは、デバイスに画像を最適化させる処理だが、この課題についてはJavaScriptやサーバー側の設定の工夫で、解決可能だという。問題なのは、サイトに掲載する広告の取り扱いだ。現状では広告やその契約がレスポンシブWebデザインを想定していないため、スマートフォンで閲覧したときには広告を非表示にしているサイトも多い。

従来の広告は「サイト上のこの位置に何ピクセルで載せます」ということを保証して広告枠を販売している。しかし、レスポンシブWebデザインでは、指定された位置に決められた大きさで広告が表示されるとは限らない。この問題が解決しないと、レスポンシブWebデザインは普及しないのではないか、と長谷川氏は危惧する。

しかし、米国ではいくつかの解決策が登場しているという。1つは「レスポンシブ広告」というもので、デザインと広告を1つのパッケージにして販売する方法だ。つまり、機種によって表示位置やサイズが変わることを前提に、広告を用意してもらう。

「そしてもう1つは、私からの提案ですが、タップすると拡大する広告を設置し、問い合わせや買い物ができるようにする。つまり、広告のなかでコンバージョンを実現してしまうといった、インタラクティブな広告の設置です。今後は、広告の考え方もレスポンシブになり、新しいモデルが生み出されていくでしょう。広告は固定した枠ではなく、Webの空間を使っているという意識転換が必要になってくると思います。レスポンシブWebデザインと広告との関係は、未成熟な領域です。今後、さまざまな業界の方と話し合えたらよいと思っています」（長谷川氏）

Webが普及し始めてから15年ほどが経つが、進化の余地はまだまだ残されている。その1つがレスポンシブWebデザインだ。しかし、レスポンシブなデザインを実現するには、「サポートしているすべての端末・ブラウザで、見た目を同じにしなければならない」という無意味な固定概念をまず取り払う必要があると、長谷川氏は強調する。

「レスポンシブWebデザインを導入するには、何のためにWebを使ってコミュニケーションをしているのか、コンテンツを消費しているのかについて理解が求められます。それらを理解することによって、コンテンツをより適した形で提供できるようになると思います」

自分のライフスタイルに合わせて、1人が何台ものデバイスを使い分ける時代は、もうすぐそこまで来ている。そのときにレスポンシブWebデザインは完璧ではないが、有力な解決策の1つ。時代は待ってくれないので、新しいものをテストし、模索することが大切だ。最後に長谷川氏はこのように話し、セッションをまとめた。

• 内容カテゴリ：CMS
• 記事種別：イベント／セミナー
• 内容カテゴリ：サイト企画／制作／デザイン
• 内容カテゴリ：モバイル
• コーナー：イベント・セミナー

※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：企業サイトのスマホ“対応”とその一歩先の“最適化”とは？【レポート】 [イベント・セミナー] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.

Image may be NSFW.
Clik here to view.