URL
架空のクラフトビールブランド『Color Hops（カラーホップス）』
概要
クラフトビールブランド「Color Hops」のec販売開始に合わせて、ブランドの世界観と魅力を伝えるLPを新たに制作。ビビッドなフルーツカラーや泡の演出など、商品ごとの特徴を活かしながら、初見でも楽しく選べるUIと構成を意識しました。
担当範囲
企画 / デザイン / コーディング / レスポンシブ対応
使用アプリ・言語
Illustrator / Photoshop / HTML / CSS / jQuery / Visual Studio Code
制作時間
| 企画・構成 | 6時間 |
|---|---|
| デザイン | 26時間 |
| コーディング | 10時間 |
| レスポンシブ対応 | 14時間 |
ターゲット
20〜30代の女性
日常をちょっとおしゃれに楽しみたい人や、SNSで話題の感度の高い商品に興味がある層を想定。センスの良いギフトや自分へのご褒美を求める人を主なターゲットとする。
コンセプト・デザイン
「今日の気分に、今日の色を。」をキーワードに、ビールを“色”で選ぶ楽しさをデザインに反映。白背景から始まり、スクロールに応じて各フレーバーごとに背景色が変化。泡のアニメーションや波状のセクション切り替えで「ビールを飲み進めている」ような体験を演出しました。
使用カラー
白と深みのあるブラウンを基調に、落ち着きの中に親しみやすさを演出。各フレーバーに合わせたポップな背景色で、個性と楽しさを色でも表現しています。
- #ffffff
- #5c4033
- #f7c35f
フレーバーごとの背景カラー（例）
- #fff6b2
- #ffd5db
- #eadaf5
コンバージョン
「飲んでみたい」「誰かに贈りたい」と思った時に、スムーズに購入まで進めるよう、フレーバー紹介からECサイトへ自然に誘導。視覚的魅力と機能性を両立し、購入行動を促進する構成を意識しました。
工夫した点
- ファーストビューの白背景と余白により、商品のカラーが引き立つ構成
- スクロールに連動した背景色の変化や泡アニメーションで、楽しさと臨場感を演出
- ドット絵風のイラストを取り入れ、遊び心と親しみやすさをプラス