
1.制作情報
制作時間 情報設計40分 デザイン4時間10分 合計約5時間
制作範囲 ワイヤーフレーム作成/デザイン制作
制作の流れ 情報設計→→使用素材をダウンロード(AdobeStock・FreePik・写真AC) →Photoshopで編集・制作
ツール Photoshop
納品形式(サイズ/ファイル形式) 1080px × 1080pxの長方形/PNG
2.情報設計
①背景・目的(誰が/どこで/誰に/何のために)
架空の化粧品ブランドが/
自社ECサイトトップページで/
季節ごとにコスメや香りを変える習慣がある・トレンドや限定商品に関心が高い・
20~30代女性に/
❶春限定の商品の認知拡大のために
❷商品ページに飛んで購入してもらうために
☆指定項目
・トンマナ:春らしい配色/清潔感、みずみずしさ
・必須項目:春限定/SAKURA Fragrance/私をアップデートする、春の香り/
VIEW MORE
・必須要素:香水の写真
②解決したい課題
限定商品の注目率UP・購入数UP
③自分の役割
春の限定の香水が出ていることを一目で伝える
春らしい季節感を感じてもらうことで購買意欲を促進させる
商品に興味を持ってもらい、商品(SAKURA Fragrance)の紹介LPを見てもらう
(結果、購入に繋げる)
④デザインの根拠
配色について
・桜のピンクと、そのピンクとコントラストがつき、かつ春のフレッシュな感じや指定トンマナにある清潔感を出すことができるライトグリーンを使用し、見ただけで春の到来を感じてもらえるような配色にしました。
・メイン部分のデザインは基本ピンクでまとめて統一感を出しました。ピンクの中で彩度等に変化をつけてメリハリをつけています。そして下部のCTA部分のみにライトグリーンを使用することで、メイン部分とのコントラストを明確にし、トンマナは保ちつつCTA部分を目立たせました。
フォントについて
若年層向けのバナーのため、ウェイトは細めの方がトレンド感が出て刺さりやすいと考えました。可読性を担保するためにシンプルなヒラギノ角ゴシックを使用しています。(上部のLIMITED PERFUMEはあしらい程度に入れている文言のため、差別化するためにデザイン性がやや高めのフォントを使用しました。)
デザインについて
・香りを示唆する素材画像をオーバーレイでさりげなく入れて、その流れに沿って花びらの素材を添えることで、桜の香りがフワッとこちらに届くようなイメージを与えられるようデザインしました。
・花びらや桜の花の写真をテキストに若干被せて載せたりCTAの境目に少し載せることで視線誘導と奥行き感の演出を同時に行いました。
・指定トンマナにあるみずみずしさに関しては、使用する色味の明るさや光感で表現したいと思い、花びらの色味調整をおこなったり香水のボトルに光を入れました。
⑤成果・振り返り、工夫ポイント
派手すぎる色を使わずCTAを目立たせることに成功したデザインだと思っています。
今回は架空ブランドのためブランドロゴがありませんでしたが、実案件の場合はロゴを右上に配置し、バランスを見て、現在上部中央にあしらいとして入れている「LIMITED PERFUME」のテキストは削除するかもしれません。
