STAFF START ウィジェット開発

タグを埋め込むだけの手軽な導入

一般に、ECサイトに新たな機能を追加するには、サイト側での改修や連携開発を伴い、導入には大きな負担がかかります。この課題に対し、ウィジェットの動作に必要な情報をすべてサービス側のAPIから取得するアーキテクチャを採用しました。導入先のECサイトは、JavaScriptタグをHTMLに1行埋め込むだけで、バックエンド開発や大がかりなシステム連携をすることなく、既存サイトにウィジェットを組み込めます。

導入先サイトへの影響を最小限に

ウィジェットが導入先のサイト表示を妨げないよう、細心の注意を払って設計しました。CSSモジュールを用いてウィジェットのスタイルを完全に隔離し、導入先サイトのデザインとの干渉を防いでいます。描画エンジンは軽量に設計し、ページの表示速度への影響を最小限に抑えました。

多様な活用場面への対応

コーディネート一覧、スタッフプロフィール、商品レビュー、ブログ記事、AIバーチャル試着など、25種類以上のウィジェットを開発しました。ECサイトのトップページから商品詳細ページ、カートページまで、購買の各場面で最適な情報が届けられるよう、用途ごとに適したUIと振る舞いを設計しています。

品質を支える開発・テスト環境

TypeScriptによる型安全な開発環境を整備し、多数のウィジェットを安定して保守できる設計を構築しました。本番APIに依存しないモックシステムの構築、複数ブラウザでのE2Eテストの自動化、変更が既存のウィジェットに影響しないことを継続的に確認できる仕組みの構築を実現。プロジェクトの実装時期はAIが開発の現場に導入されはじめた頃であり、AIを使った仕様のドキュメンテーション、環境整備も行っています。

成長するサービスとともに

STAFF STARTの機能追加やサービス拡大に合わせて、ウィジェットの新規開発や既存ウィジェットの改善を継続的に行っています。新しいウィジェットを追加しやすい設計にしており、サービスの成長とともに迅速な機能拡張を実現しています。

Webサービスのスペック

採用サービス、ライブラリ