はじめに
はじめまして、 ラクスルのフロントエンドエンジニアの原口です。 2020年4月に新卒第5期として入社して、入社後から今現在まで DTP チームに所属しています。
今回は、 DTP チームで開発しているデータチェック基盤の紹介と、新たにシールに対応できるように機能の追加を行った話をしたいと思います。
スピードチェック入稿とは
ラクスルでは、ファイルのアップロードと同時に自動でチェックを行い、そのファイルを印刷用に最適化する「スピードチェック入稿」というサービスを提供しています。具体的には、フォントに問題がないか?画像が壊れていないか?などのチェックと、可能であればその自動修正を行います。
スピードチェック入稿による恩恵として以下が挙げられます。
- より早くユーザにチェック結果を届けることができる
- 基本的なデータチェックを自動で行うことで、オペレータが高度なデータチェックに注力できる
オペレータはより多くの注文に対してデータチェックを行うことが出来るため、データチェックの平均的な待ち時間の短縮やデータチェックの品質の安定化に、欠かせない機能となっています。
シールという商材について
既にラクスルではチラシや冊子、名刺といった注文数の多い商品はスピードチェック入稿に対応していました。
今回紹介するシールは、チラシや冊子などのメジャーな商品に劣らないデータチェック件数を誇りながら、オペレータによる手動チェックにおいて次のような課題がありました。
- 注文の縦横のサイズと印刷データの縦横のサイズが一致していないことが多い
- データチェックを一度で通過できる割合が 20~30% と低い
- 修正が必要な印刷データの場合、ユーザはオペレータとメールでコミュニケーションする必要がある
印刷データに関する問題をユーザに自己解決してもらうことでこれらの課題を解決するシールスピードチェック入稿を開発しました。
シールスピードチェック入稿について
ファイルアップロード
まずはじめに、手持ちのファイルを選択します。
注文の縦横のサイズが対応している場合はラクスルの提供しているオンラインデザインも利用することが出来ます。
データチェック
アップロードされたファイルは自動的にトリミングされて、印刷の仕上がりプレビューが表示されます。問題がなければこのまま入稿確定まで進むことが出来ます。
調整が必要なファイル
シールはチラシや冊子などの定形の商品と異なり、様々な注文の縦横のサイズに対して様々な種類のファイルがアップロードされます。たとえば、
- ロゴデザインのような余白が大きい印刷データ
- 注文サイズの縦横比と印刷データの縦横比が異なる印刷データ
といったケースが考えられます。
このようなファイルをアップロードした場合、下記のような仕上がりプレビューが表示されます。
この問題を解消するため、エディタ機能を実装しました。 プレビューに問題があった場合「仕上がりを調整する」ボタンでエディタを開き、手動でトリミングの位置を調整することが出来ます。
エディタの機能
「縦幅に合わせる」「横幅に合わせる」を選択することで、簡単に印刷データの大きさを調整できます。
位置や大きさが期待通りでない場合はさらに調整できます。
調整後は仕上がりプレビューにその調整が反映され、ユーザは再度仕上がりを確認できます。
フロントでこだわったこと
フロント側の実装にあたり、データチェック業務に携わっているオペレータの方にユーザの印刷データの特徴のヒアリングを行い、機能のあるべき形について議論しました。
例えば、当初は UI を極力シンプルにし、ユーザには画像の位置と大きさの細かい調整してもらうことを想定していたため、画像の右下に一つだけツマミを配置し、拡縮を調整する設計となっていました。 ところがユーザのファイルを見ていくと、A4サイズのデータの端にロゴのみがあるような印刷データが一定割合存在したので、画面を大きく使って操作できるような UI が必要であることが分かりました。 そこで、四隅に拡縮を調整するアイコンを置き、どんな印刷データが来ても WEB 上で調整できるようにしました。
また、リリースに向けてフロントエンド開発に携わっていないメンバーを呼んでのレビューを定期的に行いました。 普段操作し慣れている自分が気づかない問題点をあげてもらい、 UI の調整を行いました。
最後に
シールスピードチェック入稿は10月にリリースしたばかりですが、より使いやすいプロダクトを目指して機能開発を行っていきます。
ラクスルでは「仕組みを変えれば、世界はもっと良くなる」のビジョンのもと、産業構造の変革にチャレンジしています。
エンジニアも絶賛募集中ですので、ご興味をお持ちいただけましたらぜひお声がけください!