Ｔシャツなどのデザイン補助ツール

紹介

この度、布地等の印刷業者様向けにデザイン補助ツールを作成しました。

この画面はお客様が成果物をイメージしやすいよう、デザインや色合わせを注文前に行って頂くためのものです。事前にお客様にある程度決めて頂ければ、その後の製品打合せ時間を大幅に短縮できてスムーズに進められることでしょう。

以下は実際の操作画面です。使ってみて頂き、有用性を確認してください。

使い方

１.初期画面は白のTシャツでマーク無しとなっています。

2. ITEM & COLORS でデザイン対象を選択します。

今回はキャップを選択しました。

3. [正面]・[右側]・[背面]・[左側]のボタンで対象の向きが変わります。

4. 対象の色を変更します。
今回は青を指定しました。

5. 背景を黒と白で切替られます。

6. マス目(GRID)の表示・非表示を切り替えます。

7. 過去にデザインしたものの読込と保存を行います。初期状態では「NEW_DESIGN」となっており 新規作成 状態です。
動作は後述します。

8. 「画像をアップロード」を選択すると、ローカルPCやスマホからワンポイントとなる画像が重なって表示されます。

アップロードすると調整バーが表示され、位置・サイズと明るさが調整可能となります。位置はマウス操作でも可能です。

9. 画像は前後左右の各面に１つづつ追加できます。
ここでは背面に猫の後ろ姿を追加しました。

10. [保存]ボタンを選択すると、現在のデザインがサーバー上に保存されます。
左は保存中の画面です。

保存が終了すると DESIN ID が表示されます。これは読込の時のキーとなりますのでメモしておいてください。

11. 次は読込操作です。
画面をリフレッシュ(Windows PCならば F5キー押下)して新規作成画面としてください。
保存したイメージを読み込むため、[読込]ボタンを選択してください。

12. DESIGN IDの入力ポップアップが表示されます。
[読込]する対象の DESIGN IDを入力してください。
ここでは10で[保存]したIDを入力します。

13. 保存したデザインが読み込まれました。

カスタマイズ及び料金について

設置及びカスタマイズ対象

• 御社のWEBサーバーへの設置
• 2.のTシャツ・キャップなどのデザイン対象となる商品の追加・変更
• 4.の色指定定義の追加・変更
• 御社のテーマ向けの表示スタイル調整

この４点までならば基本料金として

で請け負います。
この中にはサーバーの調査・実装と動作確認まで含めます。追加費用はありません。
※調査の結果、対応できない場合もありますのでご了承ください。

また、その他の機能を付けたいなどのご希望がありましたら、別途対応とさせていただきます。
その他、「こんなツールが欲しい」などのご希望があればお問い合わせください。

機能まとめ

1. 3Dシミュレーション・視覚効果
   　4側面プレビュー: 「正面・右・背・左」の4つの視点をアニメーション付きでスムーズに切り替え。
   　インテリジェント・スケーリング: 回転時の回り込みを再現する座標計算ロジックを搭載。
   　多種アイテム対応: Tシャツ、エプロン、キャップの3タイプを瞬時に切り替え可能。
   　ボディカラー合成: 12色のパレットから選択。乗算合成により、アイテムの質感やシワを維持したまま自然に着色。
   　グリッド表示（最前面）: デザインの上に5%刻みの精密な補助線を表示。ズームしても線の太さや間隔が画面上で固定される「ガイド機能」を搭載。
   　背景切り替え: 作業環境に合わせて、キャンバス背景を「白」と「黒」で切り替え可能。
2. デザインカスタマイズ・編集
   　各面独立デザイン: 4つの面それぞれに個別の画像をアップロードし、配置・設定を保持。
   　詳細調整スライダー:
   　　座標（X, Y）: ドラッグおよびスライダーでの調整。値は整数で表示・管理。
   　　サイズ: デザインの拡大・縮小。
   　　輝度: ボディカラーに合わせて画像の明るさを馴染ませる調整。
   　　編集パネルの動的表示: 画像がアップロードされている時だけ編集ツールが表示されるクリーンなUI。
3. 操作インターフェース（UX）
   　マルチデバイス対応ズーム:
   　　PC: マウスホイールによる拡大・縮小。
   　　スマホ: 2本指ピンチ操作による直感的なズーム。
   　　ドラッグ＆ドロップ移動: マウスおよびシングルタッチでの直感的なロゴ配置。
   　通信中オーバーレイ: 保存・読込中に画面をグレーアウトし、中央でスピナー（回転アイコン）が回る処理中画面を実装。
   　ステータス表示: 現在のDESIGN IDを、1remサイズの読みやすいフォントで、質感のある窪んだ枠内（インセット表示）に強調表示。
4. データ管理・クラウド連携
   　独自デザインID発行: 保存時に6桁の英数字IDを自動生成。新規作成はNEW_DESIGNをクラウドに通知するとサーバーから新規発行。発行済みデザインIDならば、そこに上書きする。
   　サーバーサイド保存（PHP連携）: designfunc.php を介して、色、アイテム種別、各面の画像座標、画像データをクラウドの/designフォルダに”デザインID.txt”として保存。
   　デザイン復元機能: ID入力により、過去の編集状態をすべての面で完全再現。
   　現在のカード構成（上から順）
   　　ITEM & COLOR: アイテム種類、視点切り替えボタン、カラーパレット。
   　　VIEW & DATA: DESIGN ID（窪んだ枠）、背景切り替え、GRIDボタン、読込・保存ボタン。
   　　MARK PRINT: アップロードエリア、画像編集スライダー。