Product DesignerとCustomizer
高度なデザインツール
画像、テキスト、ベクターをひとつのデザインに。Product Designerでプリントを仕上げ、3Dモデルで確認し、Customizerでお客様にカスタマイズを提供できます。
レイアウトから商品へ
2Dと3Dでデザイン
平面の2D領域でデザインしたり、3Dモデルのプリント領域で直接作業したり、両方の表示を並べて使ったりできます。商品上の大きさと位置を確認しながら、要素を配置・調整できます。
複合表示なら、商品の実際の形に合わせてレイアウトを評価できます。同じテキスト、画像、モチーフを、プリントのデザインとしても完成イメージの一部としても確認できます。
2Dのグリッドとプリントプレビュー
グリッドとスナップ
グリッドとレイヤーへのスナップを有効にして、要素をより正確に配置できます。
背景画像なしのプレビュー
作業領域の背景画像を非表示にして、プリントだけを詳しく確認できます。デザイン要素は表示されたままです。
画像をグリッドの上または下に表示
背景画像をグリッドの上に表示するか、下に表示するかを選べます。
独自のプレビュー背景
画像の代わりに白、グレー、黒、任意の背景色を設定できます。コントラストのある色で、画像のエッジや透明部分を確認できます。変更されるのはプレビューで、プリントのデザインではありません。
画像、不透明度、レイアウト
写真、イラスト、ロゴがデザイン全体の出発点になります。見た目、透明度、配置を整えてから、テキストやほかのレイヤーと組み合わせられます。
オリジナル画像
JPEG、PNG、WebPの画像やSVGファイルを追加できます。レイアウト内の画像を差し替えて、デザインの別バージョンを作成できます。
均一・線形・放射状の不透明度
Image fillで0〜100%の均一な不透明度、方向に沿ったフェード、放射状のフェードを設定できます。不透明度のグラデーションストップを追加して位置と強さを指定し、Edit Coordsで画像上のグラデーションの位置を調整できます。
配置と変形
要素を移動、拡大縮小、回転、反転できます。2D表示や3Dモデル上でプリント領域内の位置を調整できます。
元画像を残してトリミング
Cropを開き、四隅をドラッグして表示範囲のサイズを変えるか、画像内でトリミング範囲を移動できます。結果を適用するか、元画像全体にリセットできます。トリミングは2Dワークスペースで行います。3Dのみの表示から開くと2D表示に切り替わります。
画像の角を丸くする
四隅をまとめて丸くするか、連動を解除して各角の半径を個別に設定できます。画像を引き伸ばしても丸みは均一に保たれ、細長い楕円にはなりません。トリミングと組み合わせて、角丸の写真フレームを作成できます。
画像の輪郭線：フレームまたは内容
Image strokeを有効にし、Follow image contentで見えている画像内容の輪郭と、角丸を含むトリミング枠の輪郭を切り替えられます。テキストの輪郭線と同じ操作で、太さ、色、不透明度、実線・破線、破線の長さ、線の結合と端点を設定できます。
画像の影
影を有効にして、色、不透明度、横方向と縦方向のオフセット、ぼかしを調整できます。トリミングした画像や切り抜いたモチーフに使い、2Dと3Dの両方で商品上の効果を確認できます。
画像、テキスト、図形のパターン
ひとつのモチーフからパターンを作成
ひとつの要素から繰り返しパターンを作れます。背景、装飾モチーフ、プリント領域のレイアウトとして活用できます。繰り返しツールはテキストや図形にも使えます。
グリッド
Grid
規則的に並ぶ行と列。
レンガ状
Brick
行を交互にずらして配置。
列のオフセット
Half drop
1列おきにずらして配置。
散布
Scatter
乱数シードを使った自由な配置。
円形配置
Round
円周上に繰り返して配置。
行と列の数、間隔、パターンのオフセットを設定できます。回転、拡大縮小、反転でA/Bのバリエーションを変えられます。要素、行、列ごとの交互配置や市松模様を選び、散布では乱数シードを使えます。
フィルターと画像補正
デザインを開いたまま、コレクションの雰囲気に画像を合わせられます。フィルターパネルには明るさと色の補正、細部の調整、網点、半透明の制御が含まれます。
| フィルター・補正 | できること |
|---|---|
| 明るさ | レイアウトに配置する前に、画像を明るくしたり暗くしたりできます。 |
| コントラスト | 画像の明るい部分と暗い部分の差を強めたり和らげたりできます。 |
| 白黒 | カラー画像をモノクロのデザインに変換できます。 |
| 反転 | 色を反転してネガのような効果を作れます。 |
| 色相 | 色調を変えて画像に異なる印象を与えられます。 |
| 彩度 | 落ち着いた色から鮮やかな色まで、色の強さを調整できます。 |
| 自然な彩度 | 色補正の独立した工程として、色の鮮やかさを調整できます。 |
| 赤のガンマ | 赤チャンネルの階調を補正できます。 |
| 緑のガンマ | 緑チャンネルの階調を補正できます。 |
| 青のガンマ | 青チャンネルの階調を補正できます。 |
| シャープ | 画像の輪郭や細部を際立たせます。 |
| ぼかし | 画像を柔らかくし、なめらかな変化を作れます。 |
| 網点 / ハーフトーン | 点、十字、線で網点効果を作り、その構成を調整できます。 |
| 半透明の背景を削除 | アルファしきい値で薄いピクセルを削除し、残るピクセルを完全に不透明にできます。この補正には境界のぼかしがなく、被写体の認識ではなくピクセルの不透明度に作用します。 |
6種類の網点スタイル
細部まで調整できるハーフトーン
点、十字、線のリズムを画像に加えられます。ハーフトーンなら、細かい網点から目を引く装飾効果まで、プリントの構成を意図に合わせて作れます。
元画像
ハーフトーン: ドット
ハーフトーン: 線
画像に合う網点の形を選択
円
正方形
ひし形
楕円
十字
線
間隔とサイズ
網点の密度と各要素のサイズを設定できます。
角度とコントラスト
網点のスクリーンを回転し、画像の明るさが網点の被覆率にどう影響するかを調整できます。
網点の柔らかさと不透明な網点
ハーフトーンの要素のエッジを調整できます。Solid dots for printingを有効にすると、残る網点は半透明のエッジを持たず、完全に不透明になります。
明るさの反転を0〜100%で調整
明るさに対する通常の反応と反転した反応を連続的に混ぜられます。0%では暗い部分の被覆率が高くなり、100%では明るい部分の被覆率が高くなります。中間の値では両方の反応が混ざります。
印刷色と透明部分の処理
DTFの準備機能とスクリーン印刷・刺繍の印刷色設定で、画像を選択した方法に合わせて処理できます。印刷方法のハーフトーンまたはReduce opacityが有効な場合は、対応する画像フィルターが無効になり、効果の重複を防ぎます。
印刷色のパレット
スクリーン印刷や刺繍では、オーナーが設定した制限の範囲で、使用可能なインクや糸の色を選べます。印刷方法の効果から除外したレイヤーを除き、影や輪郭線を含む画像全体がこのパレットに変換されます。
Reduce opacity
アルファしきい値を設定して不透明度の低いピクセルを削除し、残るピクセルを完全に不透明にします。境界をぼかさず、透明部分を明確に分けます。
Halftone - Full
明るさを使って、不透明な部分や影を含む画像全体のハーフトーン被覆率を制御します。元の透明度も網点のサイズに影響し、何もないピクセルはそのまま残ります。
Halftone - Semitransparent
不透明な部分はそのまま保ち、半透明の部分を小さな不透明の網点に変換します。デザインの不透明な部分すべてに網点をかけることなく、柔らかな透明部分や影を処理できます。
共通のハーフトーン設定
スタイル、網点の間隔とサイズ、スクリーン角度、コントラスト、網点の柔らかさ、最小被覆率、明るさの反転を設定できます。FullとSemitransparentは設定を共有します。モードを切り替えてもSettingsパネルは開いたままで、Reset Settingsで選択した効果の既定値に戻せます。
レイヤーをまとめて処理
このオプションは既定で有効です。プリント領域内のレイヤーを合成した後に透明部分を処理するため、重なりもまとめて評価されます。無効にすると各レイヤーを個別に処理します。
製作用ファイルとオーナーのプレビュー
印刷用の書き出しでは、画像、輪郭線、影に選択した印刷方法が適用されます。刺繍の質感はプレビュー専用で、製作用ファイルには追加されません。オーナーだけがVariantsタブでNo effectを選び、印刷方法による処理を行わずに作成した画像をプレビュー・書き出しできます。画像の編集内容は適用されたままです。
背景や指定した色の削除
モチーフを切り抜いて、ほかの要素と組み合わせる準備ができます。自動処理から始めるか手動で作業し、スポイトと許容値で指定した色を削除できます。
背景の自動削除
画像の主なモチーフを切り抜き、周囲の背景なしでプリントに使えます。
マスクの手動調整
ブラシで一部を削除したり復元したりできます。サイズと強さを調整して、細部やエッジを仕上げられます。
色の削除
手動背景削除ツールのスポイトで色を指定できます。許容値を設定して画像全体から一致するピクセルを削除し、ブラシでマスクを仕上げられます。
手動マスキングの手順
画像のマスクを編集して、表示する部分を調整できます。エッジと透明度が整ったら結果を適用します。
ブラシと消しゴム
消しゴムで画像の一部を隠し、ブラシで復元できます。サイズと強さを調整でき、対応ブラウザーではエッジの硬さも調整できます。
指定した色の削除
スポイトで色を指定し、色範囲の許容値を調整できます。一致する部分を削除し、ブラシで細部を修正できます。対応ブラウザーでは、ぼかしで境界を柔らかくすることもできます。
円形マスク
円形マスクを有効にして、半径、エッジの柔らかさ、中心のX・Y位置を調整できます。
確認と操作の取り消し
プレビューの背景色を変え、画像を拡大して表示位置を動かし、エッジを確認できます。元に戻す、やり直す、マスクを消去して画像を復元する操作も可能です。
使用例: ロゴの単色背景を削除してモチーフだけを残し、色の付いた商品に配置したり、パターンとして繰り返したりできます。色の削除は画像内部の指定色にも作用するため、マスクで仕上げると効果的です。
短い文字から凝ったタイポグラフィまで
デザインの個性を作るテキスト
商品、ブランド、画像のスタイルに合う文字を作れます。書体を選び、テキストの形を変え、塗りに輪郭線や影を組み合わせられます。
1,800種類以上のGoogle Fonts
名前でフォントを検索し、カテゴリや対応する文字体系で絞り込めます。セリフ、サンセリフ、装飾、手書き、等幅の書体から選べます。
タイポグラフィを細かく調整
サイズ、文字間隔、行間、配置を調整できます。大文字・小文字の変更、下線や取り消し線、書体が対応する太字や斜体を適用できます。
塗り、輪郭線、影
単色と線形・放射状グラデーションを組み合わせられます。実線や破線の輪郭線を追加し、影の色、位置、ぼかしも調整できます。
テキストの形を変える4つの方法
標準テキスト
配置や行間を調整しながら、シンプルな文字や複数行のレイアウトを作れます。
円弧テキスト
文字を曲げ、円弧の角度と距離を調整できます。エンブレムや中央の画像を囲むレイアウトを作れます。
ブリッジテキスト - Bridge
文字列の両端と中央で文字の高さを変えられます。変化のなめらかさと中央の上下位置を調整できます。
斜めテキスト - Oblique
始点と終点の高さ、終点の上下位置を調整して、文字列に方向感を持たせられます。
図形、パス、ベクター化
シンプルな図形を組み合わせたり、点と曲線を細かく編集したりできます。パスエディターでは、対応する図形やパスレイヤーを調整できます。
用意された図形
長方形、線、楕円、円、三角形、六角形、八角形、星形から始められます。塗り、輪郭線、影を調整でき、長方形は角の丸みも設定できます。
オリジナルの輪郭
既存の図形を独自のエンブレム、装飾、輪郭に変えられます。対応する図形・パスレイヤーの点を2D表示で編集し、商品上で結果を確認できます。
ドラッグで図形を描く
図形を選び、2Dまたは3D表示でドラッグするとサイズを指定できます。クリックだけの場合やドラッグがごく短い場合は、点ではなく既定のサイズの図形を作成します。
Shiftで縦横比を維持
長方形、楕円、三角形、六角形、八角形、星形を描くときにShiftを押すと、元の縦横比を維持できます。長方形は正方形に、楕円は円になり、六角形や星形は本来の比率を保ちます。円は常に円形を保ちます。
点と曲線のエディター: スケッチから精密な輪郭へ
ロックされていない図形またはパスレイヤーを選択して、ベクター編集に進みます。一度にひとつのレイヤーを編集し、新しい部分を描いたり既存の形状を調整したりできます。
ペンとパスの拡張
ペンで線分を描き足し、既存の点につなげて輪郭を閉じられます。パス上に点を追加したり不要な点を削除したりして、形を整えられます。
点の選択となげなわ
点をひとつ選択するか、範囲選択やなげなわで広い部分を選択できます。ほかの点の位置を保ちながら、選択した輪郭部分を編集できます。
パスに沿って移動
点を自由に、または既存のパスに沿って移動できます。選択した点をまとめて移動して、レイアウトの一部分を変えられます。
ベジェ曲線とハンドル
入側と出側のハンドルで曲率を調整できます。ハンドルを個別に有効にし、独立、角度のみ対称、角度と長さの両方が対称のいずれかを選べます。
点をつなぐ
選択した点を線分でつなげられます。パスを延ばし、輪郭を構成する接続部分を調整できます。
パスの切断
パスを横切る切断線を引いて分割できます。その後、点や曲線のツールで各部分を仕上げられます。
輪郭を広げる・狭める
選択した点を指定した距離だけオフセットできます。水平・垂直の両方向、水平のみ、垂直のみを選び、選択部分の比率を変えられます。
対称軸と反転
軸の位置と角度を設定して、輪郭全体や選択した点を反転できます。軸付近で点をつなぐ距離を調整し、両側の接合を整えられます。
元に戻す・やり直す。 輪郭のバリエーションを試しながら、編集中に以前の操作へ戻れます。
塗りと輪郭線の見た目を調整
塗りの色やグラデーション、輪郭線の太さ、影を設定できます。実線、または線と空白の長さを指定した破線を選べます。線の結合はマイター、ベベル、ラウンドに、端点はバット、ラウンド、スクエアに変更できます。長方形の角はまとめて、または個別に丸くできます。 幅と高さを別々に変更しても、角の丸みは均一に保たれます。
使用例: エンブレムの半分を描いて軸に対して反転し、曲線を整えます。輪郭線と円弧テキストを加えれば、独自のプリント用モチーフを作れます。
Product Designerのツール
画像をSVGにベクター化
PNG、WebP、JPEGの画像をベクター画像に変換できます。色数と細かさを設定し、元画像と比較してからデザインに適用するか、SVGファイルをダウンロードできます。
- 1〜32色のパレットと調整可能な細かさ。
- 元画像との関連を維持: ベクター化を無効にしたり、結果を再計算したりできます。
- 元画像のマスクとフィルターを反映。ハーフトーンを繰り返しベクター形状として残すこともできます。
- AI画像生成サービスを使わず、ローカルで処理します。
色数が少ないと画像のスタイルがシンプルになり、多いとより多くの色の違いを残せます。デザインに合った設定を選び、適用前にプレビューを確認してください。
デザインに合わせたQRコード
QRコードを商品デザインの一部として自然に組み込めます。説明書、コレクション、ブランドサイトへのリンクに、独自の配色、形、コード要素のスタイルを組み合わせられます。
クラシックな幾何学模様
正方形の要素と単色。
柔らかいコーナー
角丸の要素と、個別の枠・中心。
グラデーションとブランドカラー
円形の配置、色のグラデーション、独立したコーナーの色。
6種類のドットスタイル
幾何学的、柔らかい、装飾的など、コードの印象を変えられます。コード内部の要素のスタイルと、コーナーの見た目を個別に組み合わせられます。
- 正方形
- 角丸
- 大きな角丸
- Classy
- Classy Rounded
- ドット
コードの内容と形
Webサイト、説明書、コレクションのURLや任意のテキストを登録できます。コード全体の形を正方形または円形から選び、レイアウトに合わせられます。
コーナーごとの独立したスタイル
コーナーの枠と中心の形を個別に設定できます。枠は正方形、大きな角丸、円形から、中心は正方形または円形から選べます。標準スタイルのままにもできます。
4つの独立した色領域
ドット、コーナーの枠、コーナーの中心、背景の色を個別に選べます。ブランドの配色で統一したり、特定の要素を強調したりできます。
グラデーションと正確な色指定
単色、線形グラデーション、放射状グラデーションを使えます。カラーストップを追加して位置と不透明度を設定し、HEXやRGBの値を入力できます。線形グラデーションは方向も変更できます。
独自の背景または透明な背景
色やグラデーションの背景を追加するか、背景を無効にして商品の色や画像になじませられます。コードを読み取れるようにコントラストを調整してください。
ロゴやモチーフ用のスペース
中央に正方形、横長または縦長の長方形のスペースを確保できます。別のデザインレイヤーとして追加したロゴやモチーフと組み合わせられます。
コードをほかのデザイン要素とともに拡大縮小、回転、配置できます。製造前に、実際のプリントサイズで読み取れるか確認してください。色の変更や中央へのモチーフ追加後は特に確認が必要です。
レイヤー、グループ、マスク
要素が多いデザインも整理できます。テキスト、画像、装飾を分け、グループやマスクで重なったときの表示を調整できます。
順序と表示
レイヤーの重なり順を変えたり、要素を非表示にして再表示したりできます。以前のアイデアを削除せずに、段階的にレイアウトを作れます。
グループ
関連する要素をグループにまとめて、複雑なデザインを管理しやすくできます。
マスキング
選択範囲の最下層レイヤーをほかのレイヤーのマスクに使えます。画像の表示範囲を選んだ形に限定できます。
デザイン要素の保護
固定したい要素をオーナーロック付きで最前面または最背面に固定できます。ロゴなどのブランド要素をお客様の編集範囲から外しながら、カスタマイズ用のスペースを残せます。
保存したプロジェクトとテンプレート
トリミング、角の半径、不透明度グラデーション、輪郭線のモードと設定、影はデザインとともに保存され、再度開いたりテンプレートとして読み込んだりすると復元されます。これらの編集はマスクやグループと併用でき、製作用の書き出しにも選択した印刷方法が反映されます。
あなたのデザインに、お客様らしさを。
お客様が使えるカスタマイズ機能
Webサイトでお客様にCustomizerを提供できます。編集モードでは、商品のプレビューを見ながらテキスト、画像、図形、QRコードを追加し、独自のレイアウトを仕上げられます。
オーナーとしてデザインを準備し、変更しない要素をオーナーロック付きで固定できます。編集できる機能は、埋め込んだツールの設定と権限によって異なります。上記の画像ベクター化はProduct Designerのツールです。
オリジナル画像からカスタマイズ商品へ
画像編集、タイポグラフィ、3Dプレビューをひとつの流れで使えます。レイアウトを準備し、固定要素を管理しながら、お客様のアイデアを加える余地を用意できます。
ツールを実際に見る