魅せるスマホ対応！？レスポンシブ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


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

離離脱につながる！


21

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


22



23


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

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


24




25


メリット

デメリット

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

l  制作や運⽤用が⼤大変
l 
コストが⾼高い


26




27


（例例）smart4meなど

コンテンツを⼊入⼒力力

出⼒力力

管理理画⾯面

28


メリット

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

デメリット

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


29


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


30




31


（例例）Mobifyなど

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

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


32


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

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

デメリット

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

l  コストが⾼高い

⼤大規模サイト向き

33




34


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

コンテンツを⼊入⼒力力

コンテンツ
⽣生成システム

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


35



メリット

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

デメリット

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


36




37

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


38



39


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

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

40


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

sample.com

m.sample.com

端末を判別して
転送

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 rasiago.com/ja-‐‑‒jp/
.ai
■
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


メリット

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

デメリット

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


47


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

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

48


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

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


49

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


50


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

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

51


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


52


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


53

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


54

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

向いている
サイト

l  PCとスマホとでコンテンツを完全に共⽤用

したいサイト

例例：企業サイト、製品サイト、ニュースサイト、
ブログ、ECサイト

l  ⼤大きな画像を多⽤用したサイト

例例：キャンペーンサイト

向いていない
サイト

l  PCやスマホの利利⽤用シーンに応じて異異なる

コンテンツにした⽅方がよいサイト
例例：飲⾷食／ホテル／テーマパークのサイト

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


55

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


56

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

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


57

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

従来のテンプレート

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

l  PC⽤用とスマホ⽤用とでデザ

インの統⼀一感がないもの
が多い。

l  ワンテンプレートでPCに

もスマホにも対応するの
で、デザインも統⼀一。

l  タブレットに未対応。

l  タブレットにも対応

l  別々に設定を⾏行行う必要が

あり、導⼊入や管理理が⾯面倒。

l  別々に設定を⾏行行う必要が

ないので、管理理が簡単。
本来、⼀一から作ると⼤大変
だが、テンプレート化さ
れているので、導⼊入も楽。

58

まとめ


59

まとめ

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


60

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


61

2013.11.12


カラーミーショップ公式レスポンシブ
テンプレート好評発売中!!


63

統一デザインでブランド力の強化！
ひとつのテンプレートで、パソコン、スマホやタブレット

など様々な画面に自動で対応することができます。

スマホ・タブレットに自動対応！
レスポンシブテンプレートは、画面の大きさにあわせて
自動でデザインを調整しますので、どんなデバイスにも
対応可能です。

メンテナンスがとても簡単！
レスポンシブテンプレートなら、少しのデザインを変える
時も、一つのデザイン変更ですべてに対応することが
できます。


64

有料テンプレート30％OFFキャンペーン開催中!!
明日11月13日(水)17時まで
通常価格29,800pt⇒　セール価格20,860pt


65

2013.11.12


本日はご来場ありがとうございました！

魅せるスマホ対応！？レスポンシブWebデザインセミナー

Recommended

Recommended

More Related Content

Similar to 魅せるスマホ対応！？レスポンシブWebデザインセミナー

Similar to 魅せるスマホ対応！？レスポンシブWebデザインセミナー (20)

More from ec-campus

More from ec-campus (20)

Recently uploaded

Recently uploaded (7)

魅せるスマホ対応！？レスポンシブWebデザインセミナー