概要
- 記録種別
- ポートフォリオ記録:スコープと納品内容のみ、測定結果なし
- クライアント
- 印刷・アパレル・SNS向けデザインを提供するオンラインデザインツールプロバイダー(名称非公開)
- 地域
- タイ
- 業種
- 印刷・パッケージング
- サービス
- ECサイト開発
- ソリューション
- 商品パーソナライゼーションおよびWeb to Printプラットフォーム
- 提供部門
- NetbaseのCMSmart部門
- 期間
- コンセプトから機能完成まで約1週間
- 公開指標
- なし
課題
クライアントは印刷物やSNS投稿向けのオンラインデザインサービスを提供しており、大手ブラウザベースのデザインツールと競合しています。調査の結果、ユーザーが1つのデザインに対して複数のバージョン(例:2種類のポスター案)を作成するケースが多いことがわかりました。従来のツールでは各デザインが別々のページに保存されるため、バージョン間の比較はページを行き来する必要があり、時間がかかるうえにミスも生じやすい状況でした。クライアントは、複数のデザインを1ページ上にまとめて表示し、素早く切り替えられる機能を求めていました。
Netbaseが構築したもの
- プレビュー。エディターの右側に配置されたバーが、すべてのデザインページを上から下の順にサムネイル表示します。一覧が長い場合はスクロールに対応しています。
- ショートカット。サムネイルをクリックすると、該当デザインに直接ジャンプできます。
- ページの追加。新規ページボタンを押すと、現在のページの直下に空白のデザインが追加されます。
- 印刷ページの選択。作成したデザインの中から、印刷したいものだけをチェックして選択できます。
- ダウンロード。同じバーからデザインをダウンロードできます。
- バーの非表示。キャンバスを広く使いたい場合はバーを非表示にできます。この機能はデザインチームがバーの占有スペースに気づいたことで提案されました。
納品の流れ
クライアントがアイデアを開発チームに伝え、チームはユーザーがバージョンを比較する操作方法に合わせた一連のアクションを設計し、見やすい右側にバーを配置しました。コンセプト・設計・構築・改善のサイクルに約1週間を要し、テストチームが各アクションを確認したうえで納品しました。バーは既存のエディター上で動作するため、ユーザーはすでに使い慣れたテンプレート・テキスト・画像ツールをそのまま利用できます。
公表していない内容
本事例はこの機能に対するクライアントの期待を説明するものであり、測定結果ではありません。そのため、売上・トラフィック・コンバージョン率などの数値は本記録に含まれていません。プレビューバーはUIの改善であり、AI機能ではありません。
関連事例と次のステップ
招待状印刷会社の受注ワークフローに合わせた商品デザイナーのカスタマイズ事例や、印刷ショップの商品ページおよびエディターツールの改善事例もご覧ください。全事例はWeb to Print顧客事例集にまとめています。
商品パーソナライゼーションとWeb to Printプラットフォームソリューションでエディター機能全般をカバーしており、Web to Printプラットフォームガイドでは計画の立て方を解説しています。ストアプラットフォームについてはコマース・エンタープライズ技術のページをご参照ください。Netbaseの実績一覧をご覧いただくか、類似プロジェクトについてNetbaseにお問い合わせください。
出典
- CMSmart コミュニティ記事「デザインプレビューバー」(2023年2月)、Netbase事例リストに記録済み。記事にクライアント名が掲載されているため、URLは本記録に記載しません。
- David(CEO)提供のNetbase事例リスト。David(CEO)により公開を確認済み(2026-09-17、F142)。
- MDN Web Docs、Canvas API、https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API(2026-09-17参照):ブラウザベースのデザインエディターがページとサムネイルを描画する仕組み。
- MDN Web Docs、HTMLCanvasElement toBlob()メソッド、https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob(2026-09-17参照):ブラウザエディターが描画済みデザインをダウンロード可能な画像ファイルに変換する仕組み。
プロジェクトを相談する
Netbase JSCは、デジタルプロダクトおよびAI活用型ビジネスシステムの設計・構築・モダナイゼーション・運用を支援する組織です。+84 937 869 689
91 Nguyen Chi Thanh, Dong Da, Hanoi, Vietnam
お気軽にご連絡ください
構築・モダナイゼーション・運用したい内容をお聞かせください。