-本日アジェンダ-
1限目
学科 ECサイトデザイン基礎③
バナーの作成について
●バナーの依頼内容 例①
参考バナー
入れてほしい要素
・営業・採用・広報ご担当の方へ
・お役立ち資料集
・ロゴ
・タクシー広告やSNS動画のノウハウなども大公開
・資料を無料ダウンロードする
・サービス資料画像（弊社からご共有します）
◆その他確認内容
バナーのサイズ
・width=”640″ height=”250″
納品時のデータ形式
・psdデータもしくはaiデータ
素材データについて
クライアント様から全て提供
納期
・初稿：〇月〇日
・修正：〇月〇日まで
・リリース：〇月〇日
見積もり
0,000円（税別）
の見積もりを別途作成
・資料より
クイズ！！ 駄目なところはどこでしょう？
自分が考えたところ
・イメージのバナーと雰囲気が違う
・ロゴの位置が不自然？
答え
①ファイル名が「01.jpg」
→会社名_案件名_日付
例：samplesdl_bnr_20230000_01.jpg
②参考バナーがある
→初めての仕事ということもあり、
提案の1つ目は忠実に要望を再現できる力を見せる（再現力）
・ファイル名は親切に
・余白（白いところ）の使い方を徹底的に整える
・アイキャッチの調整
・文字と配色バランスを合わせる
・境界線の太さも合わせる
③提案の２つ目は提案力を見せてデザイン力を見せる
・レイアウト（配置）の提案
・フォント（文字）の提案
・カラー（配色）の提案
・特に可視性を高める提案を意識
2限目
学科 ECサイトデザイン基礎③
はじめての依頼について
●バナーの依頼内容 例②
SNS用バナー
◆その他詳細
・クライアントさんも内容が不透明
・元データをクライアントさんで使いまわしたい。
・前回同様サイズ・内容・参考サイトの希望が薄い
・納期は前回よりも余裕がある
・文言が複数パターンある
◆いっぱいくれた状況
文言が複数（3パターン）ある為、それぞれの文
言で作成、2つのサイズのパターンがあるので2
種類の作成。
ここで考える事！
・レイアウト（配置）で違いを見せる
・フォント（文字）で違いを見せる
・カラー（配色）で違いを見せる
◆考える余地を与える
そもそもの依頼内容で、クライアントさ
んのイメージが弱い場合は、出来るだ
け依頼内容に忠実に表現して
多すぎないように絞って、
「クライアントさんに考えてもらう」
という提案をして初稿を出してみまし
た。
バリエーションのポイント
・レイアウト（配置）はあえて近しいも
のにして、次の二次提案に備える
フォント（文字）の希望が不明な為、パ
ターン（明朝・ゴシックは必須）を変え
たもので、無難なフォントを利用する。
カラー（配色）も希望が不透明な為、
全体のベースカラーは癖の無い（白）
ベースにして、背景の表現を変える。
提案を3つにする理由
・１つ→他にはないの？となる
・２つ→ドンピシャがあればOKだが、他にないのかと感じる
・３つ→バリエーションがあるように感じる
・４つ以上→多すぎて迷わせる原因になる
3限目
学科 ECサイトデザイン基礎③
提案をすることについて
バナー作成手順
①サイズを割り出す
画像をはめたいサイトの画像上で右クリック→検証→サイズ見る
②訴求するコピーを決める
メインコピー
サブコピーなど
③構成要素をすべてとりあえず置く
④構成要素に優先順位をつける
⑤まずは「手書き」でレイアウトしてみる
⑥単色でレイアウトする
⑦文字のカーニング
⑧配色はサイトのイメージに合わせる
（⑨最後にもう一度モノクロにして視認性をチェック）必須ではない
4限目
学科 ECサイトデザイン基礎③
再現力の重要性について
●バナー制作練習メモ
①ファミマ ご予約商品・ファミマオンライン部分のバナーイメージ 「ファミマの七草がゆ」
参考サイト：
https://www.family.co.jp/
| Rendered size: | 277 × 277 px |
| Rendered aspect ratio: | 1∶1 |
| Intrinsic size: | 300 × 300 px |
| Intrinsic aspect ratio: | 1∶1 |
| File size: | 118 kB |
コピー
・ファミマの七草がゆ 2026（きっちりやさしい雰囲気）
・おいしくて 体にやさしい
②ファミマ ご予約商品・ファミマオンライン部分のバナーイメージ 「ファミマのバレンタイン」
参考サイト：
https://www.family.co.jp/
サイズ①と同じため省略
コピー
・ファミマのバレンタイン2026（POPな感じハート入れる）
・ときめきに出会える！
・早めの予約がお得
③ダイソー 特集アイテム部分イメージ 和風食器特集
https://jp.daisonet.com/?srsltid=AfmBOorpuJVcIeHXh9lvPztUso_JSDNCsxN7NCZTQMxVKc6QjZy7JWof
| Rendered size: | 268 × 268 px |
| Rendered aspect ratio: | 1∶1 |
| Intrinsic size: | 400 × 400 px |
| Intrinsic aspect ratio: | 1∶1 |
| File size: | 35.4 kB |
コピー
・和の食器
5限目
学科 ECサイトデザイン基礎③
制作過程について
本日のテーマ
バナーは作る過程も大事です！
本日の課題
オンラインは課題無しです。
※次回のバナー制作に向け、作りたいバナーのジャンルを考え、選んでおきましょう。
就職で目指したい分野がある場合はその商材やサービスなどを選ぶと良いです。
また、世の中にあるバナーをたくさん見ることも大事です。
本日学んだこと
バナー作成の手順について
クライアントとやり取りしながらのバナー作成について
感想
本日はバナー作成について学びつつ実践に向けてバナー作成の準備を行いました。
バナー作成と一口にいっても様々なバナーがあり、実際の仕事においてはクライアントとの関係性などによって提案から決まるまでの時間なども変わってくるのだとわかりました。
先方の要望通りのものを一つ作りつつ、もうひとつはレイアウト、フォント、カラーを変更していくというのが基本ということをしっかり頭に入れたいと思います。