WebデザインスクールHerTechの架空LP課題
制作期間:3週間
制作時間:50~60時間
使用アプリケーション:Studio、Photoshop
制作範囲:キャッチコピー、一部トンマナ、ワイヤーフレーム、LPデザイン、配置
ペルソナ、トンマナ設定
課題のため、設定ターゲット像がございました
商品名: ベリー×ベリー ルビーフラッペ
VERY×BERRY Ruby Frappe
商品価格: S 500円 / M 550円 / L 580円
商品特徴:・RUBY COFFEE青山一丁目店のOPEN記念の期間及び店舗限定の商品
・RUBY COFFEEで初めての「コーヒーを使用しない」フラッペ
・美しい赤を表現するためにベースにはストロベリーを中心に3種のベリーを使
用
・果汁だけでなく、果肉感のあるピューレを合わせることで、本物の果物を食
べているかのようなフレッシュな甘酸っぱさを演出
・ホイップクリームには、マスカルポーネチーズを加えており、なめらかなコク
と優しい甘みをプラス
・マスカルポーネホイップを混ぜて飲むと、ベイクドチーズケーキのような味わ
いも楽しめる
・ホイップクリームの上には、細かく砕いたチョコレートを載せ、食感のアクセ
ントとカカオの香りをプラスしより満足感のある仕上がりに
新作フラッペの位置付け: 新規顧客の獲得が狙い。コアなファン層よりも話題性や新規性
に関心の強い客層にRuby Coffeeを利用してもらうことを目的と
した新商品キャンペーン
ターゲット: 20~30代の女性がメインターゲット。新しいものが好きで、旬なもの、話
題性のあるものは一度自分で試してみたい人。日常的に使うSNSは
Instagramで、映え写真を投稿していいねをもらうことが大好き。
提供価値: 期間限定のフレーバー、限定パッケージによる特別感、映える被写体を提供
することでSNSへの投稿欲求を満たす
提供方法: キャンペーンによる認知獲得 / 店頭での購買体験 / SNSでのシェア促進
新商品として注力したいポイント: 新規顧客獲得と話題性の両立。若い女性の興味を唆
るデザイン性で大きな反響を生みたい。
キャンペーン内容:
友達と一緒に買うと1杯無料！#ルビ友 #ルビーフラッペ で投稿してさらにもう一杯！
新作フラッペ発売記念 “ルビ友”キャンペーン！
<参加方法>
1. Instagram公式アカウント @rubycoffeeをフォロー
2. 友達と一緒にRuby Coffeeに来店
3. 2人でフラッペを注文し、rubycoffeeのフォロー画面を見せると1杯無料に！
4. 購入したルビーフラッペを友達と一緒に写真撮影
5. #ルビ友 #ルビーフラッペ をつけてInstagramに投稿すると、抽選で100名の方にルビーフラッペ無料チケットが当たる！
<キャンペーン期間>
202X年XX月1日〜202X年XX月30日
<対象店舗>
RubyCoffee 青山一丁目店 のみ適応のキャンペーンとなります
<当選発表>
当選者の方にInstagramのDMにて当選発表連絡を行います。
※@rubycoffeeからのDMを受け取れるように設定変更をお願いします
以下、新たに設定したもの
- キャンペーンキャッチコピー: SAY、ルビー!!友達と一緒に#ルビ友になりませんか？
- カラー: ・ベースカラー #FFE7E6
・メインカラー #FFBFBF
・アクセントカラー #E43D3D
#FFFFFF
・フォントカラー #4D3131
- フォント: ・和文フォント Shippori Mincho
・英文フォント Cardo
1stView
使用アプリ: Studio、画像制作 Photoshop、支給画像使用
CVボタン先: Cafe Instagramアカウント
意識した点
- 商品を大きくし、何のLPか分かりやすくした
- 商品画像にベリーをイメージした円と商品名を配置し、女性へ可愛い印象がつくようにした
- 疑問符のキャッチコピーのみを配置し、先を読ませたくなるようにした
- CVボタンに一言つけ、アクションにつながるようにした
2ndView
使用アプリ:Studio、Photoshop
CVボタン先: Cafe Instagramアカウント
2ndView内容: ・キャンペーン詳細
・キャンペーン期間、店舗
意識した点
- 1stViewの画像にて使用した円をタイトルに使用し、統一感を演出
- キャンペーン参加方法を順番に記入。その際に何をするのか視覚的にもわかるようにアイコンを使用。ボックスカラーを2色にしユーザーに飽きさせないデザインにした
- キャンペーン期間、店舗限定を主張し、限定による誘致を誘導
- CVボタンのコメントを変え、2ndViewに合うようにした
3rdView
使用アプリ:Studio、Photoshop
CVボタン先: Cafe Instagramアカウント
3rdView内容: ・商品説明（商品名、値段）
・味の説明文章
・限定期間、店舗
意識した点
- 1stViewの画像にて使用した円をタイトルに使用し、統一感を演出
- 最初にドリンクと使用ベリーの画像を大きく配置し、ドリンクのイメージを印象付ける
- 商品特徴を3つに分け、伝えたい部分は大きく、影をつけ分かりやすいように説明に合う画像を配置
- 最初と最後に商品説明をつけ、印象付けるようにした
- CVボタンのコメントを変え、3rdViewに合うようにした
4th View
使用アプリ:Studio、Photoshop
CVボタン先: Cafe Instagramアカウント
4thView内容: ・店舗情報、連絡先
・店舗Instagram情報
意識した点
- 1stViewの画像にて使用した円をタイトルに使用し、統一感を演出
- iframeを入れ、場所が分かりやすいようにした
- Instagramのアイコンを配置し、画像でも探せるようにした
- CVボタン、色の違うボックスとカフェのロゴで最後まで読んだことがわかるようにした
最後までお読みいただきありがとうございます。
全体的にサイドの余白を統一し制作しました。
中でも大きく見せたい画像、タイトル、iframeは余白は使わず全面に配置し分かりやすいようにしました。
ワイヤーフレームやトンマナ設定を1から作った初めてのLP制作の作品で、デザインをこれからも沢山作っていきたいと思うようになった作品です。
反省点を活かし精進していきます。