Skip to main contentSkip to footer
Search
LINEヤフー Tech Blog

LINEヤフー株式会社のサービスを支える、技術・開発文化を発信しています。

LINEギフトのフロントエンド開発でのAI活用事例について

はじめに

こんにちは！LINEギフトのフロントエンド開発をしている片山です。

LINEギフト開発チームでは、日々の業務効率化と品質向上を目指してAI技術の導入を進めています。本記事では、AI導入の一環としてフロントエンドメンバーで実施した2つの取り組みについてご紹介します。

LINEギフトとは

LINEギフトは、ギフトを贈りたい人の住所を知らなくても、LINEの友だちになっていれば簡単にギフトを送ることができるサービスです。友だちの誕生日プレゼントから会社の同僚へのお礼のギフト、結婚・出産祝いなどの本格ギフトまで、さまざまなシーンでご利用いただけます。2015年のサービス開始から約10年続いているサービスで、累計ユーザー数は3,500万人（※2024年7月時点）を突破しています。幅広い年齢層のユーザーにご利用いただいており、今でも成長を続けているプロダクトになっています。

より詳しいサービスの説明については LINEギフトの公式サイト をご覧ください。

LINEギフトの使い方。1 アクセス、2 商品と宛先を選んで購入、3 カードを作成して送信。

事例1：AI使ってStorybookを作ろう会の開催

まず、2025年春〜夏にかけて実施したCoding Agentを使った「AI使ってStorybookを作ろう会」について紹介します。

概要

LINEギフトでは、一般のユーザーが使うLINEギフトのほかに、LINEギフトに商品を出品いただいている企業様がご利用いただく管理画面（社外向けCMS）の開発も行っています。社外向けCMSのフロントエンドは多くのVueのコンポーネントで構成されているのですが、これまでStorybookを導入していなかったため、新しく参加したエンジニアがコンポーネントの仕様を把握しにくいという課題がありました。

そこで、この課題を解決するとともにチーム全体でAIの業務活用に関するナレッジを深めることを目的として、2025年5月から約8回にわたって 「AI使ってStorybookを作ろう会」と題して社外向けCMSのStorybookのStoryをAIで生成する社内のワークショップを開催しました。
具体的には、以下の2つのコンテンツを週替わりで実施しました。

① モブプロAICoding

参加者全員で一緒にAIを使ってStoryを作成するモブプログラミング形式のワークです。この会は単にStoryを作成するだけでなく、「AIにいろいろやらせてみて実験し、ナレッジを深める」ことを目的としました。

② Story作ろうもくもく会

各自でAIを使ってStoryを作るワークです。こちらの会ではそれぞれでAIを使ってどういうことができるかを検証したり、もくもくとStoryを作ったりすることを目的としました。

実施してみて・・・

この取り組みを通じて、約20個のコンポーネントのStoryを新たに作成することができました。参加人数や作業時間を考慮すると、AIを使わずに作る場合と比べて、より効率的に作成できたと考えています。
また、これまでは既存のStoryを作成する際、まずコードを読んでコンポーネントの仕様を理解する必要がありましたが、AIを活用することで 「まずStoryを作って仕様を把握する」 という新しいアプローチが可能になりました。これは、今後の開発効率を大きく向上させる成果だったと感じています。

一方で、AIだけでは対応が難しい場面も多く、エンジニアとの協調が重要であることも実感しました。たとえば、AIが自身の生成したコードに不具合があると誤って判断し、修正を繰り返すうちにコード全体を壊してしまうケースがありました。このとき問題の原因はコード自体ではなく、使用していたStorybookのバージョンとプラグインの相性によるものでした。

このように、AIが必ずしも正しい解決方法を見つけられないこともあります。だからこそ、AIにすべてを任せるのではなく、人とAIが互いに補完し合いながら作業を進めていくことが大切だと感じています。

Storyを生成するカスタムコマンドを作ってみた

その後、「AI使ってStorybookを作ろう会」で得た知見をもとに、 コンポーネントのファイルパスを指定するだけでStoryを自動生成できるClaude Codeのカスタムコマンドを作成しました。現在はこのコマンドを使うことでより簡単にStoryを作成することができるようになっています。

Claude Codeの実行ログ。PageHeadingのStoryを生成。
図：PageHeadingコンポーネントを生成するときのログ
Storybookの画面。PageHeadingのストーリー作成結果。
図：実際に生成されたPageHeadingのStory

事例2：社内向けCMSの画面をAIで作れるようになった話

続いては、同じくフロントエンドエンジニアの丸岡さんが作成した、社内の運用チームが利用する管理画面（社内向けCMS）の画面開発を楽にするClaude Codeのカスタムコマンドについて紹介します！

概要

このコマンドは、「AIに画面の仕様（表示する項目やフォームの仕様など）を対話形式で入力していくだけで、社内向けCMSの画面を作ってくれる」コマンドです。社内向けCMSは共通コンポーネントやユーティリティが整備されており、また画面構成もパターン化していたため、「必要な情報をAIに教えるだけで簡単に画面が作れるのではないか」と考え、開発に至りました。

社内向けCMSの画面構成

社内向けCMSは、基本的には機能ごとに下記の構成となっています。

  • List画面：登録されているコンテンツを一覧表示する画面
  • Create画面：コンテンツを新規登録するための画面
  • Edit画面：コンテンツの詳細を閲覧したり編集したりできる画面（Create画面とほぼ同じ構成）
社内向けCMSの画面遷移図。コンテンツを閲覧する時はList画面に、コンテンツを登録する時はCreate画面に遷移する。Edit画面は詳細を見たい場合や編集したい場合にList画面から遷移する。
図：システム構成図

カスタムコマンドの詳細説明

上記の画面構成を踏まえて、2つのカスタムコマンドが作られました。

/create-list-page

List画面を作成してくれるカスタムコマンドです。下記のような情報を対話形式で入力していくことで目的の画面を自動生成できます。

  • ページのURLパス情報を入力
  • ページタイトルなどのメタ情報を入力
  • メニュー名を入力
  • 画面で呼び出すAPIの選択
    • APIを実行する処理はOpenAPIから自動生成しているため、私たちは選択するだけでOKです
    • 選択時はページのURLやタイトルから推測してレコメンドしてくれるようになっているのでスムーズに選択できます
  • Listで表示する項目の入力（下記の情報を順次入力していきます）
    • ヘッダーのタイトル
    • 対応するデータのフィールド名
    • 表示タイプ（テキスト、リンク、カスタムデータなど）

このような感じでClaude Codeに情報を入力していきます。

APIの選択画面。利用可能なAPI一覧から対象を選ぶ。
図：利用するAPIの選択イメージ
List画面のカラム設定。ヘッダー名、キー、カラムなどの情報を入力する。
図：リスト項目の設定イメージ

実行タイミングや機能の複雑度によっては不具合が発生する場合もありますが、ほとんどのケースで仕様通りの画面をAIが生成してくれるようになりました！

AIが生成したList画面。ID、タイトル、更新日時などを表示。
図：AIが生成したList画面

/create-form-page-template

Create画面とEdit画面を実装してくれるカスタムコマンドです。この2つの画面には、エラーハンドリングなどの複雑な仕様が含まれることが多いため、基本的な部分をAIに実装させて複雑度が高い箇所は自分たちで実装するようにしています。

このコマンドもリスト作成のコマンドと同様に、下記のような項目を対話形式で入力することで画面を生成する仕組みになっています。

  • ページのURLパス情報を入力
  • ページタイトルなどのメタ情報を入力
  • メニュー名を入力
  • 画面で呼び出すAPIの選択
  • フォームのフィールドの詳細を入力
フォーム設定の例。ラジオボタンの選択肢と初期値を定義。
図：フォーム設定（ラジオボタンの定義例）
AIが生成した社内向けCMSのCreate画面。必須項目やボタン文言を確認できる。
図：AIが生成したCreate画面

所感と今後の課題

"/create-list-page"コマンドは多くのケースで仕様に沿った画面を生成でき、 手直しを含めても30分前後で画面を構築できるようになりました。"/create-form-page-template"も完全自動化には至っていないものの、実装時間の削減に寄与しています。
また、どちらのコマンドもAIがコードを生成している間は他の作業を並行して進めることができるため、作業効率のさらなる向上が期待できます。
対話形式で実行できるようにインターフェース設計されているため、直感的に操作しやすい点も特長です。

今後の課題としては、まず生成する画面の精度を上げていくことが挙げられます。"/create-list-page"は現在ページネーションに対応できていないため、今後対応できるようにしていきたいと考えています。"/create-form-page-template"コマンドについては、画像のアップロードも含むフォームなど、少し複雑な仕様でも対応できるようにしていけるとよいと考えています。

また、現状はコンポーネントの仕様をすべて手入力する必要があり、AIに仕様を入力する作業で時間が取られてしまうことがあります。そのため、 仕様書を直接AIに渡すことでより作業を簡略化できるようにすることも検討しています。Spec KitやKiroといった仕様駆動開発ツールを参考にしたり、MCP(Model Context Protocol)を応用することで改善していけるのではないかと考えています。

おわりに

この記事では、LINEギフトのフロントエンドメンバーで取り組んだAI活用事例について紹介しました。近年AIは日進月歩で進化しており、できることが急速に広がっています。LINEギフトの開発チームは、今後もAIを積極的に活用し、よりよいサービスづくりを推進していきます。

最後に、私たちLINEギフトの開発チームは一緒にプロダクトの開発や改善に取り組んでいく仲間を募集中です！