PCカレッジ受講生募集バナー

概要

ネタ見せコンクールとPhotoshop最終課題を兼ねて作成しました。

【お題】Web＆デザイン実践科（託児・短時間）訓練生募集
【比率】1：1　
【ファイル形式】PNG
【備考】インスタグラム、ホームページのポップアップバナー
【必ず入れる文言】
・Web＆デザイン実践科（託児）　※コース名の省略・表記変更不可
・受講生募集
・詳しくはこちら
・申込〆切　令和6年3月11日㊊まで

作成者コメント

PCカレッジホームページのトップページにポップアップ表示されることを想定して作成しました。
１枚目：通常表示
２枚目：マウスオーバー時（調整レイヤーで色相変更）
課題として提出したPSDファイルではレイヤーカンプで切り替わるようにしていました。

作成時に意識した点

目的

どうしたらクリックしてもらえるか

ターゲット

「職業訓練のことをよく知らない人」

アピールポイント

「受講料無料」
「illustrator、Photoshop、HTML/CSSが学べる」※しかも、旭川・道北唯一
「履歴書や職務経歴書の書き方、就職支援のための個別相談もあり」

こだわりポイント

色

PCカレッジのホームページが白ベースなので、表示されたときに目立つ色にしたい。
ポップアップバナーは怪しい広告ではないかと警戒されることも多いので、安心できるものだと伝えたい。

PCカレッジホームページメインカラーの落ち着いた濃い青は、両方の条件を満たしているため、この色にしました（#1623ad）。

レイアウト

検定対策・就活と並行作業だったので、期限内に完成させられるものを、と思い、写真や素材を探す時間はあきらめて文字だけにしよう！と決めました。

まず、【必ず入れる文言】＋アピールポイント①～③をベタ打ちするも、この時点でけっこう、文字数が多い…。
でも、クリックしてもらうためには、とにかくパッと目を引き付ける必要あり。

テキストでは縦組みを混在させたり、斜体にして人目を引くデザインにしていたりしました。
そこで、いろいろ試してみましたが、必要な文言を入れるとどうしてもうまくいきません。
Pintarestで調べていて見つけたバナーが、横組みだけのレイアウトですっきりシンプルにまとめていたので、これを真似してみることにしました。

お手本にしたバナーはこちらです。↓

ボタン

「詳しくはこちらをクリック」＝先頭の「＞」とアンダーラインでハイパーリンクを連想させる。
とあるデザイナーさんのブログで、amazonの営業さんから教えてもらったクリックさせるためのテクニック、として紹介されていたものをそのまま参考にしました。
~~（元のブログが見つけられず、URL不明です…）~~　
見つけました。↓

さらにマウスオーバー時に色を変えることで、より、ボタンらしくなるようにしました。