デザインにカスタムテキストレイヤーを追加すると、テキストの動作と見た目を制御する詳細設定を利用できます。これらのオプションを使うと、販売者は固定の要素を追加したり、間隔を調整したり、特別な視覚効果を適用したりできます。

1. 接頭辞と接尾辞

  • 接頭辞：お客様の入力の前に固定のテキスト要素を追加します。
  • 接尾辞：お客様の入力の後に固定のテキスト要素を追加します。

👉 例：接頭辞 = “The”、接尾辞 = “End”に設定し、お客様がCustom Textと入力した場合、最終的な表示は次のようになります。
“The Custom Text End”
お客様の入力によって変わるのは、メインのCustom Textの部分だけです。

接頭辞と接尾辞

2. 文字間隔

カスタムテキストの文字と文字の間隔を調整します。値を大きくすると文字の間隔が広がり、小さくすると狭まります。

3. 線（輪郭）

視認性を高めたり、スタイル効果を出したりするために、テキストの周囲に輪郭線を追加できます。

  • 線の幅：輪郭線の太さを調整します。
  • 外側の線：輪郭線を外側に広げます。
  • 内側の線：輪郭線を内側に描画するため、テキスト自体が太く見えます。

👉 例：赤い外側の線を設定すると、文字の外側に太い縁取りができます。

テキストの輪郭線

4. テキストパターン

この機能を使うと、テキストを画像やテクスチャで塗りつぶせます。

  • ファイルをアップロード：テキストの内側に使用する画像を選択します。
  • 拡大率：テキスト内のパターンのサイズを調整します。
  • 繰り返し：有効にすると、パターンをテキスト全体に並べて敷き詰めます。
  • オフセットX / Y：テキスト内でパターンを水平方向または垂直方向（Y）に移動します。

👉 例：テキストを布のテクスチャ、写真、繰り返しパターンで塗りつぶして、ユニークなデザイン効果を出せます。

テキストパターン

5. テキストの影

この機能を使うと、テキストにドロップシャドウ効果を追加して目立たせることができます。

  • 影の色：カラーピッカーから影の色を選択します。
  • ぼかし：影の縁のやわらかさと拡散具合を調整します。値を大きくすると、よりなめらかで拡散した影になります。
  • オフセットX：テキストを基準に、影を水平方向に移動します。正の値では右に、負の値では左に移動します。
  • オフセットY：テキストを基準に、影を垂直方向に移動します。正の値では下に、負の値では上に移動します。

👉 例：暗い色でぼかしの少ない影を使うと、テキストが浮き上がって見える効果を、明るい色の影を使うと、やわらかいネオンのような輝きを出せます。

6. テキストのグラデーション

この機能を使うと、テキストに複数の色を適用し、色の間になめらかな移り変わりを作れます。

  • 種類：線形（色が直線状に流れる）または円形（色が中心点から放射状に広がる）から選択します。
  • 角度：グラデーションの方向を回転させます（例：上から下は90°、右から左は180°）。
  • カラーストップ：グラデーションで使用する色を追加してカスタマイズします。
  • カラーストップを追加：クリックして色を追加し、複雑な複数色のグラデーションを作成します。

7. 自動複数行

自動複数行を有効にすると、アプリは、定義した最大フォントサイズと最小フォントサイズに基づいて、テキストのレイアウトを自動的に調整します。

アプリはテキスト領域の利用可能な幅と高さを計算し、指定された範囲内で最適なフォントサイズを決定します。テキストが1行に収まらない場合は、可能な限り最適なフォントサイズを維持しながら、内容を自動的に複数行に折り返します。

お客様が入力したテキストが、手動でサイズを変更したり改行したりしなくても、常に指定の領域内に収まるようにしたい場合に、この機能を使用します。

8. テキストをマスクとして使用

テキストをマスクとして使用機能を使うと、テキストを画像で塗りつぶして、印象的なテキストマスク効果を作れます。使用するには、まずテキストレイヤーを選択し、上部のツールバーにある「テキストをマスクとして使用」アイコンをクリックします。テキストが自動的にマスクになり、その下にある画像レイヤーが見えるようになります。

メモ：

  • この機能を使用するには、テキストレイヤーの下に画像レイヤーが必要です。通常の画像レイヤー、画像スウォッチ、ベクター、ベクタースウォッチに対応しています。
  • 「デザイン」タブでは、マスクされたテキストの周囲に青い枠線が表示されます。この枠線は、デザインを編集しやすくするためだけに表示されるものです。ストアフロントや最終的な制作用ファイルには表示されません。

9. 縦書きテキスト

テキストレイヤーを追加し、レイヤーのツールバーにある「縦書きテキスト」ボタンをクリックすると、テキストが横書きから縦書きに切り替わります。文字は左から右ではなく上から下に積み重なるため、背表紙のラベル、縦長の商品エリア、スタイリッシュなレイアウトに便利です。もう一度ボタンをクリックすると、横書きに戻ります。

更新日：2026/09/23