151117 レスポンシブECサイトの設計方法と運用改善について
•
4 likes•852 views
レスポンシブECサイトを成功に導くポイントと、速度改善するためのポイントについて解説してみました。
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (15)
Similar to 151117 レスポンシブECサイトの設計方法と運用改善について
Similar to 151117 レスポンシブECサイトの設計方法と運用改善について (20)
Recently uploaded
Recently uploaded (9)
151117 レスポンシブECサイトの設計方法と運用改善について
- 2. ⾃⼰紹介
- 3. 上林 洋介 yosuke kambayashi / @yosuke_kam 株式会社ロックウェーブ マネージャー ディレクター／営業→開発→営業 レスポンシブECサイト⽴上げ・リプレイスに携わる HTML・CSS・PHP・MySQL（少し） 滋賀県⽣まれ、滋賀県在住 32歳 写真家だった⼤叔⽗の影響で、趣味は写真撮影 ⻑期の休みがあれば海外へ写真を撮りに⾶び出す
- 4. 上林 洋介 yosuke kambayashi / @yosuke_kam • 編集⻑ • ⽉間50,000pv • ⽬指せ100,000pv http://www.aiship.jp/knowhow/
- 5. 目次 • レスポンシブECサイトのディレクションを成功 させる考え方 • レスポンシブデザインでワイヤーフレームを作 るためのポイント • ECサイトの表示速度を速くする7つのTips
- 6. 目次 • レスポンシブECサイトのディレクションを成功 させる考え方 • レスポンシブデザインでワイヤーフレームを作 るためのポイント • ECサイトの表示速度を速くする7つのTips
- 9. レスポンシブECサイトのディレクション ワイヤーフレーム デザイン コーディング コンセプト設計 ワイヤーフレームワイヤーフレーム デザイン デザイン コーディング コーディング SP PC TAB
- 10. レスポンシブECサイトのディレクション ワイヤーフレーム デザイン コーディング コンセプト設計 ワイヤーフレームワイヤーフレーム デザイン デザイン コーディング コーディング SP PC TAB
- 11. ワイヤーフレームとは
- 12. サイトの設計図
- 15. ワイヤーフレーム無しで家を建てる
- 19. こんなはずではなかった事例 • 画像サイズ変更 • バナーサイズ修正 • コンテンツ配置変更 • レイアウト変更 • 全体配置変更 etc…
- 21. レスポンシブECサイトのディレクション ワイヤーフレーム デザイン コーディング コンセプト設計 ワイヤーフレームワイヤーフレーム デザイン デザイン コーディング コーディング SP PC TAB
- 23. 目次 • レスポンシブECサイトのディレクションを成功 させる考え方 • レスポンシブデザインでワイヤーフレームを作 るためのポイント • ECサイトの表示速度を速くする7つのTips
- 24. モバイルファーストで作る
- 27. モバイルファーストで作る
- 28. モバイルファーストで作る
- 29. モバイルファーストで作る
- 32. テキストも⼊れ込む
- 34. 実機確認をする
- 36. 実機確認をする
- 37. 実機確認をする
- 38. 出来る限りのページを ワイヤー化
- 39. 目次 • レスポンシブECサイトのディレクションを成功 させる考え方 • レスポンシブデザインでワイヤーフレームを作 るためのポイント • ECサイトの表示速度を速くする7つのTips
- 42. 1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
- 43. 1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
- 46. 画像を圧縮する • 無料で使える • ドラッグ&ドロップ • 劣化（ほぼ）なし • ⼀括圧縮 • Exif情報削除
- 47. 画像を圧縮する • 無料で使える • ドラッグ＆ドロップ • ブラウザ利⽤可能 • Windowsでも使える
- 49. 1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
- 51. • Minify your JavaScript • Online JavaScript Compression Tool • Closure Compiler • JSMin • YUI Compressor JSのminify化 JavaScriptをminify化してくれる無料ツール。
- 52. 1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
- 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>
- 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>
- 56. 1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
- 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％軽量化
- 58. 1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
- 61. 1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
- 64. 1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
- 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>
- 67. タグマネージャーを使う タグマネージャーを使うメリット • HTMLがシンプルに • タグの管理がシンプルに • JSコードを⾮同期読込
- 68. 1. 画像を圧縮する 2. JSのminify化 3. CSS／JSのインライン化 4. jQueryの最新化 5. CDNを利⽤ 6. SNSボタンをCSSで 7. タグマネージャーを使う
- 69. One more thing…
- 70. AMP
- 71. Accelerated Mobile Pages • HTMLの仕様 • 静的コンテンツ • JavaScript × • めちゃ早い