マルチデバイス対応 Web メディア担当者の工夫

マルチデバイス対応
Webメディア運営担当者の工夫
1
Copyright (C) 2013 ASCII MEDIA
WORKS. All rights reserved.
株式会社アスキー・メディアワークス
WebProfessional編集部／週アスPLUS Webディレクター
坂本洋史（Web担サカモト）
Twitter : ＠hirofus

登壇者について
坂本洋史（サカモトヒロフミ）
Webディレクター/マーケター
• 略歴
2000年に株式会社アスキー（現：アスキー・メ
ディアワークス）入社。ストリーミング事業サイト
のWebディレクター/デザイナー、週刊誌編集者、
営業・マーケティング部門を経て、2008年に現職。
同年Webメディア「週アスPLUS」の前身「週アス
Web」をローンチ、以降同サイトの運営を担当。
2
Twitter
＠hirofus

仕事について
• おもな担当範囲
・集客
公式SNS運用、アクセス解析、アプリ企画
・機能企画・UI設計
新機能の企画、UI設計、デザイン →システムへの実装はエンジニアチーム
・コンテンツ企画
方向性の提案、ガイドライン策定 →記事制作はコンテンツチーム（編集部）
・他事業部のSNS導入・運用コンサル
全社ガイドライン策定と運用（デジタルコンテンツ部編成課兼務）
3

そのほか
・執筆/コンテンツ企画など
週アスPLUS：想いをつなぐ編集力
cakes代表取締役・もしドラ編集者：加藤貞顕氏連載
週アスPLUS：トゥギャッター通信
つぶやきまとめサービス「Togetter」コラボ連載
ASCII.jp：HTML5でモーグリ投げ！FF13-2キャンペーンサイトの裏側
http:// ascii.jp/elem/000/000/657/657869/
週アスPLUS： LINEがmixiを超えた日次の標的は誰か
http://weekly.ascii.jp/elem/000/000/096/96619/
ほか多数
※「Web担サカモト」、「坂本洋史」で検索してください。
4

媒体紹介① WebProfessional
• http://ascii.jp/web/
• Web制作者やマーケッターなど「職業としてWebに関わる方」のた
めのオンラインメディア。書籍も好評発売中。
• ASCII.jp Web Professionalは企業サイト・ECサイトの開設から運
営、収益の改善に役立つさまざまなノウハウを「職業としてWebの
運営に関わる方」（Webプロフェッショナル）すべてに向けて提供
するオンラインメディアです。
• Webデザイン、Webマーケティング、Webプログラミングなど、
仕事に役立つ情報を毎日発信しています。
5

WebProfessionalの本
• Web制作者やマーケッターなど「職業としてWebに関わる方」のた
めのオンラインメディア。書籍も好評発売中。
6

WebProfessionalのWebサイト
• http://ascii.jp/web/
7

媒体紹介② 週アスPLUS/週刊アスキー
• http://weekly.ascii.jp/
• 週アスPLUS
• ガジェット＆ITファンのためのブログメディア。
• 週刊アスキー
• 毎週火曜日発売！日本唯一の週刊パソコン誌です。
8

今日おはなしすること
• 1：マルチデバイス対応のとりくみ
週アスPLUSのケース
• 2：解析データの分析と予測
• 3：今後の課題とまとめ
9

1：マルチデバイス対応の取り組み
―週アスPLUSのケース
10
• 考え方と課題、その解決策
• レスポンシブ化しなかった理由
• 実際にやったことの紹介

1-1：基本的な考え方と課題①
サイトのマルチデバイス対応につい
て週アスPLUSの考え方。
大事なのはユーザー！
11
モバイルなら
軽いほうがい
い！
見やすいデザイ
ンがいい！
PCで情報をた
くさんみたい！
操作しやすくし
てほしい！

1-1：基本的な考え方と課題②
課題は大きく2つ。ひとつめは
１：モバイルは表示が遅くてイライラ
12

1-1：基本的な考え方と課題③
課題のふたつめは
２：Webの閲覧環境はひとそれぞれ
13

1-2：課題に対する解決策＝方針
それぞれ以下のように解決の方針をたてた。
1：モバイルは表示が遅くてイライラ
→できるだけ早く表示する
2：Webの閲覧環境はひとそれぞれ
→ユーザーの選択肢を増やす
14

1-3：実際に週アスPLUSがやったこと①
2010年8月 iPhoneアプリ
→RSSリーダー型：スピード重視型
2011年4月 Androidアプリ
2011年11月 Windows Phoneアプリ
2012年4月サイトのスマートフォン最適化
→UAで専用サイトを表示
スピードとコンテンツのバランス型
15
RSSで取得した記事を専用アプ
リで表示したほうが、ブラウザ
でPCサイトを開くより早い

1-3：実際に週アスPLUSがやったこと②
• 時系列
16

1-3：実際に週アスPLUSがやったこと③
• スピード重視型のアプリ提供を優先しながら、
• デバイスの普及タイミングを意識し、
• ユーザーの選択肢を増やしていった。
• ユーザーは、アプリでもブラウザでも、好きなほう
を選べる。ブラウザを選んだあと、さらにスマホ版
とPC版の好きな方を選ぶこともできる。
Webサイトを閲覧するデバイスやその方法は、
ユーザーの好きなスタイルで楽しんでもらう。
17

1-4：レスポンシブ化しなかった理由①
• サイトのスマートフォン最適化の検
討開始は2011年夏～秋頃。
18
レスポンシブWebデザインは、そのう
ち主流になるやも。ブラウザさえあれば、
HTML5でいろんなことができる。
すごい！おもしろい！試したい！

1-4：レスポンシブ化しなかった理由②
19
だが……
端末性能の問題
• iPhoneは初代4、Androidは
GALAXY S IIの時代。
回線速度の問題
• Wi-Fiの利用者も一部の人々、
LTEの普及も未知数。
2011年8月 29万
参考：2013年2月 1000万
ドコモ契約数月次データ
http://www.nttdocomo.co.jp/corporate/ir/finance/subscriber/index.html

1-4：レスポンシブ化しなかった理由④
当時の判断
PC版と同じデータ量を転送して、端
末ブラウザの制御で最適化するには、
端末・回線ともまだまだこれから。
20
Gtmetrix
http://gtmetrix.com/
週アスPLUSの
記事ページ評価
Page load time: 9.71s
Total page size: 3.12MB
Total number of requests: 323

1-4：レスポンシブ化しなかった理由③
結論
UAでふりわけて、スマホ用に最適化
した軽くて見やすい専用サイトのほ
うがユーザーにメリットがある。
ポジティブな理由
21
当然ながら、Web担当者の個人的な興味・関心を事業サイトで試すべきで
はない。大勢のユーザーに向けて運営していることを忘れていけない。

1-5：最適化でやったことの紹介(一部)
最適化にあたっての大方針は2つ。
• できるだけプレーンな表現にして、
少しでも軽くする。
• ユーザーの利用シーンから考える。
22
プレーン
シーン

1-5：最適化でやったことの紹介(一部) ①
（1）デザイン上の工夫
• 操作用のボタン類は、3つの要素の組み合わ
せでつくる。データ量が軽くなり、ブラウザ
のレンダリングも早くなる。
①CSS
②アイコン画像（透過png）
③テキスト
23
※ボタンの色は単色。グラデーションは
できるだけ避ける。やむをえない場合は
1px幅のimgファイルを使う。
TOP
プレーン

1-5：最適化でやったことの紹介(一部) ②
（2）操作系UIは右よせ
PC版：左
• 視点移動が左→右。文
章の流れにあわせて自
然にボタン類が目に入
るようにする。
24
視点の移動
シーン

1-5：最適化でやったことの紹介(一部) ③
スマホ版：右
• 右手でもったときに親
指の動かす距離が短い。
• 電車で片手に吊革、片
手にスマホを持つとき
をイメージ。
25
日本の9割が右効き
※左利きユーザーには左寄せのUIを提供するのが理想だが……。
右手で持ったときにタップしやすい位置

1-5：最適化でやったことの紹介(一部) ④
（3）コンテンツ
• 表示するコンテンツは取捨選択。ユー
ザーごとで利用シーンの違いがあると想
定して、テキスト表現も変更。
コンテンツページ
下部要素の紹介
26
シーン
PC版スマホ版

PC版
• SNSボタン:8種
Twitter、Facebook、Google+、はてなブックマーク、
Googleブックマーク、Yahoo!ブックマーク、
mixiチェック、tumblr
• カテゴリ
• バナー
• Likebox
• 関連記事
※最大：入れられるだけ
27

スマホ版
• SNSボタン:4種
Twitter、Facebook、Google+、LINE
• カテゴリ
• バナー
• Likebox
• この記事もオススメ！
（＝関連記事） ※最大：5件
28
PCのように大量のコンテンツの中から選ぶより、ある程度絞っ
てリコメンドされるほうがユーザーもわかりやすい。

1-5：結果
• そのほか、いろいろ対応してPC版よ
りも軽量化。
29
週アスPLUSの
週アスPLUSの
PC版
スマホ版

1-5：最適化でやったことの紹介(一部) ⑤
（＋α）端末にあわせたコンテンツを表示
iPhoneユーザーならiPhoneの情報が、
AndroidユーザーならAndroidの情報が表
示されたほうがうれしい。
同じUIで、Android、iPhone、そのほ
かOSで表示するコンテンツそのものを変
える。
30
シーン

1-5：最適化でやったことの紹介(一部) ⑤
iPhone
• アプリランキング
→iOSアプリのランキング
Android
• アプリランキング
→Androidアプリのランキング
そのほか
• ナビゲーションにボタンを表示しない
31

1-6：やってみてわかったこと
マルチデバイス対応のキモは2つ。
• タイミング（いつやるか）
• 優先順位（何からやるか）
限りあるリソース（人・金・時間）でビ
ジネスを最大化するには、それらをどう
使えばよいか？常に情報収集のアンテ
ナをはっておくことが大切。
32

1-7：今後、想定されること
レスポンシブWebデザインが普及す
る土壌はできつつあるので、いつか
移行するのは間違いない。
• デバイス性能の向上
• LTEの普及
• 技術の進化
33

1-7：週アスPLUSの予定
今考えていること
「ハイブリッド型」の方向性を模索していき
たい。
たとえば……
• PCとモバイルをUAで振り分け、モバイルだけをレスポンシ
ブWebデザインに。
• アプリで、UAで振り分けたスマホ最適化サイトとRSSリー
ダーの選択。
34

2：週アスPLUS解析データの分析と予測
35
• 画面解像度の主流サイズは？
• iOS、Androidのシェア争いは？
• 今後注目すべきデバイスは？

2-1：はじめに
• お見せするデータは、週アスPLUSが
アクセス解析の際に使っている
GoogleAnalyticsのデータです。
• 表やグラフはプレゼン用にデザイン
や表現を整理していますが、データ
は基本的にそのままです。ただし、
お見せできない指標もあるので、割
愛している部分があります。
36

2-2：基本情報① サイトⅠ
サイトコンセプト
• 週刊パソコン雑誌『週刊
アスキー』連動のエンタ
テインメント＆ニュース
サイト。iPhoneや
Androidといった最新デ
ジタル機器の情報を中心
に、映画やコミック、
TOY、グルメなどのカル
チャー系情報を掲載。
37
http://weekly.ascii.jp/

2-2：基本情報① サイトⅡ
ターゲット
20代後半～30代・男性
38
スマホやタブレットといった
ガジェットや、Web、アプリ、
最新テクノロジー好き。デジ
タル関連の流行に敏感な人々。
サブカルチャーも好き。

2-2：基本情報① サイトⅢ
実際のアクセス規模
過去半年間の月間アクセス数のレンジ
• UU：475万～260万（公称350万）
• PV：1635万～873万（公称1300万）
※計測期間：2012年9月～2013年2月（6カ月）
※上下動しながら成長曲線で推移中
※KPI：UU＞＞新規訪問数＞＞PV
39

2-2：基本情報② ユーザーⅠ
読者プロファイル
• 平均年齢 33歳
30代＞20代＞40代＞10代＞50代以上
• 男：女 9：1
• 既婚：未婚 51：49
※n=1,054 2013年1月実施週アスPLUS 新春Webアンケート
40
ポスト団塊ジュニア
～1、2歳若い
1975年（昭和50年度）から1979
年（昭和54年度）

2-2：基本情報③ ユーザーⅡ
利用ブラウザ比率
41
21%
21%
20%
14%
12%
10%
1% 1%
Internet Explorer
Chrome
Safari
Android Browser
Safari (in-app)
Firefox
Opera
そのほか

2-2：基本情報③ ユーザーⅢ
平日の時間別訪問数推移
※代表的な推移のサンプル：2013年2月12日（火）
42
昼休み
帰宅・夕食
翌朝の出勤
に備えて
早く寝る
出勤

2-3：画面解像度の主流サイズは？①
画面解像度の変遷(2013年2月TOP10基準)
43
2011年1月
2011年2月
2011年3月
2011年4月
2011年5月
2011年6月
2011年7月
2011年8月
2011年9月
2011年10月
2011年11月
2011年12月
2012年1月
2012年2月
2012年3月
2012年4月
2012年5月
2012年6月
2012年7月
2012年8月
2012年9月
2012年10月
2012年11月
2012年12月
2013年1月
2013年2月
1080x1920
800x1025
320x568
360x615
540x960
720x1280
480x800
800x1280
768x1024
320x480
iPhone 3,3G
iPad（初代、２
iPad mini iPhone5
Nexus7,GALAXY tab
GALAXY Nexus、GALAXY S III
Xperia SX, REGZA Phone

2-3：画面解像度の主流サイズは？②
分析とまとめ
• 2年前に存在しなかった解像度が多
数登場。上位に食い込んできてい
る。
• もともと多種多様だったAndroid端
末のなかでも、2012年夏以降に発
売されたモデルが普及してきた。
• iPadはminiが登場して、一定数を維
持。解像度が高めのモバイル＝
Nexus7などの7インチタブレットも
今後増加していく可能性が高い。
44

2-4：iOS、Androidのシェア争いは？①
OSのシェアの変遷
45
2011年1月
2011年2月
2011年3月
2011年4月
2011年5月
2011年6月
2011年7月
2011年8月
2011年9月
2011年10月
2011年11月
2011年12月
2012年1月
2012年2月
2012年3月
2012年4月
2012年5月
2012年6月
2012年7月
2012年8月
2012年9月
2012年10月
2012年11月
2012年12月
2013年1月
2013年2月
Linux
MacOS
Windows
Android
iOS
スマホ最適化
微増（2％程度）
iPad mini
iPhone5

2-4：iOS、Androidのシェア争いは？①
スマホOSのシェア争いの変遷
46
2011年1月
2011年2月
2011年3月
2011年4月
2011年5月
2011年6月
2011年7月
2011年8月
2011年9月
2011年10月
2011年11月
2011年12月
2012年1月
2012年2月
2012年3月
2012年4月
2012年5月
2012年6月
2012年7月
2012年8月
2012年9月
2012年10月
2012年11月
2012年12月
2013年1月
2013年2月
Android
iOS
iPad mini
iPhone5
2012年
夏モデル普及
2012年
冬モデル普及
2011年
夏モデル普及
2011年
冬モデル普及
iPhone4S

2-4：iOS、Androidのシェア争いは？②
• 分析とまとめ
47

2-5：今後注目すべきデバイスは？ ①
話題の7インチタブレット関連
キーワードの盛り上がりの変遷
48
0
20000
40000
60000
80000
100000
120000
140000
160000
180000
200000
kindle fire
Nexus7
ipad mini

2-5：今後注目すべきデバイスは？ ②
• キーワードの分析とまとめ
49

3：今後の課題とまとめ
50
• Web担当者が考えておきたいこと

3-1：今後の課題①
• 仮説
• ユーザーのライフスタイルによって
使われるデバイスが異なり、その数
はさらに増える傾向にある。
• デザインだけでなく、表示するコン
テンツも変えていく必要があるので
は？
51

3-1：今後の課題②
• 通勤中：スマホ
• 会社の昼休み：会社のパソコン
• 帰宅中：7インチタブ
• リビング：10インチタブ
• 寝る前：スマホ
• ……
52

3-1：今後の課題③
• ユーザー利用するデバイスと、利用
シーンの組み合わせは無限大に
53

3-2：まとめ
• ユーザーとWebサイトはますますに
近い存在に。
• Google glassのようなアイウェアデ
バイスの時代にWebはどうなる？
• 「Webは常に過渡期」と捉えて、
ユーザーに最もよい体験を提供し、
ビジネスを成功に導くのがWeb担当
者のやるべき仕事。
54

おすすめの本など
55

“ユーザーファースト”で
いっしょにWebを盛り上げましょう！
56

坂本洋史
Hirofumi SAKAMOTO
h-sakamoto@asciimw.jp
@hirofus
https://www.facebook.com/hirofumi.sakamoto
http://hirofus.tumblr.com/
57
連絡先

マルチデバイス対応 Web メディア担当者の工夫

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a マルチデバイス対応 Web メディア担当者の工夫

Semelhante a マルチデバイス対応 Web メディア担当者の工夫 (20)