バナー制作＆当て込み

◆Banner and Placement◆

Hello-Journal Vol.13
Sep, 26 2025
リアル授業：ECサイトデザイン実習3　【バナーを制作して実際のサイトに当てこむ】

以前、セブ島留学＆オンライン英会話でお世話になった、QQ Englishセブ島留学のバナーを制作。

お手本にしたのは、2025年10月の留学プランのもの。
今回は、2025年12月を想定して、このシーズンにふさわしいイベント等を考え、素材収集した。
基本、「前回と同じ感じのデザインで」という想定で制作。

こちら▼がオリジナル（2025年10月留学）のバナーです。

こちら▼が2025年12月留学のバナーです。

ブラッシュアップ

・各画像にドロップ＆シャドウを加え、境界線の白を足して画像をさらに際立たせた。
・クリスマスパーティーの写真を入れ替え、アイキャッチ（小）も入れ替えた。
・右端の「詳しく見る」のボタンのスペースを大きくして、詳細ページをクリックしてもらえるよう工夫をした。
・留学費用15％OFFのアイキャッチ画像の色を変え、文字も大きくして目に止まるように工夫した。
・キャッチコピーの部分にもドロップ＆シャドウを加え、可視性をさらに高めた。

当て込み画像

実際に作ったバナーをQQ Englishセブ島留学のサイトに当て込みました。
違和感なくサイトの雰囲気に溶け込んでいると思います。

制作データ

カテゴリー：フォトショップ　バナー制作

使用ツール：Adobe Photoshop 2025、WordPress

制作時間：3.5時間

コンセプト：QQ Englishセブ島留学のバナーを制作。

ビッグイベントが充実の、日本人経営のセブ島No.1英会話スクールなので、留学中の楽しそうな雰囲気が伝わるようにデザインした。
クリック率をアップさせ、申し込み率を高めたい。

イベントの写真は、なるべく大きく顔が入るようにトリミングを工夫した。

セブ島と言えば＝きれいな海なので、バナーの背景一面に海の画像を使用した。

チャレンジポイント：この海の画像は、Geminiにプロンプトを入力し、それっぽい雰囲気の画像生成をしてもらった。なかなかいい感じ！

なるべくシンプルにわかりやすく、メリハリをつけてバナーのレイアウトをした。