とらのあなラボTechConferenceVol.2_私、ECサイトはユーザーに使いやすくって言ったよね！〜とらのあな通販サイト 改善の取り組み〜

とらのあなラボTechConferenceVol.2におけるセッション「WAF-Athenaによるセキュリティ対策」の登壇資料です。

■イベント情報
https://yumenosora.connpass.com/event/241175/

■今後のイベントについてはこちら
https://yumenosora.connpass.com/

■虎の穴ラボ 採用サイト
https://yumenosora.co.jp/tora-lab/

Transcript

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