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

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

Copyright © 2014 DOMO.INC All Rights Reserved.

iPhoneややややiPadで見やすいで見やすいで見やすいで見やすい

ウェブサイトの作り方ウェブサイトの作り方ウェブサイトの作り方ウェブサイトの作り方

1

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



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

スマホ対応から、スマホ対応から、スマホ対応から、スマホ対応から、

マルチスクリーン時代へマルチスクリーン時代へマルチスクリーン時代へマルチスクリーン時代へ



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

5

By Brad Frost


Copyright © 2014 DOMO.INC All Rights Reserved. 6

eMarketerの調査によると、2012年のモバイルコマースの売上高は前年比81%増の約250億ド

ル、また2013年は前年比55.7%増の384億ドルに達すると予測しています。eコマース総売上高の

中でモバイルコマースの占める割合も、2012年が11%で、2013年が15%と増え続けています。注

目すべきはモバイルデバイス別の売上高で2012年には、タブレットによる売上げは、スマートフ

ォンの売上げを追い越し、さらにその差は広がっていくと予測されています。今後のモバイルコ

マースを牽引するのはタブレットであり、日本でも、PCに置き換わる利用が見込まれています。

iPad対応も時間の問題です。対応も時間の問題です。対応も時間の問題です。対応も時間の問題です。



なぜiPhone、、、、iPadで

最適化させるのか？

7

そのまえに



iPhone、iPadとiPodユーザーが

全体の85%を占めている

8

Mobify社調査

主要20のモバイルウェブ

サイトからデータを集めた

ものです。2012年にこれら

サイトは、合計

560,792,165人(約5.6億人）

から閲覧されており、この

数字は世界人口の約8%、

総計３0億個のウェブを閲

覧した人たちに相当。



もっとも利用が高いデバイスで

最適なWEBを考えるべき

9

デバイス上位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%が

アップル製品



つまり、

・注力すべきは、アップル製品

一個々のアンドロイド端末は１％にも満たない。

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

・解決策として、

検証はコスト高。アプリのように割り切る

各機種対応を改める必要がある

10



過去2年間、

いろいろな構築方法が

都市伝説

のように言われてきました。



最適化サービス

CMSサーバーサイド

テンプレート調整

レスポンシブデザイン

iPhoneサイトへのアプローチ 2011後半

スクラッチ構築

HTML5？

プラグイン対応

携帯コンバート

簡易コンバート自動変換や

プロキシーソリューション

12



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

13



最適化サービスCMS

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

レスポンシブデザイン

マルチスクリーン対応で、さらに絞られる

スクラッチ構築

プラグイン対応

携帯コンバート

簡易コンバート自動変換や

プロキシーソリューションHTML5？

14



CMSサーバーサイド

テンプレート調整

最適化サービス

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

15



モバイル対応でモバイル対応でモバイル対応でモバイル対応で

重要なことはなにか？重要なことはなにか？重要なことはなにか？重要なことはなにか？



なぜ、なぜ、なぜ、なぜ、OneWebが必要か？が必要か？が必要か？が必要か？

グーグル、スマホ対応が不適切なグーグル、スマホ対応が不適切なグーグル、スマホ対応が不適切なグーグル、スマホ対応が不適切な

サイトの検索順位を引き下げへサイトの検索順位を引き下げへサイトの検索順位を引き下げへサイトの検索順位を引き下げへ

Googleは、リダイレクト設定の間違った例としてこの例を紹介している。Googleは、

この設定がモバイル端末でウェブサイトを閲覧しているユーザーにとってわずら

わしいものだと述べた。このような設定では、そのウェブサイトは、モバイル検索

結果での表示順序が下がることになる。

出展：Google

17



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

領域B

PC

スマート

フォン

yourdomain.co.jp/SP/

m.yourdomain.co.jp領域A

領域C

タブレットの場合も

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

メールリンク

SEO

18



運用コストの削減

19

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



校正作業をできますか？校正作業をできますか？校正作業をできますか？校正作業をできますか？

20



ロード時間の速さこそがロード時間の速さこそがロード時間の速さこそがロード時間の速さこそが

SEO対策対策対策対策

21



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



ページロードに

1秒遅れると・・・・・

23

７％

のコンバージョン

が減少

11％のページビュー

減少

16％のユーザー満足

度の減少

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

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

算出すると、2億5000万円の売上損失となる。



モバイル用に

見えていれば十分か？

• 柔軟なデザイン再現性はあるか？

• UI/UXデザインを高められるか？

24





UIの改善で

効果がUP!

26



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

企業のための

iPhone&iPad対応戦略

3つのステップ

27



ステップ１ステップ１ステップ１ステップ１

28

・プロキシーソリューションでの

サイト構築を改める。

・スクラッチでの

専用サイト構築をやめる



ベースサイトの見直し

W3C基準で改修作業

PCサイト（過去資産を生かす）チェック項目

・タブレットサイトの導入検討

・モバイルファースト設計

・ソースの基本構造の見直し

アプローチとして

レスポンシブデザインか？

Adaptiveか？

ステップ２ステップ２ステップ２ステップ２

OneWebにてにてにてにてアダプティブ対応アダプティブ対応アダプティブ対応アダプティブ対応

アダプティブ対応アダプティブ対応アダプティブ対応アダプティブ対応



次は、モバイル次は、モバイル次は、モバイル次は、モバイルWeb

リニューアル！リニューアル！リニューアル！リニューアル！

PCののののWEBリニューアルはリニューアルはリニューアルはリニューアルは

意味が薄くなってきました意味が薄くなってきました意味が薄くなってきました意味が薄くなってきました

30



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

アダプティブアダプティブアダプティブアダプティブWeb

モバイルファースト設計

コンテンツファースト設計

基本モジュール設計

ステップ３ステップ３ステップ３ステップ３

OneWebでフルリニューアルでフルリニューアルでフルリニューアルでフルリニューアル

ベースサイトのWebリニューアル

（7インチ前後）

＋最適化サービス

＋最適化サービス



マルチスクリーン対応は

当たり前のことを確実にやる

• ソースコードの重要性– W3Cに準拠した構造化されたWebの構築

– SEO的もいいはず。当たり前のことをやる。

– あまりに、構造をダメにしたWEBが多い。

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

32



株式会社ドーモ

モバイル事業部

東京都中央区築地2-11-26

築地MKビル

TEL：03-6228-4616

今井・西村・山崎

Mobifyは米は米は米は米Googleが認定が認定が認定が認定したしたしたした

マルチスクリーンベンダーです。マルチスクリーンベンダーです。マルチスクリーンベンダーです。マルチスクリーンベンダーです。

http://www.google.com/think/multiscreen/vendors.html

33

Technology

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