皆さんこんにちは！ラクスル事業部でエンジニアをしている西尾、唐木（@knottey）、久冨（@tomi_t0mmy）です。
ラクスルでは毎年「HackWeek」というハッカソンイベントを行っています。今回、私たちは24新卒エンジニア2名、23新卒エンジニア1名という若手中心のチームで参加し、Make It Scalable AWARD 1を受賞することができました。24卒のメンバーは初めての参加でドキドキでしたが、普段は経験できないようなテーマや技術に挑戦する絶好の機会となりました。
このブログでは、私たちが作ったプロダクトの概要や参加した感想などをレポートしていきます。
イベント概要
「HackWeek」とは、RAKSULのエンジニア・デザイナー・PdMが協力し、その年のテーマに沿って一定期間集中的に開発を行う社内ハッカソンイベントです。テーマに沿った自由な発想での開発を通じて、私たちの「Go Beyond」というEngineering Cultureを体現する場となっています。
今年のテーマは「Back to the VENTURE」! 会社の規模が大きくなってもベンチャー精神を忘れず、挑戦を続けていく強い想いが込められています。今年は「ラクスル」に加え「ノバセル」「ハンコヤドットコム」「ペライチ」「エーリンク」と共に一体感を持って取り組む、これまでよりスケールの大きなハッカソンとなりました！
今回、私たちのチームでは「チラシからのぼりを自動生成する」というテーマに取り組みました。
背景・課題
ラクスルでは、印刷物を手軽に購入できるECサイトを運営しています。注文から印刷するまでの流れは次のようになっています。
まずお客様がチラシなどの商品を注文し、手元の印刷データを入稿します。その後、ラクスル側で入稿データをチェックし、支払いの確認が取れた段階で印刷が開始されます。
この流れの中のデータチェックにおいて、NGが出た場合はお客様によるデータ修正が必要となります。NGが頻発すると修正とデータチェックに時間がかかり、お客様の負担が大きくなってキャンセルされてしまうという課題がありました。
特にのぼりでは、チラシなど他の取り扱い商品と比べてデータチェックNGが発生したときのキャンセル率が高く課題になっていました。
開発テーマ
のぼりにおいてデータチェックNGとなる理由はさまざまなものが確認できましたが、今回はそのうちのひとつである「チラシ用の入稿データを誤ってのぼりの入稿データとして提出されているケース」に着目しました。 このケースにおいてその後お客様が離脱してしまっている理由として、私たちは「せっかくチラシの入稿データを作成したにもかかわらず、のぼりの入稿データ作成時にデザインを考え直すことが手間であるため」という仮説を立てました。
この仮説に基づいて、私たちは「既に作成されたチラシの入稿データを活用して、のぼりの入稿データを自動生成する」というテーマを設定し開発に取り組みました。
HackWeekではプロトタイプとして、サンプルのチラシデータからのぼりの入稿データを自動生成する仕組みを構築しました。この仕組みにより、お客様はゼロからデザインを作成する手間が省け、スムーズに入稿作業を完了できることが期待できます。
アプローチ方法
私たちのチームは、のぼりの入稿データ生成を「テキスト生成」「背景作成」「写真抽出」の3つのプロセスに分けました。以下は、ラクスルのオンラインデザインテンプレートにあるテンプレートチラシの画像に対してこのプロセスを適用した例です。
テキスト生成
このプロセスでは、チラシのデータからのぼりに適した文章データを作成しました。
テキストを考えるうえでは単なる文字情報だけでなく、背景の画像データや文字の大きさ、間隔といったレイアウト情報も重要な要素です。文字データだけでなくこれらの画像データなどもパラメータとして活用し、OpenAIを用いて文章を生成しました。
また、生成される文章の構造と内容を最適化するために、タイトルとキャッチコピーを分け、それぞれに商品名やイベント名、特徴を示す名詞を中心に文章を組み立てるプロンプトを設定しました。
さらに、のぼりは遠くからでも一目で内容を伝えられることが求められるため、視認性を高めることが重要です。この点を考慮し、生成された文字数を一定範囲内に調整し、のぼりのレイアウトにフィットした文章が出力されるよう工夫しました。
こうした取り組みによって、チラシに込められた情報を最大限に活かしながら、視覚的にも訴求力のあるのぼり用の文章を効率的に作成することができました！
背景作成
このプロセスでは、チラシのデータをもとにのぼりの背景を作成しました。
町中を実際に歩いてのぼりを観察すると、のぼりの背景は単色といったシンプルなものの方が認識しやすいと感じました。そこで、今回は複雑な背景ではなく単色の背景の生成を試みました。
具体的には、入稿データをもとにOpenAIを用いてカラーコードを生成し、それを基に単色の背景を生成しました。カラーコードの生成では、背景に適した色を生成させるために、入稿データ画像のイメージに合う色を選択し、文字との彩度の差を出すためにやや薄めの色を出力するようプロンプトを調整しました。
写真抽出
このプロセスでは、チラシに含まれる訴求したい商材の写真をのぼりに印刷できる形で抽出しました。
実際ののぼりには商材写真やそれに類するイラストが含まれているものが多く、私たちもそれに倣ってチラシから商材写真を抜き出すことを試みました。具体的には、写真に重なる文字の削除、チラシ内の商材物体の検出、背景除去を順に行います。
まず文字の削除については、チラシ内の写真にはキャッチコピーなどの文字が重なっているものも多いため、重なっている文字をOpenCVを用いて削除します。
次に、訴求したい商材写真の抽出です。チラシには訴求したい商材と直接関係のない物体の写真が含まれている場合があり、単に背景除去のみを行うと複数の物体が抽出されたり、商材ではない物体が抽出されてしまう可能性があります。 一方で、訴求したい商材はチラシの中でもっとも大きく写されているケースがほとんどです。そのため、チラシのデータの中から最大サイズの物体の検出範囲をトリミングすることで商品を抽出する仕組みとしました。
最後に、背景除去用ライブラリを用いてトリミングした写真から背景を削除すれば、抽出完了です。
これら3つのプロセスの成果を組み合わせて、のぼりデータの完成です！
難しかったところ
準備段階
事前準備の段階で、テーマ設定に苦戦しました。元々「チラシの入稿データを何かに活用したい」という曖昧なアイデアから始まったため、「このプロダクトでどんな課題を解決できるのか？」を定義するのに時間がかかりました。今回はData Analyticsチームの方やBizDevの方に相談させていただき、既存のデータ活用プロジェクトやお客様の課題について聞けたことで、今回のテーマ設定ができました。
開発段階
まず、のぼりの適切な背景と文章の要件を設定するのに時間がかかりました。Hackweek期間の初期は「ひとまず文章や背景を生成してみよう」というスタンスで開発していましたが、いざ生成してみると、違和感があるものも多く生成されました。
その違和感の正体を探っていくうちに、のぼりの背景色は視認性を高めるために明るい色が多く使われていることや、文字の大きさや配置が遠くからでも読みやすいように工夫されていることが分かりました。また、セールを強調するためには、商品名よりも「セール」や「特価」といったキーワードを大きく目立たせることが重要であることも分かりました。
こうした発見はのぼりという商品の特性を理解する上で非常に有益でしたが、ラクスルにはお客様向けのデザインテンプレートを作成する方もいらっしゃるので、その方にお話を聞くというのも一つの手だったと思いました。
また、OpenAIに渡すプロンプトを適切に設定することも難しい点の一つでした。先ほど調査したことを踏まえつつ質の高い文章を生成するためにプロンプトの内容を細かく調整する必要があり、試行錯誤しました。
その他、写真抽出のプロセスでは想定よりも工程が多く、目的の商品を抽出できるようになるまで時間がかかりました。一口に画像処理の技術と言っても文字の削除や物体検出などの各工程で異なる技術を使用する必要があり、それらを短期間で習得するのに苦労しました。
技術的な改善点
テキスト生成
本来であれば訴求力のある文章をスムーズに生成したいところですが日本語として違和感のある文章が頻繁に生成され、今回のHackWeek期間の中では抑制しきることができませんでした。プロンプトを調整して、より自然な文章を生成できるように改善を重ねたいです。
また、訴求したい商材に合わせて適切な文字の配置やフォントを複数パターン提示できるようになると、より入稿データに多様性を持たせることができそうです。
背景作成
今回は背景を単色のみとする方針で進めました。しかし、実際ののぼりの背景には季節感を表すイラストや柄が入っていることも多いため、適切なイラストや柄を生成できるようになるとより実用的になりそうです。
写真抽出
文字の削除や物体検出を行うにあたって複数のアルゴリズムや調整可能なパラメータがあるのですが、今回はどのアルゴリズムやパラメータの値が最適なのか、という検証までは行えていません。この点を改善できれば、文字削除や物体検出の精度を上げることが可能になると思います。
展望
今回は、チラシのデータをもとに、のぼりのデータを自動的に作成することにチャレンジしました。
この手法をさらに拡張することで、これまで手間がかかっていたデザイン作成を大幅に効率化することができます。例えば、チラシのデータを入力するだけで、のぼりのみならず、その他の印刷商品に派生させることが可能です。お客様が欲しいものを手軽に、そしてデザインに労力をかけず、自由にカスタマイズして商品を注文できるようになります。
参加してみた感想
今回のHackWeekに参加して、普段の業務とは異なる刺激的な経験ができました。通常の開発業務では、長期的な運用やサービスの安定性を重視していますが、HackWeekでは短期間で動くプロトタイプを作り上げるというスピード感が新鮮で楽しかったです。
また、BizDevメンバーやData Analyticsチームと協働できたことも良い経験になりました。エンジニアの視点だけでなくビジネスサイドからの意見を取り入れることで、お客様やプロダクトに対する解像度が上がり、より価値のあるプロダクトを生み出すことができました。Analyticsチームにもデータ関連技術やデータ基盤周りでサポートいただきました。この経験を通して、他職種との連携の重要性を再認識しました。
その他、普段触れない技術や領域を勉強する機会も得られました。OpenAIのAPIの様々な仕様やプロンプトの調整、OpenCVやYOLOなどの画像処理技術といった新しい知識を学び、技術的な視野を広げることができました。
今回の経験は、これからの開発においてもより良いプロダクトを作るための大切な学びとなりました。過去にはHackWeekの受賞テーマが実際にプロジェクト化されたケースもあるため、「自分たちのプロトタイプも今後正式に開発を進められるかも！？」という期待感もあり、充実のHackWeekでした！
終わりに
今回は新卒1,2年目のメンバーでの取り組みとなり、技術力やドメイン知識の量で他のチームに劣っていた点もあると思います。そんな中でも多くの人に協力をいただきながら、“はたらく人をラクにするカスタマイズECプラットフォームをつくる”というミッションに貢献できるプロダクトを作り上げることができました。結果として賞をいただくこともでき、とても嬉しいです！
今後もお客様によりラクで自由な購買体験を提供するために、積極的にアイデアを出していきたいです！
