フロントエンド開発事例① LINEギフト

9/11【オンライン開催】LINEヤフー フロントエンドエンジニア 採用説明会: https://lycorptech-jp.connpass.com/event/327728/

登壇者: 林田憲昌(nhayashida)
フロントエンドエンジニア
LINEヤフー株式会社 コマースカンパニー SC統括本部 開発本部 サービス開発部 ギフト開発1チーム

外資系企業で大規模な企業向けのコラボレーションツールの開発などを経験後、2019年10月にLINE株式会社に入社し、現在は主にLINEギフトおよびショッピングタブ（名称未定）の開発に携わっています。

Transcript

1. © LY Corporation External Use (採用説明) LINEギフトにおける フロントエンド開発 LINEヤフー株式会社 コマースカンパニー SC統括本部 開発本部 サービス開発部 ギフト開発1チーム 林田 憲昌
2. © LY Corporation External Use (採用説明) 「LINEギフト」プロダクト概要 2
3. External Use (採用説明) 3 External Use (採用説明) LINEギフトは、LINEを通じて 友だちとギフトを贈りあうことができる コミュニケーションサービスです。 https://linegift.line.me/
4. External Use (採用説明) 4 External Use (採用説明)
5. External Use (採用説明) 5 External Use (採用説明)
6. External Use (採用説明) 6 External Use (採用説明) オンラインで使えるギフトチケット、実店舗で使えるギフトチケット、指定した住所にギフトを贈れるもの…など、多様なニーズに対応しています
7. External Use (採用説明) 7 External Use (採用説明) ・ LINEギフトの累計利用者数は2024年7月時点で3,500万人を突破。 ※2024年7月時点で「LINEギフト」を贈った、もしくはもらった経験があるユニークユーザー数 2015年のサービス開始から2024年現在まで、約9年の歴史があり、今なお右肩上がりで成長を続けているサービスです
8. © LY Corporation External Use (採用説明) 「LINEギフト」プロダクト体制 8
9. © LY Corporation External Use (採用説明) 9 プロダクトを作る7つの役割 プロダクト企画 • サービス企画 • 新機能企画 • 既存機能改修 • 運用設計, 実行支援 • セキュリティ対応 • カスタマーケア 「今ないものを企画する」 「全体俯瞰・方向性検討」 デザイン • デザイン観点での UX検討、提案 • プロダクトUI設計 • コンテンツUI設計 「デザイン起点の価値創出」 開発 • 企画案件の具現化 • 開発観点での サービス改善 • サービス安定稼働 • セキュリティ対応 「プロダクトで課題を解決」 セールス・MD • Lギフトならではの 商品群検討,調達 • 新規開拓/既存ケア • 顧客課題を起点 とした改善検討 「企画に合う商品の調達」 経営企画 • トップサポート • 組織人事支援 • 経理・財務対応 • コミュニケー ション支援 「組織・人・お金のケア」 プロダクトグロース • グロース施策企画 • キャンペーン企画 • 流入元設計,マーケ • 商品コンテンツの 企画・制作・運用 事業推進 • 事業戦略策定 • 経営報告 • 事業影響が大きい 案件の差配 • KPI設計&支援 • 数値分析&支援 • データガバナンス 大きく7つの組織体に分かれており、それぞれ 主に以下のような役割を担っています（状況により柔軟に変化）。 「価値の最大化を設計する」
10. © LY Corporation External Use (採用説明) 経営企画本部 10 組織図 プロダクト グロース部 嘉戸彩乃 SC統括本部 プロダクト 企画本部 LINEショッピング 企画部 ギフト 企画部 ショッピングタブ 企画部 プロダクト グロース部 商品コンテンツ部 Product Success室 経営企画部 LINEコマース デザイン部 カスタマーケア チーム 事業推進部 SCマーケティング ソリューション本部 ブランドマーチャン ダイジング部 ソリューション 推進部 統合コマース 検索推進部 開発本部 開発推進室 サービス 開発部 ショッピングタブ 開発部 基盤開発部 プロダクト グロース本部 • SC統括本部は、現在「LINEギフト」「LINEショッピング」「LINEショッピングタブ（※新設予定）」の3つのプロダクトを担当しています。 • ギフトを担当しつつ、ショッピングタブもやる…というように、兼務しながら各サービスの成長を目指して働く人が増えている、成長過渡期の組織です。 • 2024年8月時点の組織をもとに記載しています。 セキュリティ推進 チーム ギフト開発 1チーム Unit Alpaca ギフト開発 2チーム Unit Brown ギフト開発 3チーム Unit Capybara Agile Team Backend x 4 Frontend x 4 4 QA x 5
11. © LY Corporation External Use (採用説明) 「LINEギフト」 フロントエンド開発 11
12. © LY Corporation External Use (採用説明) LIFFアプリケーション LINE 上で動作する Web アプリケーションの開発 12 ほしいもの/送りたいもの もらった人がオプションを選べるギフト 商品棚 LP レビュー 名入れ ＊直近で追加された主要な機能
13. © LY Corporation External Use (採用説明) LIFFアプリケーションで用いられている技術 ＊State of JavaScript 2023: Library Tier List https://2023.stateofjs.com/en-US/libraries/#tier_list • 長く続いてるサービスではありま すが、継続的に開発環境の更新に も取り組んでいます • 直近の1年半程の間でも以下のよう な変化がありました • Vue 2 => Vue 3 • JavaScript => TypeScript • Webpack => Vite • Drone CI => Github Actions • OpenAPI の導入
14. © LY Corporation External Use (採用説明) CMS 14 ギフトに出店しているショップ向け CMS / サービス運用のための設定を行う社内向け CMS
15. © LY Corporation External Use (採用説明) CMSで用いられている技術 ＊State of JavaScript 2023: Library Tier List https://2023.stateofjs.com/en-US/libraries/#tier_list • Spring Boot + Thymeleaf (jQuery) で構築されているシステムを Spring Boot + Nuxt/Vue.js にマイ グレーション中 • コードの再利用性やスイッチング コストの軽減を考慮し、可能な限 りLIFFアプリケーションと近い技 術を用いるようにしています
16. © LY Corporation External Use (採用説明) 16 ?
17. © LY Corporation External Use (採用説明) 「ショッピングタブ」 プロダクト概要 17 （※新設予定、サービス名称未定のソーシャルコマースサービス）
18. © LY Corporation External Use (採用説明) LINEヤフー株式会社のFY24の方針（抜粋） LINEリニューアルの一環として、新たに「ショッピングタブ（名称未定）」を新設予定 1：画面は開発中のものであり、今後変更の可能性あり 18 ※LINEヤフー株式会社 決算説明会 2023年度通期および第4四半期（2024年5月8日）より抜粋 （https://www.lycorp.co.jp/ja/ir/library/presentations/main/012/teaserItems2/03/linkList/02/link/jp2023q4_presentation.pdf）
19. © LY Corporation External Use (採用説明) LIFFアプリケーション / CMS 19 まだお見せできるものはありませんが 絶賛新規開発中です！
20. © LY Corporation External Use (採用説明) ショッピングタブで用いられている技術 ＊State of JavaScript 2023: Library Tier List https://2023.stateofjs.com/en-US/libraries/#tier_list • ギフトと大きな違いはありませんが、 o Tailwind CSS + Headless UI をベースとした Design System の構築 o Monorepo による管理 o Preview Deployments といったことにも取り組んでいます
21. © LY Corporation External Use (採用説明) 「ショッピングタブ」プロダクト立ち上げに向けて ⚫ 各種社内調整を経て、2024年6月から組織づくりを開始 − FY24中のサービス開始に向けて、まずはテスト計画を立案・進行中。 ✓ 既存のコマース系サービスで培った知見を活かし、 クイックなプロダクト立ち上げを目指しています ⚫ 新規立ち上げ期特有のカオスを乗り越える「自走力」が必要な状況 − 無いものは自分が確認してまとめる、形にする…といった自律的な課題解決能力をお持ちのかた、 コミュニケーション能力の高いかたを必要としており、採用活動を強化しています。 − 社内の各種システムとの連携等も考慮して作る必要があるため、 「ゼロから発想して作り上げる力」だけではなく、既存の機能をどうアレンジするか？ 整合性をどうとるか？…といった判断力・論理的思考力、関係者への提案力なども必要です。 21
22. © LY Corporation External Use (採用説明) 22 開発組織自体はあまり変わっていないのにサービスが1つ増えます 興味を持たれた方はぜひ応募してみてください ＊ LINEギフト/ショッピングタブ良いところ • 組織全体としてプロダクトの UI/UX に対する意識が非常に高い • 開発組織内だけでなく、企画やデザイン、セールスといった人たちの距離も近いため、日々ディスカッションを重ねながら 皆で一緒により良いサービスを作っていくことができる • 言われたものをただ作るだけということにはならない • 開発主導による提案にも柔軟に対応してくれる • 例えば UI 改善の提案や a11y 対応の強化など • (ギフト) 身近な人をはじめとして、実際に使ってくれているユーザーに出会うことも多く、また、サービスの性質上、 ポジティブなフィードバックを得ることがほとんどなため、誰かの役に立てていることを実感しやすい • (ギフト) LINEというプラットフォームとの相性が良く、コマースサービスとしてとてもユニークな立ち位置にあるため、 今後のさらなる成長や新しいユーザー体験を生み出すことが期待できる • (ショッピングタブ) LINEの一等地に露出するサービスの開発に携われる • (ショッピングタブ) LINEヤフーという大きめの組織で新規サービスの立ち上げに携われるチャンスはそんなに多くはない • などなど