しまうまプリント — アクリル商品注文システムの開発

アクリルキーホルダーやアクリルフォトといったアクリル商品向けに、ユーザーがアップロードした画像から印刷用データを自動生成するWebエディタを開発しました。

課題

アクリル商品は、ユーザーが用意した画像をもとに、商品の形に合わせたカットパス（切り出しライン）を作る工程が必要です。この工程を手作業に頼らず注文フローの中で自動化し、誰でも迷わず注文まで進められるエディタが求められていました。ボールチェーンを取り付ける穴の位置調整など、商品仕様ならではの細かい要件にも対応する必要がありました。

アプローチ

画像アップロードから始まり、背景の自動除去、OpenCVを用いたカットパスの自動生成、ボールチェーン位置の調整、印刷用の白版レイヤー表示までを一体で行うWebエディタを、React・TypeScriptで新規開発しました。UIにはChakra UIとEmotionを採用し、コンポーネントはStorybookで管理することで、UIの一貫性と開発効率を両立しています。エディタで作成したデータは、印刷会社側のフローに合わせてSVG・PDF形式で出力できる設計としました。

成果

エディタはアクリル商品の注文フローに組み込まれ、Vercel上で継続的に運用されています。画像処理から印刷データ出力までをエディタ上で一貫して自動化することで、注文体験の効率化に寄与しました。フォトカレンダーの編集SPAなど他プロダクトと同様、しまうまプリントとの長期的なパートナーシップの中で生まれた開発の一つです。