独自のバッジ画像をアップロードする
コンピュータからファイルをアップロードするか、直接の画像リンクからインポートして、画像バッジに独自のアートワークを使用します。
Sami Product Labelsでは、内蔵の画像ライブラリに加えて、画像バッジに独自のアートワークを使用できます。コンピュータからファイルをアップロードするか、URLから画像をインポートできます。アップロードした画像は独自の画像リストに保存されるため、後で他のバッジでも再利用できます。
バッジエディタに表示される推奨事項に合った画像を準備します。
| 要件 | 推奨値 |
|---|---|
| ファイル形式 | PNG、JPG、SVG |
| 最大サイズ | 5 MB |
| サイズ | 512 × 512 px |
画像ピッカーを開く
Section titled “画像ピッカーを開く”-
Badges & Labelsを開く
Section titled “Badges & Labelsを開く”Shopify管理画面で、Sami Product Labels > Badges & Labels を開きます。
-
画像バッジを作成する
Section titled “画像バッジを作成する”Create badge をクリックし、Choose badge type で Image badge カードの Create をクリックします。
既存のバッジの画像を変更する場合は、代わりに、そのバッジの行にある鉛筆アイコンをクリックし、Content セクションの Change Image をクリックします。
Image badgeを選択して、グラフィックを使用するバッジを作成します。
-
「Design your Images」に切り替える
Section titled “「Design your Images」に切り替える”右側に Select Image パネルが開き、デフォルトの画像がすでに適用されています。Source の隣にある Design your Images をクリックします。
このタブには、ストアに属するものがすべて表示されます。アップロードした画像、URLからインポートした画像、AIで生成した画像です。最初の2つのタイルは、Upload from URL と Upload image のアクションです。
Design your Imagesには、独自のアートワークと、Upload from URLおよびUpload imageのアクションがあります。
画像を追加する
Section titled “画像を追加する”アートワークに合った方法を選択します。
-
「Upload image」をクリックする
Section titled “「Upload image」をクリックする”Upload image タイルをクリックします。コンピュータのファイルピッカーが開きます。
Upload imageをクリックして、コンピュータ上のファイルを参照します。
-
ファイルを選択する
Section titled “ファイルを選択する”5 MBまでのPNG、JPG、SVGファイルを選択し、ファイルピッカーで確定します。画像がアップロードされ、Design your Images に新しいタイルとして表示されます。
-
画像を適用する
Section titled “画像を適用する”新しいタイルをクリックします。緑色のチェックマークが表示され、バッジのプレビューがすぐに更新されます。パネルの下部にある Select Image をクリックして確定し、パネルを閉じます。
タイルをクリックし、Select Imageをクリックして、バッジに適用します。
アートワークがすでにオンラインにある場合（たとえば、Shopifyの コンテンツ > ファイル ライブラリ）に使用します。
-
「Upload from URL」をクリックする
Section titled “「Upload from URL」をクリックする”Upload from URL タイルをクリックします。Paste a direct image link フィールドがある小さな Upload from URL パネルが開きます。
直接の画像リンクを貼り付けて、Add imageをクリックします。
-
直接の画像リンクを貼り付ける
Section titled “直接の画像リンクを貼り付ける”https://example.com/badge.pngのように、画像ファイル自体で終わるリンクを貼り付けます。画像を表示しているだけのウェブページへのリンクは機能しません。 -
「Add image」をクリックする
Section titled “「Add image」をクリックする”The image uploaded のメッセージが表示され、画像が Custom Image という名前の新しいタイルとして Design your Images に追加されます。
Something went wrong, please try again と表示された場合は、リンクをダウンロードできませんでした。以下のトラブルシューティングをご覧ください。
インポートした画像は画像リストに保存され、後で再利用できます。
-
画像を適用する
Section titled “画像を適用する”新しいタイルをクリックし、Select Image をクリックします。Content セクションに、画像名と、Change Image および Remove のアクションが表示されます。
バッジに、独自の画像が使用されるようになりました。
アップロードした画像を管理する
Section titled “アップロードした画像を管理する”Design your Images の任意のタイルにカーソルを合わせると、2つのアイコンが表示されます。
- 鉛筆 — 画像の名前を変更または編集します。
- ゴミ箱 — 画像をリストから削除します。
パネルの下部にある Edit with AI をクリックして、AIエディタで選択した画像を編集することもできます。
バッジを仕上げる
Section titled “バッジを仕上げる”画像を適用したら、次の手順を行います。
- Size セクションでバッジのサイズを設定します。画像が引き伸ばされないよう、Lock aspect ratio にチェックを入れたままにします。
- Position を調整し、Products タブと Display タブでターゲット設定を行います。
- Active または Draft を選択し、Save をクリックします。
すべての手順については、画像バッジを作成するをご覧ください。
トラブルシューティング
Section titled “トラブルシューティング”| 問題 | 対処方法 |
|---|---|
| Something went wrong, please try again | リンクが直接の画像リンクではない、ファイルが非公開である、またはホストが他のサイトによる画像の読み込みをブロックしています。別のホストを試すか、ファイルをダウンロードして、代わりに Upload image を使用してください。 |
| バッジがぼやけて見える | 小さな画像を拡大するのではなく、より大きな画像（約512 × 512 px）をアップロードしてください。 |
| 画像の周りに白い枠がある | 背景が透明なPNGまたはSVGを使用してください。 |
| ファイルが拒否される | PNG、JPG、SVGのいずれかで、5 MB未満であることを確認してください。 |
次のステップ
Section titled “次のステップ”- 画像バッジを作成する — 画像バッジの完全なワークフロー。
- バッジのサイズを変更する — 画像の表示サイズを微調整します。
- バッジの位置を変更する — 商品画像上でバッジを移動します。
- AIで画像を生成する — プロンプトからバッジのアートワークを作成します。