UIT INSIDE UIT INSIDE
2021/09/17 に公開 1050 views

このエピソードについて

@potato4d が @cola119 に、 LINEバイトで行っている Web Component の活用術について話を聞きました。

ゲスト紹介

  • @cola119
  • Front-End Dev9 Team
  • LINEバイトのフロントエンドの開発を担当

Web Component で作る動的 LP サイト

実例

  • LINEバイトにて静的サイト内に求人情報を掲載する需要が出てきた
    • LINE 公式アカウントから配信するように切り口に分けたLPを公開
      • 働き方/職種/地域など
    • もともとは手動で求人情報を掲載していたり、そのままサービス内の検索に飛ばしていた
    • より LP で効果的にアプローチするため、制作を決定
    • 大量に作る必要があり、かつ動的に情報をフェッチするために Custom Element として UI パーツを UIT で開発した

ここにいたるまで

  • プロジェクトの要求
    • ASIS: OA→LINEバイトの検索一覧という遷移
    • TOBE: より多くの求人概要を知ってもらうために、○○な求人特集というLPを配信したい
    • 切り口ごとに動的に求人情報を表示したい
      • 地域
      • 職種・業種
    • パターンごとに量産するため、毎回開発をするわけにはいかない
  • できるだけローコストで、動的な表示を実現する
    • 初期バージョンでは、カスタムUIの生HTML/CSS、求人情報を手動選択でテスト配信
      • 求人詳細のPV数が２倍ほど向上、通常運用したい

      求人詳細PVに関して、テストパターンのLP経由のものの方が訪問あたりの求人詳細閲覧数が1.40となり、通常一覧へ遷移するものと比べ+0.7ptほど効果が高かった。 詳細結果で見ても、各特集ともテストパターンのLP経由のものの方が、およそ2倍ほど求人詳細閲覧されている結果となった。

    • 効果は見込めたので、次はコストを削減する手法を考え、Custom Element の利用へ

運用のしかた

以下のようなシンプルなコンポーネントを実装。query にはサービス内の検索クエリをそのまま貼り付けられる。

<job-carousel-list query="" title="○○な求人情報"></job-carousel-list>
  • 現状
    • 20個の切り口×都道府県ごとに分かれて情報を提供
    • 工数もあまりかからず、開発体験としても良い
    • 開発側でバージョン管理ができるため、コピペミスも少なく機能拡張も容易
    • 利用者側も、サービス内で検索してクエリをコピペするだけなのでシンプル

Refs