【webサイト構築/webサイト...
DESCRIPTION
Webサイト運用負荷低減にも繋がる!レスポンシブウェブデザイン導入実例 2013年11月8日(金)Webサイトマネジメントミニセミナーセミナー資料第2部 第2回「運用視点から考えるモバイルファーストの企業Webサイト」TRANSCRIPT
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. 網羅性のあるガイドラインを策定する
開発実績の多い会社への打診
本日のまとめ
レスポンシブウェブデザインを導入して運用負荷低減を目指す場合は
導入と運用は同じ会社 への依頼が望ましい
難易度の高い運用が実現できるかどうかの判断は
開発/運用経験の豊富さ が最重要
本資料に関するお問い合わせはこちら
http://www.members.co.jp/