2013年11月29日（金）

Webサイト運用負荷低減にも繋がる！

レスポンシブウェブデザイン導入実例

http://www.members.co.jp/

アジェンダ

第1章

レスポンシブウェブデザインとは？

第2章

導入手法について

第3章

導入による落とし穴と対策

第1章

レスポンシブウェブデザインとは？

レスポンシブウェブデザインの定義

レスポンシブウェブデザイン

【意味】PCやタブレット、スマートフォンなど画面サイズの異なる

デバイスに最適化したレイアウトを、単一のHTMLファイ

ルで実現する制作手法のこと。

画面サイズ ≠ ディスプレイ解像度

769px以上

768px以下

639px以下

ディスプレイ解像度

基本的な仕組み

JavaScriptなどによる振り分け制御とは異なる

あくまでもHTMLファイルは単一

layout.css index.html

768px以下

639px以下

769px以上

769px以上

CSS定義

640px以上

CSS定義

639px以下

CSS定義

ブレイクポイント

レスポンシブウェブデザインのメリット/デメリット

メリット デメリット

単一のHTMLファイル管理が

可能

新しく登場するデバイスへの

対応が容易

デバイスごとのリダイレクト

（振り分け）処理が不要

URLが1つになることで検索

サイトから正しい評価が得ら

れる

開発工数がかかるため費用が

高くなる

全てのソースや画像を読み込

むため表示速度が遅くなる

HTMLやCSSが複雑になるた

め運用には高い理解と知識が

必要になる

多くの開発を経験してノウハ

ウを蓄積している制作会社が

少ない

第2章

導入手法について

閲覧環境の最適化

日本国内におけるスマートフォン普及率

約25.0％

今後のWEBサイトの閲覧環境

WEBサイトへの流入経路は

スマートフォンやタブレット端末へと移行していく

モバイル端末が主体

モバイルファーストでの構築例

ロゴ メニュー

キービジュアル画像

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ボタン1

ボタン2

画像 テキストテキストテキストテキスト

いかにスマート

フォンでコンテ

ンツを最適化で

きるか

STEP1 STEP2

ロゴ 企業名 ヘッダー内補助導線

グローバルナビゲーション

画像

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストリンク

キービジュアル画像

スマートフォン用コン

テンツをベースにPC

用コンテンツを構築

実際に導入する場合

スマホ変換サービス

を利用しており段階

的に実装したい

リニューアルのタ

イミングを待たず

に実装したい

WEBサイトの規

模が大きいので試

験的に導入したい

導入手法がモバイルファーストにならない場合が多い

PC画面ありきの導入手法

PC画面ありきの構築例

ロゴ メニュー

キービジュアル画像

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ボタン1

ボタン2

画像 テキストテキストテキストテキスト

既存のPCコンテ

ンツをベースに

モバイル用コン

テンツを上乗せ

STEP1 STEP2

ロゴ 企業名 ヘッダー内補助導線

グローバルナビゲーション

画像

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストリンク

キービジュアル画像

既に存在しているPC

での閲覧に最適化され

たコンテンツ

制作手法に関わらず…

落とし穴があります

第3章

導入による落とし穴と対策

落とし穴の正体

運 用 業 務

運用を考慮した設計を行わないと落とし穴にはまる可能性がある

問題点

PC画面

ロゴ メニュー

キービジュアル画像（SP用）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ボタンリンク1

ボタンリンク2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

スマホ画面

コピーライト

PRエリアタイトル

バナー2

ロゴ 企業名 ヘッダー内補助導線

グローバルナビゲーション

画像

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストリンク1

テキストリンク2

キービジュアル画像（PC用）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像

フッターリンク

コピーライト

スマホ画面には

存在しない情報

PC画面には

存在しない情報

テキストテキストテキスト

運用で使用するデバイス

問 題

なぜ掲載要素の差異が問題なのか

お客様側ではPCを使用して業務を行うことがほとんど

修正後の画面チェック漏れ

PC画面を出力したものを基にして赤字原稿を作成

掲載要素の差異に気づけず、

手戻りが多く発生しがち

問題が与える影響

手戻りが多く発生すると

コミュニケーションコストの増加

再作業（修正指示やチェック作業）によるタスクの増加

修正漏れなどによるWEBサイト品質の低下

運用負荷低減に繋がらない

実際に起こった事例①

フッターリンクに掲載要素差異があるにも関わらず、PCレイアウトのリンク先

修正指示しか入稿されず、指示に従った作業を実施

モバイルレイアウト時のフッターリンクがまったく異なるページへ遷移

導線の破たん

事象

結果

実際に起こった事例②

事象

キービジュアル画像はPC用とモバイル用で別の画像を読み込んでいるのを忘れて

しまい、PC用画像のみを公開

結果

モバイルレイアウトのキービジュアル画像で既に終了したキャンペーン情報を掲載

公開後コンテンツの不一致

実際に起こった事例③

事象

HTML5/CSS3など最新技術を使用するため、求められる技術レベルが高い

結果

レスポンシブウェブデザイン実装後の運用において、実装前と同じ開発スケジュー

ルで進められない

公開日遅延

実際に起こった事例④

事象

レスポンシブウェブデザインの導入が要件に含まれたリニューアルにおいて、

複数社へ見積依頼を出したところ、4,000万～1億円と金額の幅が大きかった

結果

特に大規模WEBサイトへのレスポンシブウェブデザイン導入は過渡期のため

正確に見積もれない

不適切な金額で発注する恐れ

問題が起こらないようにするためには

1. 設計はモジュール定義から入る

2. モジュールはCSSのみで実現可能な範囲に留める

3. 掲載要素の差異は最小限に留める

4. 原稿フォーマットを用いた入稿をする

5. 網羅性のあるガイドラインを策定する

開発実績の多い会社への打診

本日のまとめ

レスポンシブウェブデザインを導入して運用負荷低減を目指す場合は

導入と運用は同じ会社 への依頼が望ましい

難易度の高い運用が実現できるかどうかの判断は

開発/運用経験の豊富さ が最重要

本資料に関するお問い合わせはこちら

m_smd@members.co.jp

http://www.members.co.jp/