バナーのバリエーション展開
受講日：2025年4月25日
- 案件ごとにサイズは違うので、柔軟に対応できるようにする。
- ポイントは、「レイアウト」「文字」「配色」の意識。
- 「見やすさ」は絶対要素！
- 小さいバナーなら文言を減らす。大きいバナーなら掲載量を増やす。
- 目的を見失わないように作成してみましょう。
バナーの掲載場所
他のWebページ
- バナー広告とは：様々な媒体で展開できる広告。
- 目的：他のサイト、SNS、ブログ等のWebページから、目的のページへ案内（誘導）する事。
検索結果の広告欄
リスティング広告と呼ばれる、GoogleやYahoo!といった検索エンジンの、検索結果の
画面に表示されるテキストも広告とよばれる。また、サイト内にある検索からも誘導す
る事ができるので、こちらからの誘導も意識。
バナー(サイズ違い)を実際に作ってみた
受講日：2025年5月20日
同じテーマでサイズ違いのバナーを5つ作成する。
【サイズ展開】(幅width × 高さheight)
・750px × 290px
・250px × 250px
・320px × 100px
・320px × 50px
・120px × 600px (縦長)
作品1 カレー屋さんの開店告知バナー
- バナー①カレー屋さんの開店告知
- 使用ソフト：Photoshop
- 作成時間：2時間
- カラー：スパイス想起させる落ち着いた色のグリーンとレッドを使用。
- 反省点：背景に店外観の写真を入れたが、カレーの数種類のせている状態なので、情報量が多すぎるように感じる。無地は味気ないので、背景画像をグラデーションやテクスチャーっぽい素材に差し替えたい。もしくは既存の背景写真につよめのぼかしを入れる。
作品2 リゾートホテルの宿泊割引バナー
- 使用ソフト：Photoshop
- 作成時間：1時間
- カラー：高級感を想起させるゴールドを使用。
- フォント：落ち着いた印象を与える明朝体を使用しました。
- 反省点：背景色が白い部分が、掲載先の背景色も白い場合、白同士で同化して、境界線が曖昧になる事で視認性を損なってしまう。白背景部分を枠線で囲む等して修正したい。
サイズ展開のバナーを作成した感想
- バナーサイズに合わせた情報量の整理が重要だと感じた。
小さいバナーに情報を詰め込みすぎても、情報が入りづらい。 - 出稿先をイメージしたバナーデザインが重要だと感じた。
ブラウザは白or黒が多いため、同化してしまう可能性があるので、縁取りなど工夫が必要。
