Page 1
EC担当者が明日から使える! レスポンシブECサイトを成功に導くポイント ~ワイヤーフレーム設計から構築運用改善まで~
株式会社ロックウェーブ セールス部 マネージャー
上林洋介
Page 3
上林 洋介 yosuke kambayashi / @yosuke_kam
株式会社ロックウェーブ マネージャー ディレクター/営業→開発→営業 レスポンシブECサイト⽴上げ・リプレイスに携わる
HTML・CSS・PHP・MySQL(少し)
滋賀県⽣まれ、滋賀県在住 32歳 写真家だった⼤叔⽗の影響で、趣味は写真撮影 ⻑期の休みがあれば海外へ写真を撮りに⾶び出す
Page 4
上林 洋介 yosuke kambayashi / @yosuke_kam
• 編集⻑ • ⽉間50,000pv • ⽬指せ100,000pv
http://www.aiship.jp/knowhow/
Page 5
目次• レスポンシブECサイトのディレクションを成功させる考え方
• レスポンシブデザインでワイヤーフレームを作るためのポイント
• ECサイトの表示速度を速くする7つのTips
Page 6
目次• レスポンシブECサイトのディレクションを成功させる考え方
• レスポンシブデザインでワイヤーフレームを作るためのポイント
• ECサイトの表示速度を速くする7つのTips
Page 7
レスポンシブECサイトでは ワイヤーフレームがとても⼤事
Page 8
通常のディレクション
ワイヤーフレーム
デザイン
コーディング
コンセプト設計
Page 9
レスポンシブECサイトのディレクション
ワイヤーフレーム
デザイン
コーディング
コンセプト設計
ワイヤーフレームワイヤーフレーム
デザイン デザイン
コーディング コーディング
SP PC TAB
Page 10
レスポンシブECサイトのディレクション
ワイヤーフレーム
デザイン
コーディング
コンセプト設計
ワイヤーフレームワイヤーフレーム
デザイン デザイン
コーディング コーディング
SP PC TAB
Page 14
ワイヤーフレームは間取りと同じ
何を
どこに
どのように
配置するのか
Page 17
ワイヤーフレーム無しで いきなりデザインすると…
Page 18
「こんなはずではなかった」 がたくさん出てくる。
Page 19
こんなはずではなかった事例
• 画像サイズ変更 • バナーサイズ修正 • コンテンツ配置変更 • レイアウト変更 • 全体配置変更 etc…
Page 20
後⼯程の出戻り作業を出来る限り 減らし、スムーズに構築をするため
Page 21
レスポンシブECサイトのディレクション
ワイヤーフレーム
デザイン
コーディング
コンセプト設計
ワイヤーフレームワイヤーフレーム
デザイン デザイン
コーディング コーディング
SP PC TAB
Page 22
ワイヤーフレームを 各デバイスきっちりと作りこむ
Page 23
目次• レスポンシブECサイトのディレクションを成功させる考え方
• レスポンシブデザインでワイヤーフレームを作るためのポイント
• ECサイトの表示速度を速くする7つのTips
Page 25
モバイルファーストで作る
最低限必要な要素を配置した 軽量なコンテンツ設計から始める
Page 26
モバイルファーストで作る
秋のスーパーセール 開催中!! PCファーストの画像
モバイルファーストの画像
Page 30
モバイルファーストで作る
秋のスーパーセール開催中!!
Page 31
モバイルファーストで作る
秋のスーパーセール開催中!!
Page 33
テキストも⼊れ込む
スマホ タブレット
ダミーテキストよりも実際に使用するテキストを
Page 35
実機確認をする
ボタンのサイズ テキストの読みやすさ 画像の大きさ 画像内文字の可読性 コンテンツ配置の不整合
Page 39
目次• レスポンシブECサイトのディレクションを成功させる考え方
• レスポンシブデザインでワイヤーフレームを作るためのポイント
• ECサイトの表示速度を速くする7つのTips
Page 40
ページの読み込み速度が1秒遅くなる度に、コンバージョン率が7%下がる
Page 41
検索結果がほんの1秒遅れただけでもユーザーの検索が減る。 0.4秒遅くなっただけで検索回数が0.44%減少する。
サイト表⽰が0.1秒遅れる度に、売上が1%減少する。
Page 42
1. 画像を圧縮する 2. JSのminify化 3. CSS/JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
Page 43
1. 画像を圧縮する 2. JSのminify化 3. CSS/JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
Page 44
画像を圧縮する
圧縮前 圧縮後
14.5MB 242KB
Page 45
画像を圧縮する
圧縮前読込速度 圧縮後読込速度
9.19秒 3.61秒
Page 46
画像を圧縮する
• 無料で使える • ドラッグ&ドロップ • 劣化(ほぼ)なし • ⼀括圧縮 • Exif情報削除
Page 47
画像を圧縮する
• 無料で使える • ドラッグ&ドロップ • ブラウザ利⽤可能 • Windowsでも使える
Page 48
サイトが重い!と感じたら、 まずは画像容量を疑おう
Page 49
1. 画像を圧縮する 2. JSのminify化 3. CSS/JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
Page 50
JSのminify化
圧縮前 圧縮後
コーディング時に含まれるインデントや空⽩、コメントを取り除き、ファイルサイズを圧縮すること。
202KB 79KB
Page 51
• Minify your JavaScript • Online JavaScript Compression Tool • Closure Compiler • JSMin • YUI Compressor
JSのminify化
JavaScriptをminify化してくれる無料ツール。
Page 52
1. 画像を圧縮する 2. JSのminify化 3. CSS/JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
Page 53
CSS/JSのインライン化
ファーストビューの範囲のみ、HTMLファイルのソースにCSSやJSを記述してインライン化してしまいます。
Page 54
CSS/JSのインライン化
.sample1{ border: 1px dashed #00A8FF; border-left: 5px solid #00A8FF; background-color: #eee; padding:5px;}
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <h1 class="sample1">タイトル</h1> </body></html>
Page 55
CSS/JSのインライン化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style type="text/css"> .sample1{ border: 1px dashed #00A8FF; border-left: 5px solid #00A8FF; background-color: #eee; padding:5px; } </style> </head> <body> <h1 class="sample1">タイトル</h1> </body></html>
Page 56
1. 画像を圧縮する 2. JSのminify化 3. CSS/JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
Page 57
jQueryの最新化
IE対応が必要なければ、jQueryのバージョンを最新にして、読み込みを⾼速化することが可能です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
jQuery 2.x系
• IE8までのサポートを廃⽌ • モダンブラウザにフォーカス • 12%軽量化
Page 58
1. 画像を圧縮する 2. JSのminify化 3. CSS/JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
Page 59
CDNを利⽤
CDN(コンテンツデリバリーネットワーク)を利⽤して、負荷分散&⾼速化を実現。
©CDnetworks http://www.cdnetworks.co.jp/about/
Page 60
CDNを利⽤
CDN利⽤前 CDN利⽤後
13.96秒 7.45秒
Page 61
1. 画像を圧縮する 2. JSのminify化 3. CSS/JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
Page 62
SNSボタンをCSSで
公式のSNSボタン
CSSのSNSボタン
Page 63
SNSボタンをCSSで
公式のSNSボタン CSSのSNSボタン
6.71秒 2.62秒
Page 64
1. 画像を圧縮する 2. JSのminify化 3. CSS/JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
Page 65
タグマネージャーを使う
PV計測タグ
CV計測タグ
CR計測タグ
リマケ広告タグ タグマネージャー
CV計測タグ PV計測タグ リマケ広告タグ CR計測タグ
サイトに設置するトラッキングコードや、コンバージョンコードなどを⼀元管理する。
Page 66
タグマネージャーを使う
サイトに設置するトラッキングコードや、コンバージョンコードなどを⼀元管理する。
<!--Google Analytics--><script src="/static/js/ga.js"></script><!--Facebook SDK--><script src="/static/js/facebook.js"></script><!--Twitter Widget--><script src="/static/js/twitter_wjs.js"></script><!--Google+ ボタン--><script src="/static/js/g_plusone.js"></script><!--はてなブックマークボタン--><script src="http://b.st-hatena.com/js/bookmark_button.js" async="async"></script><!--Pocket ボタン--><script src="/static/js/pocket_btn.js"></script><!--prettify.js (記事内のソースコード表示整形用)--><script src="/static/js/prettify.js"></script><!--livefyre Widget (コメントのやつ)--><script src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"></script><script src="/static/js/livefyre.js"></script><!--jQuery--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><!--jQuery を使ったコード--><script src="/static/js/function.js"></script>
<!-- Google Tag Manager --><script src="/static/js/google_tm.js"></script>
Page 67
タグマネージャーを使う
タグマネージャーを使うメリット
• HTMLがシンプルに • タグの管理がシンプルに • JSコードを⾮同期読込
Page 68
1. 画像を圧縮する 2. JSのminify化 3. CSS/JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
Page 71
Accelerated Mobile Pages
• HTMLの仕様 • 静的コンテンツ • JavaScript × • めちゃ早い
Page 72
注意いただきたいこと
今回ご紹介した方法はあくまで弊社が実装して検証した結果です。 サイト構成や計測環境によって、充分な結果が得られない可能性もありますのでご了承ください。
Page 73
Thank you
yosuke.kambayashi
yosuke_kam