【架空案件】RubyCoffee フラッペ紹介

制作の流れ

【カラー】

赤オレンジを基調としてデザインしました。ターゲットをのペルソナを「可愛いものをInstagramにアップすることが好きな20代～30代女性」と想定し、趣味嗜好を調査しました。その結果、「ときめき」、「甘酸っぱい」、「愛らしい」、「ガーリー」をキーワードとして、カラー選びを行いました。

更に、「可愛いものが好きな20代～30代」をターゲットとしたときに、世界観をつくりこむことを優先しました。そのため、ＦＶの背景色と同じ色をベースカラーとして採用として採用しています。

【タイポグラフィ】

和文フォントはゴシック体の中でも繊細で、ガーリーさを表現しやすいかんじゅくゴシック、

英文フォントも同様で、女性をターゲットにしたサイトとして丸くかわいらしさを感じられるroxborough CFを使用しています。

【情報設計】

FVでは、Webサイトの顔となるFVでは真ん中にフラッペの画像を配置しました。また、ペルソナを「新しいものが好きな女性」と想定し、「150店目オープン記念」の情報を配置しました。また、かわいらしいフラッペのすぐ下に「期間限定」と入れることで、ターゲットの時間軸に訴求し、ページの離脱率を下げる工夫をしています。

2ndビューでは、離脱率が低いうちにCV獲得しやすい内容を配置したいと考え、キャンペーンについて掲載しています。

参加方法の一番初めと終わりにキャンペーンに参加に必要な条件である「インスタグラムのフォロー」のボタンを配置することでCV獲得しやすいデザインにしています。

3rdビューではフラッペの特徴についてデザインをしています。

2ndビューにフラッペの特徴を掲載しなかった理由としては、ターゲットのペルソナを想定した時に、「フラッペのこだわり」よりも「FVでフラッペを一目見たときの可愛さやときめき」を大切にしていると考えたためです。

また、ターゲットには「可愛い」と感じつつ、フラッペの味のイメージをしてほしかったため、背景は白を使用せず赤オレンジにすることで、「ガーリーさ」を大切に世界観をつくりこみました。

4thビューではマップを掲載し、最後までwebサイトに残ったターゲットの行動を促すようにしています。

【工夫したポイント】

2ndビューではキャンペーン内容の世界観の作りこみに苦戦しました。

初めはSTUDIOの図形ツールで作りこんでいたのですが、文字だけではキャンペーンの良さが伝わりづらいデザインになりました。そのため、2ndビューの頭部分をCanvaで作りこみ、女性二人の素材、フラッペのインスタグラム投稿画像を配置し、キャンペーンのイメージをしてもらいやすいように訂正しました。

また、キャンペーンの参加方法の箇所は特にCV獲得に繋がるセクションだと考え、参加手順ごとにアイコンを挿入し、こちらもイメージを持ちやすいよう設計しました。