タイトル
mockup

オンライン英会話レッスン

  • Web design
  • Illustration
  • Ai

架空オンライン英会話スクールのLPをデザイン。企業のターゲットは英語レベルが中級以上、
英語を話す事に対して抵抗はないが、さらにレベルアップしたいと考えているが学習者。
さらに仕事のための学習したいという人ではなく、英語を生活に根付かせたいと
考えている学習者をターゲットとする。

また、このランディングサイトでは特に20代ー30代女性をターゲットとし、体験レッスンへの
誘導を目的としたLPという仮定でデザインを作成。


デザイン全体を見る

STRUCTURE

構成する際に注意したポイントとして、上から下にスクロールして行くにつれ、
ユーザーにとって体験レッスンの申し込みに至るまでどういったポイントに
躊躇するかをイメージしながら構成を考えた。
また、スクロールせずとも申し込みをしたいと感じたタイミングで訪問者が
申し込みできるようボタンの設置位置にもを考慮して配置した。

構成図
図
First view

ファーストビューでは訪問者に一目でサービスが提供できる内容 が分かるよう英会話レッスンを通してどういった目標 (SPEAK LIKE A NATIVE)が達成できるかを設置。

Introduction

スクロール最初のコンテツとして、どういったターゲットに向いて いるサービスなのかを示すことで、ターゲット層に対して自分が ターゲットだということを認識するきっかけを作る。

Benefit

次にターゲットにサービスが提供できるメリットを開示し、 このポイントで興味を持って貰えた訪問者が申し込みをできる よう体験レッスンを直ぐ下に設置。

Details

興味はあるもっと詳しく知りたいと考えている訪問者に対して、 利用者の声、具体的な使い方、そして料金体系の案内をサービス 申し込み時にきになる点を案内し、再度申し込みボタンを設置。

Inquiry

概要はわかったがまだ不安な点があり、申し込みまで至らない訪問者が不安を払拭できるよう、よくある質問やお問合せの対応についての情報をページ下部に設置。そして、最後に再度体験レッスンボタンを設置。

DESIGN

20ー30代、中級レベルの女性をターゲットとしているLPの為、
アクティブ、モダンをキーワードにデザインを行った。
レッスンの様子を簡単にイメージ出来るようにファーストビューに
ターゲットと同世代の女性が笑顔でパソコンを使用している写真を使用。

カラーは、アクティブなイメージを与えるオレンジをメインに使用。
また、グラデーションを取り入れることでモダンな印象を与えるようにデザイン。
文字の情報も重要になるサイトの為、文章の読み易さ大切にしながら、
背景色は#ffffffと#f9f9f9の2色を使用することで
単調なデザインにならならないように注意した。

説明図

Color

#ffffff
#f7f7f7
#57e5c3 to #00d897
#ffbc03

Font

キャッチフレーズ:Robot
各大見出し:游ゴシック体
本文:Noto sans JP

ILLUSTRATION

サイトに使うイラスト、iconも全て作成

女性講師のイラスト カリキュラムのイラスト パソコン パソコン 電話 チャット メール