Download - Lwsmph seminar 20111012
![Page 1: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/1.jpg)
1
2011.10.12株式会社ロフトワーク
小川 友梨子
loftwork
企業担当者が押さえておくべきスマホサイト構築・4つのポイント
![Page 2: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/2.jpg)
2
■自己紹介
2010年入社。ソーシャルゲームコンテンツ企画・制作、スマートフォンサイトの新規構築等、モバイルをキーワードに幅広いディレクションを担当。
小川友梨子(クリエイティブDiv.所属)
![Page 3: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/3.jpg)
3
1.目的を整理する
2.ターゲットを想像する
3.コンテンツ戦略を立てる
4.対応方法
▼制作事例紹介
◎長期的なスマホサイト制作・運営に向けて
■目次
![Page 4: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/4.jpg)
4
1.目的を整理する
![Page 5: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/5.jpg)
5
スマートフォン対応≠
スマートフォン最適化
■目的を整理する
![Page 6: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/6.jpg)
6
「PCサイトをスマートフォンでそのまま見せる」という対応
■目的を整理する
![Page 7: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/7.jpg)
7
では、なぜスマホに最適化しようとしているのでしょうか?
■目的を整理する
![Page 8: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/8.jpg)
8
見やすさ
操作しやすさ
■目的を整理する
ユーザーとの距離の近さ
▼最適化するメリット
![Page 9: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/9.jpg)
9
離脱率の低下
コンバージョンUP
■目的を整理する
新規/リピートユーザー獲得
▼最適化する目的
![Page 10: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/10.jpg)
10
2.ターゲットを想像する
![Page 11: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/11.jpg)
11
「(株) MM総研 [ 東京・港 ] 」調べ
■ターゲットを想像する
2014年末にはスマートフォンユーザーが過半数以上を超える見込み
![Page 12: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/12.jpg)
12
「(株) MM総研 [ 東京・港 ] 」調べ
■ターゲットを想像する
2014年末にはスマートフォンユーザーが過半数以上を超える見込み
なりますが
つい全体感のデータに目が行きがちになりますが…
![Page 13: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/13.jpg)
13
■ターゲットを想像する
エンゲージメントが重視される時代!
だからこそ、個々のユーザーの動きやデータが重要!
![Page 14: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/14.jpg)
14
マルチデバイスLab.(IMJモバイル)「スマートフォンユーザーの今」を表現したインフォグラフィックス
http://mdlab.jp/project/investigative_report/01.html
■ターゲットを知る
※インフォグラフィックス
…情報やデータを整理・デザインすることでわかりやすくしたグラフィック
![Page 15: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/15.jpg)
15
■ターゲットを知る
![Page 16: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/16.jpg)
16
「デジタル・アドバタイジング・コンソーシアム」調べ:スマートデバイス領域における利用実態調査
http://www.dac.co.jp/Contents/pdf/press/20100924_sp_research.pdf
■ターゲットを知る
一般携帯電話利用者■全デバイスでのインターネット利用時間150.8分/日
■一般携帯電話でのインターネット利用頻度1日に1回以上:29.7%
スマートフォン利用者■全デバイスでのインターネット利用時間199.3分/日
■スマートフォンでのインターネット利用頻度1日に1回以上:77.2%
![Page 17: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/17.jpg)
17
3.コンテンツ戦略を立てる
![Page 18: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/18.jpg)
18
見やすさ
操作しやすさ
■コンテンツ戦略を立てる
ユーザーとの距離の近さ
![Page 19: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/19.jpg)
19
気軽にちょっとだけ読める記事コンテンツ
更新頻度の高い情報
■コンテンツ戦略を立てる
ユーザーとの双方向コミュニケーション
▼スマホサイトに適したコンテンツとは?
![Page 20: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/20.jpg)
20
■コンテンツ戦略を立てる
▼ユーザー動向からのアプローチ
位置情報を使用したコンテンツ
ユーザーが写真をアップロードして共有できるコンテンツ
![Page 21: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/21.jpg)
21
4.対応方法
![Page 22: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/22.jpg)
22
■対応方法
①ワンソースマルチユース
②マルチソースマルチユース
③html変換型
④PCサイトをベースにしたスマホサイトの立ち上げ
![Page 23: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/23.jpg)
23
①ワンソースマルチユース
1つのhtmlソースで様々な大きさのデバイスに対応する方法(CSS3の機能であるMediaQueriesを使用)
■対応方法
◎更新負荷は低い
△実現にあたって、初期コスト・工数がかかる△PCサイトリニューアルと同時対応向き
![Page 24: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/24.jpg)
24
②マルチソースマルチユース
それぞれのデバイスに、それぞれのhtmlソースで対応する方法
■対応方法
◎CMSの場合、テンプレート化するため更新負荷は低い
△実現にあたって、初期コスト・工数がかかる△新しく出るデバイスに左右されがち
![Page 25: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/25.jpg)
25
③html変換型
1つのhtmlをプログラムやASPサービスで動的に変換する
■対応方法
◎導入しやすく、更新負荷が低い
△運用の際に制限・制約が多い
![Page 26: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/26.jpg)
26
④PCサイトをベースにしたスマホサイトの立ち上げ
PCサイトのコンテンツを取捨選択した上でスマホサイトを立ち上げる方法。スマホ独自のコンテンツ立ち上げも可能。
■対応方法
◎コストを抑え、短期間で導入できる◎運用しながらブラッシュアップしやすい
△やや更新負荷がかかる
![Page 27: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/27.jpg)
27
背景
ユーザー目線で作り込んだ“スマートフォンネイティブな”サイトが発進
特徴
HTML5によるスマートフォンに最適化したインタフェースを実現
女性雑誌のマッピングを独自に作成し、目指すべきデザインの方向性についての共有を加速
きめ細かなスケジュール管理により、遅延なくプロジェクトを進行
2000年3月の創業以来、20代~30代の女性をターゲットとした携帯電話向けコンテンツの配信を中心に、数多くのエンタテイメントコンテンツを生み出してきた株式会社ザッパラス。2011年4月25日、同社は新たに、女性による女性のためのスマートフォン向け無料ポータルサイト「プリマ!」をオープン。その開発のコンセプトは、フィーチャーフォンからスマートフォンに乗り換えた人たちのニーズを満たすことでした。
■事例紹介:株式会社ザッパラス様
![Page 28: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/28.jpg)
28
■事例紹介:株式会社ザッパラス様
![Page 29: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/29.jpg)
29
■事例紹介:株式会社ザッパラス様
▼初期提供資料は、RFP+コンテンツ案
▼制作期間:3ヶ月(※うち1.5ヶ月は要件定義)
▼WordPressテンプレート 12ページ制作(ワイヤー作成/デザイン制作/html5+cssコーディング)
▼運用PDCAを回しながら、第2フェーズ実装予定
▼初期提供資料は、RFP+コンテンツ案
▼制作期間:3ヶ月(※うち1.5ヶ月は要件定義)
▼WordPressテンプレート 12ページ制作(ワイヤー作成/デザイン制作/html5+cssコーディング)
▼運用PDCAを回しながら、第2フェーズ実装予定
![Page 30: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/30.jpg)
30
スマホ最適化の共通解はない状況↓
⇒まずは一部のコンテンツで対応し、PDCAを回しながら
「どんなコンテンツがユーザーに響くのか」
を探っていく
◎長期的なスマホサイト制作・運営に向けて
![Page 31: Lwsmph seminar 20111012](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58f2edff1a28abd9598b45bf/html5/thumbnails/31.jpg)
31
ご清聴ありがとうございました