Facebook 【HerTech架空案件】ペットフードバナー
Logo

【HerTech架空案件】ペットフードバナー

クレジット
Avatar
WEBデザイナー
【HerTech架空案件】ペットフードバナー-1
シェア
制作ノート
制作について

【デザインについて】

① ビジュアルイメージ(全体のイメージ設計)

今回のバナーでは、ターゲットである 「愛犬を家族として大切にするユーザー」 を想定し、安心感・かわいさ・信頼性 が直感的に伝わるビジュアルを目指しました。

犬の写真を大きく配置し、表情がしっかり見える構図にすることで、広告をスクロール中のユーザーの視線を自然に引きつけるようにしています。

背景には明るい色と軽やかな装飾を使い、“新発売のワクワク感” と “親しみやすさ” を両立させました。

② カラー(色選びのコンセプト)

色は 「健康 × 新発売 × 親しみやすさ」 を軸に選定しました。

イエロー系:新発売の明るさ・ポジティブな印象

オレンジ系:温かさ・安心感

特にイエローは視認性が高く、SNS広告で目に留まりやすいため、背景に広く使うことで “一瞬で伝わる広告” を意識しています。

③ タイポグラフィ(フォント選びの工夫)

フォントは 読みやすさと親しみやすさ を両立するために、視認性の高いゴシック体を中心に構成しました。

メインコピー:太めで視認性の高いゴシック体

サブコピー:読みやすいレギュラーウェイト

価格部分:強調のため太字+コントラストの高い色

特にX広告はスマホ閲覧が中心のため、小さな画面でも読みやすい文字サイズとウェイト を意識しています。

④ 情報設計(伝わるための構成)

広告で最も伝えたい情報を 3つに絞って優先順位を明確化 しました。

新発売

初回半額

健康応援フード

視線が

「犬 → 商品 → 価格 → CTA」

の順に流れるよう、レイアウトと余白を調整しています。

また、価格訴求はユーザーの判断材料として重要なため、背景色とのコントラストを強め、ひと目で理解できるようにしました。

⑤工夫したポイント(作品ページでは伝わりにくい部分)

・媒体特性(X広告)を意識した“瞬時に伝わる設計”

→ 流し見でも理解できるよう、文字数を絞り、要点を大きく配置。

・テンプレートに頼らず、構成から完全オリジナルで制作

→ 情報の優先順位に合わせてレイアウトをゼロから組み立て。

・視線誘導を徹底的に意識

→ 犬の視線方向・文字の配置・余白の取り方で自然な流れを作る。

・“かわいさ” と “健康訴求” のバランス調整

→ 可愛すぎると安っぽく、健康寄りすぎると堅くなるため、写真・色・装飾のバランスで中間のトーンを設計。

・スマホ閲覧を前提にした文字サイズ・コントラスト設計

→ 実際に縮小表示して可読性を確認しながら調整。

シェア
Webデザイナー春香の他の作品
foriio

あなたのforiioを無料で作成

fori.io/
【HerTech架空案件】ペットフードバナー-1
Webデザイナー春香の他の作品
foriio

あなたのforiioを無料で作成

fori.io/