コラム

2012年4月11日

デザイン部 アートディレクター 加藤

企業のWebサイトを効率的にスマートフォンに対応させる4つの方法

スマートフォンが爆発的に普及し、今や自社サイトをスマートフォンなどマルチデバイスへ対応させることは、Web担当者にとって無視できない課題となってきました。とはいえ、従来PC向けWebサイトや携帯電話（フィーチャーフォン）向けWebサイトのみを構築・運用してきた企業にとって、更にスマートフォンサイトを導入するのは、コストや運用負荷の面で悩ましい問題です。

そこでこのコラムでは、単にPC用サイトや携帯電話用サイトとスマートフォンサイトとを別々に構築・運用するという方法以外に、効率的・効果的にスマートフォンサイトを導入するための方法を、メリット／デメリットを挙げながらご紹介します。

(1) PC用／スマートフォン用別々のサイトを用意し、CMSでコンテンツを一元管理する

PCサイトとスマートフォンサイトをスクラッチで構築し、双方を一元管理できるCMSパッケージを導入する方法です。
初期導入の手間やコストはかかりますが、運用の負荷やコストを抑えることができます。

現在、WordPressやアルファサード社の「PowerCMS」など様々なCMSでこういった対応が可能となっています。

(2) １つのソースのWebサイトを構築し、画面サイズに応じてレイアウトを変更する

「レスポンシブWebデザイン」という言葉で近年注目されている手法です。
全端末共通のHTMLソースを１つ用意し、端末を判別するのではなく、画面の幅のみを判別してレイアウトを最適な形に変更します。画面幅に応じたレイアウトの変更には、CSS3のMedia Queries（メディアクエリ）という機能を使用します。ワンソースでマルチデバイスに対応できるメリットがあります。

この方法を採用している事例については、以下のサイトに豊富に紹介されていますので、ご参考にしてみてください。

• Media Queries（海外の事例）
• Responsive Web Design JP（国内の事例）

(3) スマートフォンサイト作成ツールを使う

スマートフォン用サイトはツールで作成することで、スマートフォン用サイトに限って導入の手間やコスト、運用の負荷を抑える方法です。

この方法を採る際に利用できるサービスとしては、弊社の「smart4me」などが挙げられます。

(4) PCサイト→スマートフォンサイト変換コンバーターを使う

ツールを使って、既存のPCサイトをそのままスマートフォンサイトに変換する方法です。

この方法を採る際に利用できるサービスとしては、ドーモ社の「モビファイ」やイーエージェンシー社の「shutto」などが挙げられます。

弊社のサイトは、(2)(3)のハイブリッドとなっており、PCやタブレット端末で閲覧した場合には画面サイズに応じてレイアウトを変え、スマートフォンで閲覧した場合にはsmart4meで作成した専用サイトへリダイレクトするようになっております。
実際の導入にあたっては、コンテンツの内容、ターゲットユーザー、予算、導入期間、運用負荷などさまざまな条件を考慮したうえで、最適な方法を選択するとよいでしょう。

2015年3月26日 加筆・修正