Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2013年7月26日(金)
【第1部】 ソーシャル&モバイル時代の
Webサイトリニューアルのポイント
http://www.members.co.jp
Page 1MEMBERS CO., LTD ALL RIGHTS RESERVED.
Are you ready ?
ソーシャル CMS
スマートフォン
・タブレット
リニューアル時のWeb担当者の関心事(2013)
本日のお話はこちら
Page 2MEMBERS CO., LTD ALL RIGHTS RESERVED.
ソーシャルメディアが生活に占める割合増えた!
2010年には世界のアクセス数で
2011年に合計滞在時間も
FacebookがGoogleを超えた。
データ...
Page 3MEMBERS CO., LTD ALL RIGHTS RESERVED.
スマートフォン・タブレットによるWeb閲覧も増えた!
データ出典:個人のスマートフォン/ケータイ利用動向調査概要 インプレスR&D
(2012/11/20)...
Page 4MEMBERS CO., LTD ALL RIGHTS RESERVED.
キーワードはユーザー視点
Page 5MEMBERS CO., LTD ALL RIGHTS RESERVED.
スマートフォンの使われ方① 小売店・飲食系サイト 1/2
データ出典:楽天リサーチ「スマートフォンの使用実態に関する調査」
(2012/05/24)
htt...
Page 6MEMBERS CO., LTD ALL RIGHTS RESERVED.
スマートフォンの使われ方① 小売店・飲食系サイト 2/2
GPS機能で
飲食店に行く
(利用者の52.7%)
データ出典:博報堂DYグループ「全国スマートフ...
Page 7MEMBERS CO., LTD ALL RIGHTS RESERVED.
スマートフォンの使われ方② 不動産系サイト
データ出典:不動産情報サイト事業者連絡協議会
「不動産情報サイト利用者意識アンケート」(2012/10/18)
...
Page 8MEMBERS CO., LTD ALL RIGHTS RESERVED.
スマートフォンの使われ方③ メーカー系サイト
家電(テレビ、カメラなど)-利用者の57.9%
洋服・衣料品・靴-利用者の57.4%
PC・周辺機器-利用者の...
Page 9MEMBERS CO., LTD ALL RIGHTS RESERVED.
スマートフォンの使われ方④ 金融系サイト
スマートフォンの
ネットバンキングに
満足/やや満足
(70.0%)
データ出典:楽天リサーチ「ネットバンキングに...
Page 10MEMBERS CO., LTD ALL RIGHTS RESERVED.
ユーザーニーズに応じて各コンテンツの対応方針を決める
コンテンツ
・機能
A B C D E F HG
ユーザー
ニーズ
「スマホならでは」
の専用機能で...
対応方針はできた・・・・・
では、実装方法の選択は?
Page 12MEMBERS CO., LTD ALL RIGHTS RESERVED.
実装に関する3つの考え方
②ワンソース・マルチデバイス
対応
①スマートフォン・タブレット
専用
③従来型サイトの手直し
/ツール変換
PC用
サイト
ス...
Page 13MEMBERS CO., LTD ALL RIGHTS RESERVED.
実装に関する3つの考え方
②ワンソース・マルチデバイス
対応
①スマートフォン・タブレット
専用
③従来型サイトの手直し
/ツール変換
PC用
サイト
ス...
Page 14MEMBERS CO., LTD ALL RIGHTS RESERVED.
①スマートフォン・タブレット専用
【PC用サイト】 【スマホ用サイト】
PC用とスマホ用
同じコンテンツが
2つある
定義
デバイスごとにコンテンツ(We...
Page 15MEMBERS CO., LTD ALL RIGHTS RESERVED.
②ワンソース・マルチデバイス対応
【PCでの表示】 【スマホでの表示】
定義
コンテンツは1つだが、CSSなどを使い、デバイスに応じて表示を切り替える
レ...
Page 16MEMBERS CO., LTD ALL RIGHTS RESERVED.
③従来型サイトの手直し/ツール変換
【PC用サイト】 【スマホ用サイト】
PC用サイトを
スマホでも
見られるように
定義
PCサイトをスマートフォンでも...
Page 17MEMBERS CO., LTD ALL RIGHTS RESERVED.
実装の
選択肢
コンテンツ
・機能
ユーザー
ニーズ
取るべき
対応
対応方針に対する実装選択の幅
A B C D E F HG
「スマホならでは」
の専...
Page 18MEMBERS CO., LTD ALL RIGHTS RESERVED.
【参考】 コンテンツ別実装の例(大京ライオンズマンション)
トップページ マンション検索 物件サイト 読み物
情報多い 快適速度 更新性 定型
②ワンソー...
Page 19MEMBERS CO., LTD ALL RIGHTS RESERVED.
運用の可否
コンテンツの
移行可能性
実装方法の判断軸は3つ
ユーザーの
ベネフィット
• スマートフォン独自の機能・表現の必要性
• ユーザー利用頻度、...
Page 20MEMBERS CO., LTD ALL RIGHTS RESERVED.
スムーズな運用移行のために
スマートフォン
・タブレット
専用
ワンソース
・マルチデバイス
対応
従来型サイトの
手直し/
ツール変換
PC用とスマホ用...
Page 21MEMBERS CO., LTD ALL RIGHTS RESERVED.
まとめ:Webサイトリニューアルのポイント
1 スマートフォン、ソーシャルメディアの普及に伴い、
自社ユーザーの行動がどう変わったか把握して
対応方針を決...
本資料に関するお問い合わせはこちら
http://www.members.co.jp
m_smd@members.co.jp
Upcoming SlideShare
Loading in …5
×

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

6,055 views

Published on

第4回メンバーズWebマネジメントセミナー
まだ間に合う!モバイル時代のWebサイトリニューアルとは~canon.jp モバイルファースト リニューアルのご紹介~

【第1部】ソーシャル&モバイル時代のWebサイトリニューアルのポイント
ソーシャル対応、多デバイス対応が必須のイマドキのリニューアル成功のポイントと、スムースな運用移行の秘訣をご紹介します。

Published in: Business
  • Be the first to comment

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

  1. 1. 2013年7月26日(金) 【第1部】 ソーシャル&モバイル時代の Webサイトリニューアルのポイント http://www.members.co.jp
  2. 2. Page 1MEMBERS CO., LTD ALL RIGHTS RESERVED. Are you ready ? ソーシャル CMS スマートフォン ・タブレット リニューアル時のWeb担当者の関心事(2013) 本日のお話はこちら
  3. 3. Page 2MEMBERS CO., LTD ALL RIGHTS RESERVED. ソーシャルメディアが生活に占める割合増えた! 2010年には世界のアクセス数で 2011年に合計滞在時間も FacebookがGoogleを超えた。 データ出典:ITメディア http://www.itmedia.co.jp/news/articles/1003/16/news027.html TECHWAVE http://techwave.jp/archives/51501060.html データ出典:博報堂DYグループ・ソーシャルメディア・マーケティングセンター 「全国ソーシャルメディアユーザー1000人調査」(2013/5/13) 国内でも、SNSの利用時間は78分/日 検索・ポータルを超えてNo.1に
  4. 4. Page 3MEMBERS CO., LTD ALL RIGHTS RESERVED. スマートフォン・タブレットによるWeb閲覧も増えた! データ出典:個人のスマートフォン/ケータイ利用動向調査概要 インプレスR&D (2012/11/20) スマートフォンの利用率は 年10ポイントずつ上昇。 2013年3月(日本国内) スマートフォンWebサイト閲覧は 2,748万人/月 一人当たり40時間/月 ※ニールセン調べ ソーシャルメディア利用率も ケータイの3倍に増加。 (スマホユーザーの38.7%が スマホからFacebookを利用)
  5. 5. Page 4MEMBERS CO., LTD ALL RIGHTS RESERVED. キーワードはユーザー視点
  6. 6. Page 5MEMBERS CO., LTD ALL RIGHTS RESERVED. スマートフォンの使われ方① 小売店・飲食系サイト 1/2 データ出典:楽天リサーチ「スマートフォンの使用実態に関する調査」 (2012/05/24) http://research.rakuten.co.jp/report/20120524/ スマートフォンでの 購入金額が PCの金額より 多い or ほぼ同じ (利用者の53.1%) 1位.書籍/CD/DVD 2位.洋服・ファッション 3位.日用品雑貨 データ出典: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%) 1位.アプリから 2位.メルマガから 3位.SNSから
  7. 7. Page 6MEMBERS CO., LTD ALL RIGHTS RESERVED. スマートフォンの使われ方① 小売店・飲食系サイト 2/2 GPS機能で 飲食店に行く (利用者の52.7%) データ出典:博報堂DYグループ「全国スマートフォンユーザー1000人定期調査」 (2012/10/29) http://www.hakuhodody-holdings.co.jp/news/20121029/HDYnews121029.pdf
  8. 8. Page 7MEMBERS CO., LTD ALL RIGHTS RESERVED. スマートフォンの使われ方② 不動産系サイト データ出典:不動産情報サイト事業者連絡協議会 「不動産情報サイト利用者意識アンケート」(2012/10/18) http://www.rsc-web.jp/pre/img/121019.pdf スマートフォンで 物件を見る理由は 「どこでも手軽に 利用できるから」 (利用者の52.0%) PCは3サイト閲覧 スマホは1サイト閲覧が 最も多い。 PCで広く探し、よい会社の スマホサイトで決める傾向 「外観・内観など 写真情報を見る。 気に入ったら 物件をストックし、 後で比較。」
  9. 9. Page 8MEMBERS CO., LTD ALL RIGHTS RESERVED. スマートフォンの使われ方③ メーカー系サイト 家電(テレビ、カメラなど)-利用者の57.9% 洋服・衣料品・靴-利用者の57.4% PC・周辺機器-利用者の48.2% データ出典:ADK調べ「スマートフォンと購買行動」(2013/12月) http://markezine.jp/article/detail/17710 博報堂DYグループ「全国スマートフォンユーザー1000人定期調査」(2012/10/29) http://www.hakuhodody-holdings.co.jp/news/20121029/HDYnews121029.pdf 化粧品-利用者の37.0% 「型番、成分、評判などを確認」 スマートフォンの活用で 買い物の満足度が高まった (45.6%) 購入時に ソーシャル以外の ユーザー評価を見る (49.7%)
  10. 10. Page 9MEMBERS CO., LTD ALL RIGHTS RESERVED. スマートフォンの使われ方④ 金融系サイト スマートフォンの ネットバンキングに 満足/やや満足 (70.0%) データ出典:楽天リサーチ「ネットバンキングに関する調査」(2012/6/21) http://research.rakuten.co.jp/report/20120621/
  11. 11. Page 10MEMBERS CO., LTD ALL RIGHTS RESERVED. ユーザーニーズに応じて各コンテンツの対応方針を決める コンテンツ ・機能 A B C D E F HG ユーザー ニーズ 「スマホならでは」 の専用機能で バリバリ使いたい スマホでも 頻繁に見たい /探したい スマホでも時々 見たい時がある スマホでは 見ません 取るべき 対応 スマホ向けに 機能の充実に 力を入れる モバイルファーストで 見やすく /使いやすくする スマホでも 情報取得には 支障がないように 対応しないのも 選択肢
  12. 12. 対応方針はできた・・・・・ では、実装方法の選択は?
  13. 13. Page 12MEMBERS CO., LTD ALL RIGHTS RESERVED. 実装に関する3つの考え方 ②ワンソース・マルチデバイス 対応 ①スマートフォン・タブレット 専用 ③従来型サイトの手直し /ツール変換 PC用 サイト スマホ用 サイト 共用 サイト PC用 サイト 最適化の仕組み ス マ ホ 用 仕 組 み PC スマホ PC スマホ PC スマホ 様々なデバイスに対応した 共用サイトを作る デバイス別に サイトやアプリを作る PC用のサイトを スマホにも対応させる
  14. 14. Page 13MEMBERS CO., LTD ALL RIGHTS RESERVED. 実装に関する3つの考え方 ②ワンソース・マルチデバイス 対応 ①スマートフォン・タブレット 専用 ③従来型サイトの手直し /ツール変換 PC用 サイト スマホ用 サイト 共用 サイト PC用 サイト 最適化の仕組み ス マ ホ 用 仕 組 み PC スマホ PC スマホ PC スマホ 様々なデバイスに対応した 共用サイトを作る デバイス別に サイトやアプリを作る PC用のサイトを スマホにも対応させる
  15. 15. Page 14MEMBERS CO., LTD ALL RIGHTS RESERVED. ①スマートフォン・タブレット専用 【PC用サイト】 【スマホ用サイト】 PC用とスマホ用 同じコンテンツが 2つある 定義 デバイスごとにコンテンツ(Webページ)を用意する。 スマートフォン専用サイト、Webアプリ、ネイティブアプリなどが該当。 メリット スマートフォン独自の機能や表現が使えるので、機能性・訴求力が高い。 ファイルサイズや読込を工夫すれば、3G回線でも快適に見られる。 デメリット コンテンツを2つ作るため、初期構築コストが高くなる。 運用でも更新箇所が2倍、かつ片方だけ更新されないよう管理が必要になる。
  16. 16. Page 15MEMBERS CO., LTD ALL RIGHTS RESERVED. ②ワンソース・マルチデバイス対応 【PCでの表示】 【スマホでの表示】 定義 コンテンツは1つだが、CSSなどを使い、デバイスに応じて表示を切り替える レスポンシブWebデザイン、モバイルファーストデザインなどが該当。 メリット 全デバイスのコンテンツを一括で更新できる。片方更新が漏れることはない。 新しいデバイスが登場しても、微調整で耐えられる。 デメリット 全く新しいデザインのページを作ると、実機検証に大きな負荷がかかる。 スマートフォン独自の機能・表現は使いにくく、最適化で専用サイトに劣る。 コンテンツは1つ、表示だけデバイスごとに最適化 【タブレットでの表示】
  17. 17. Page 16MEMBERS CO., LTD ALL RIGHTS RESERVED. ③従来型サイトの手直し/ツール変換 【PC用サイト】 【スマホ用サイト】 PC用サイトを スマホでも 見られるように 定義 PCサイトをスマートフォンでも閲覧できるように工夫 or 変換する。 FlashのJS代替、変換ツールによる機械的変換などが該当。 メリット 既存のPCサイトを流用するので、比較的短期間で実現可能。 スマホのことをあまり気にしなければ、運用負荷はほとんど増えない。 デメリット スマートフォン向けの最適化では他の方法に劣り、見映えもほどほどである。 変換も確実ではなく、ツールのランニングコストも発生する。
  18. 18. Page 17MEMBERS CO., LTD ALL RIGHTS RESERVED. 実装の 選択肢 コンテンツ ・機能 ユーザー ニーズ 取るべき 対応 対応方針に対する実装選択の幅 A B C D E F HG 「スマホならでは」 の専用機能で バリバリ使いたい スマホでも 頻繁に見たい /探したい スマホでも時々 見たい時がある スマホでは 見ません スマホ向けに 機能の充実に 力を入れる モバイルファーストで 見やすく /使いやすくする スマホでも 情報取得には 支障がないように 対応しないのも 選択肢 ①スマートフォン・タブレット 専用 ②ワンソース・マルチデバイス 対応 ③従来型サイトの手直し /ツール変換
  19. 19. Page 18MEMBERS CO., LTD ALL RIGHTS RESERVED. 【参考】 コンテンツ別実装の例(大京ライオンズマンション) トップページ マンション検索 物件サイト 読み物 情報多い 快適速度 更新性 定型 ②ワンソース ②ワンソース①専用 ①専用 定型 魅力重視 写真多い 更新性
  20. 20. Page 19MEMBERS CO., LTD ALL RIGHTS RESERVED. 運用の可否 コンテンツの 移行可能性 実装方法の判断軸は3つ ユーザーの ベネフィット • スマートフォン独自の機能・表現の必要性 • ユーザー利用頻度、利用時の急ぎ具合 • 情報量の多寡/探索に必要な遷移数 • 入力・選択など操作箇所の数 • 移行すべき既存コンテンツのボリューム • システム制約(特に見た目のタグを生成するもの) • CMS等の仕組み(静的ファイル実体の有無) • CSSの管理状況、ソースコードのきれいさ • 定型デザインでの運用に満足できるか否か • 更新の影響範囲を管理できる仕組みの有無 • 更新頻度と同時更新量(特に飾りでない画像の数) • 運用にかけられるコストと体制
  21. 21. Page 20MEMBERS CO., LTD ALL RIGHTS RESERVED. スムーズな運用移行のために スマートフォン ・タブレット 専用 ワンソース ・マルチデバイス 対応 従来型サイトの 手直し/ ツール変換 PC用とスマホ用の片方だけ 更新が漏れるリスクがある。 ページが一対一対応しない 場合は、特に難しくなる。 新規デザインの実機検証には 時間と手間がかかる。 モジュールの組み合わせが 増えるごとに大変になる。 新規デザインのページは 全てのスマートフォンで、 閲覧できるように変換できる とは限らない。 ① ② ③ コンテンツ更新のトリガーと なる事柄を整理して、 どの場合にどこを修正するか モデル化しておく。 最大でも50種類ぐらいの 検証済み定型モジュールで 運用することを合意する。 スマートフォンでの実機テスト 端末を限定。後は割り切る。 完全にダメな部分は非表示に することで割り切る。 運用の注意点 主な対策
  22. 22. Page 21MEMBERS CO., LTD ALL RIGHTS RESERVED. まとめ:Webサイトリニューアルのポイント 1 スマートフォン、ソーシャルメディアの普及に伴い、 自社ユーザーの行動がどう変わったか把握して 対応方針を決めよう。 2 自社のWebサイトの資産状況をきちんと把握して、 実装方法を選ぼう。どう進めていくかを考えよう。 3 リニューアルした後で運用できるかをよく考えよう。 どういう運用をするのかイメージしよう。 運用を考えないリニューアルは失敗と同じ。
  23. 23. 本資料に関するお問い合わせはこちら http://www.members.co.jp m_smd@members.co.jp

×