1

2011.10.12株式会社ロフトワーク

小川 友梨子

loftwork

企業担当者が押さえておくべきスマホサイト構築・4つのポイント

2

■自己紹介

2010年入社。ソーシャルゲームコンテンツ企画・制作、スマートフォンサイトの新規構築等、モバイルをキーワードに幅広いディレクションを担当。

小川友梨子（クリエイティブDiv.所属）

3

1.目的を整理する

2.ターゲットを想像する

3.コンテンツ戦略を立てる

4.対応方法

▼制作事例紹介

◎長期的なスマホサイト制作・運営に向けて

■目次

4

１．目的を整理する

5

スマートフォン対応≠

スマートフォン最適化

■目的を整理する

6

「PCサイトをスマートフォンでそのまま見せる」という対応

■目的を整理する

7

では、なぜスマホに最適化しようとしているのでしょうか？

■目的を整理する

8

見やすさ

操作しやすさ

■目的を整理する

ユーザーとの距離の近さ

▼最適化するメリット

9

離脱率の低下

コンバージョンUP

■目的を整理する

新規/リピートユーザー獲得

▼最適化する目的

10

２．ターゲットを想像する

11

「(株) ＭＭ総研 [ 東京・港 ] 」調べ

■ターゲットを想像する

2014年末にはスマートフォンユーザーが過半数以上を超える見込み

12

「(株) ＭＭ総研 [ 東京・港 ] 」調べ

■ターゲットを想像する

2014年末にはスマートフォンユーザーが過半数以上を超える見込み

なりますが

つい全体感のデータに目が行きがちになりますが…

13

■ターゲットを想像する

エンゲージメントが重視される時代！

だからこそ、個々のユーザーの動きやデータが重要！

14

マルチデバイスLab.（IMJモバイル）「スマートフォンユーザーの今」を表現したインフォグラフィックス

http://mdlab.jp/project/investigative_report/01.html

■ターゲットを知る

※インフォグラフィックス

…情報やデータを整理・デザインすることでわかりやすくしたグラフィック

15

■ターゲットを知る

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%

17

3．コンテンツ戦略を立てる

18

見やすさ

操作しやすさ

■コンテンツ戦略を立てる

ユーザーとの距離の近さ

19

気軽にちょっとだけ読める記事コンテンツ

更新頻度の高い情報

■コンテンツ戦略を立てる

ユーザーとの双方向コミュニケーション

▼スマホサイトに適したコンテンツとは？

20

■コンテンツ戦略を立てる

▼ユーザー動向からのアプローチ

位置情報を使用したコンテンツ

ユーザーが写真をアップロードして共有できるコンテンツ

21

４．対応方法

22

■対応方法

①ワンソースマルチユース

②マルチソースマルチユース

③html変換型

④PCサイトをベースにしたスマホサイトの立ち上げ

23

①ワンソースマルチユース

1つのhtmlソースで様々な大きさのデバイスに対応する方法（CSS3の機能であるMediaQueriesを使用)

■対応方法

◎更新負荷は低い

△実現にあたって、初期コスト・工数がかかる△PCサイトリニューアルと同時対応向き

24

②マルチソースマルチユース

それぞれのデバイスに、それぞれのhtmlソースで対応する方法

■対応方法

◎CMSの場合、テンプレート化するため更新負荷は低い

△実現にあたって、初期コスト・工数がかかる△新しく出るデバイスに左右されがち

25

③html変換型

1つのhtmlをプログラムやASPサービスで動的に変換する

■対応方法

◎導入しやすく、更新負荷が低い

△運用の際に制限・制約が多い

26

④PCサイトをベースにしたスマホサイトの立ち上げ

PCサイトのコンテンツを取捨選択した上でスマホサイトを立ち上げる方法。スマホ独自のコンテンツ立ち上げも可能。

■対応方法

◎コストを抑え、短期間で導入できる◎運用しながらブラッシュアップしやすい

△やや更新負荷がかかる

27

背景

ユーザー目線で作り込んだ“スマートフォンネイティブな”サイトが発進

特徴

HTML5によるスマートフォンに最適化したインタフェースを実現

女性雑誌のマッピングを独自に作成し、目指すべきデザインの方向性についての共有を加速

きめ細かなスケジュール管理により、遅延なくプロジェクトを進行

2000年3月の創業以来、20代～30代の女性をターゲットとした携帯電話向けコンテンツの配信を中心に、数多くのエンタテイメントコンテンツを生み出してきた株式会社ザッパラス。2011年4月25日、同社は新たに、女性による女性のためのスマートフォン向け無料ポータルサイト「プリマ！」をオープン。その開発のコンセプトは、フィーチャーフォンからスマートフォンに乗り換えた人たちのニーズを満たすことでした。

■事例紹介：株式会社ザッパラス様

28

■事例紹介：株式会社ザッパラス様

29

■事例紹介：株式会社ザッパラス様

▼初期提供資料は、RFP＋コンテンツ案

▼制作期間：3ヶ月（※うち1.5ヶ月は要件定義）

▼WordPressテンプレート 12ページ制作（ワイヤー作成/デザイン制作/html5+cssコーディング）

▼運用PDCAを回しながら、第2フェーズ実装予定

▼初期提供資料は、RFP＋コンテンツ案

▼制作期間：3ヶ月（※うち1.5ヶ月は要件定義）

▼WordPressテンプレート 12ページ制作（ワイヤー作成/デザイン制作/html5+cssコーディング）

▼運用PDCAを回しながら、第2フェーズ実装予定

30

スマホ最適化の共通解はない状況↓

⇒まずは一部のコンテンツで対応し、PDCAを回しながら

「どんなコンテンツがユーザーに響くのか」

を探っていく

◎長期的なスマホサイト制作・運営に向けて

31

ご清聴ありがとうございました