初めてのカスタム商品を発売する準備はできていますか?
カスタムアパレル、テックギア、靴、家具などを作ろうと。WP ConfiguratorとPhotoshopを使えば、デザイン、カスタマイズ、販売の自由度が高まります。
今日からレイヤー商品を作り始め、お客様に期待するインタラクティブなショッピング体験を提供しましょう。
Photoshopでデザイン・スマター
WP Configuratorで最良の結果を得るには、まずPhotoshopでクリーンで整理されたレイヤーを作成しましょう。
その方法は以下の通りです:
-
Photoshopで商品画像を開きます。
-
ペンツールやラッソツールを使って、製品のパーツ(例:ベース、ストラップ、ロゴ)を分離してください。
-
各パーツを別々のレイヤーに配置します。
-
レイヤー名は明確にします(例:base-blue.png、sole-black.png)。
-
キャンバスのサイズはすべてのレイヤーで一定に保ちましょう(例:1000×1000px)。
-
各レイヤーを透明なPNGまたはWebPファイルとしてエクスポートしてください。
プロのヒント: レイヤーマスクや色相・彩度調整レイヤーを使って、デザイン全体を重複せずに複数の色の変化を作り出しましょう。
スピード、SEO、ユーザー最適化 経験
最適化された画像フォーマット
圧縮されたPNGやWebP画像を使って、読み込み時間を短縮します
記述的ファイル命名
名前ファイルやレイヤーを記述的に(例:backpack-red-leather.png)
アクセシビリティのためのオルトテキスト
アクセシビリティとSEOを向上させるために、各画像レイヤーにオルトテキストを追加しましょう
一貫したキャンバスのアライメント
すべての画像が同じキャンバスサイズで完全に揃っていることを確認してください。
最適化されたファイルサイズ制限
ファイルサイズは小さく保ちましょう(理想的には1枚あたり300KB未満)。
最適化された画像フォーマット
圧縮されたPNGやWebP画像を使って、読み込み時間を短縮します
記述的ファイル命名
名前ファイルやレイヤーを記述的に(例:backpack-red-leather.png)
アクセシビリティのためのオルトテキスト
アクセシビリティとSEOを向上させるために、各画像レイヤーにオルトテキストを追加しましょう
一貫したキャンバスのアライメント
すべての画像が同じキャンバスサイズで完全に揃っていることを確認してください。
記述的ファイル命名
名前ファイルやレイヤーを記述的に(例:backpack-red-leather.png)
よくある質問 質問
レイヤーが正しく揃っていません
すべてのエクスポートレイヤーが同じキャンバスサイズと位置を持つことを確認してください。
グループごとに一つの選択肢だけを確実にするにはどうすればいいですか?
各グループの設定で「複数」を無効にし、「子の選択解除」を有効にしてください。
常に表示されるデフォルトのレイヤーが欲しいです
ベースレイヤーとしてアップロードし、「ロード時にアクティブ」とマークし、選択コントロールは割り当てないでください。