Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

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

More Decks by 虎の穴ラボ株式会社

Other Decks in Marketing & SEO

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

    View full-size slide

  2. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    自己紹介
    下野 晃生
    ● 2021/08入社
    ● Webマーケター
    虎の穴ラボへの入社理由
    ● 大好きなオタク趣味のWebマーケがで
    きると面白そうだと感じたから
    ● 大規模ECサイトに携わりたいと思った
    から
    趣味
    ● 魔法少女リリカルなのは
    ● アニメ全般
    ● カメラ
    2

    View full-size slide

  3. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    今日のテーマ
    ユーザーにとって使いやすい
    ECサイトとは
    3

    View full-size slide

  4. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    アジェンダ
    ● Webマーケターという仕事について
    ● ユーザーにとって使いやすいECサイトとは
    ● とらのあな通販がやってきたサイト改善
    ○ サイト速度
    ○ CWB(コアウェブバイタル)
    ○ ユーザーアンケートの実施
    ● まとめ
    4

    View full-size slide

  5. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    Webマーケターという仕事について
    5

    View full-size slide

  6. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    Webマーケターの仕事自体は昔からありましたが、コロナ禍を迎え
    オンラインでの購買活動が活発となり、一気に需要が増えた職種の1つです。
    Webマーケターの仕事内容
    ● SEO対策
    ● Web広告の運用&管理
    ● SNSの運用&管理
    ● データ分析と改善施策の立案
    Webマーケターという仕事
    6

    View full-size slide

  7. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● ユーザーさんにとっての嬉しいを提供し続ける
    友達を喜ばせるかの如く、ユーザーさんに愛をもって接する
    ● 現場の意見と会社上層部との架け橋となる
    立場の違いから出る懸念点をすり合わせる
    私が考えるWebマーケターの役割
    7
    Webマーケターだけではなく、
    1人1人がこの考えになっていくと素敵ですね。

    View full-size slide

  8. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ユーザーにとって使いやすい
    ECサイトとは?
    8

    View full-size slide

  9. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    使いやすいECサイト = 愛されているECサイトと考えるならば、
    その指標を定量的にみるべきは
    LTV(Life Time Value)だと考えます。
    サイト自体が凄く使いやすいECサイトであっても…
    ● 破損した商品しか届かない
    ● メールの問い合わせが返ってこない
    などの状態はユーザーにとって使いやすいECサイトではないのではありませんか?
    使いやすいECサイトについて、定量的に考える
    9
    LTVは生涯顧客価値とも呼ばれ、ある顧客から生涯に渡って得られる利益のこ
    とを指します。1年間などの間隔で区切ることも多いですね。

    View full-size slide

  10. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    SEOなどWebマーケに注力するのはもちろん大事だが、
    そこだけに注力しすぎるとユーザさんが置いてけぼりになってしまう。
    新規顧客の獲得は既存顧客の
    5倍コストがかかるとも言われている昨今、
    「このサイトオススメなんだよね」とユーザーさんの感動体験を共有してもらえるほどの
    ECサイト
    になることを目指すべき。
    LTVを高めるには、マーケティングに目を向けるべき
    10
    「このラーメン屋オススメだよ!」
    と言ってもらえるようなECサイトを目指したいですね。

    View full-size slide

  11. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● ユーザーさんとの接点を増やす
    メールで注文情報の進捗や商品に不備はないかなど、コミュニケーションをとる
    ● アンケートなどで声を集め、改善を行ったら共有する
    ユーザーさんとしても「意見が反映された!」と喜び、
    他の人も「意見きいてくれるなら
    …!」と思って声を寄せてくれる
    ● メリット(ベネフィット)を提供する
    そのECサイトがもつメリット(ベネフィット)をユーザーさんが感じることができるようにサポー
    トをする
    「あそこいいよね」と言ってもらえるECサイトになるために
    11

    View full-size slide

  12. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    LTVを高めるために、とらのあな通販がやってきたことを紹介
    12
    次の章から、とらのあな通販が
    最近行った改善事例を紹介していくわ

    View full-size slide

  13. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    とらのあな通販がやってきたサイト改善
    13

    View full-size slide

  14. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    とらのあな通販は2018年のリニューアルを機に、サイト改善に注力。
    ユーザーさんの声や実際に操作することで使いにくい部分を発見。
    チームで知見を共有・協議しながら改善を進める。
    今回お話しするのは…
    ● サイト速度
    ● CWV(コアウェブバイタル)
    ● ユーザーアンケートからの改善
    とらのあな通販がやってきたサイト改善事例の紹介
    14

    View full-size slide

  15. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    サイト速度の改善
    15

    View full-size slide

  16. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    とらのあな通販サイトは画像を非常に多く使用するため、
    サイト速度が物凄く遅いという問題がありました。
    サイト速度 ~致命的に遅かった過去~
    16
    2018年7月 4.33秒
    ECサイト全体の速度
    平均読み込み速度が 11秒といった高PVのページも存在…

    View full-size slide

  17. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● ユーザビリティのため
      表示の遅いサイトは離脱の可能性が高まる。
    そもそも何故サイト速度を気にするのか①
    17
    【2017~2018年のGoogleによる調査】
    表示に3秒以上かかるスマホページは、
    53%のユーザーが離脱しているデータが!

    View full-size slide

  18. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● CVRに影響するため
    表示の速さは売上に直結する
    そもそも何故サイト速度を気にするのか②
    18
    【Amazonによる調査】
    サイト表示が0.1秒遅くなると売上が1%減少
    1秒高速化すると10%の売上が向上する。

    View full-size slide

  19. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● 1つの画像に対し上限容量(KB)を設定
    社内ルールで容量の大きい画像を使わない&ツールでの検知を仕組み化
    ● 圧縮に優れたWebpを一部採用
    JPEGに比べ、72%圧縮可能
    ● lazy_loadの実装
    スクロール対応して画像を読み込むように処理
    サイト速度改善のために ~画像について~
    19

    View full-size slide

  20. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● 改善対象のページを調査
    Google Page Speed InsightsやGoogleアナリティクスを使用
    →サイト平均と比べて遅いページの原因調査
    不要なタグやスクリプトなどを発見&処理
    SQL構文の最適化など
    サイト速度改善のために ~その他の項目~
    20

    View full-size slide

  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%)

    View full-size slide

  22. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    とらのあな通販サイトは以前と比べると早くなったとはいえ、
    更なる速度改善を続けていきます。
    既存の取り組みを続けながら、新たな画像拡張子AVIFの導入も検討。
    今後のサイト速度改善について
    22
    AVIFはWebPと比較しても約30%のサイズ縮小が可能!
    対応ブラウザはまだ少ないので導入するならば、
    タグでの実装をしてね!

    View full-size slide

  23. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    CWVの改善
    23

    View full-size slide

  24. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    CWBとはGoogleがWebにおいて「よりよいユーザー体験」を提供する上で、
    必要不可欠と定めたコンセプト。
    GoogleのウェブマスターブログにてCWBをSEOのランキングシグナルに使用すると
    のアナウンスも。
    CWV(コアウェブバイタル)とは?
    24

    View full-size slide

  25. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● Googleからランキングシグナルとして使用すると発表があったため
    →SEO対策
    ● ユーザビリティに関連する改善項目であったため
    →ユーザーさんが使いやすくなる
    何故CWV(コアウェブバイタル)に取り組むことに決めた?
    25

    View full-size slide

  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
    とらのあな通販の
    改善履歴も公開するわ

    View full-size slide

  27. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    CLSについての補足
    27
    読み込みが終わると、
    赤枠部分がいきなり出てきて、誤
    タップするやつね…。

    View full-size slide

  28. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    1. サーチコンソールにて「ウェブに関する主な指標」で指摘されている
    URLパターンを把握す

    2. Google PageSpeed Insightsなどを使用し、どこに原因があるのかを探る
    3. エンジニアさんと連携し、計画を立てて改善を進める
    CWVの改善に向けて準備したこと
    28
    とらのあな通販はエンジニアさんが多数在籍しているので、
    スピーディに動けるのがいいところね。

    View full-size slide

  29. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● 画像の最適化と圧縮
    WebPの導入や画像サイズの上限設定
    ● Lazy_loadの実装
    スクロールに応じてコンテンツを読み込み
    LCPの改善内容 (サイト速度改善の流れでも対応)
    29
    メインコンテンツを
    より素早く読み込むために!
    LCP…メインコンテンツがブラウザに表示されるまでの時間

    View full-size slide

  30. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● 使用していないJavaScriptの削除
    使わなくなったJavaScriptはしっかりと消す!
    ● 必要最低限のJavaScriptを読み込み時に実行されるようにする
    メインスレッドを50ミリ秒以上にわたってブロックしないように!
    FIDの改善内容
    30
    FIDの肝はJavaScript
    FID…ユーザーがページで最初に行ったアクションが実行できるまでの時間

    View full-size slide

  31. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● コンテンツのサイズをあらかじめ指定し、表示領域の確保
    imgタグにheightとwidth(高さと横幅)を追加だけでOK
    技術的に難しいことではないが、昔のサボってたツケがまとめてきた

    CLSの改善内容
    31
    タップしようとしたら別のコンテンツがニュッと出てきて、
    予想外のコンテンツをタップしちゃうのはストレスだよね …
    CLS…意図しないレイアウトのずれをスコアリングした数値

    View full-size slide

  32. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    Chromeの拡張機能を使い、Chromeでアクセスしたデータを元に先ほどの値の推移を調べる
    ことが可能。
    競合を指定すれば、競合のスコアもチェック可能。
    とらのあな通販の値をCrUX(Chrome UX Report)で見る
    32

    View full-size slide

  33. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    とらのあな通販の値をCrUXで見る(LCP)
    33
    LCP…メインコンテンツがブラウザに表示されるまでの時間
    2021年5月~2022年2月にかけて
    良好:77.76%→86.92%(+9.16%)

    View full-size slide

  34. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    とらのあな通販の値をCrUXで見る(FID)
    34
    FID…ユーザーがページで最初に行ったアクションが実行できるまでの時間
    2021年5月~2022年2月にかけて
    良好:91.57%→96.45%(+4.88%)

    View full-size slide

  35. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    とらのあな通販の値をCrUXで見る(CLS)
    35
    CLS…意図しないレイアウトのずれをスコアリングした数値
    2021年5月~2022年2月にかけて
    良好:71.54%→90.53%(+18.99%)

    View full-size slide

  36. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● CWVはユーザーにとってのメリット&SEOのランキングシグナルに採用されているので、ぜ
    ひ対応しよう
    ● 月次でCrUXレポートが見れるので、改善の結果をメンバーで共有しモチベーションを高め
    つつ着手&継続しよう
    CWV改善のまとめ
    36

    View full-size slide

  37. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ユーザーアンケートの実施
    37

    View full-size slide

  38. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    とらのあな通販では、定期的にユーザーアンケートを行っています。
    理由としては、自分たちでは考えつかない範囲での不満や要望をユーザーさんに
    直接伺って気づきを得るためです。
    また、アンケートに答えてくれるユーザーさんはサイトを愛用してくださる
    「コアなユーザーさん」が多い特徴があります。
    ユーザーさんの声をきくために
    38

    View full-size slide

  39. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    2022年1月に実施したユーザーアンケートでは、
    9,367件ものご回答を頂きました。
    自由記述欄にも多くの方が記載して頂き「ユーザーさんがどう思っているのか」について多くのリ
    アルな声を頂戴しました。
    直近のユーザーアンケートの結果
    39
    励ましの声からお叱りの声まで、幅広い意見を教えて頂けました。
    内容を種類ごとに分けて、チームで確認会を行いました。

    View full-size slide

  40. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    新着商品のお知らせメールを画像(
    HTML)化
    アンケートから行った改善例
    40
    ひと目で何の商品か分かりやすくなったと
    いうお声を多数いただきました。

    View full-size slide

  41. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● ユーザーさんの声に耳を傾けることで満足度があがり、
    LTV(生涯顧客売上)が向上する。
     →ユーザーさんもECサイトもハッピー
    ● アンケートなど、ユーザーさんとの会話する機会を大事にする
    ユーザーアンケートのまとめ
    41
    その他アンケートで頂いた内容についても、
    改善活動を行っています。

    View full-size slide

  42. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    まとめ
    42

    View full-size slide

  43. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● ユーザーさんがストレスを感じないサイトは
    Googleの評価基準に繋がる部分も大きい
    ● Web上だけではなく、サイトを訪れるところから
    商品を届けて、また訪問するまでのプロセスを一貫して考えよう
    ● ユーザーさんの望むことはユーザーさんが
      一番よく知っている。聞く姿勢を放棄してはいけない
    まとめ
    43

    View full-size slide

  44. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ご清聴ありがとうございました
    44

    View full-size slide

  45. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    質疑応答

    View full-size slide