オリジナルボトル制作の受発注管理システムに、ラベルデザインをボトルに巻いた状態で確認できる3Dプレビュー機能を追加開発しました。
クライアント / プロジェクト概要
オリジナルグッズの受発注管理システムを運用中の企業様です。ラベルデザインの確認用画像（ボトルに巻いた見た目）を作るために、外部業者のWebビューアへ手動でアップロードしてスクリーンショットを撮り、画像を並べて整形する、という手作業がカタログ1件ごとに発生していました。
課題
- プレビュー画像の作成が外部サイト頼みで、1件あたり数分の手作業が発生していた
- 未発表のデザインデータを外部サービスへアップロードすること自体がリスクだった
- 作業手順が属人化し、担当者以外はプレビューを作れなかった
ご提案・アプローチ
WebGL（three.js）を使い、ブラウザの中だけで完結する3Dプレビューを実装しました。ボトルの形状は実物の寸法と業者ビューアの見え方を画素単位で計測して合わせ込み、「これまでの確認画像と同じ見え方」を受け入れ基準に据えています。ラベル画像はサーバーへ送信せずブラウザ内でのみ扱うため、デザインデータが外部に出ません。
制作のポイント
- 回転体プロファイルによるボトルモデリング。 実測値に基づく形状で、ラベルの貼付範囲・見え始めの高さまで既存の確認画像と一致させました
- 色再現を優先したレンダリング設定。 見栄えのする色調変換ではなく、ラベルの絵柄の色が正しく見えることを優先しています
- カタログ登録時の自動生成。 ラベル画像を登録すると、正面と左右向きの3本並びプレビューが自動で作られます。手動で設定した画像を勝手に上書きしない配慮も入れました
- 既存データへの一括適用は「人が見守れる」設計に。 進捗表示・中断・再開に対応し、途中で止めても壊れません
制作の流れ
- 調査：既存の確認画像を画素解析し、寸法・貼付範囲・アングルを数値化
- 試作：3Dモデルの見え方を既存画像と突き合わせて調整
- 制作：ビューア・自動生成・既存データの一括生成を段階的に実装
- 納品・運用：本番ビルドでの動作・読み込みサイズへの影響まで検証して公開
成果
- 1件あたり数分かかっていた手作業が、登録と同時に数秒・無人で完了するようになりました
- 外部サービスへのデザインデータのアップロードが不要になり、情報管理面のリスクを解消
- 既存カタログ57件へのプレビュー一括適用も、中断可能な安全な手順で完了しました