虎の穴ラボ Tech day#3 チームで戦う！とらのあな通販冬の大感謝祭でのフロント開発について

Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
チームで戦う！
とらのあな通販冬の大感謝祭での
フロント開発について
虎の穴ラボ株式会社　岩瀬祐介
1

自己紹介 
岩瀬祐介（イワセユウスケ） 
 
 
● 2020/07 入社 
● 虎の穴ラボ通販 Webマーケティングチームエン
ジニア 
好きな作品 
● ゆるキャン
● NEW GAME!!
前職 
● Web制作会社 
○ Vue.jsを中心としたフロント開発  
○ デザイナーやイラストレーターと協業  
2

発表のテーマ
よいサービスのためには
チームワークが大切！

● 通販サイトにおけるフロント開発について 
○ チーム構成、開発フロー、大切にしているポイント 
● 通販冬の大感謝祭2021でのフロント開発  
○ 開発フロー、技術的なポイント 
● まとめ 
アジェンダ 
4

● 話すこと 
○ チームでの開発 
○ フロント開発 
● あまり話さないこと 
○ SEO、バックエンド開発、アーキテクチャ 
アジェンダ 
5

通販サイトにおける
フロント開発について
6

1.通販サイトにおけるフロント開発について
とらのあな通販とは？ 
● 同人誌を取り扱うオタク向けECサイト🐯 
7

通販サイト開発のチーム構成 
● 通販エンジニアは３チーム構成 
○ 各チームがマーケター・デザイナーと連携 
8

● WebマーケティングチームはSEO対策やデザイン改修のタスクを主に
担当 
=> マーケター・デザイナーとのコミュニケーションが最も活発 
9

どうしてチームワークを
重視しているの？
10
● WebマーケティングチームはSEO対策やデザイン改修のタスクを主に
担当 
=> マーケター・デザイナーとのコミュニケーションが最も活発

チームワークを大切にする理由 
● 価値あるサービスをお客様に届けるため 
きっと、ここをこうしたら使いやすくなる
ぞ！工数は増えるけれどがんばるぞ...！
変な機能がリリースされたな・・・。
自分は必要ないしスルーだな。
11

リリース後 …
ユーザー
12

すごい便利な機能ができた！
お客様にも喜んでもらえるぞ・・・！
リリース後 …
機能的にはすごいけれど、UIがひどい・・
前のデザインの方が使いやすかったなぁ
ユーザー
13

すごい便利な機能ができた！
お客様にも喜んでもらえるぞ・・・！
リリース後 …
機能的にはすごいけれど、UIがひどい・・
前のデザインの方がよかったなぁ
ユーザー
● せっかく開発を行ったのに使われない 
● 需要に対して開発コストが高過ぎた 
● 開発に注力するあまりデザインが疎かに 
  せっかく頑張って実装したのに・・・
14

リリース後 …
● お客様が求めている機能は何か 
● 工数に見合う成果が得られるか 
● 使いやすいデザインになっているか 
=> エンジニア以外の視点も大切にする 
 
一人で走らない！
チームでコミュニケーションを取
りながら開発を進めよう
15

開発フロー 
16

リリース！
開発フロー 
● タスクに合わせて柔軟に対応 
17
リリース！
リリース！
パターン１ 
パターン２ 
パターン３

リリース！
開発フロー 
● マーケターフェーズ 
● 課題の分析、施策の立案 
● 仕様の策定 
○ 上記の過程でエンジニア・デザイナーに事前ヒアリ
ング。他部署と連携。  
○ => 実現可能性や効果を予測 
○ デザイナー・エンジニアへ依頼 
18

リリース！
開発フロー 
● デザイナーフェーズ 
● デザインの制作 
● デザインレビュー依頼（※後述） 
○ XDレビュー、対面レビュー 
デザインがFixしたら...  
● コーディング（デザインのみ） 
● コーディングレビュー依頼 
19

リリース！
開発フロー 
● エンジニアフェーズ 
● プランニング（見積もり） 
● 設計、実装 
○ 実装の過程でマーケター、デザ
イナーと適宜連携 
● テスト 
● リリース 
20

リリース！
開発フロー 
 ● リリースしたら終わりではない 
リリース！
効果測定やお客様の声をもとに更なる改善を行う 
21

大切にしているポイント 
22

大切にしているポイント 
● ポイント１：デザインレビュー 
● ポイント２：毎日の情報共有 
 
23

ポイント１：デザインレビュー 
リリース！
イケてるデザインができた！
実装お願いします！
承知しました！実装進めます！
24
● 課題：デザインが無駄になってしまうケース

● 課題：デザインが無駄になってしまうケース 
いただいたデザインは実装できないことが判
明しました。すみませんがデザインを作り直
していただけますでしょうか？
わかりました！
（もう少し早く教えてもらいたかった．．．）
25
エンジニア着手後・・・

● 課題：デザインが無駄になってしまうケース 
いただいたデザインは実装できないことが判
明しました。すみませんがデザインを作り直
していただけますでしょうか？
わかりました！
（もう少し早く教えてもらいたかった．．．）
26

②対面でのチームレビュー
①AdobeXDを使用したエンジニアレビュー
27
● 解決：デザインレビューにより事前に課題を解決

対面でのデザインレビューの様子
● ①AdobeXDを使用したエンジニアレビュー 
● デザインFIX前にエンジニアに実装可能性の
判断を質問 
○ => デザイン工数、手戻りの削減 
● デザイナーはXDでURLを生成して、エンジニ
アへデザインを共有 
● エンジニアは実装可能性や気になった点を
コメント 
28
①AdobeXDを使用したエンジニアレビュー

②対面でのデザインレビュー
● ②対面でのレビュー 
①XDを使用したデザインレビュー
● マーケター含め、チーム全体にデザインを
共有 
● デザインが本来の目的とかけ離れていない
か確認。最終的なデザインの方向性を決
定。 
チーム全体のレビューが完了次第、エンジニア
フェーズに移行 
29

ポイント2：毎日の情報共有 
● 課題：把握すべき情報が沢山ある 
● サイトの状態 
○ ユーザーアクセス数、カバレッジ、検索パフォーマンス、ページ速
度 
○ ページエクスペリエンス、モバイルユーザビリティ 
● 売上推移、実施中のキャンペーン、他チームの動向 
● お客様からのお問い合わせ、他部署からの連絡、etc… 
30

● もし情報のキャッチアップが遅れてしまったら... 
リリース！
大変です！昨日から急激にサイトの検索パ
フォーマンスが低下しています！これでは
お客様の流入が減ってしまいます！
それは大変だ！！至急調査します！
31

● もし情報のキャッチアップが遅れてしまったら... 
リリース！
32
大変です！昨日から急激にサイトの検索パ
フォーマンスが低下しています！これでは
お客様の流入が減ってしまいます！
どうやらGoogleのコアアップデートが昨日に
行われたようです。これによりサイトの評価
基準が変わったことが原因のようです！
今から修正しても手遅れだ...事前に知ってい
たらこんなことにならなかったのに...

● 解決：毎日の情報共有で問題を早期発見、事前準備 
今週の売上
● 通販サイトに関するトピックやSEOの最新情報な
ど、直近で大切な項目を共有 
　=> 課題に対する早期発見・対策や、メンバーひとり
ひとりの当事者意識 
対面での売上確認
33

まとめ 
● 密度の高いコミュニケーション、デザインレビューや柔軟
な開発フローを通して、問題の早期発見や手戻りの防
止、さらに開発スピードの向上を目指す 
● => チームワークを大切にすることで、お客様にとって価
値のある開発ができる 
 
34

通販冬の大感謝祭2021での
フロント開発
35

通販冬の大感謝祭2021について 
2.通販冬の大感謝祭2021でのフロント開発
36

通販冬の大感謝祭2021とは？ 
● 実施期間：2021年12月 
● 期間限定でくじ引きができるキャンペーン 
○ 第一回 
■ 開催期間：12月前半 
■ 対象：注文合計金額2,000円以上のお客様
 
○ 第二回 
■ 開催期間：12月後半 
■ 100ポイントを使用して１日１回くじ引き可能
 
○ 賞品：お買い物に使用できるクーポン
 
37

冬の大感謝祭2021画面イメージ 
①抽選メイン画面 ②抽選モーダル ③抽選完了モーダル
仕様（フロント） 
● 抽選API（マイクロサービス）を叩いて
抽選結果を表示 
● 抽選の際に簡易的なアニメーション
を実行 
● Twitter連携ボタンを設置（「１等に当
選しました！」） 
● エラーの際はトースト表示  
● くじが早期終了した場合はボタンを
非活性 
38

通販冬の大感謝祭2021開発フロー 
39

チームとしての目的・目標 
● 過去の施策よりも高い売上効果を目指す 
・少ない販促費で高い売上  
・クーポン（賞品）消化率向上  
・Twitter連携で認知度向上  
・年末・年始感のあるデザイン  
・くじ引き演出（UX） 
・LPとの導線 
・当選画面のOGPデザイン  
・不具合の削減 
・開発スピードの向上  
・コードの保守性 
40

フロント
リリース！
開発フロー 
● システムとフロントを別軸で進行 
マイクロサービス
リリース！
通販バックエン
ドリリース！
フロント担当
通販バックエンド担当
マイクロサービス担当
41

開発フロー 
● トップダウンではないチームワーク 
● さらに良くなる提案を、（マーケターだけでなく）メン
バー全員が行える環境 
● 実装のコストがかかる場合は、仕様調整を適宜相
談 
● 問題や課題に気づいた場合は、Slackやビデオ通
話を通してすぐに連携 
42

通販冬の大感謝祭2021における 
技術的なポイント 
43

技術的なポイント 
● 課題１：コードの保守性が低い 
● 課題２：アニメーションの描画パフォーマンスが悪い 
　　対策として・・・ 
● 対策１：フレームワーク・ライブラリの見直し 
● 対策２：負荷の軽いCSSプロパティの使用 
44

ポイント１：フレームワーク・ライブラリの見直し 
● 過去の事例 
○ 一時的なSPAのため、開発者が独自にコードを書いてしまいがち
=> 再利用性、保守性が低い 
　=> フレームワーク・ライブラリの見直し 
○ ラボで使用実績の多いVue.js、axiosを採用 
○ アニメーションはCanvasではなくAnime.jsを採用 
 
45

● Anime.jsについて 
○ https://animejs.com/ 
○ シンプルな記述でアニメーションを実装できるJavaScriptライブラ
リ 
○ Githubスター数41,400（2022年1月現在） 
○ メインファイルの容量が17.3kbと軽量 
 
46

● Anime.jsを使ってアニメーションを管理 
 
● 一つの動作を一つのオブジェクトにする
 
● タイムライン機能で連続した動きを表現
 
この書き方によって...  
● コードから動作を想像しやすい 
● 仕様変更の時にも変更が必要な箇所を見つけ
やすく、対応を行いやすい 
47

● 過去の事例 
参考：https://developers.google.com/web/fundamentals/performance/rendering?hl=ja
 
ポイント２：負荷の軽いCSSプロパティの使用 
● アニメーションの描画のためのクライアント負荷が大きい。一時
的なキャンペーンのため、描画パフォーマンスを意識していな
かった。 
=> 負荷の軽いCSSプロパティの使用 
● ピクセルパイプラインを意識 
 
48

● ピクセルパイプラインを意識する 
 
● JavaScript … 視覚変化をもたらす作業を処理する。JavaScriptに限らない。
 
● Style … CSSのルールがどの要素に一致するかを見つけ出すプロセス。
 
● Layout … 要素の画面配置を計算する処理。
 
● Paint … ピクセルを書き込む処理。
 
● Composite … 正しい順序で画面に描画する処理。
 
49

● ピクセルパイプラインの各要素が少ないプロパティを使用する 
 
プロパティごとに
内部で実行される
処理が異なるよ
50

● 例）サイドメニューの展開アニメーションにtranslateを使用する 
● leftを使用した場合(LayoutとPaintが実行される)
 
 
● translateを使用した場合
 
 
負荷が軽いものを
探して使おう！
参考：https://csstriggers.com/ 
51

まとめ 
● とらのあな通販冬の大感謝祭2021では、チームメンバー
が密に連携し、柔軟な開発フローで問題の解決や改善
にあたった。 
● 技術的な面では、過去の課題（コードの保守性・パフォー
マンス）の改善を目標に実装を行った。 
52

まとめ
53

● 通販サイトにおけるフロント開発について 
○ チーム構成、開発フロー、大切にしているポイント 
● 通販冬の大感謝祭2021でのフロント開発  
○ 開発フロー、技術的なポイント 
54
まとめ 
3.まとめ

まとめ 
とらのあな通販サイトのフロント開発では価値
あるサービスをお客様に届けることを念頭に
おいて開発しています。 
3.まとめ
55

まとめ 
そのためにチームワークを 
大切にしています。 
3.まとめ
56

ご静聴ありがとうございました
2022
57

虎の穴ラボ Tech day#3 チームで戦う！とらのあな通販冬の大感謝祭でのフロント開発について

More Related Content

What's hot (20)

Similar to 虎の穴ラボ Tech day#3 チームで戦う！とらのあな通販冬の大感謝祭でのフロント開発について (20)

More from 虎の穴開発室 (20)