新店舗トップページやビーノの特集ページにバナーパーツを利用してカテゴリ一覧を作りたい店舗様のために、ビーノの画像編集機能での作成方法をご用意いたしました！

なお、画像サイズにつきましては、楽天市場へ出店中の店舗様の作成例を参考にしておりますため、必要に応じてご変更いただけますと幸いです。

ビーノの画像編集機能に関する詳細はこちらの記事をご確認ください🙏

カテゴリ一覧画像の作成例

こちらはスマートフォン版新店舗トップページで小バナーパーツを利用して作成されている店舗様の例です。

作成手順

今回は上記作成例を参考に、ビーノの画像編集機能を使って ”枠線あり” のカテゴリ画像を作成してみます。

1. メニュー選択画面で「画像を作成・編集する」をクリック

　

2. 「新規作成」をクリック

　

3. 「自由指定」をクリック

　

4. 横幅のサイズを指定する

お好みのサイズを指定してください。
なお、多くの店舗様が横幅は「540」程度で作成されています。

　

5. 縦幅のサイズを指定する

お好みのサイズを指定してください。
なお、長方形の場合、多くの店舗様が縦幅を「250」程度で作成されています。

　

6. 「決定」をクリック

　

7. 「空白のみ」をクリック

　

8. 左メニューの「シェイプ」を選ぶ

　

9. 「四角形」を選ぶ

　

10. キャンバスいっぱいに四角形を広げる

　

11. 上部メニューバーの「Color」をクリック

　

12. シェイプの色を選ぶ

ここでは作成例を参考に「白」を選んでいますが、お好みのカラーをお選びください。

　

13. 上部メニューバーの「枠線」をクリック

　

14. 枠線の色を選ぶ

ここでは作成例を参考に「黒」を選んでいますが、お好みのカラーをお選びください。

　

15. 枠線の太さを指定する

上部メニューバーの「〇〇px」をクリックして、枠線の太さを指定しょう。

　

16. 枠線の太さを指定する

ここでは「3px」に変更していますが、お好みの太さに変更してください。

　

17. 左メニューの「テキスト」をクリック

　

18. 「Title」をクリック

　

19. フォントを変更する

上部メニューバーの「Roboto」をクリックし、日本語対応のフォントに変更しましょう。

　

20. 日本語のフォントを選ぶ

ここでは「ZEN丸ゴシック」を選んでいますが、お好みのフォントをお選びください。

　

21. 追加したテキストパーツの「編集」をクリック

　

22. カテゴリ名を入力する

例えば、「メンズ」というカテゴリー画像を作成したい場合は「メンズ」と入力します。

　

23. フォントサイズを変更する

上部メニュー場の「サイズ」にある「▼」をクリックして、お好みのフォントサイズを指定してください。

　

24. テキストの位置を調整する

テキストを選んで、左クリックしながら動かすことで移動ができます。

　

25. キャンバス左上の「画像を読み込む」をクリック

サムネイル画像の設定を行います。

　

26. 読み込んだ画像のサイズや位置を調整する

　

27. 画像が完成したらキャンバス右上の「書き出し／保存」をクリック

　

28. 保存タイプは「静止画」を選ぶ

　

29. 画像の保存先を指定する

PC内 もしくは 楽天Cabinet のお好きなほうをお選びください。

　

30. 画面右下の「書き出し／保存する」をクリック

最後に「書き出し／保存する」より作成した画像を保存して完了です✨️

　

各カテゴリ画像の作成が完了したら、ビーノのトップページ（新店舗トップ）作成機能や特集ページ作成機能でバナーパーツを使用して、ぜひオリジナルのカテゴリリンク一覧を作成してみてくださいね！

新店舗トップページでのカテゴリリンク一覧作成方法はこちら
https://lab.biiino.com/faq/create-category-lists-in-new-sptop/