● 制作の流れ
- ヒアリング・コンセプト設計ターゲット(かわいい家族のために、お金を惜しまない愛犬家の方。ペットの年齢に合わせたフードやサプリなど、日頃から気にしている。)の明確化。「安心感」「ナチュラル感」「お得感」を軸にした方向性の決定。
- ワイヤーフレーム作成(情報設計)
- ファーストビューから購入ボタン、こだわり、価格訴求、口コミへのスムーズな視線誘導(Zの法則・Fの法則)を意識したレイアウトの配置。
- ビジュアルデザイン(カラー・素材選定)コーポレートや商品名「ルビー」に馴染む温かみのあるカラー選定。親しみやすさを出すための犬の画像や、オーガニック感を伝えるクラフト調のパッケージ、サプリメントの素材配置。
- タイポグラフィー・ディテール調整
- 可読性を重視したフォント選定と、価格などの「見せたい数字」のジャンプ率(大小のメリハリ)調整。
- ブラッシュアップ・完成
- スマートフォンやPCでの見やすさを意識した、要素の間隔(余白)の調整。
●カラー
かわいく元気な印象を感じさせるアースカラーをベースに、購買意欲をそそるアクセントカラーが効果的に使われています。
- メインカラー≪サーモンピンク≫ファーストビュー、お客様のお声セクションに使用。かわいい元気な印象を演出。
- ベースカラー≪薄いグリーン・ホワイト≫「私たちのこだわり」セクションの背景などに使用。無添加や国産素材といった「ナチュラルさ」「健康的」なイメージを補強。「私たちのこだわり」セクションの背景などに使用。無添加や国産素材といった「ナチュラルさ」「健康的」なイメージを補強。
- アクセントカラー(コンバージョン)≪ダークブラウン ・赤≫ ★CTAボタン(今すぐ購入する): 濃いブラウンに白抜き文字、かつゴールドの枠線で、全体のトーンを崩さずに最も目立たせる設計。 ★限定・価格(初回のみ半額): 視線を引くピンクがかった赤を使用し、お得感を強調。
●タイポグラフィー(文字設計)
読みやすさと、感情に訴えかけるメリハリ(ジャンプ率)が意識されています。
- フォントの方向性親しみやすさと優しさを出すため、角が丸い、または少し手書き感や温かみのあるゴシック体・丸ゴシック系をベースに構成。
- ジャンプ率(強弱)の徹底
- 「半額」「2,500円」「98%」など、ユーザーが最もメリットを感じる数字を極端に大きくし、単位(円、%)を小さくすることで、一目で価値が伝わるように設計されています。
●情報設計(構成・レイアウト)
上から下へスクロールするだけで、ユーザーの「欲しい」「安心できる」という心理を引き出すストーリー構成になっています。
- ① ファーストビュー(FV):商品名、ターゲット、ベネフィット(健康応援、初回半額、サプリプレゼント)、そして即座に行動できる「CTAボタン」をすべて網羅。
- ② 理由・根拠(私たちのこだわり):
- 「無添加」「穀物不使用」など、飼い主が気にするポイントを4つのカード型UIでスッキリと整理。ピクトグラム(アイコン)を添えて視覚的にも直感的に理解しやすくしています。
- ③ 特典・オファー(価格訴求):通常価格を打消し線で消し、初回限定の「半額」と「サプリ現物画像」を並べることで、お得感の説得力を高めています。
- ④ 信頼性(お客様のお声):「98%が高評価」というキャッチーな数字と、具体的な犬種ごとのリアルな声を掲載し、購入への最後のひと押し(安心感)を与えています。
【工夫した点】
- 肉球モチーフのアクセント見出し(こだわり、お客様のお声)やヘッダーのメニューの横に「肉球マーク」をあしらうことで、ペット向けブランドとしての世界観と可愛らしさを一貫して表現しています。
- サプリメント画像の切り抜き配置
- 特典のサプリメントを円形の枠から少しはみ出すように配置(レイヤーの重ね技)することで、画面に奥行きと躍動感を出し、おまけの存在感を引き立てています。
- スッキリとしたカード型レイアウト
- 「私たちのこだわり」部分を白い角丸の座布団(カード)に載せることで、背景の淡いグリーンに埋もれず、スマホの縦スクロールでも非常に見やすいUIになっています。
- 二度配置されたCTAボタンの連動性ファーストビュー直後と、価格訴求直後の2箇所に同じデザインの「今すぐ購入する」ボタンを配置。ユーザーの「買いたい」と思ったタイミングを逃さない設計です。