Slide 1
Slide 1 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
私、ECサイトはユーザーに使いやすくって言ったよね！
〜とらのあな通販サイト 改善の取り組み〜
虎の穴ラボ Webマーケター
下野 晃生
T O R A N O A N A L a b
1
Slide 2
Slide 2 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
自己紹介
下野 晃生
● 2021/08入社
● Webマーケター
虎の穴ラボへの入社理由
● 大好きなオタク趣味のWebマーケがで
きると面白そうだと感じたから
● 大規模ECサイトに携わりたいと思った
から
趣味
● 魔法少女リリカルなのは
● アニメ全般
● カメラ
2
Slide 3
Slide 3 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
今日のテーマ
ユーザーにとって使いやすい
ＥＣサイトとは
3
Slide 4
Slide 4 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
アジェンダ
● Webマーケターという仕事について
● ユーザーにとって使いやすいECサイトとは
● とらのあな通販がやってきたサイト改善
○ サイト速度
○ CWB（コアウェブバイタル）
○ ユーザーアンケートの実施
● まとめ
4
Slide 5
Slide 5 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
Webマーケターという仕事について
5
Slide 6
Slide 6 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
Webマーケターの仕事自体は昔からありましたが、コロナ禍を迎え
オンラインでの購買活動が活発となり、一気に需要が増えた職種の1つです。
Webマーケターの仕事内容
● SEO対策
● Web広告の運用＆管理
● SNSの運用＆管理
● データ分析と改善施策の立案
Webマーケターという仕事
6
Slide 7
Slide 7 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● ユーザーさんにとっての嬉しいを提供し続ける
友達を喜ばせるかの如く、ユーザーさんに愛をもって接する
● 現場の意見と会社上層部との架け橋となる
立場の違いから出る懸念点をすり合わせる
私が考えるWebマーケターの役割
7
Webマーケターだけではなく、
1人1人がこの考えになっていくと素敵ですね。
Slide 8
Slide 8 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
ユーザーにとって使いやすい
ECサイトとは？
8
Slide 9
Slide 9 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
使いやすいECサイト = 愛されているECサイトと考えるならば、
その指標を定量的にみるべきは
LTV(Life Time Value)だと考えます。
サイト自体が凄く使いやすいECサイトであっても…
● 破損した商品しか届かない
● メールの問い合わせが返ってこない
などの状態はユーザーにとって使いやすいECサイトではないのではありませんか？
使いやすいECサイトについて、定量的に考える
9
LTVは生涯顧客価値とも呼ばれ、ある顧客から生涯に渡って得られる利益のこ
とを指します。１年間などの間隔で区切ることも多いですね。
Slide 10
Slide 10 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
SEOなどWebマーケに注力するのはもちろん大事だが、
そこだけに注力しすぎるとユーザさんが置いてけぼりになってしまう。
新規顧客の獲得は既存顧客の
5倍コストがかかるとも言われている昨今、
「このサイトオススメなんだよね」とユーザーさんの感動体験を共有してもらえるほどの
ECサイト
になることを目指すべき。
LTVを高めるには、マーケティングに目を向けるべき
10
「このラーメン屋オススメだよ！」
と言ってもらえるようなECサイトを目指したいですね。
Slide 11
Slide 11 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● ユーザーさんとの接点を増やす
メールで注文情報の進捗や商品に不備はないかなど、コミュニケーションをとる
● アンケートなどで声を集め、改善を行ったら共有する
ユーザーさんとしても「意見が反映された！」と喜び、
他の人も「意見きいてくれるなら
…！」と思って声を寄せてくれる
● メリット（ベネフィット）を提供する
そのECサイトがもつメリット（ベネフィット）をユーザーさんが感じることができるようにサポー
トをする
「あそこいいよね」と言ってもらえるECサイトになるために
11
Slide 12
Slide 12 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
LTVを高めるために、とらのあな通販がやってきたことを紹介
12
次の章から、とらのあな通販が
最近行った改善事例を紹介していくわ
Slide 13
Slide 13 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
とらのあな通販がやってきたサイト改善
13
Slide 14
Slide 14 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
とらのあな通販は2018年のリニューアルを機に、サイト改善に注力。
ユーザーさんの声や実際に操作することで使いにくい部分を発見。
チームで知見を共有・協議しながら改善を進める。
今回お話しするのは…
● サイト速度
● CWV（コアウェブバイタル）
● ユーザーアンケートからの改善
とらのあな通販がやってきたサイト改善事例の紹介
14
Slide 15
Slide 15 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
サイト速度の改善
15
Slide 16
Slide 16 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
とらのあな通販サイトは画像を非常に多く使用するため、
サイト速度が物凄く遅いという問題がありました。
サイト速度 ～致命的に遅かった過去～
16
2018年7月 4.33秒
ECサイト全体の速度
平均読み込み速度が 11秒といった高PVのページも存在…
Slide 17
Slide 17 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● ユーザビリティのため
表示の遅いサイトは離脱の可能性が高まる。
そもそも何故サイト速度を気にするのか①
17
【2017～2018年のGoogleによる調査】
表示に3秒以上かかるスマホページは、
53％のユーザーが離脱しているデータが！
Slide 18
Slide 18 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● CVRに影響するため
表示の速さは売上に直結する
そもそも何故サイト速度を気にするのか②
18
【Amazonによる調査】
サイト表示が0.1秒遅くなると売上が1％減少
1秒高速化すると10％の売上が向上する。
Slide 19
Slide 19 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● 1つの画像に対し上限容量（KB）を設定
社内ルールで容量の大きい画像を使わない＆ツールでの検知を仕組み化
● 圧縮に優れたWebpを一部採用
JPEGに比べ、72％圧縮可能
● lazy_loadの実装
スクロール対応して画像を読み込むように処理
サイト速度改善のために ～画像について～
19
Slide 20
Slide 20 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● 改善対象のページを調査
Google Page Speed InsightsやGoogleアナリティクスを使用
→サイト平均と比べて遅いページの原因調査
不要なタグやスクリプトなどを発見＆処理
SQL構文の最適化など
サイト速度改善のために ～その他の項目～
20
Slide 21
Slide 21 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
紹介してきた1つ1つの小さな改善を積み重ね、
とらのあな通販サイトはサイト平均速度3.0秒を切ることに成功
サイト速度 ～改善の結果～
21
2018年7月 4.33秒 2022年2月 2.76秒
ECサイト全体の速度
1.57秒の改善
（36％）
Slide 22
Slide 22 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
とらのあな通販サイトは以前と比べると早くなったとはいえ、
更なる速度改善を続けていきます。
既存の取り組みを続けながら、新たな画像拡張子AVIFの導入も検討。
今後のサイト速度改善について
22
AVIFはWebPと比較しても約30％のサイズ縮小が可能！
対応ブラウザはまだ少ないので導入するならば、
タグでの実装をしてね！
Slide 23
Slide 23 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
CWVの改善
23
Slide 24
Slide 24 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
CWBとはGoogleがWebにおいて「よりよいユーザー体験」を提供する上で、
必要不可欠と定めたコンセプト。
GoogleのウェブマスターブログにてCWBをSEOのランキングシグナルに使用すると
のアナウンスも。
CWV（コアウェブバイタル）とは？
24
Slide 25
Slide 25 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● Googleからランキングシグナルとして使用すると発表があったため
→SEO対策
● ユーザビリティに関連する改善項目であったため
→ユーザーさんが使いやすくなる
何故CWV（コアウェブバイタル）に取り組むことに決めた？
25
Slide 26
Slide 26 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● LCP（Larcest Contentful Paint）
メインコンテンツがブラウザに表示されるまでの時間
● FID(First Input Delay)
ユーザーがページで最初に行ったアクションが実際に
ブラウザで実行できるまでの時間
● CLS(Cumulative Layout Shift)
意図しないレイアウトのずれをスコアリングした数値
CWVの指標の3大要素
26
とらのあな通販の
改善履歴も公開するわ
Slide 27
Slide 27 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
CLSについての補足
27
読み込みが終わると、
赤枠部分がいきなり出てきて、誤
タップするやつね…。
Slide 28
Slide 28 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
1. サーチコンソールにて「ウェブに関する主な指標」で指摘されている
URLパターンを把握す
る
2. Google PageSpeed Insightsなどを使用し、どこに原因があるのかを探る
3. エンジニアさんと連携し、計画を立てて改善を進める
CWVの改善に向けて準備したこと
28
とらのあな通販はエンジニアさんが多数在籍しているので、
スピーディに動けるのがいいところね。
Slide 29
Slide 29 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● 画像の最適化と圧縮
WebPの導入や画像サイズの上限設定
● Lazy_loadの実装
スクロールに応じてコンテンツを読み込み
LCPの改善内容 （サイト速度改善の流れでも対応）
29
メインコンテンツを
より素早く読み込むために！
LCP…メインコンテンツがブラウザに表示されるまでの時間
Slide 30
Slide 30 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● 使用していないJavaScriptの削除
使わなくなったJavaScriptはしっかりと消す！
● 必要最低限のJavaScriptを読み込み時に実行されるようにする
メインスレッドを50ミリ秒以上にわたってブロックしないように！
FIDの改善内容
30
FIDの肝はJavaScript
FID…ユーザーがページで最初に行ったアクションが実行できるまでの時間
Slide 31
Slide 31 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● コンテンツのサイズをあらかじめ指定し、表示領域の確保
imgタグにheightとwidth(高さと横幅)を追加だけでOK
技術的に難しいことではないが、昔のサボってたツケがまとめてきた
…
CLSの改善内容
31
タップしようとしたら別のコンテンツがニュッと出てきて、
予想外のコンテンツをタップしちゃうのはストレスだよね …
CLS…意図しないレイアウトのずれをスコアリングした数値
Slide 32
Slide 32 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
Chromeの拡張機能を使い、Chromeでアクセスしたデータを元に先ほどの値の推移を調べる
ことが可能。
競合を指定すれば、競合のスコアもチェック可能。
とらのあな通販の値をCrUX(Chrome UX Report)で見る
32
Slide 33
Slide 33 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
とらのあな通販の値をCrUXで見る（LCP）
33
LCP…メインコンテンツがブラウザに表示されるまでの時間
2021年5月～2022年2月にかけて
良好：77.76％→86.92％（+9.16％）
Slide 34
Slide 34 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
とらのあな通販の値をCrUXで見る（FID）
34
FID…ユーザーがページで最初に行ったアクションが実行できるまでの時間
2021年5月～2022年2月にかけて
良好：91.57％→96.45％（+4.88％）
Slide 35
Slide 35 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
とらのあな通販の値をCrUXで見る（CLS）
35
CLS…意図しないレイアウトのずれをスコアリングした数値
2021年5月～2022年2月にかけて
良好：71.54％→90.53％（+18.99％）
Slide 36
Slide 36 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● CWVはユーザーにとってのメリット＆SEOのランキングシグナルに採用されているので、ぜ
ひ対応しよう
● 月次でCrUXレポートが見れるので、改善の結果をメンバーで共有しモチベーションを高め
つつ着手＆継続しよう
CWV改善のまとめ
36
Slide 37
Slide 37 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
ユーザーアンケートの実施
37
Slide 38
Slide 38 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
とらのあな通販では、定期的にユーザーアンケートを行っています。
理由としては、自分たちでは考えつかない範囲での不満や要望をユーザーさんに
直接伺って気づきを得るためです。
また、アンケートに答えてくれるユーザーさんはサイトを愛用してくださる
「コアなユーザーさん」が多い特徴があります。
ユーザーさんの声をきくために
38
Slide 39
Slide 39 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
2022年1月に実施したユーザーアンケートでは、
9,367件ものご回答を頂きました。
自由記述欄にも多くの方が記載して頂き「ユーザーさんがどう思っているのか」について多くのリ
アルな声を頂戴しました。
直近のユーザーアンケートの結果
39
励ましの声からお叱りの声まで、幅広い意見を教えて頂けました。
内容を種類ごとに分けて、チームで確認会を行いました。
Slide 40
Slide 40 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
新着商品のお知らせメールを画像（
HTML）化
アンケートから行った改善例
40
ひと目で何の商品か分かりやすくなったと
いうお声を多数いただきました。
Slide 41
Slide 41 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● ユーザーさんの声に耳を傾けることで満足度があがり、
LTV（生涯顧客売上）が向上する。
→ユーザーさんもECサイトもハッピー
● アンケートなど、ユーザーさんとの会話する機会を大事にする
ユーザーアンケートのまとめ
41
その他アンケートで頂いた内容についても、
改善活動を行っています。
Slide 42
Slide 42 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
まとめ
42
Slide 43
Slide 43 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
● ユーザーさんがストレスを感じないサイトは
Googleの評価基準に繋がる部分も大きい
● Web上だけではなく、サイトを訪れるところから
商品を届けて、また訪問するまでのプロセスを一貫して考えよう
● ユーザーさんの望むことはユーザーさんが
一番よく知っている。聞く姿勢を放棄してはいけない
まとめ
43
Slide 44
Slide 44 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
ご清聴ありがとうございました
44
Slide 45
Slide 45 text
Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
質疑応答