Facebook 【HerTech架空案件】Webデザインオンラインスクールバナー
Logo

【HerTech架空案件】Webデザインオンラインスクールバナー

クレジット
Avatar
WEBデザイナー
【HerTech架空案件】Webデザインオンラインスクールバナー-1
シェア
制作ノート
制作について

未経験からWebデザイナーを目指す方向けのオンラインスクールのバナーを制作しました。

ターゲットは「スキルに自信がない初心者」や「子育て・仕事と両立しながら学びたい女性」を想定し、不安を和らげながら行動を後押しすることを目的としています。

コンバージョンは「無料セミナー予約」をゴールに設計しました。

■ ビジュアルイメージ

全体的に「やさしさ・安心感・親しみやすさ」を重視したビジュアルにしています。

笑顔の女性の写真をメインに配置することで、「自分もこうなれる」という未来像を想起させ、未経験者の心理的ハードルを下げる構成にしました。

また、余白をしっかり取り、圧迫感のないレイアウトで“気軽に始められる印象”を意識しています。

■ カラー設計

メインカラーには淡いピンクを使用し、ターゲット層に合わせた柔らかく安心感のあるトーンに設定しました。

背景は白〜グレーでまとめ、可読性を確保しつつ清潔感を演出しています。

CTA(ボタン)には、ピンク系の中でも彩度をやや抑えたトーンを統一して使用しています。全体の色調との調和を優先しつつ、ボタンの形状・サイズ・テキストによってアクションポイントとしての認識を促す設計としています。

■ タイポグラフィ

見出しの「Webデザイナー」は大きく太めのフォントで強調し、最も伝えたいメッセージとして視認性を高めています。

サブテキストは細めのフォントを使用し、情報の優先順位を明確化しました。

また、日本語フォントは可読性の高いゴシック体をベースにし、初心者向けのやさしい印象を損なわないように調整しています。

■ 情報設計

情報は以下の流れで設計しています。

1.「未経験からWebデザイナーへ」で興味喚起

2.「PCが苦手でもOK」で不安を払拭

3.メリット(働き方・サポート・両立)を箇条書きで提示

4.キャンペーン情報でお得感を強調

5.CTAで行動を促す

特に、チェックリスト形式でメリットを提示することで一目で理解できる構成にし、安心感を持った状態でCTAをクリックしてもらえるよう設計しています。

■ 工夫したポイント

・「未経験」という不安をあえて最初に示し、共感を得る表現にした点

・中央のメリット訴求でターゲットの不安や疑問に対して端的に答える構成を意識した点

・キャンペーン情報を目立たせることで、今行動する理由を明確化

・CTAボタンは画面下部に大きく配置し、立体感のある表現でクリックを自然に促す設計

・配色とフォントを統一し、信頼感のあるデザインに仕上げた点

シェア