【Webサイトリニューアル】ソーシャル&モバイル時代のwebサイトリニューアルのポイント_2013/7/26_第4回メンバーズWebマネジメントセミナー

2013年7月26日（金）
【第1部】ソーシャル&モバイル時代の
Webサイトリニューアルのポイント
http://www.members.co.jp

MEMBERS CO., LTD ALL RIGHTS RESERVED.
Are you ready ?
ソーシャルＣＭＳ
スマートフォン
・タブレット
リニューアル時のWeb担当者の関心事（2013）
本日のお話はこちら

ソーシャルメディアが生活に占める割合増えた！
2010年には世界のアクセス数で
2011年に合計滞在時間も
FacebookがGoogleを超えた。
データ出典：ITメディア http://www.itmedia.co.jp/news/articles/1003/16/news027.html
TECHWAVE http://techwave.jp/archives/51501060.html
データ出典：博報堂ＤＹグループ・ソーシャルメディア・マーケティングセンター
「全国ソーシャルメディアユーザー1000人調査」（2013/5/13）
国内でも、SNSの利用時間は78分/日
検索・ポータルを超えてNo.1に

スマートフォン・タブレットによるWeb閲覧も増えた！
データ出典：個人のスマートフォン/ケータイ利用動向調査概要インプレスR&D
（2012/11/20）
スマートフォンの利用率は
年10ポイントずつ上昇。
2013年3月（日本国内）
スマートフォンWebサイト閲覧は
2,748万人/月
一人当たり40時間/月
※ニールセン調べ
ソーシャルメディア利用率も
ケータイの3倍に増加。
（スマホユーザーの38.7%が
スマホからFacebookを利用）

キーワードはユーザー視点

スマートフォンの使われ方① 小売店・飲食系サイト 1/2
データ出典：楽天リサーチ「スマートフォンの使用実態に関する調査」
（2012/05/24）
http://research.rakuten.co.jp/report/20120524/
スマートフォンでの
購入金額が
ＰＣの金額より
多い or ほぼ同じ
（利用者の53.1%）
１位．書籍/CD/DVD
２位．洋服・ファッション
３位．日用品雑貨
データ出典：ADK調べ「スマートフォンと購買行動」（2013/12月）
http://markezine.jp/article/detail/17710
MMD研究所「スマートフォンユーザーのインサイト調査」（2012/12/27）
http://mmd.up-date.ne.jp/news/detail.php?news_id=1158
行き先のお店の
クーポンを
探してあったから
行った
（利用者の92.2％）
１位．アプリから
２位．メルマガから
３位．SNSから

スマートフォンの使われ方① 小売店・飲食系サイト 2/2
GPS機能で
飲食店に行く
（利用者の52.7%）
データ出典：博報堂ＤＹグループ「全国スマートフォンユーザー1000人定期調査」
（2012/10/29）
http://www.hakuhodody-holdings.co.jp/news/20121029/HDYnews121029.pdf

スマートフォンの使われ方② 不動産系サイト
データ出典：不動産情報サイト事業者連絡協議会
「不動産情報サイト利用者意識アンケート」（2012/10/18）
http://www.rsc-web.jp/pre/img/121019.pdf
スマートフォンで
物件を見る理由は
「どこでも手軽に
利用できるから」
（利用者の52.0%）
PCは3サイト閲覧
スマホは1サイト閲覧が
最も多い。
PCで広く探し、よい会社の
スマホサイトで決める傾向
「外観・内観など
写真情報を見る。
気に入ったら
物件をストックし、
後で比較。」

スマートフォンの使われ方③ メーカー系サイト
家電（テレビ、カメラなど）－利用者の57.9%
洋服・衣料品・靴－利用者の57.4%
PC・周辺機器－利用者の48.2%
データ出典：ADK調べ「スマートフォンと購買行動」（2013/12月）
http://markezine.jp/article/detail/17710
博報堂ＤＹグループ「全国スマートフォンユーザー1000人定期調査」（2012/10/29）
http://www.hakuhodody-holdings.co.jp/news/20121029/HDYnews121029.pdf
化粧品－利用者の37.0%
「型番、成分、評判などを確認」
スマートフォンの活用で
買い物の満足度が高まった
（45.6%）
購入時に
ソーシャル以外の
ユーザー評価を見る
（49.7%）

スマートフォンの使われ方④ 金融系サイト
スマートフォンの
ネットバンキングに
満足／やや満足
（70.0%）
データ出典：楽天リサーチ「ネットバンキングに関する調査」（2012/6/21）
http://research.rakuten.co.jp/report/20120621/

ユーザーニーズに応じて各コンテンツの対応方針を決める
コンテンツ
・機能
ＡＢＣＤＥＦＨＧ
ユーザー
ニーズ
「スマホならでは」
の専用機能で
バリバリ使いたい
スマホでも
頻繁に見たい
／探したい
スマホでも時々
見たい時がある
スマホでは
見ません
取るべき
対応
スマホ向けに
機能の充実に
力を入れる
ﾓﾊﾞｲﾙﾌｧｰｽﾄで
見やすく
／使いやすくする
スマホでも
情報取得には
支障がないように
対応しないのも
選択肢

対応方針はできた・・・・・
では、実装方法の選択は？

実装に関する３つの考え方
②ワンソース・マルチデバイス
対応
①スマートフォン・タブレット
専用
③従来型サイトの手直し
/ツール変換
ＰＣ用
サイト
スマホ用
サイト
共用
サイト
ＰＣ用
サイト
最適化の仕組み
ス
マ
ホ
用
仕
組
み
ＰＣスマホＰＣスマホＰＣスマホ
様々なデバイスに対応した
共用サイトを作る
デバイス別に
サイトやアプリを作る
PC用のサイトを
スマホにも対応させる

①スマートフォン・タブレット専用
【PC用サイト】【スマホ用サイト】
PC用とスマホ用
同じコンテンツが
２つある
定義
デバイスごとにコンテンツ（Webページ）を用意する。
スマートフォン専用サイト、Webアプリ、ネイティブアプリなどが該当。
メリット
スマートフォン独自の機能や表現が使えるので、機能性・訴求力が高い。
ファイルサイズや読込を工夫すれば、３Ｇ回線でも快適に見られる。
デメリット
コンテンツを２つ作るため、初期構築コストが高くなる。
運用でも更新箇所が２倍、かつ片方だけ更新されないよう管理が必要になる。

②ワンソース・マルチデバイス対応
【PCでの表示】【スマホでの表示】
定義
コンテンツは１つだが、CSSなどを使い、デバイスに応じて表示を切り替える
レスポンシブWebデザイン、モバイルファーストデザインなどが該当。
メリット
全デバイスのコンテンツを一括で更新できる。片方更新が漏れることはない。
新しいデバイスが登場しても、微調整で耐えられる。
デメリット
全く新しいデザインのページを作ると、実機検証に大きな負荷がかかる。
スマートフォン独自の機能・表現は使いにくく、最適化で専用サイトに劣る。
コンテンツは１つ、表示だけデバイスごとに最適化
【タブレットでの表示】

③従来型サイトの手直し/ツール変換
【PC用サイト】【スマホ用サイト】
PC用サイトを
スマホでも
見られるように
定義
PCサイトをスマートフォンでも閲覧できるように工夫 or 変換する。
FlashのJS代替、変換ツールによる機械的変換などが該当。
メリット
既存のPCサイトを流用するので、比較的短期間で実現可能。
スマホのことをあまり気にしなければ、運用負荷はほとんど増えない。
デメリット
スマートフォン向けの最適化では他の方法に劣り、見映えもほどほどである。
変換も確実ではなく、ツールのランニングコストも発生する。

実装の
選択肢
コンテンツ
・機能
ユーザー
ニーズ
取るべき
対応
対応方針に対する実装選択の幅
ＡＢＣＤＥＦＨＧ
「スマホならでは」
の専用機能で
バリバリ使いたい
スマホでも
頻繁に見たい
／探したい
スマホでも時々
見たい時がある
スマホでは
見ません
スマホ向けに
機能の充実に
力を入れる
ﾓﾊﾞｲﾙﾌｧｰｽﾄで
見やすく
／使いやすくする
スマホでも
情報取得には
支障がないように
対応しないのも
選択肢
①スマートフォン・タブレット
専用
②ワンソース・マルチデバイス
対応
③従来型サイトの手直し
/ツール変換

【参考】コンテンツ別実装の例（大京ライオンズマンション）
トップページマンション検索物件サイト読み物
情報多い快適速度更新性定型
②ワンソース ②ワンソース①専用 ①専用
定型魅力重視写真多い更新性

運用の可否
コンテンツの
移行可能性
実装方法の判断軸は３つ
ユーザーの
ベネフィット
• スマートフォン独自の機能・表現の必要性
• ユーザー利用頻度、利用時の急ぎ具合
• 情報量の多寡／探索に必要な遷移数
• 入力・選択など操作箇所の数
• 移行すべき既存コンテンツのボリューム
• システム制約（特に見た目のタグを生成するもの）
• CMS等の仕組み（静的ファイル実体の有無）
• CSSの管理状況、ソースコードのきれいさ
• 定型デザインでの運用に満足できるか否か
• 更新の影響範囲を管理できる仕組みの有無
• 更新頻度と同時更新量（特に飾りでない画像の数）
• 運用にかけられるコストと体制

スムーズな運用移行のために
スマートフォン
・タブレット
専用
ワンソース
・マルチデバイス
対応
従来型サイトの
手直し/
ツール変換
ＰＣ用とスマホ用の片方だけ
更新が漏れるリスクがある。
ページが一対一対応しない
場合は、特に難しくなる。
新規デザインの実機検証には
時間と手間がかかる。
モジュールの組み合わせが
増えるごとに大変になる。
新規デザインのページは
全てのスマートフォンで、
閲覧できるように変換できる
とは限らない。
①
②
③
コンテンツ更新のトリガーと
なる事柄を整理して、
どの場合にどこを修正するか
モデル化しておく。
最大でも50種類ぐらいの
検証済み定型モジュールで
運用することを合意する。
スマートフォンでの実機テスト
端末を限定。後は割り切る。
完全にダメな部分は非表示に
することで割り切る。
運用の注意点主な対策

まとめ：Webサイトリニューアルのポイント
１スマートフォン、ソーシャルメディアの普及に伴い、
自社ユーザーの行動がどう変わったか把握して
対応方針を決めよう。
２自社のWebサイトの資産状況をきちんと把握して、
実装方法を選ぼう。どう進めていくかを考えよう。
３リニューアルした後で運用できるかをよく考えよう。
どういう運用をするのかイメージしよう。
運用を考えないリニューアルは失敗と同じ。

本資料に関するお問い合わせはこちら
http://www.members.co.jp
m_smd@members.co.jp

【Webサイトリニューアル】ソーシャル&モバイル時代のwebサイトリニューアルのポイント_2013/7/26_第4回メンバーズWebマネジメントセミナー

【Webサイトリニューアル】ソーシャル&モバイル時代のwebサイトリニューアルのポイント_2013/7/26_第4回メンバーズWebマネジメントセミナー

Recommandé

Contenu connexe

En vedette

En vedette(9)

Similaire à 【Webサイトリニューアル】ソーシャル&モバイル時代のwebサイトリニューアルのポイント_2013/7/26_第4回メンバーズWebマネジメントセミナー

Similaire à 【Webサイトリニューアル】ソーシャル&モバイル時代のwebサイトリニューアルのポイント_2013/7/26_第4回メンバーズWebマネジメントセミナー(20)

Plus de Members_corp

Plus de Members_corp(20)

Dernier

Dernier(13)

【Webサイトリニューアル】ソーシャル&モバイル時代のwebサイトリニューアルのポイント_2013/7/26_第4回メンバーズWebマネジメントセミナー