バナー広告 - 通販サイト

バナー広告 - 通販サイト

  • 無農薬野菜の配達サービス

chot.design

テーマ
  • 無農薬野菜の配達サービスでお試しキャンペーンを実施するので、そのキャンペーンに登録してくれるようなバナーを作る
ターゲット
  • 30代主婦
  • 幼稚園児の子供がいる
  • 子供には新鮮で安心な食べ物を与えたい
キーワード
  • 新鮮・安心・安全
  • 野菜・無農薬
  • お試しキャンペーン
  • 登録・申し込み
コピー作成
  • キャッチコピー「新鮮・安心・安全な無農薬野菜を食卓へ」
  • バナーの内容「お試しキャンペーン実施中!!」
  • 行動を促す内容「申込はこちら」

バナー広告 - 作成

chot.design

  • 「幅300px、高さ250px」で表示することを前提とする
  • 実際は、レティナディスプレイ用の画像として作成する「幅600px、高さ500px」


《完成イメージ》

新規ドキュメント作成
  • 「幅600px、高さ500px」
  • カラーモード「RGB」
  • カンバスカラー「透明」

名前を付けて保存
  • 「バナー-無農薬野菜.psd」
写真を選択する
  • Pixabay「野菜」
  • この画像の場合は、黄色が画面内に少なめです

写真を配置
  • 「バナー-無農薬野菜.psd」上に、Pixabay「野菜」のデータを移動コピーする
  • 「ウィンドウ」メニュー → 「アレンジ」→「2分割表示-水平方向」

写真を適宜サイズを変更
  • 配置した写真を「自由変形」で縮小する
  • 不要な「レイヤー1」を削除する

長方形を描画
  • シェイプツール(長方形)で長方形を描画

  • プロパティ(属性)「幅:600px 高さ:100px X:0 Y:400」

文字を揃えるためのガイドを作成
  • 「表示」メニュー → 「新規ガイド」

  • 垂直ガイド「30px」「570px」

  • 水平ガイド「30px」


文字を入力
  • 文字ツール

Point Type(1行)

  • 文字ツールでアートボード上をクリックして文字を入力する
  • 自動的に文字レイヤーが作成されます

入力する文字

  • それぞれを入力後に選択ツールに持ち替えて、1行の入力を終わる
  • キャッチコピー「新鮮・安心・安全な無農薬野菜を食卓へ」
  • バナーの内容「お試しキャンペーン実施中!!」
  • 行動を促す内容「お申し込みはこちら」

白黒で表示
  • 可読性(コントラスト)を確認するために、白黒表示にする
  • 「新規調整レイヤー」→「白黒」

文字を調整
  • 読みやすい大きさ・色に変更する
  • テーマの内容に準じてコピーの優先順位を決定する
  • その順序に合わせて文字サイズを変更する

拗促音の文字ツメ
  • 促音「っ」「ッ」
  • 拗音:促音以外「ぃ」「ィ」「ょ」「ョ」などの表記上「小さい文字」
  • 拗促音は画像上の文字表現の場合、常に余白をツメて表示させます
  • 文字間隔は「カーニング:オプティカル」で自動文字ツメを選択する

文字を読みやすく効果をつける
  • 白い文字に黒いドロップシャドウ

キャンペーン部を注意を引くポイントにする
  • 白フチ文字にして、文字の配置に角度をつけて「不安定」を表現する

Action誘導のためのボタンを設定
  • 「お申し込みはこちら」をボタンのように見せる
  • シェイプツール(角丸長方形ツール)

ボタンと文字をグループ化
  • レイヤーグループにする


《完成イメージ》