11月12日セミナー資料[pdf]

2013.11.12

スマホ対応 !？

レスポンシブWebデザイン
セミナー
2013年11月12日

株式会社クライマークス加藤俊司

セミナー資料

まず、自己紹介をさせてください

Copyright © 2013 Climarks Inc. All Rights Reserved.

1

自己紹介

加藤俊司
株式会社クライマークス
取締役クリエイティブ部部長／チーフ・デザイナー


2

自己紹介

株式会社クライマークス

① Webインテグレーション事業
② Webサービス事業


3

自己紹介

① Webインテグレーション事業
大手企業を中心に、Web戦略策定やWebサイト構築の
お手伝いをしています。


4

自己紹介

② Webサービス事業
スマホサイト作成サービス「smart4me」
スマート・フォー・ミー

無料版

ビジネス版
ベーシック

ビジネス版
プロ

スマホサイトが10ページまで
無料で公開！

30,000
サイト突破！

ページ数無制限！
独自ドメインで公開できる
4,980円/月

作ったサイトをダウンロード
公開するサーバーは自由！
2万円/月


5

自己紹介

http://smart4me.net/
スマホサイト作成

検索


6

自己紹介

個人活動
① ギャラリーサイト運営

② 書籍・雑誌への執筆


7

自己紹介

① ギャラリーサイト運営
レスポンシブWebデザインの
ギャラリーサイト

「Responsive Web Design JP」


8

自己紹介

http://responsive-jp.com/
レスポンシブ

検索


9

自己紹介

② 書籍・雑誌への執筆
●「レスポンシブWebデザイン
テクニックブック」（MdN）
●「Web Designing 2011年9月号」
（マイコミ）
●「Web Designing 2013年3月号」
（マイコミ）


10

ここから本題


11

本日のゴール
① レスポンシブWebデザインとは何かを知る
② カラーミーショップの
レスポンシブ Webデザインテンプレートの
メリットを知る


12

目次

１

スマホサイトがなぜ必要なの？

２

スマホに対応する５つの方法とは？

３

レスポンシブWebデザインとは？

４

レスポンシブWebデザインは何がいいの？

５

レスポンシブWebデザインは効果があるの？

6

レスポンシブWebデザインに向いているサイトとは？

7

カラーミーショップのレスポンシブWebデザイン
テンプレートは何がいいの？


13



14


スマホの契約数は、来年にはガラケーを超える見込み。
スマートフォン契約数の推移・予測（2013年3月予測）
（万件）
12,000
10,000
スマートフォン
契約数

8,000
6,000

フィーチャーフォン
契約数

4,000

2,000
0

2008

2009

2010

2011

2012 2013 2014

2015 2016

2017 （年度末）

【出典】MM総研「スマートフォン市場規模の推移・予測（2013年3月）」


15


BtoCサイトは、スマホからのアクセスが

５割超の場合も。

BtoCサイトのスマホからのアクセスの割合

55%

35%

37%

54%

エステサロン

整体院

ハウスクリーニング

インテリア情報

【出典】集客チャンネル（エステサロン、整体院、ハウスクリーニングのみ）


16


楽天もZOZOも売上の

４割がスマホから。

スマホ売上比率

スマホ出荷比率

60%

60%

40%

40%

20%

20%

0%

0%

2011末

2012末

2013末

【出典】2013年7月楽天カンファレンス発表

2012.3

2013.3

【出典】スタートトゥデイ2014年度第一四半期決算短信説明会資料


17


倍に。

スマホEC市場は、2015年には2013年の
（兆円）
3

2兆6,677億円
2兆413億円

2
1兆3,469億円

1

0

8,450億円

2013

2014

2015

（見込）

2012

（予測）

（予測）

【出典】国内スマートフォン・コマース市場規模予測（矢野経済研究所）


18


すでに
ECサイトのスマホ対応は
売上を大きく左右する段階


19


スマホ対応しない場合
 テキストが読みにくい
 リンクが押しにくい
 フォームが入力しにくい

離脱につながる！


20

では、どうやって対応するの？


21



22


Webサイトをスマホに対応する方法は、大きく分けて５種類。

① イチから作る
② スマホサイト簡易作成ツール
③ スマホサイト変換コンバーター

④ システムでPCサイトとスマホサイトを出し分け
⑤ レスポンシブWebデザイン


23





24



メリット

デメリット

 スマホ専用のとことんこだわったサイトが
できる

 制作や運用が大変
 コストが高い


25





26


（例）smart4meなど
コンテンツを入力

出力

管理画面


27



メリット

 素早く簡単にスマホサイトを作成でき、
運用も楽
 コストが安い

デメリット

 既存のPCサイトとコンテンツを自動的に
共有することはできない
 PC用／スマホ用で同じURLにできない


28


同じURLだと何がいいの？
 SEOに有利。

→ 異なるURLの場合、重複コンテンツとみなされる！？
 Twitter／Facebookなどで共有しやすい。

→ 異なるURLの場合、
① 共有数が分散！？
② スマホ用のURLを共有すると、PCでアクセスして
も、スマホ用の画面が表示！？


29





30


（例）Mobifyなど
アクセスしてきた
端末に応じて変換

変換システム
既存のPCサイト


31


 既にPCサイトがあれば、スマホ対応できる
メリット

 PC用／スマホ用とでコンテンツを共用でき、
運用も楽
 PC用／スマホ用とで同じURLにできる

デメリット

 導入までに時間がかかる

 コストが高い
大規模サイト向き

32





33


（例）カラーミーショップ、その他CMS

コンテンツを入力

コンテンツ
生成システム

管理画面
アクセスしてきた
端末に応じて変換


34



メリット

 PC用／スマホ用とでコンテンツを共用でき、
運用も楽

デメリット

 PC用／スマホ用の２種類のテンプレートが
必要で、導入・管理が面倒


35





36

ここでやっと
レスポンシブWebデザイン登場！


37



38


１つのサイトを、画面幅に応じてレイアウトを変えることで、
PC／スマホに対応させる技術。

（例）株式会社グローバルブレインスクエア（http://www.gb-s.com/）


39


今までの方法
① PCサイトとスマホサイトを、 ② PCサイトとスマホサイトを、
端末を判別して転送。
端末を判別して出し分け。

sample.com

m.sample.com

端末を判別して
転送

sample.com

端末を判別して
出し分け


40


2010年、米国の開発者、イーサン・マルコッテ氏が提唱。

【出典】イーサン・マルコッテ氏による「A List Apart」の記事「Responsive Web Design」（2010.5.25）


41


CSS3という新規格によって実現。
レスポンシブWebデザインを実現する３つの技術

① メディアクエリ（Media Queries）
画面の幅などに応じて、レイアウトを変更すること
ができるCSS3の機能
② フルードグリッド（Fluid Grid）
画面の幅に合わせ、レイアウトを変えることなく
グリッド幅のみを可変させる手法
③ フルードイメージ（Fluid Image）
画面の幅に合わせ、画像サイズを可変させる手法


42


日本でも、2012年頃からレスポンシブWebデザインを採用
したサイトが急増。
「Responsive Web Design JP」の掲載サイト数
（サイト数） 400

300

200

100

0

5 6
2012

7

8

9

10 11 12

1
2
2013

3

4

5

6

7

8

9

10


43


ECサイトでの採用も増えてきた。
その他のECサイトの例
■ Zound Industries Tokyo
http://zoundtokyo.com/
■ セレクトスクエア
http://www.selectsquare.com/
■ AGATHA E-SHOP
http://www.agatha.jp/
■ エアアジア・ゴー
https://www.airasiago.com/ja-jp/
■ GALAPAGOS STORE
http://galapagosstore.com/
■ ホテルオークラ東京ベイ
http://www.okuratokyobay.net/
■ THE STABLES
http://thestables.jp/

■ LADER
http://www.lader.jp/

（例）ミンネ（http://minne.com/）


44

レスポンシブWebデザインは
何がいいの？


45


メリット

 PC用／スマホ用とでコンテンツやデザイ
ンを完全に共用できる
 SEOに有利（Googleも推奨）
 一からつくると設計が大変

デメリット

 スマホでもPC用のデータを読み込むので、
ページが長くなったり、表示が遅くなる
 利用シーンに応じてPC用／スマホ用のコン
テンツや設計を分けたい場合には向かない


46


なぜSEOに有利なの？（Google推奨なの？）
 Googleからみたら、URLが同じでソースも１つなので、
１回クロールすればよく、効率的。
→ 出し分けや、別々のURLを使用している場合、
別ページがあることを伝える必要があり、設定が煩雑。

【注意】レスポンシブWebデザインにすると、
検索順位が上がるわけではない。
下がるリスクを減らせるということ。

47


レスポンシブWebデザインはページが長くなる！？
 ユーザーはPCサイトの簡略版は見たくない。
 ユーザーはスマホでのスクロールに抵抗がない。
 スマホサイトでの頻繁なページ移動は離脱につながる。

１ページが長くても、PCサイトと同じ情報が
見られるスマホサイトが好まれる。


48

レスポンシブWebデザインは
効果があるの？


49


① TIME（ニュース誌）
 モバイルユーザーが 23% 増加
 モバイルユーザーの直帰率は 26% 減少

【出典】LukeW「Data Monday: Impact of Responsive Designs」


50


② Skinny Ties（ネクタイ販売）
 iPhoneでの収入が 377.6% 増加
 iPhoneでのコンバージョンが 71.9% 増加



51


③ Fathead（壁用ステッカー・シール販売）
 モバイルでの収入が 538% 増加
 モバイルでのコンバージョンが 90% 増加



52

レスポンシブWebデザインに
向いているサイトとは？


53

レスポンシブWebデザインに向いているサイトとは？

向いている
サイト

 PCとスマホとでコンテンツを完全に共用
したいサイト
例：企業サイト、製品サイト、ニュースサイト、
ブログ、ECサイト

 大きな画像を多用したサイト
例：キャンペーンサイト
向いていない
サイト

 PCやスマホの利用シーンに応じて異なる
コンテンツにした方がよいサイト
例：飲食／ホテル／テーマパークのサイト

 スマホユーザーに特化したサイト

54

カラーミーショップのレスポンシブ
Webデザインテンプレートは何が
いいの？


55

カラーミーショップのレスポンシブWebデザインテンプレートは何がいいの？

カラーミーショップのレスポンシブWebデザインテンプレート


56

カラーミーショップのレスポンシブWebデザインテンプレートは何がいいの？

従来のテンプレート

レスポンシブテンプレート

 PC用とスマホ用とでデザ
インの統一感がないもの
が多い。

 ワンテンプレートでPCに
もスマホにも対応するの
で、デザインも統一。

 タブレットに未対応。

 タブレットにも対応

 別々に設定を行う必要が
あり、導入や管理が面倒。

 別々に設定を行う必要が
ないので、管理が簡単。
本来、一から作ると大変
だが、テンプレート化さ
れているので、導入も楽。

57

まとめ


58

まとめ

 すでにECのスマホ対応は売上を大きく左右する段階。
 スマホ対応方法にはいろいろあり、レスポンシブWeb
デザインはその一つ。
 それぞれの方法にメリット／デメリットがある。
 レスポンシブWebデザインにもメリット／デメリット
があるが、カラーミーショップのテンプレートには、
メリットが多い。


59

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


60

11月12日セミナー資料[pdf]

More Related Content

What's hot

Viewers also liked

Similar to 11月12日セミナー資料[pdf]

11月12日セミナー資料[pdf]