Web制作・Web戦略のご相談はクライマークスへ

コラム

Webに関する様々な情報をご紹介していきます

クリエイティブ部 チーフデザイナー 加藤 俊司

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

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

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

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

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

メリット
  • PC/スマートフォンそれぞれに、情報構造やデザインが最適化されたサイトを構築できる。
  • PC/スマートフォンのコンテンツを一元管理できるため、運用負荷・コストが低い。
デメリット
  • PC用/スマートフォン用のサイトを別々に設計・構築するため、導入の手間・コストがかかる。
  • CMS用のサーバーの用意やセットアップ、投入作業など、導入の手間・コストがかかる。
この方法を採ることができる状況
  • PCサイト、スマートフォンサイトを同時に新規制作もしくはリニューアルする場合。

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

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

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

メリット
  • PC/スマートフォンそれぞれに、デザインが最適化されたサイトを構築できる。
  • ワンソースでマルチデバイス対応ができるため、運用を一本化できる。
  • 端末を判断してデザインを変えるのではなく、画面の幅によってデザインを変えるため、端末に依存せず、将来登場する端末にも対応できる。
  • HTMLの開発のみでOKなので、特別なサーバーを用意する必要がない。
  • URLを一本化できる。
デメリット
  • ワンソースであるため、PC用/スマートフォン用とで情報構造を変えることができない。同じ情報構造であらゆる画面サイズに対応できる設計を行う必要があり、検討に時間がかかる上に、ソースが複雑になり、制約が多い。
  • スマートフォン環境においても、PCと同じサイズのテキストや画像データを読み込む必要があるため、スマートフォン専用サイトに比べ、データ容量が大幅に増え、表示時間に影響を与える。
  • ソースが複雑であるため、運用にあたっては、サイトの構造の理解が必須。
この方法を採ることができる状況
  • PCサイト、スマートフォンサイトを同時に新規制作もしくはリニューアルする場合。

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

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

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

メリット
  • スクラッチでスマートフォンサイトを制作するよりも、導入の手間やコスト、運用の負荷が低い。
  • 情報構造・デザインがスマートフォンに最適化されたサイトを構築できる。
  • ECサイトにも導入可能。(弊社サービス「smart4me」の場合)
デメリット
  • 月額費用が発生する。
  • 運用がPC用/スマートフォン用サイトの2元管理となる。
  • ツールに用意されたデザインパーツを用いるため、スマートフォンサイトのデザインの自由度が比較的低い。
  • URLがPC用/スマートフォン用とで別となる。
この方法を採ることができる状況
  • PCサイト、スマートフォンサイトを同時に新規制作もしくはリニューアルする場合。
  • PCサイトがすでにあり、スマートフォンサイトをのみ新規に制作する場合。

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

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

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

メリット
  • URLをPCサイトと一本化できる。
  • PCサイトとの一元管理となるため、運用の手間・コストが低い。
  • ECサイトなど、システムと連動したサイトにも導入可能。
デメリット
  • 個々のサイトに合わせてスマートフォンに最適化されたテンプレートを作成する場合には、導入の手間やコストがかかる。
  • 月額費用が発生する。
この方法を採ることができる状況
  • PCサイトがすでにあり、スマートフォンサイトのみ新規に制作する場合。

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


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

2015年3月26日 加筆・修正

レスポンシブWebデザイン

レスポンシブデザインはスマートフォンやタブレット、PCなどのマルチデバイスに対応する技術として注目を集めています。
ノウハウ×実績×技術力でお客様毎のメリット/デメリットを見極め、最適なwebサイトの提案を行います。

smart4me ビジネス版

スマートフォーミーはスマートフォンサイトを簡単に制作・更新が可能なCMSパッケージです。あらかじめ、スマートフォンに最適化された基本テンプレートやメニューなどがプリセットされていますので、貴社独自のテンプレートを入力するだけで即公開が可能になります。

smart4me 無料版

スマートフォンWebサイトが無料で、簡単に制作・公開できる、世界初のWebサービス「smart4me」登場!ソーシャルメディアやブログとも連携し、使い方は無限です!