サイト運用から顧客体験管理までCXM・CMSのHeartCoreシリーズ

レスポンシブWEBデザイン

1. はじめに

スマートフォン、タブレットの普及に伴い、レスポンシブWebデザインを利用してWebサイトを構築されるケースが増えてきています。一般的にCMSとレスポンシブWebデザインの相性が悪いと言われる中、HeartCoreは、唯一レスポンシブWebデザインを非常に効率的に管理できるCMSです。
ここでは、レスポンシブWebデザインの基本的な手法からHeartCoreを利用した実践方法まで、具体例を交えながら詳しく解説していきます。

1.1. レスポンシブWebデザインとは?

PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。具体的に言うと、ブラウザのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法の事です。
これにより、モバイルデバイスであれデスクトップデバイスであれ、そのデバイスがどのような大きさのスクリーンを備えていようとも、一定の見やすさ・使いやすさを提供することが可能になります。

レスポンシブウェブデザインイメージ

ウェブサイトは、現在すでに様々なサイズや仕様を持つ端末で閲覧されています。 スマートフォンやタブレットだけでも様々なサイズがあり、Wi-Fi、3G、LTEと、接続環境も整ってきています。また、テレビやゲーム機、カーナビにもブラウジング環境が搭載されています。新しい端末がものすごいスピードで市場に投入されている昨今、ユーザがどの端末でアクセスするか想定することは困難になっており、未知の端末に対応させる必要が出てきました。
近年レスポンシブWebデザインが推進される背景には、こういった要因が存在します。

1.2. レスポンシブWebデザインのメリットとデメリット

レスポンシブWebデザインを使ったサイト運営のメリットとデメリットは何でしょう? いろいろな意見がありますが、大きくは以下の通りです。

メリット

1. メインテナンスが楽

レスポンシブWebデザインは、ひとつのレイアウトを変更するだけで、全デバイスの表示に対応してくれます。たとえばバグや修正があった場合も同時にアップデートされます。

2. 一貫性のあるデザイン

デスクトップ、モバイル端末によるデザインが統一されているので、覚えてもらいやすい一貫性のあるブランドイメージを作り上げることができます。

3. 親切安心設計の操作性

レスポンシブWebデザインは、たとえばパソコンからよくチェックするサイトを、iPhoneなどのモバイル端末で見たときに、デザインが統一されていることで、ユーザはいつも通りにページを閲覧することができます。
ユーザが予期している、知っている様な操作感を実現することが、ポイントとなります。

4. システム側の設定の必要なし(リダイレクト等設定の必要なし)

ひとつのWebデザインで運営するということは、これまで携帯やiPhoneなどのデバイスごとに異なるURLを用意したり、各デバイスの互換性などを考えていましたが、その必要がなくなります。
たとえばメールマガジンなどを発行する場合、ユーザがモバイル端末から開く可能性が高くなります。そんなときに紹介するコンテンツのURLを統一して掲載することができます。また、リダイレクトの必要性が無いため、サーバーの設定が必要なくなります。

5. Google自然検索での上位表示が実現

Google自体がレスポンシブなWebサイトを最も推奨しています。デバイス毎にページを構築し、リダイレクトで対応している場合ではどうしても上手くいかない問題も、「一つのURLに対し一つのソースコードである」ことでこれらの問題が無くなり、Googleでの検索上位表示も最高の状態となります。

デメリット

1. 開発時間が長くなる

レスポンシブWebデザインの最も大きなマイナス点のひとつは、デザイン構築時間の長さです。通常のHTMLでは構築ができません。
に既存サイトをレスポンシブ化するのは、ゼロから作成するときよりも制作時間がかかってしまいます。

2. 異なるデバイスの異なる利用方法に問題

レスポンシブWebデザインが、ひとつのシンプルなウェブサイトで、全てのデバイスで平等にレイアウトできるというのは、言い過ぎかもしれません。ユーザはそれぞれ特定の目的やゴールに辿り着くことも前提に閲覧しています。デバイスごとに閲覧を分けたいケースには不向きです。

3. 古いブラウザ対応(IE8以前の問題)

レスポンシブWebデザインは、メディアクエリ(@media)テクニックを利用して、各ユーザのディスプレイサイズを判断し、レイアウト表示しています。
題点は古いブラウザ、特にInternet Explorer 8以下はメディアクエリを認識していません。
ユーザが予期している、知っている様な操作感を実現することが、ポイントとなります。

4. イメージ用のディティールの問題

もうひとつのレスポンシブWebデザインの弱点は、イメージ画像の拡大縮小です。ある程度サイズの大きなイメージ画像を利用することで、綺麗に表示することができますが、読み込み速度の点ではマイナスです。
たとえばメールマガジンなどを発行する場合、ユーザがモバイル端末から開く可能性が高くなります。そんなときに紹介するコンテンツのURLを統一して掲載することができます。また、リダイレクトの必要性が無いため、サーバーの設定が必要なくなります。

5. ナビゲーションメニューの充実度の低さ

最近のWebサイトでは、ナビゲーションメニューが取り付けられるようになり、ページ閲覧の際に重要な役割を担うようになっています。特に巨大サイトや、大量のコンテンツがあるサイトなどではなおさらです モバイル端末では、デザインできるサイズ、範囲も狭くなるので、ユーザの操作性を考慮したナビゲーションメニューの配置が重要になります。

1.3. CMSとレスポンシブWebデザインは相容れない?

レスポンシブWebデザインもCMSも、ワンソースをマルチなデバイスに配信するための処理が基本です。 ではなぜ、この2つの相性が良くないと言われているのでしょうか?

レスポンシブWebデザインではグリッドベースで、メディアクエリを用いてデバイスごとに閲覧するWebを変化させます。 それに対しCMSでは、パーツを各デバイス単位に組み立てて閲覧ページを生成します。
つまり、CMSでレスポンシブWebデザインを実現しようとすると、同じような仕組みを2度構成する必要があり手間が余計に増えます。 レスポンシブWebデザインとCMSという2種類の手法を利用することで、かえって工数とコストを増やすことになり、これこそが相容れないと言われる所以です。

しかし、その概念を覆すCMSが存在します。それが、HeartCoreです。

1.4. 一般的なCMSのレスポンシブWebデザイン対応状況

HeartCoreでの実践方法を説明する前に、一般的なCMSでのレスポンシブWebデザインの対応状況を見ておきたいと思います。

他社のCMSベンダーがレスポンシブWebデザインをCMSで実現する場合、よく下記のような説明がなされます。

  • 1の「メインテナンスが楽」について、必ずしもそうとは言えません。 CMSが有ればデバイスごとに複数のHTMLファイルを出し分けていたとしても、ワンソースマルチユース方式と遜色ない工数で内容の更新ができます。むしろ、運用のなかで新しい「コンポーネント」や「デザインパーツ」が必要になった場合、特定のデバイス専用に作るよりはレスポンシブWebデザインの方が工数は増えるでしょう。 CMSでは今までの携帯電話用のコンテンツ作成に関しては、デバイス(端末)のユーザエージェントを元にHTMLとCSSを振り分ける方法が主に取られてきました。
  • 2の「一貫性のあるデザイン」ですが、CMSで複数のHTMLソース出し分けを採用している場合であっても、一貫性のあるデザインは作れますし、作るべきです。
  • 3の「親切安心設計の操作性」は、複数のデバイスで同じページ、同じサイトを利用するユーザに対し、本当に「親切、安心設計の操作性」と言い切れるかは微妙です。同じURLにアクセスするにせよ、ナビゲーション機能を担うものの位置や表示がスクリーン特性に応じ変化するわけで、ユーザに対しては学習を要求します。
  • 4の「システム側の設定の必要なし(リダイレクト等設定の必要なし)」については、 リダイレクト等のサーバー設定も、初期に導入さえしてしまえば、CMS利用で大きな問題になることは無く、ワンソースでマルチなデバイスに対応可能な面はCMSの方が有利です。また、同一URLにする方法も、Apache等の設定で対応可能です。 最も大切なのは、レスポンシブWebデザインを実践することでは無く、 「デバイスごとのレイアウト構成 」「デバイスごとのデザイン構築」「デバイスごとの画像最適化」に注力すべきある。

しかしこれらはすべて、自分たちのCMSでレスポンシブWebデザインの実践ができない、もしくは非効率にしか実現できない為このような方法を推奨するのであり、言い訳に過ぎません。

2. レスポンシブWebデザインの基本手法

実際にレスポンシブWebデザインをはじめるにあたり、一体どのように構築すればよいのか、技術的な基本手法について簡単に説明します。

レスポンシブWebデザインは、「Fluid Grid」と呼ばれる可変グリッドシステムと、画面サイズに応じて画像を伸縮させる「Fluid Image」という手法を用い、CSS3の機能である「Media Queries」にてスクリーンサイズ等を指定することで、適用するスタイルを条件に応じて振り分けます。

Fluid Grid

グリッド状に配置されたdivやpなど各要素の幅を、絶対指定(px)から相対指定(%)に変換します。

例)
#container{width: 100%;margin:0 auto;}
.left-column {float: left;width: 70%;}
.right-column{float:right;width:30%;}

Fluid Image

画像が画面サイズに応じて伸縮するよう、最大幅を相対サイズ(%)にて指定します。

例)img{max-width:100%;}

Media Queries

ブレイクポイントと呼ばれるCSS切り替えポイントを設定し、ウィンドウ幅が何pxの時にどのスタイルを適用させるか条件定義を行います。ブレイクポイントを何pxに指定するか、いくつ設定するかは、対象とするデバイスやウェブサイトのレイアウトを考慮し決定します。

1. スタイルシートで直接指定する場合

例)@media screen and (max-width: 800px) {…}

⇒ウィンドウ幅が800px以下の場合に、{…}内のスタイルが適用されます。

2. スタイルシート内でインポート指定する場合

例)@import url(smartphone.css) screen and (max-width: 480px);

⇒ウィンドウ幅が480px以下の場合に、"smartphone.css"ファイルが適用されます。

3. HTMLの内でmedia属性を指定する場合

例)<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)" href="tablet.css" />

⇒ウィンドウ幅が768px以上、1024px以下の場合に、"tablet.css" ファイルが適用されます。

補足

Media Queriesの設定をスマートフォンで正しく表示させるためには、メタ情報にviewportを指定しておく必要があります。

例)<meta name="viewport" content="width=device-width,initial-scale=1.0">

また、IE8以下にもHTML5とMedia queriesを対応させるには、内で外部公開スクリプトを読み込みます。

例)
  • <!--[if lt IE 9]>
  • <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  • <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  • <![endif]-->
  • 以上がレスポンシブWebデザインの基本手法ですが、この限りではありません。その他、コーディング等の詳細については、一般的なドキュメントをご参照ください。

    3. HeartCoreを使ったレスポンシブWebデザイン

    それでは、HeartCoreを使ったレスポンシブWebデザインが、なぜ、そしてどのように効率良く管理・運営できるのか説明していきたいと思います。

    3.1. HeartCoreの特長

    HeartCoreは他のCMSと管理方法が少し異なっており、プログラムでよく用いられるMVCをコンテンツとして管理することが可能です。簡単に言うと、デザイン、機能、データを別のコンテンツとして管理をし、それぞれを参照しながら1つの閲覧ページを生成することができる仕組みです。

    レスポンシブWebデザインを実践する際にも、この考え方が基本になります。レスポンシブWebデザインで言うHTMLはHeartCoreのデータにあたり、CSSはデザインに、またJavaScriptやCSSでの制御は機能に該当します。

    例えば、グリッドベースのレイアウトを実現するために、レスポンシブWebデザインでは通常はHTML+CSS3での制御を必要とします。
    HeartCoreの場合、以下のようにHTMLやCSSでの制御を、@関数で置き換えることが可能です。

    メディアクエリのブレイクポイント設定

    メディアクエリのブレイクポイント値を、任意の名前を定義し関数で置き換えることができます。

    【HeartCore設定画面】任意の名前を定義して値を入力します。

    ブレイクポイント定義画面

    【メディアクエリ】記述を固定値から関数に置き換えます。

    @media (max-width: 480px)

    @media (max-width: @@@config:Breakpoint:Mediawidth1@@@)

    @media (max-width: 768px)

    @media (max-width: @@@config:Breakpoint:Mediawidth2@@@)

    画面サイズを変更したい場合にも、通常は全てのHTMLファイルやCSSファイル内の該当箇所を1つ1つする必要があるところ、HeartCoreでは1カ所変更するだけで全ての箇所に変更が反映されるため、管理が大幅に効率化されます。

    デバイスやブラウザ指定の表示切替え

    出力先のデバイスやブラウザに応じて、指定した領域の表示内容を切り替えることができます。

    【HTML】各表示領域を@@@display...@@@~@@@end....@@@で囲みます。

    @@@display:if:device=iPhone@@@
    iPhone表示領域
    @@@end:if:device=iPhone@@@

    @@@display:if:device=Android@@@
    Android表示領域
    @@@end:if:device=Android@@@

    下図の例では、どちらも同じスマートフォン用のレイアウトを表示しつつ、iPhoneからアクセスしたユーザにはiPhone用の広告を、AndroidユーザにはAndoroid用の広告が出力されます。

    デバイス指定の表示切り替え例

    画面サイズに依存するレスポンシブWebデザインだけでは実現できない細かなカスタマイズが可能となります。

    このように、HeartCoreを活用することで、レスポンシブWebデザインのデメリットと言われている問題点も解決され、効率的な管理・運用が実現します。

    3.2. HeartCoreでの実践サンプル1「CSS3+HTML5」利用

    一般的なレスポンシブWebデザインの実践方法であるCSS3とHTML5を用い、CMSのパッケージであるHeartCoreの機能を使用したマルチデバイス対応サンプルを紹介します。

    HeartCoreで実践する際の主な流れ

    • ・ブレイクポイントを決定し、HeartCoreへ値を定義します。
    • ・メディアクエリのブレイクポイントを、関数に置き換えます。
    • ・必要に応じて、デバイス指定の表示切替えを調整します。

    ※詳しい設定方法は、下記のマニュアル一覧ページより「レスポンシブWebデザイン対応(CSS3+HTML5利用)」をご参照ください。

    HeartCoreには、サンプルとしてご利用いただけるインポート用データ「Responsive CSS」が用意されています。
    このサンプルは、Twitter社の提供する、レスポンシブWebデザインに対応したフレームワーク「Bootstrap」を使用して構築されています。

    Top(一般的なレスポンシブWebデザインのページ)

    デスクトップ(1200px以上)
    デスクトップ
    タブレットランドスケープ(1024px)
    タブレットランドスケープ
    タブレットポートレート(768px)
    タブレットポートレート
    スマートフォンランドスケープ(480px)
    スマートフォンランドスケープ
    スマートフォンポートレート(320px)
    スマートフォンポートレート

    他にも、商品ページ等に適したコンテンツデータベースからデータを取得するサンプルページや、商品登録フォームも含まれています。
    サンプルデータにそのまま自社コンテンツを流し込んでご利用いただくことはもちろん、要件に応じてカスタマイズしていただくことも可能です。ご自由にご活用ください。

    サンプルデータは下記ダウンロードページよりダウンロード頂くことも可能です。(要ログイン)

    ダウンロードページはこちら

    3.3. HeartCoreでの実践サンプル2「マイクロサイト」利用

    次は、HeartCoreのマイクロサイト機能を使用したバージョン振り分けによるマルチデバイス対応サンプルを紹介します。一般的なレスポンシブWebデザインに比べて、通常のWebをCMSで構築する場合に近い管理方法です。

    HeartCoreで実践する際の主な流れ

    • 出し分けしたいデバイスを決定し、HeartCoreへバージョン登録します。
    • マイクロサイト機能を使って、登録したバージョンを各デバイスのユーザエージェントと関連付けます。
    • テンプレートやメニューなど、ページに使用する各要素をそれぞれのデバイス向けに最適化を行います。

    ※詳しい設定方法は、下記のマニュアル一覧ページより「レスポンシブWebデザイン対応(マイクロサイト利用)」をご参照ください。

    HeartCoreには、サンプルとしてご利用いただけるインポート用データ「Responsive」が用意されています。

    商品一覧(コンテンツデータベースから情報を取得して表示するページ)

    デスクトップ
    デスクトップ
    スマートフォン
    スマートフォン
    フィーチャーフォン
    フィーチャーフォン

    他にも、店舗情報やニュースページ等に適したサンプルページ、またコンテンツ登録フォームも含まれています。
    サンプルデータにそのまま自社コンテンツを流し込んでご利用いただくことはもちろん、要件に応じてカスタマイズしていただくことも可能です。ご自由にご活用ください。

    サンプルデータは、下記ダウンロードページよりダウンロード頂くことも可能です。(要ログイン)

    これで、基本的なレスポンシブWebデザインの構築の方法をご理解頂けたと思います。
    HeartCoreを利用することで、通常のレスポンシブWebデザイン対応のサイト構築の工数を削減できるようになります。ぜひ、御社のサイト運用にお役立てください。

    ENGLISH

    コンテンツメニュー

    03-6409-6966