2021/09/17 に公開1224 views
@potato4d が @cola119 に、 LINEバイトで行っている Web Component の活用術について話を聞きました。
ゲスト紹介
- @cola119
- Front-End Dev9 Team
- LINEバイトのフロントエンドの開発を担当
Web Component で作る動的 LP サイト
- LINEバイトにて静的サイト内に求人情報を掲載する需要が出てきた
- LINE 公式アカウントから配信するように切り口に分けたLPを公開
- 働き方/職種/地域など
- もともとは手動で求人情報を掲載していたり、そのままサービス内の検索に飛ばしていた
- より LP で効果的にアプローチするため、制作を決定
- 大量に作る必要があり、かつ動的に情報をフェッチするために Custom Element として UI パーツを UIT で開発した
- LINE 公式アカウントから配信するように切り口に分けたLPを公開
ここにいたるまで
- プロジェクトの要求
- ASIS: OA→LINEバイトの検索一覧という遷移
- TOBE: より多くの求人概要を知ってもらうために、○○な求人特集というLPを配信したい
- 切り口ごとに動的に求人情報を表示したい
- 地域
- 職種・業種
- パターンごとに量産するため、毎回開発をするわけにはいかない
- できるだけローコストで、動的な表示を実現する
- 初期バージョンでは、カスタムUIの生HTML/CSS、求人情報を手動選択でテスト配信
- 求人詳細のPV数が２倍ほど向上、通常運用したい
求人詳細PVに関して、テストパターンのLP経由のものの方が訪問あたりの求人詳細閲覧数が1.40となり、通常一覧へ遷移するものと比べ+0.7ptほど効果が高かった。 詳細結果で見ても、各特集ともテストパターンのLP経由のものの方が、およそ2倍ほど求人詳細閲覧されている結果となった。
- 効果は見込めたので、次はコストを削減する手法を考え、Custom Element の利用へ
- 初期バージョンでは、カスタムUIの生HTML/CSS、求人情報を手動選択でテスト配信
運用のしかた
以下のようなシンプルなコンポーネントを実装。query にはサービス内の検索クエリをそのまま貼り付けられる。
<job-carousel-list query="" title="○○な求人情報"></job-carousel-list>
- 現状
- 20個の切り口×都道府県ごとに分かれて情報を提供
- 工数もあまりかからず、開発体験としても良い
- 開発側でバージョン管理ができるため、コピペミスも少なく機能拡張も容易
- 利用者側も、サービス内で検索してクエリをコピペするだけなのでシンプル
Refs
- LINE 新卒採用 2022
- https://linecorp.com/ja/career/newgrads/engineering/
- 2023 年卒向けページは近日公開！
- キャリア採用はこちらから
- BGM&SE
- 魔王魂/騒音のない世界/OtoLogic