【Her Tech架空案件】ドッグフードバナー＆LP

＜共通＞

●カラー

かわいい元気な印象を与えられるよう、メインカラーはブランドロゴからオレンジを選択。

ベースカラーは無添加の商品をイメージできるようなナチュラルなライトオレンジ、アクセントカラーにはビビッドオレンジを選択して、数字などに使用しお得感が出るようにしました。

CTAは安心感のあるグリーンをブランドロゴから抽出し、クリック率向上と、全体感の世界観の統一を意識しています。

●タイポグラフィ

フォントはかわいらしさを感じられるZen Maru Gothicを中心に、情報やCTAのテキストはNoto Sans JPを選択し、視認性を意識しました。

またキャンペーン価格の部分はエクストラボールドにして強調することで、半額のお得感を表現しています。

＜バナー＞

●制作の流れ

クライアント様からの要望に沿ってかわいさ・元気さをイメージして制作。

●情報設計

キャッチコピーでこの商品のベネフィットを表現。また、かわいく元気な印象になるよう、フォントや素材など丸みのあるものを使用。

●工夫したポイント

この後LPに飛んで詳細を見ていただくことを踏まえ、特に伝えたい「なんの商品か（犬と商品の画像）」「新発売」「半額」という部分が伝わるよう意識して制作しています。

＜LP＞

●制作の流れ

まずワイヤーフレームの作成に取り掛かり、その後バナーに合わせてデザインのトンマナを固め、デザインカンプ制作に着手しました。

●情報設計

ファーストビューは上部に商品の売りをわかりやすくまとめ、下部で商品のキャンペーンを表記しましたが、ドッグフードの画像を中心にすることで、分断された印象にならないよう意識しています。

ワンちゃんの画像や足あとのあしらいを多く使用し、かわいい印象を作り上げるとともに、愛犬家のユーザーの離脱を防げるようにしました。

●工夫したポイント

「お金を惜しまない愛犬家の方」がペルソナだったため、ファーストビュー直下に値段の表記があっても「高い」とは感じづらい（離脱の可能性は低い）、また、CTAは多い方が良いと考え、キャンペーン情報やCTAはこまめに配置しました。

悩み→キャンペーン情報→商品紹介→レビュー→よくある質問という流れにすることで、興味を持ったユーザーがどんどん下にスクロールしたくなる構成にしています。

安心ポイントの部分は、説明に合った画像を大きめに配置し、ザッとスクロールされても一目で特徴がわかるように意識しました。