通学の際、スターバックスの新作のフラペチーノの情報が書かれた店頭POPをチラ見する。今回のフラペチーノのPOPは鮮やかなピンクが目を引き、そのまま気になりホームページを見てみたらとても華やかで工夫の凝らされたサイトだった。

***************
サイト名 : スターバックスのさくらストロベリー白玉フラペチーノ
アドレス : https://www.starbucks.co.jp/cafe/sakura-bloom/
ターゲット : 若者(10代~20代)、女性
意図 : 季節限定商品であるフラペチーノの紹介
色 : ピンク、レッド
メモ : グラフィカルで賑やかで華やか
***************

とてもキラキラしていて華やかなページである。
商品であるフラペチーノと桜のイメージがバッチリと合っており、きれいなピンク色のイメージでまとまっている。

ページ内リンクのナビゲーション

ページ内リンクのナビゲーションはそれぞれのリンクの項目が桜の花びらの形に工夫されている。
また夜の桜がテーマのカシスのフラペチーノがアクセントで目立つようになっている。

フラペチーノの写真

イメージ写真も一口にピンクといっても様々なトーンのピンクを使用している。淡いピンクから濃いピンク、グラデーションや桜の花の画像を使い技巧が凝らされている。
フラペチーノのトッピングの説明の白玉の部分の背景は白い桜の切り抜きにするなど、色のイメージを大切にしている。

桜の画像

イメージとしてサイト内にある桜の画像も、切り抜きの画像を手前に奥にはぼかした画像を重ねている。この一工夫が大事であり、奥行きを演出している。


スクロールすると、現れる夜の桜がテーマのカシスのフラペチーノは、全体の桜のページのイメージを崩さずに良いアクセントになるようなデザインになっていると思われる。

桜の花のふちで囲まれた写真
桜の花びらで切り取られた写真

写真の切りとり方も工夫がされて桜のイメージで統一されている。
桜の花びらの輪郭に沿った文字はどうやってコーディングしたのだろうと見てみたら、画像になっていました。文字の部分を画像にして表現する方法や加工した画像の見せ方など、華やかでグラフィカルな見せ方が勉強になりました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です