今回は、デザイナーのさやかさんをゲストに迎え、eBayストアの印象を劇的に変える「ストアバナーのデザイン術」について解説します。
デザインに自信がない方でも、ショップのブランディングに欠かせないバナーを簡単に作成できます。
- 無料ツール「Canva」を使った基本手順
- レイアウトやフォント選びで失敗しないプロ教えるテクニック
- スマホでバナーが見切れないようにする方法
当ブログを運営しているAwiiinでは、今回ご紹介するような貴重な情報をコミュニティ内で配信しています。
ご興味のある方は、以下のサイトより詳細をご確認ください。
■初心者もベテランも歓迎のAwiiinコミュニティへ
- 月額5,500円で利用可能
- 埼玉県を代表する企業100選にも選ばれました
- AI搭載の一括編集ツール「Specifics-IN」
＼ 無理な勧誘は一切行っておりません ／
＼ お好きな時間を予約できます ／
さやかさんのプロフィール
さやかさんは、インスタグラムを中心に活躍するデザイナーで、個人や法人向けにデザイン制作や研修を行っています。
さやかさんの主な実績をご覧ください。
- インスタグラムのフォロワー数：24.3万人
■本の内容
- デザイン初心者向けに、制作前の思考法（「デザインの目的は？」「誰に伝えたいのか？」など）を解説
- 会社の業務で必要になることが多い制作物のデザインポイントを紹介
例：バナー、フライヤー、名詞、プレゼン資料 など - デザインに困っている・悩んでいる方にとって「お守りになる1冊」
ゼロからバナーを作る方法
バナーを作成するのにおすすめなのが、無料で使えるデザイン作成ツール「Canva」です。
「Canva」は誰でも簡単に利用できるので、以下の手順で実際にバナーを作成してみましょう。
幅を5000、高さを1000と入力し、「新しいデザインを作成する」をクリックする。
設定したカスタムサイズの画面が表示される。
お好きな背景やeBayで登録しているショップ名を挿入する。
具体例：ほんわか系のアニメショップ
具体例：元気な感じをイメージしたキッズ系のショップ
上手にデザインを作成するには、次の章で解説する各テクニックをご活用ください。
レイアウト・配置のおすすめテクニック5選
デザインを作成する準備ができたら、どのようなレイアウト・配置にするかを決めます。
以下のテクニックを活用して、素敵なデザインを作成しましょう。
- 画像によって配置を調整する
- 素材を見切れるようにする
- 画像をバナー枠より広めに設置する
- 図形を散りばめる時は角度を少し変える
- 画像の雰囲気を変える
➀画像によって配置を調整する
さやかさん柄が強い場合は、バナー内に素材を置かない方が見やすいです。
②素材を見切れるようにする
さやかさんわざとバナーから見切れるように素材を配置するのも、おすすめのやり方です。
③画像をバナー枠より広めに設置する
さやかさん余白がまったくなく、ピッタリと画像を配置してしまうと、余白が残ってしまうことがあるので注意しましょう。
④図形を散りばめる時は角度を少し変える
さやかさんただ図形をコピーするだけではなく、サイズを変えたり、角度を変えたりするとデザインの見え方がぐっと良くなります。
⑤画像の雰囲気を変える
さやかさん画面上部にある編集→フィルターで、好きな雰囲気の画像に変えられます。
文字・フォントのテクニック6選
文字やフォントもデザインを映えさせるために、重要な要素のひとつです。
ここからは、以下のテクニックについてご紹介します。
- フォントはデザインの雰囲気に合わせて選ぶ
- 文字色は画像の中の色から選ぶ
- 背景に合わせた文字色にする
- タイトルのフォントは太字を選ぶ
- 背景を暗くすれば文字が映える
- 袋文字を使用する
➀フォントはデザインの雰囲気に合わせて選ぶ
さやかさんおすすめのカテゴリ―からデザインに合うものを選択し、自分のイメージに適したフォントを選びましょう。
②文字色は画像の中の色から選ぶ
さやかさん文字色をどんな色にすればいいか迷った場合は、写真の色を参考にするのも良いでしょう。
③背景に合わせた文字色にする
さやかさん薄すぎても見えなくなってしまうので、バランスが重要ですね。
④タイトルのフォントは太字を選ぶ
さやかさんフォントは太めの方が存在感が出るので、ショップ名を覚えてもらえる可能性はありますね。
⑤背景を暗くすれば文字が映える
さやかさん背景の画像を活かしつつ、文字もはっきり分かるのでおすすめです。
⑥袋文字を使用する
さやかさん背景の画像を薄くしたくない場合には、袋文字が最適です。
ただし、袋文字を使用すると反対に見えにくくなるケースもあるので、フォントとの相性を考慮して使いましょう。
図形・線の活用テクニック6選
図形や線を上手く活用できれば、画像が無くても素敵なデザインを作成できます。
以下の6つのテクニックを身につければ、バナー以外での作業も大幅に効率が上がるでしょう。
- バナーのラインを変える
- 斜めブロックを配置する
- 長方形を文字の下に設置する
- 罫線を設置する
- ブロックを隅に設置する
- 丸を設置する
➀バナーのラインを変える
さやかさんラインの幅や色を変えるだけで、ガラッとイメージが変わりますよね。
②斜めブロックを配置する
さやかさんブロック自体があるかないかでも、雰囲気がだいぶ違うのではないでしょうか。
さやかさんeBayは基本英語表記なので、英語のフォントを選択しましょう。フォントの隣に英語表記がされているものが、英語フォントになります。
③長方形を文字の下に設置する
さやかさん線（画面下の長方形）があるかないかで、イメージが大きく異なります。
④罫線を設置する
さやかさん罫線の太さや色を変えるだけでも、バナーの雰囲気はだいぶ変わりますよね。
⑤ブロックを隅に設置する
さやかさんブロックを設置する際は、角度が変わらないように、ひとつ目のブロックをコピーして角度を変えずに設置してください。
⑥丸を設置する
さやかさんCanvaのデザインを使用している場合、丸を追加することで、オリジナリティが出せます。
また、丸のサイズをそれぞれ変えることで、さらに魅力的なデザインになります。
Canvaの操作・効率化テクニック
さやかさんCanvaの有料プランに入っていなくても、図形は無料で使えるので、おすすめの機能です。
ただし、ショートカットキーは半角入力にしておかないと利用できないので、注意してください。
また、以下のショートカットキーも作業効率アップにつながります。
さやかさん+Dを入力すれば、同じ図形を連続で挿入できるから、すごく便利ですね。
スマホでバナーが見切れないようにする方法
eBayをスマホアプリで確認すると、バナーの左右が見切れている（表示されない）ことがあります。
見切れないためには、事前に文字を入力する場所を確保する必要があります。
主な手順は、以下のとおりです。
図形をバナーの中央にくるように、中央揃えで配置する。
両サイドは、見切れる可能性があるので、余白のままにする。
ファイル→設定→「定規とガイドを表示」をクリックする。
定規が表示される。
定規が表示されている箇所から、クリックしたまま、長方形の両端にまで持ってくる。
長方形を削除すると、紫のガイドが左右に表示されたままになります。
さやかさん紫の内側に文字を入れれば、文字が見切れることがなくなります。
※ただし、お使いのスマホによっては、見切れることなく表示されることもあります。
なお、ガイドがデザインを確認するのに邪魔な場合は、「SHIFT+ｒ」を押せば、ガイドの表示を変更できます。
まとめ｜デザイン次第でeBayでの見え方が大きく変わる！
今回は、デザイナーのさやかさんにCanvaを使ったバナー作成のテクニックについて解説しました。
- Canvaでゼロからバナーを作成する手順
- レイアウト・文字・図形を活用し、見栄えを良くするテクニック
- スマホ表示でバナーが見切れないようにするためのガイドライン設定
ご紹介したテクニックを使えば、誰でも簡単に見栄えの良いバナーが作れます。
ぜひ、試してみてください。
今回も最後までご覧いただき、ありがとうございました。
ご紹介した内容は動画でも解説していますので、併せてご覧ください。
バナーのデザインも重要ですが、出品している商品の「item specifics」を埋めることはさらに重要です。
「item specifics」の各項目が埋まっていないと、SEOや売上に影響しかねません。
Awiiinでは、「Specifics-IN」という出品作業を効率化するツールをご用意しています。
Specifics-INの特徴は、以下のとおりです。
- タイトル生成、商品説明生成、item specificsの自動挿入などのAI機能を搭載
- 商品の画像解析による説明文の自動生成
- 手動出品の精度を保ちながら一括出品が可能
- 従来の手作業に比べ、出品にかかる時間を最大80％削減
- 一括管理機能で価格変更や不要商品の削除が簡単に
- SEOに最適化されたタイトル・説明文の生成で、商品のインプレッションとアクセス数を増加
- 詳細な価格設定や手数料計算で利益率を最大化
Specifics-INはeBayセラーにとって、出品作業を効率化し、売上を向上させるための強力なツールとして注目されています。
ご興味のある方は、以下のボタンをクリックしSpecifics-INの詳細をご確認ください。
当ブログでは初心者さん向けの記事も多数ご用意していますので、ぜひお読みください。
