Product DesignerとCustomizer
高度なデザインツール
画像、テキスト、ベクターをひとつのデザインに。Product Designerでプリントを仕上げ、3Dモデルで確認し、Customizerでお客様にカスタマイズを提供できます。
レイアウトから商品へ
2Dと3Dでデザイン
平面の2D領域でデザインしたり、3Dモデルのプリント領域で直接作業したり、両方の表示を並べて使ったりできます。商品上の大きさと位置を確認しながら、要素を配置・調整できます。
複合表示なら、商品の実際の形に合わせてレイアウトを評価できます。同じテキスト、画像、モチーフを、プリントのデザインとしても完成イメージの一部としても確認できます。
2Dのグリッドとプリントプレビュー
グリッドとスナップ
グリッドとレイヤーへのスナップを有効にして、要素をより正確に配置できます。
背景画像なしのプレビュー
作業領域の背景画像を非表示にして、プリントだけを詳しく確認できます。デザイン要素は表示されたままです。
画像をグリッドの上または下に表示
背景画像をグリッドの上に表示するか、下に表示するかを選べます。
独自のプレビュー背景
画像の代わりに白、グレー、黒、任意の背景色を設定できます。コントラストのある色で、画像のエッジや透明部分を確認できます。変更されるのはプレビューで、プリントのデザインではありません。
画像、不透明度、レイアウト
写真、イラスト、ロゴがデザイン全体の出発点になります。見た目、透明度、配置を整えてから、テキストやほかのレイヤーと組み合わせられます。
オリジナル画像
JPEG、PNG、WebPの画像やSVGファイルを追加できます。レイアウト内の画像を差し替えて、デザインの別バージョンを作成できます。
不透明度を0〜100%で調整
モチーフを重ねたり、淡い背景を作ったりしながら、商品上で画像をどの程度目立たせるかを調整できます。
配置と変形
要素を移動、拡大縮小、回転、反転できます。2D表示や3Dモデル上でプリント領域内の位置を調整できます。
画像、テキスト、図形のパターン
ひとつのモチーフからパターンを作成
ひとつの要素から繰り返しパターンを作れます。背景、装飾モチーフ、プリント領域のレイアウトとして活用できます。繰り返しツールはテキストや図形にも使えます。
グリッド
Grid
規則的に並ぶ行と列。
レンガ状
Brick
行を交互にずらして配置。
列のオフセット
Half drop
1列おきにずらして配置。
散布
Scatter
乱数シードを使った自由な配置。
円形配置
Round
円周上に繰り返して配置。
行と列の数、間隔、パターンのオフセットを設定できます。回転、拡大縮小、反転でA/Bのバリエーションを変えられます。要素、行、列ごとの交互配置や市松模様を選び、散布では乱数シードを使えます。
フィルターと画像補正
デザインを開いたまま、コレクションの雰囲気に画像を合わせられます。フィルターパネルには明るさと色の補正、細部の調整、網点、半透明の制御が含まれます。
| フィルター・補正 | できること |
|---|---|
| 明るさ | レイアウトに配置する前に、画像を明るくしたり暗くしたりできます。 |
| コントラスト | 画像の明るい部分と暗い部分の差を強めたり和らげたりできます。 |
| 白黒 | カラー画像をモノクロのデザインに変換できます。 |
| 反転 | 色を反転してネガのような効果を作れます。 |
| 色相 | 色調を変えて画像に異なる印象を与えられます。 |
| 彩度 | 落ち着いた色から鮮やかな色まで、色の強さを調整できます。 |
| 自然な彩度 | 色補正の独立した工程として、色の鮮やかさを調整できます。 |
| 赤のガンマ | 赤チャンネルの階調を補正できます。 |
| 緑のガンマ | 緑チャンネルの階調を補正できます。 |
| 青のガンマ | 青チャンネルの階調を補正できます。 |
| シャープ | 画像の輪郭や細部を際立たせます。 |
| ぼかし | 画像を柔らかくし、なめらかな変化を作れます。 |
| 網点 / ハーフトーン | 点、十字、線で網点効果を作り、その構成を調整できます。 |
| 半透明の背景を削除 | アルファしきい値と境界の柔らかさで透明度を整えます。この補正は被写体を認識するものではなく、ピクセルの不透明度に作用します。 |
6種類の網点スタイル
細部まで調整できるハーフトーン
点、十字、線のリズムを画像に加えられます。ハーフトーンなら、細かい網点から目を引く装飾効果まで、プリントの構成を意図に合わせて作れます。
元画像
ハーフトーン: ドット
ハーフトーン: 線
画像に合う網点の形を選択
円
正方形
ひし形
楕円
十字
線
間隔とサイズ
網点の密度と各要素のサイズを設定できます。
角度とコントラスト
網点のグリッドを回転し、画像の明るさを網点にどう反映するかを調整できます。
エッジの柔らかさ
要素の輪郭をくっきりさせたり柔らかくしたりできます。
反転と完全な不透明化
明るさへの反応を反転し、半透明でない要素にできます。
背景や指定した色の削除
モチーフを切り抜いて、ほかの要素と組み合わせる準備ができます。自動処理から始めるか手動で作業し、スポイトと許容値で指定した色を削除できます。
背景の自動削除
画像の主なモチーフを切り抜き、周囲の背景なしでプリントに使えます。
マスクの手動調整
ブラシで一部を削除したり復元したりできます。サイズと強さを調整して、細部やエッジを仕上げられます。
色の削除
手動背景削除ツールのスポイトで色を指定できます。許容値を設定して画像全体から一致するピクセルを削除し、ブラシでマスクを仕上げられます。
手動マスキングの手順
画像のマスクを編集して、表示する部分を調整できます。エッジと透明度が整ったら結果を適用します。
ブラシと消しゴム
消しゴムで画像の一部を隠し、ブラシで復元できます。サイズと強さを調整でき、対応ブラウザーではエッジの硬さも調整できます。
指定した色の削除
スポイトで色を指定し、色範囲の許容値を調整できます。一致する部分を削除し、ブラシで細部を修正できます。対応ブラウザーでは、ぼかしで境界を柔らかくすることもできます。
円形マスク
円形マスクを有効にして、半径、エッジの柔らかさ、中心のX・Y位置を調整できます。
確認と操作の取り消し
プレビューの背景色を変え、画像を拡大して表示位置を動かし、エッジを確認できます。元に戻す、やり直す、マスクを消去して画像を復元する操作も可能です。
使用例: ロゴの単色背景を削除してモチーフだけを残し、色の付いた商品に配置したり、パターンとして繰り返したりできます。色の削除は画像内部の指定色にも作用するため、マスクで仕上げると効果的です。
短い文字から凝ったタイポグラフィまで
デザインの個性を作るテキスト
商品、ブランド、画像のスタイルに合う文字を作れます。書体を選び、テキストの形を変え、塗りに輪郭線や影を組み合わせられます。
1,800種類以上のGoogle Fonts
名前でフォントを検索し、カテゴリや対応する文字体系で絞り込めます。セリフ、サンセリフ、装飾、手書き、等幅の書体から選べます。
タイポグラフィを細かく調整
サイズ、文字間隔、行間、配置を調整できます。大文字・小文字の変更、下線や取り消し線、書体が対応する太字や斜体を適用できます。
塗り、輪郭線、影
単色と線形・放射状グラデーションを組み合わせられます。実線や破線の輪郭線を追加し、影の色、位置、ぼかしも調整できます。
テキストの形を変える4つの方法
標準テキスト
配置や行間を調整しながら、シンプルな文字や複数行のレイアウトを作れます。
円弧テキスト
文字を曲げ、円弧の角度と距離を調整できます。エンブレムや中央の画像を囲むレイアウトを作れます。
ブリッジテキスト - Bridge
文字列の両端と中央で文字の高さを変えられます。変化のなめらかさと中央の上下位置を調整できます。
斜めテキスト - Oblique
始点と終点の高さ、終点の上下位置を調整して、文字列に方向感を持たせられます。
図形、パス、ベクター化
シンプルな図形を組み合わせたり、点と曲線を細かく編集したりできます。パスエディターでは、対応する図形やパスレイヤーを調整できます。
用意された図形
長方形、線、楕円、円、三角形、六角形、八角形、星形から始められます。塗り、輪郭線、影を調整でき、長方形は角の丸みも設定できます。
オリジナルの輪郭
既存の図形を独自のエンブレム、装飾、輪郭に変えられます。対応する図形・パスレイヤーの点を2D表示で編集し、商品上で結果を確認できます。
点と曲線のエディター: スケッチから精密な輪郭へ
ロックされていない図形またはパスレイヤーを選択して、ベクター編集に進みます。一度にひとつのレイヤーを編集し、新しい部分を描いたり既存の形状を調整したりできます。
ペンとパスの拡張
ペンで線分を描き足し、既存の点につなげて輪郭を閉じられます。パス上に点を追加したり不要な点を削除したりして、形を整えられます。
点の選択となげなわ
点をひとつ選択するか、範囲選択やなげなわで広い部分を選択できます。ほかの点の位置を保ちながら、選択した輪郭部分を編集できます。
パスに沿って移動
点を自由に、または既存のパスに沿って移動できます。選択した点をまとめて移動して、レイアウトの一部分を変えられます。
ベジェ曲線とハンドル
入側と出側のハンドルで曲率を調整できます。ハンドルを個別に有効にし、独立、角度のみ対称、角度と長さの両方が対称のいずれかを選べます。
点をつなぐ
選択した点を線分でつなげられます。パスを延ばし、輪郭を構成する接続部分を調整できます。
パスの切断
パスを横切る切断線を引いて分割できます。その後、点や曲線のツールで各部分を仕上げられます。
輪郭を広げる・狭める
選択した点を指定した距離だけオフセットできます。水平・垂直の両方向、水平のみ、垂直のみを選び、選択部分の比率を変えられます。
対称軸と反転
軸の位置と角度を設定して、輪郭全体や選択した点を反転できます。軸付近で点をつなぐ距離を調整し、両側の接合を整えられます。
元に戻す・やり直す。 輪郭のバリエーションを試しながら、編集中に以前の操作へ戻れます。
塗りと輪郭線の見た目を調整
塗りの色やグラデーション、輪郭線の太さ、影を設定できます。実線、または線と空白の長さを指定した破線を選べます。線の結合はマイター、ベベル、ラウンドに、端点はバット、ラウンド、スクエアに変更できます。長方形の角はまとめて、または個別に丸くできます。
使用例: エンブレムの半分を描いて軸に対して反転し、曲線を整えます。輪郭線と円弧テキストを加えれば、独自のプリント用モチーフを作れます。
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プレビューをひとつの流れで使えます。レイアウトを準備し、固定要素を管理しながら、お客様のアイデアを加える余地を用意できます。
ツールを実際に見る