スクール課題:ECサイトのお取り寄せ特集ページ告知

制作したバナー

概要

デザインスクールSHElikesの課題で、ECサイトのお取り寄せ特集の告知バナー制作に取り組みました。

使用ツール:Photoshop

制作時間 :12時間

製作時期 :2022年11月

要件

掲載場所・企画内容全国の名産品やスイーツのECサイトのトップページ、数ある商品からピックアップした商品の特集ページを告知
ターゲットECサイトのユーザー(30-40代女性)
作成のポイントそれぞれのお店から集められた写真は構図も色合いもバラバラ。数も6つと多めの写真をどうまとめるか。
サイズ横960px × 縦540px
内容コピー
おうちで楽しむお取り寄せ特集

要素
商品の中から選ばれた6つのスイーツの写真



写真は全て利用する
色補正・トリミング・大きさの変更は自由

工夫したところ

1.画像

コピーの「おうちで楽しむ」と「おとりよせ」からにぎやかさをイメージして、中央の画像を台形にして広がりをもたせました。写真のトーンは全体的に明るく、温かみが出るように、画像の補正をして6つの素材の世界観を合わせました。

2.文字背景のあしらい

やわらかい雰囲気を出すために、曲線のある楕円に。少し透過させることで、商品画像の雰囲気もわかるようにしました。

3.タイトルのあしらい

「おとりよせ」から連想した「いつもよりちょっと特別」な雰囲気を演出するためにフォントは明朝体。「全国の名産品を選ぶわくわく感」、「たくさんの商品がある」から、5つのカラーをポイントで使用して、にぎやかな印象にしました。

4.コピーのあしらい

「おうちで楽しむ」から、「家族と一緒に楽しむ、心のあたたかさ」を連想して、丸みのあるやわらかいフォントを使用しました。左右のキラキラのあしらいで「ちょっと特別」なイメージを表現しました。

制作を通して学んだこと

フォントの一部への色の付け方

あしらいとして、ブラシレイヤーとクリッピングマスクを用いて、フォントの一部分にだけ色をつける方法を学びました。

画像補正の方法

別々の画像6枚の世界観を合わせるために、Camera Rawフィルターを用いて、画像の補正をする方法を学ました。

画像のクリッピングによる印象の違い

画像をどのような形にクリッピングするかによって、与える印象が異なることがわかりました。本バナーでは、当初、すべての商品画像を四角形にクリッピングしていましたが、「わくわく」した雰囲気が出ませんでした。そのため、中央の画像のみ外側に広がるような台形にして、「わくわく」した雰囲気を出すことができました。