【レポート】Web担当者Forumミーティング 2011 Spring

企業サイトのスマートフォン対応は待ったなし！　PC/モバイル/スマホサイトの一元管理による解決手法 | ミックスネットワーク

PC/モバイル/スマートフォンというマルチデバイス対応を行う効率的な方法を指南した講演をレポート

34 29 23

この記事では、2011年5月31日に開催されたセミナーイベント「Web担当者Forumミーティング 2011 Spring」の講演をレポートする。他のレポートをご覧になりたい方はこちら。

企業サイトのスマートフォン対応は待ったなし！
PC/モバイル/スマートフォンサイトの一元管理による解決手法

クリックするとセミナーの内容を動画でご覧いただけます

クリックで動画を表示
（Flash）
（ボックスが広がって
再生が始まります）

スマートフォンやタブレットPCという次世代ツールが加わりますます複雑になっていくWeb運営。A会場2番目のセッションでは、株式会社ミックスネットワーク取締役執行役員COO 成瀬俊介氏が企業サイトのスマートフォン対応について講演。既存のリソースを活かし、なるべくコストをかけずにPC/モバイル/スマートフォンというマルチデバイス対応を行う効率的な方法を指南した。

企業サイトがスマートフォンに対応する3つのパターン

株式会社ミックスネットワーク
取締役執行役員COO
成瀬俊介氏

新たなデバイスの登場によって、PCサイトはもちろん、スマートフォンでもユーザビリティやクオリティを保ったサイトの提供が求められている。成瀬氏は、限られたリソースのなかで、いかにすばやく効率的にその要件を実現していくか、まずは現在一般的に行われている3つの対応策を、そのメリット・デメリットとともにあげた。

一番簡単なのは「PCサイトをそのまま表示」する方法だ。iPhoneおよびAndroid端末はフルブラウザを搭載しているためPCサイトの表示は問題なく行うことができる。だが、スマートフォンの限られた画面サイズでは、PCがもっていた一覧性が著しく損なわれるというデメリットがある。

PCでの閲覧を前提としたサイトでは、Flash、PDF、Officeドキュメントなどのコンテンツが混在している場合もあり、コンテンツ差し替えやリンク先変更の処理なども必要になる。さらに、広告バナーの位置などの画面レイアウトはPCサイトでのコンバージョンを考慮して考えられているため、マーケティング的には意味を成さないという問題もある。

次に「モバイルサイトをそのまま表示」する方法だ。モバイルサイトは小さい画面領域でも表示できるため一見問題なく思えるが、極力シンプルに作られたモバイルサイトは、スマートフォンの表現力に対して物足りなく感じられる。また、絵文字などモバイル独特の表現が使えないことに加え、モバイル独特の書式・文字コードなどが存在し、移行に手間がかかる。さらに、モバイルサイトはテンキーの「0」を押すとホームに戻るといった、キー操作を前提に作成されているため、タッチパネルのインターフェイスとは根本的にそぐわない。

最後に紹介されたのは、「スマートフォン向けサイトを別途に構築して運用」する方法だ。ターゲットをスマートフォンユーザーに絞った専用サイトであれば、閲覧性、ユーザビリティともに高めることができるが、構築・運用コストが大幅にかさんでしまうという問題がある。また、PC、モバイル、スマートフォンのすべてを更新するとなると運用側の手数も増え、PCでは更新されたのにスマートフォンサイトにはまだ反映されないといった更新のタイムラグが生まれがちになる。また、担当部署が複数にわたるなど、オペレーション面でも問題が生じる可能性がある。

小さく始めるスマートフォン対応へのアプローチ手法

では、企業がスマートフォンに対応するための最適なアプローチはどのようなものなのだろう。成瀬氏は次の6つのポイントを紹介した解説を行った。

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

まず基本方針として示されたのが、PCサイトのコーディングをベースに構築を進めることだ。その方が、モバイルの独自規格や絵文字変換などを気にすることなく作業できる。一方で、スマートフォンの通信環境は3G回線がメインのため、PCサイトをそのまま表示させるのではなく、必要な要素だけに絞り、ブラウジングを軽くしてスムーズに表示できるようにすることも重要になる。

次に、成瀬氏が見落としがちな点として指摘したのはリンクナビゲーションの表現だ。スマートフォンはタッチパネル操作のためカーソルが表示されず、マウスオーバーによる表現が機能しない。また、モバイルのようにキー操作でリンクをたどることもできないため、スマートフォンサイトでは、明示的にリンクであることを示す必要がある。「スマートフォン向けのメニューや新着情報などのリンクには、矢印などのアイコンやわかりやすいスタイルをあてること」と話す成瀬氏は、リンクやボタン選択などのタッチ誤操作を防ぐため、「さまざまな条件でテストを繰り返し、タッチエラーが起きない行間・余白の調度よいレベルを調整することが必要」と続けて説明した。

スマートフォン独自のノウハウとして、縦画面と横画面で使える端末の特性を活かし、固定幅ではなくリキッドデザイン（可変幅）で設計するのもポイントだという。成瀬氏は「レイアウトをキープするという考え方ではなく、縦を基準にして横画面表示でのレイアウト確認をしっかり行う必要がある」と強調した。

最後のポイントとしては、多数のスマートフォンデバイスが存在するなかで、少なくともiOS、Androidの各バージョンでテストを行う必要があること、「理想的にはCSSを複数用意し、1つのWebページで機種・OS別に内容を出し分ける」と説明した。

既存のWeb資産を活かしながらスマートフォン対応するには

以上を踏まえて成瀬氏は、既存のWeb資産を活かしながらスマートフォン対応を行う具体的な3つの方法を示した。

PC/モバイル用HTML変換サービス
HTMLファイルをゲートウェイに通してコンバートする方法だ。ただしこれはあくまで変換なので、スマートフォン向けコンテンツとしての最適化は難しく、単にスマートフォンで見られるようにしたにすぎないと指摘した。また、動的コンテンツへの対応はサービスにより可否があるという欠点も示した。
Flashなどの変換ライブラリ
これはライブラリをサーバーに組み込むことによって、Flashなどのコンテンツをスマートフォンでも見えるようにコンバートするだけのものであり、動作も重いうえに、あくまで部分的な対応であるためあまり推奨できないとのことだ。
CMSによるスマートフォン対応
スマートフォンへの対応は、既存Web資産の「変換」だけでは対応できない事項が多く、「変換」に加えて「独自設定」、「端末切りかえ」などの機能が柔軟に使い分けられることが必要であるとし、この3つのアプローチを低コストで実現するソリューションとしてミックスネットワークが開発・販売を行う「SITE PUBLIS 3」を例に紹介を行った。また、PC、モバイル、スマートフォンのマルチデバイスに対応した運用を行っている事例として、KDDIのポータルサイト「au one」が紹介された。

最後に成瀬氏は、マルチデバイス対応の方法として、PC/モバイル/スマートフォンのマルチデバイスに対応したCMSの活用を提案し、セッションを終えた。

※講演内容の詳細をご覧になりたい方は、記事冒頭の動画をご利用ください。