iPhoneやiPadで見やすいウェブサイトの作り方

i メディアをもっと面白く！

2013年6月12日モバイルセミナー＠AppleStore銀座店

iPhoneやiPadで見やすい
ウェブサイトの作り方

Copyright © 2014 DOMO.INC All Rights Reserved.

1


モビファイ

マルチスクリーン対応のための信頼のサービス

Googleのマルチスクリーン
アプルーブド･ベンダー」に認定
「アプルーブド･
モビファイは、米Googleによる「アプルーブド･ベンダー」に認
定されています。Googleはレスポンシブウェブデザインをマルチ
スクリーン時代の推奨Webとしていますが、モビファイはレスポ
ンシブウェブデザインと同じ状態をJavaScript適合で実現します
。結果、SEO対策、ソーシャルシェア、アクセス解析においても
理想的なWeb環境を作り出します。

米フォレスター･リサーチ：レポート

モバイルEコマースのトップベンダー10社の
中で、Web部門において最高得点を獲得
米フォレスター･リサーチは、2013年12月27日、今後のEコマー
ス・リテイラーの用途や目的にかなうトップモバイルベンダー10社
の評価を発表しました。このモバイルWeb部門において、モビファ
イ社は全10社の中でもっとも高い評価ポイント（5.0point）を獲得
しました。

Mobile Web部門
部門
5点満点
点満点


はじめに。

One Web

なぜ

なのか？

3


モバイル最適化とは？
2012年以前
＝
iPhoneのみ対応
2013年
＝
＝
＝

iPhone対応
iPad 9.7inch
iPad mini 7.9inch

スマホ対応から、
マルチスクリーン時代へ

4


スマホ対応だけの問題ではない！

By Brad Frost

5


iPad対応も時間の問題です。
対応も時間の問題です。
eMarketerの調査によると、2012年のモバイルコマースの売上高は前年比81%増の約250億ド
ル、また2013年は前年比55.7%増の384億ドルに達すると予測しています。eコマース総売上高の
中でモバイルコマースの占める割合も、2012年が11%で、2013年が15%と増え続けています。注
目すべきはモバイルデバイス別の売上高で2012年には、タブレットによる売上げは、スマートフ
ォンの売上げを追い越し、さらにその差は広がっていくと予測されています。今後のモバイルコ
マースを牽引するのはタブレットであり、日本でも、PCに置き換わる利用が見込まれています。


6


そのまえに

なぜiPhone、iPadで
、
最適化させるのか？


7


iPhone、iPadとiPodユーザーが
全体の85%を占めている
Mobify社調査
主要20のモバイルウェブ
サイトからデータを集めた
ものです。2012年にこれら
サイトは、合計
560,792,165人(約5.6億人）
から閲覧されており、この
数字は世界人口の約8%、
総計３0億個のウェブを閲
覧した人たちに相当。


8


もっとも利用が高いデバイスで
最適なWEBを考えるべき
デバイス上位10位（ユニークユーザー）
iPhone
61.6%
iPad 17.1%
Unknown
8.6%
Sony Ericsson Xperia Arc
4.7%
iPod Touch
4.6%
Samsung Galaxy S II
0.9%
Motorola Droid X
0.9%
HTC Incredible
0.5%
HTC Incredible 2
0.5%
Samsung Galaxy Nexus
0.1%

85%が
アップル製品

9


つまり、
・注力すべきは、アップル製品
一個々のアンドロイド端末は１％にも満たない。

・iPhoneだけでなく、iPadへの対応が不可欠

・解決策として、
検証はコスト高。アプリのように割り切る
各機種対応を改める必要がある

10


過去2年間、
いろいろな構築方法が

都市伝説
のように言われてきました。


11


iPhoneサイトへのアプローチ

2011後半

レスポンシブ
プラグイン対応

デザイン

HTML5？
携帯コンバート

スクラッチ構築


最適化サービス

簡易コンバート
自動変換や
プロキシーソリューション

CMS
サーバーサイド
テンプレート調整

12


レスポンシブウェブデザイン


13


マルチスクリーン対応で、さらに絞られる
レスポンシブ
プラグイン対応

携帯コンバート

スクラッチ構築


デザイン

最適化サービス

簡易コンバート
自動変換や
プロキシーソリューション

CMS

HTML5？

14


今後の選択肢は絞られてきた

最適化
サービス

CMS


15


モバイル対応で
重要なことはなにか？


16


なぜ、OneWebが必要か？
が必要か？
なぜ、
グーグル、スマホ対応が不適切な
サイトの検索順位を引き下げへ

Googleは、リダイレクト設定の間違った例としてこの例を紹介している。Googleは、
この設定がモバイル端末でウェブサイトを閲覧しているユーザーにとってわずら
わしいものだと述べた。このような設定では、そのウェブサイトは、モバイル検索
結果での表示順序が下がることになる。
出展：Google

17


OneWeb以外では、領域が異なる
以外では、領域が異なる
SEO
PC

メールリンク

領域B
領域A

m.yourdomain.co.jp
yourdomain.co.jp/SP/

領域C
スマート
フォン
タブレットの場合も

yourdomain.co.jp/T/
t.yourdomain.co.jp

18


運用コストの削減

ワンソース・マルチデバイス

19


校正作業をできますか？


20


ロード時間の速さこそが
SEO対策
対策


21


０．１秒ごとに１％のコンバージョンロス発生


22


ページロードに

1秒遅れると・・・・・

７％

11％

16％

のコンバージョン
が減少

のページビュー
減少

のユーザー満足
度の減少

もし金額におきかえると、

1日1000万円を売り上げているEコマースリテイラーの場合、年間で
算出すると、

2億5000万円の売上損失となる。


23


モバイル用に
見えていれば十分か？
• 柔軟なデザイン再現性はあるか？
• UI/UXデザインを高められるか？


24



25


UIの改善で
効果がUP!

26


マルチスクリーン対応に向けた

企業のための
iPhone&iPad対応戦略
3つのステップ

27


ステップ１
・スクラッチでの
専用サイト構築をやめる

・プロキシーソリューションでの
サイト構築を改める。


28


ステップ２
OneWebにてアダプティブ対応
にてアダプティブ対応
にて
PCサイト（過去資産を生かす）
チェック項目
・タブレットサイトの導入検討
・モバイルファースト設計
・ソースの基本構造の見直し

ベースサイトの見直し
W3C基準で改修作業

アプローチとして
レスポンシブデザインか？
Adaptiveか？

アダプティブ対応

29


PCのWEBリニューアルは
の
リニューアルは
意味が薄くなってきました

次は、モバイルWeb
次は、モバイル
リニューアル！

30


ステップ３
OneWebでフルリニューアル
でフルリニューアル
ベースサイトのWebリニューアル
（7インチ前後）
レスポンシブデザイン
モバイルファースト設計
＋最適化サービス
コンテンツファースト設計

アダプティブWeb
アダプティブ
基本モジュール設計
＋最適化サービス

31


マルチスクリーン対応は
当たり前のことを確実にやる
• ソースコードの重要性
– W3Cに準拠した構造化されたWebの構築
– SEO的もいいはず。当たり前のことをやる。
– あまりに、構造をダメにしたWEBが多い。

• モジュール設計
– マルチスクリーンに向けた柔軟かつ可変デザイ
ンに対応しやすいモジュール構成を検討する。

32


Mobifyは米
は米Googleが認定した
が認定した
は米
が認定
マルチスクリーンベンダーです。
http://www.google.com/think/mult
iscreen/vendors.html


株式会社ドーモ
モバイル事業部
東京都中央区築地2-11-26
築地MKビル
TEL：03-6228-4616
今井・西村・山崎
33

iPhoneやiPadで見やすいウェブサイトの作り方

Recomendados

Recomendados

Más contenido relacionado

Similar a iPhoneやiPadで見やすいウェブサイトの作り方

Similar a iPhoneやiPadで見やすいウェブサイトの作り方 (20)

Último

Último (11)

iPhoneやiPadで見やすいウェブサイトの作り方