Facebook 【HerTech 架空案件】Instgram用オンライン英会話スクールバナー
Logo

【HerTech 架空案件】Instgram用オンライン英会話スクールバナー

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

【デザインについて】

⚫︎ビジュアルイメージ

スーツ姿の人物をメインに使用することで、ビジネスシーンを想起させ、「仕事で使える英会話」であることを直感的に伝えています。 

⚫︎カラー

ベースカラーは、淡いブルー。全体に清潔感と安心感のある印象を与えています。背景に広く使うことで、情報量が多くても圧迫感を出さず、見やすい土台を作っています。

メインカラーは、濃いブルー。キャッチコピーや下部の帯に使用することで、画面全体を引き締めながら、信頼感・誠実さ・知的なイメージを強調しています。英会話スクールというジャンルとも相性が良く、「しっかり学べる」印象づけにつながっています。

アクセントカラーは、イエロー。「98%」や「10,000円OFF」などの重要な数値や訴求部分に視線が集まるよう工夫しています。ブルーとのコントラストが強いため、自然と目に入りやすく、情報の優先順位を明確にしています。

⚫︎タイポグラフィ

フォントにはNoto Sans JPを使用し、可読性と信頼感を重視しています。ビジネス向けの英会話であるため、装飾性を抑えたすっきりしたフォントにすることで、誠実でプロフェッショナルな印象を与えています。また、数字のフォントにはFuturaを使用し、視認性とデザイン性の両立を図っています。幾何学的で洗練された印象のフォントを取り入れることで、数値の信頼性を高めつつ、バナー全体にリズムとアクセントを加えています。

⚫︎情報設計

まず上部にクライアント名を配置し、サービス内容を一目で認識できるようにしています。続いて中央に「10,000円OFF」を大きく配置することで、お得感を強く訴求し、ユーザーの関心を引きつけます。

その周囲に「生徒満足度98%」や「ネイティブ講師」といった強みを円形でまとめて配置し、視覚的に整理しながらメリットが直感的に伝わるよう工夫しています。

下部には「無料体験レッスンはこちら」の誘導ボタンを配置し、視線の流れ(上→中央→周辺情報→下)に沿って、自然にアクションへ誘導する構成にしています。

全体として、「サービス認知 → メリット理解 → お得感 → 行動」という流れがスムーズに伝わる、分かりやすい情報設計となっています。

【工夫したポイント】

ビジネス向け英会話であることが一目で伝わるよう、スーツ姿の人物を使用し信頼感を強調しました。 また、「10,000円OFF」や「98%」などの数値は大きく配置し、視線を集めて訴求力を高めています。

情報は円形でグルーピングすることで、複数の強みを整理しながら直感的に理解できるよう工夫しています。さらに、ブルーを基調にイエローをアクセントとして使うことで、重要な情報が自然と目に入るようにしています。

また、ピンク(桜モチーフ)をポイントで取り入れることで、「春のキャンペーン」という季節感を表現し、硬くなりすぎない親しみやすさもプラスしています。

全体として、情報の優先順位と視線誘導を意識し、短時間でも内容が伝わりやすいデザインにしています。

シェア