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

2013.11.12

魅せ

る

スマホ対応 ! ？

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

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

セミナー資料

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

Copyright © 2013 Climarks Inc. All Rights Reserved.

2

自己紹介

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


3

自己紹介

株式会社クライマークス

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


4

自己紹介

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


5

自己紹介

② Web サービス事業
スマホサイト作成サービス

無料版

ビジネス版
ベーシック

ビジネス版
プロ

スマート・フォー・ミー

「 smart4me 」

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

30,000

サイト突
破！

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

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

2 万円 / 月


6

自己紹介

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

検索


7

自己紹介

個人活動
① ギャラリーサイト運営
② 書籍・雑誌への執筆


8

自己紹介

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

「 Responsive Web Design JP 」


9

自己紹介

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

検索


10

自己紹介

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


11

ここから本題


12

本日のゴール
①
る

レスポンシブ Web デザインとは何かを知

②

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

トの

メリットを知る

13

目次

１

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

２

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

３

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

４

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

５

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

6

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

7

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


14



15


スマホの契約数は、来年にはガラケーを超える見込み。
スマートフォン契約数の推移・予測（ 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 月）」


16


５割超の場合も。

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

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

55%

35%

37%

54%

エステサロン

整体院

ハウスクリーニング

インテリア情報

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


17


４割がスマホから。

楽天も ZOZO も売上の

スマホ売上比率

スマホ出荷比率

60%

60%

40%

40%

20%

20%

0%

0%

2011 末

2012 末

2013 末

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

2012.3

2013.3

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


18


倍に。

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

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

2
1 兆 3,469 億円

1

0

8,450 億円

2012

2013

（見込）

2014

（予測）

2015

（予測）

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


19


すでに

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


20


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

離脱につながる！


21

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


22



23


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

① イチから作る
② スマホサイト簡易作成ツール
③ スマホサイト変換コンバーター
④ システムで PC サイトとスマホサイトを出し分け
⑤ レスポンシブ Web デザイン


24




25



メリット

デメリット

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

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


26




27


（例） smart4me など

コンテンツを入力

出力

管理画面

28



メリット

デメリット

 素早く簡単にスマホサイトを作成でき、
　
運用も楽
　
　
コストが安い

 既存の PC サイトとコンテンツを自動的に
共有することはできない
 PC 用／スマホ用で同じ URL にできない


29


同じ URL だと何がいいの？
 SEO に有利。
→ 異なる URL の場合、重複コンテンツとみなされる！？
 Twitter ／ Facebook などで共有しやすい。
→ 異なる URL の場合、
① 共有数が分散！？
② スマホ用の URL を共有すると、 PC でアクセスしても、
スマホ用の画面が表示！？


30




31


（例） Mobify など

アクセスしてきた
端末に応じて変換

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


32


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

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

デメリット

 導入までに時間がかかる
 コストが高い
大規模サイト向き

33




34


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

コンテンツを入力

コンテンツ
生成システム

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


35



メリット

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

デメリット

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


36




37

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


38



39


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

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


40


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

sample.com

m.sample.com

端末を判別して
転送

② PC サイトとスマホサイトを
、端末を判別して出し分け。

sample.com

端末を判別して
出し分け


41


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

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


42


CSS3 という新規格によって実現。
レスポンシブ Web デザインを実現する３つの技術
① メディアクエリ（ Media Queries ）
画面の幅などに応じて、レイアウトを変更すること
ができる CSS3 の機能
② フルードグリッド（ Fluid Grid ）
画面の幅に合わせ、レイアウトを変えることなく　
グリッド幅のみを可変させる手法
③ フルードイメージ（ Fluid Image ）
画面の幅に合わせ、画像サイズを可変させる手法


43


日本でも、 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


44


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/ ）


45

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


46


メリット

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

デメリット

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

47


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

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

48


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

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


49

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


50


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

減少

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


51


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



52


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



53

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


54

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

向いている
サイト

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

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

向いていない
サイト

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

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

55

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


56

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

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


57

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

従来のテンプレート

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

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

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

 タブレットに未対応。

 タブレットにも対応

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

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

58

まとめ


59

まとめ

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


60

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


61

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

More Related Content

What's hot

Similar to 11月12日レスポンシブWebデザインセミナー資料

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