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

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

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

株式会社ミックスネットワーク
執行役員
ZEONIC CREATIVE
事業部長
布施 貴規氏

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サイクルに投下し、データを見ながらサイトを改善していく。これが本当の最適化だと思います」