151117 レスポンシブecサイトの設計方法と運用改善について

EC担当者が明日から使える！レスポンシブECサイトを成功に導くポイント～ワイヤーフレーム設計から構築運用改善まで～

株式会社ロックウェーブセールス部　マネージャー

上林洋介

⾃⼰紹介

上林洋介 yosuke kambayashi / @yosuke_kam

株式会社ロックウェーブマネージャーディレクター／営業→開発→営業レスポンシブECサイト⽴上げ・リプレイスに携わる

HTML・CSS・PHP・MySQL（少し）

滋賀県⽣まれ、滋賀県在住 32歳写真家だった⼤叔⽗の影響で、趣味は写真撮影⻑期の休みがあれば海外へ写真を撮りに⾶び出す

上林洋介 yosuke kambayashi / @yosuke_kam

• 編集⻑ • ⽉間50,000pv • ⽬指せ100,000pv

http://www.aiship.jp/knowhow/

目次• レスポンシブECサイトのディレクションを成功させる考え方

• レスポンシブデザインでワイヤーフレームを作るためのポイント

• ECサイトの表示速度を速くする7つのTips

レスポンシブECサイトではワイヤーフレームがとても⼤事

通常のディレクション

ワイヤーフレーム

デザイン

コーディング

コンセプト設計

レスポンシブECサイトのディレクション


デザイン

コーディング


ワイヤーフレームワイヤーフレーム

デザインデザイン

コーディングコーディング

SP PC TAB

ワイヤーフレームとは

サイトの設計図

ワイヤーフレームは間取りと同じ

何を

どこに

どのように

配置するのか

ワイヤーフレーム無しで家を建てる

なぜワイヤーフレームが必要なのか

ワイヤーフレーム無しでいきなりデザインすると…

「こんなはずではなかった」がたくさん出てくる。

こんなはずではなかった事例

• 画像サイズ変更 • バナーサイズ修正 • コンテンツ配置変更 • レイアウト変更 • 全体配置変更 etc…

後⼯程の出戻り作業を出来る限り減らし、スムーズに構築をするため

レスポンシブECサイトのディレクション


デザイン

コーディング


ワイヤーフレームワイヤーフレーム

デザインデザイン

コーディングコーディング

SP PC TAB

ワイヤーフレームを各デバイスきっちりと作りこむ

モバイルファーストで作る


最低限必要な要素を配置した軽量なコンテンツ設計から始める


秋のスーパーセール開催中！！ PCファーストの画像

モバイルファーストの画像


秋のスーパーセール開催中！！

テキストも⼊れ込む

テキストも⼊れ込む

スマホタブレット

ダミーテキストよりも実際に使用するテキストを

実機確認をする


ボタンのサイズテキストの読みやすさ画像の大きさ画像内文字の可読性コンテンツ配置の不整合

出来る限りのページをワイヤー化

ページの読み込み速度が1秒遅くなる度に、コンバージョン率が7%下がる

検索結果がほんの1秒遅れただけでもユーザーの検索が減る。 0.4秒遅くなっただけで検索回数が0.44%減少する。

サイト表⽰が0.1秒遅れる度に、売上が1％減少する。

1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う

画像を圧縮する

圧縮前圧縮後

14.5MB 242KB


圧縮前読込速度圧縮後読込速度

9.19秒 3.61秒


• 無料で使える • ドラッグ&ドロップ • 劣化（ほぼ）なし • ⼀括圧縮 • Exif情報削除


• 無料で使える • ドラッグ＆ドロップ • ブラウザ利⽤可能 • Windowsでも使える

サイトが重い！と感じたら、まずは画像容量を疑おう

JSのminify化

圧縮前圧縮後

コーディング時に含まれるインデントや空⽩、コメントを取り除き、ファイルサイズを圧縮すること。

202KB 79KB

• Minify your JavaScript • Online JavaScript Compression Tool • Closure Compiler • JSMin • YUI Compressor

JSのminify化

JavaScriptをminify化してくれる無料ツール。

CSS／JSのインライン化

ファーストビューの範囲のみ、HTMLファイルのソースに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>


<!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>

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％軽量化

CDNを利⽤

CDN利⽤前 CDN利⽤後

13.96秒 7.45秒

SNSボタンをCSSで

公式のSNSボタン

CSSのSNSボタン

SNSボタンをCSSで

公式のSNSボタン CSSのSNSボタン

6.71秒 2.62秒

タグマネージャーを使う

PV計測タグ

CV計測タグ

CR計測タグ

リマケ広告タグタグマネージャー

CV計測タグ PV計測タグリマケ広告タグ CR計測タグ

サイトに設置するトラッキングコードや、コンバージョンコードなどを⼀元管理する。

サイトに設置するトラッキングコードや、コンバージョンコードなどを⼀元管理する。

<script src="/static/js/ga.js"></script><script src="/static/js/facebook.js"></script><script src="/static/js/twitter_wjs.js"></script><script src="/static/js/g_plusone.js"></script><script src="http://b.st-hatena.com/js/bookmark_button.js" async="async"></script><script src="/static/js/pocket_btn.js"></script><script src="/static/js/prettify.js"></script><script src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"></script><script src="/static/js/livefyre.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script src="/static/js/function.js"></script>

<script src="/static/js/google_tm.js"></script>


タグマネージャーを使うメリット

• HTMLがシンプルに • タグの管理がシンプルに • JSコードを⾮同期読込

One more thing…

Accelerated Mobile Pages

• HTMLの仕様 • 静的コンテンツ • JavaScript × • めちゃ早い

注意いただきたいこと

今回ご紹介した方法はあくまで弊社が実装して検証した結果です。サイト構成や計測環境によって、充分な結果が得られない可能性もありますのでご了承ください。

Thank you

yosuke.kambayashi

yosuke_kam

151117 レスポンシブecサイトの設計方法と運用改善について

Technology