Facebook 制作について
Logo

【HerTech架空案件】Ruby Coffee新作フラッペ紹介LP

クレジット
Avatar
WEBデザイナー
【HerTech架空案件】Ruby Coffee新作フラッペ紹介LP-1
シェア
制作ノート
制作について

⚫︎制作の流れ

クライアントへのヒアリング後、ペルソナを設定し、訴求ポイントを整理。次にワイヤーフレームを作成し、情報構成とテキスト量についてクライアントと合意形成。その後、デザインのトンマナを固め、デザインカンプ制作に着手。ファーストビューを先行して制作し、全体のイメージを確認いただきながら進めました。担当範囲はデザイン全般です。

⚫︎カラー

新発売のフラッペにはストロベリーを中心に3種類のベリーを使用したドリンクなので、それに合わせたイメージのカラーを選びました。

⚫︎タイポグラフィ

サイトのゴシック体のフォントはNoto Sans JP、ファーストビューのキャッチコピーには游ゴシックを使いました。

⚫︎情報設計

ファーストビューでは、メインビジュアル、キャッチコピー、期間限定情報、CVボタンを最初に目に入る位置に配置し、ユーザーを引きつけて、すぐにアクションを起こせるよう意識しました。

【工夫したポイント】

アクションを起こしやすい最初の1stビュー、キャンペーン内容が詳しく載っている3rdビュー、最後に4thビューの3箇所にCVボタンを設置しました。

2ndビューでは商品情報、味、食感、こだわった点を写真付きでわかりやすく紹介しました。

キャンペーンの参加方法はSTEP1〜STEP4を枠で区切ることでわかりやすくしました。

シェア
制作について

⚫︎制作の流れ

クライアントへのヒアリング後、ペルソナを設定し、訴求ポイントを整理。次にワイヤーフレームを作成し、情報構成とテキスト量についてクライアントと合意形成。その後、デザインのトンマナを固め、デザインカンプ制作に着手。ファーストビューを先行して制作し、全体のイメージを確認いただきながら進めました。担当範囲はデザイン全般です。

⚫︎カラー

新発売のフラッペにはストロベリーを中心に3種類のベリーを使用したドリンクなので、それに合わせたイメージのカラーを選びました。

⚫︎タイポグラフィ

サイトのゴシック体のフォントはNoto Sans JP、ファーストビューのキャッチコピーには游ゴシックを使いました。

⚫︎情報設計

ファーストビューでは、メインビジュアル、キャッチコピー、期間限定情報、CVボタンを最初に目に入る位置に配置し、ユーザーを引きつけて、すぐにアクションを起こせるよう意識しました。

【工夫したポイント】

アクションを起こしやすい最初の1stビュー、キャンペーン内容が詳しく載っている3rdビュー、最後に4thビューの3箇所にCVボタンを設置しました。

2ndビューでは商品情報、味、食感、こだわった点を写真付きでわかりやすく紹介しました。

キャンペーンの参加方法はSTEP1〜STEP4を枠で区切ることでわかりやすくしました。

シェア
坂口志穂の他の作品
foriio

あなたのforiioを無料で作成

fori.io/
Logo
【HerTech架空案件】Ruby Coffee新作フラッペ紹介LP-1
制作について

⚫︎制作の流れ

クライアントへのヒアリング後、ペルソナを設定し、訴求ポイントを整理。次にワイヤーフレームを作成し、情報構成とテキスト量についてクライアントと合意形成。その後、デザインのトンマナを固め、デザインカンプ制作に着手。ファーストビューを先行して制作し、全体のイメージを確認いただきながら進めました。担当範囲はデザイン全般です。

⚫︎カラー

新発売のフラッペにはストロベリーを中心に3種類のベリーを使用したドリンクなので、それに合わせたイメージのカラーを選びました。

⚫︎タイポグラフィ

サイトのゴシック体のフォントはNoto Sans JP、ファーストビューのキャッチコピーには游ゴシックを使いました。

⚫︎情報設計

ファーストビューでは、メインビジュアル、キャッチコピー、期間限定情報、CVボタンを最初に目に入る位置に配置し、ユーザーを引きつけて、すぐにアクションを起こせるよう意識しました。

【工夫したポイント】

アクションを起こしやすい最初の1stビュー、キャンペーン内容が詳しく載っている3rdビュー、最後に4thビューの3箇所にCVボタンを設置しました。

2ndビューでは商品情報、味、食感、こだわった点を写真付きでわかりやすく紹介しました。

キャンペーンの参加方法はSTEP1〜STEP4を枠で区切ることでわかりやすくしました。

シェア
坂口志穂の他の作品
foriio

あなたのforiioを無料で作成

fori.io/