メインコンテンツへスキップ

何をお探しですか?

私たちのサービスを探索し、目標達成をどのようにお手伝いできるかをご覧ください

マルチページ対応オンラインデザインツール向けデザインプレビューバーの開発

NetbaseはCMSmart部門を通じて、タイのオンラインデザインツールプロバイダー向けにデザインプレビューバーを構築しました。ユーザーは複数のデザインを1ページ上で管理し、サムネイルで一覧表示・任意のデザインへのジャンプ・印刷またはダウンロードするページの選択が可能です。クライアント名は非公開です。

類似プロジェクトを確認する 関連ソリューションを見る
star

概要

記録種別
ポートフォリオ記録:スコープと納品内容のみ、測定結果なし
クライアント
印刷・アパレル・SNS向けデザインを提供するオンラインデザインツールプロバイダー(名称非公開)
地域
タイ
サービス
ECサイト開発
提供部門
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に問い合わせる

プロジェクトを相談する

Netbase JSCは、デジタルプロダクトおよびAI活用型ビジネスシステムの設計・構築・モダナイゼーション・運用を支援する組織です。
プロジェクトのご相談

[email protected]

WhatsApp

+84 937 869 689

オフィス所在地

91 Nguyen Chi Thanh, Dong Da, Hanoi, Vietnam

お気軽にご連絡ください

構築・モダナイゼーション・運用したい内容をお聞かせください。

構築・モダナイゼーション・運用したい内容をお聞かせください。

Netbaseに問い合わせる