Talkawayサイトのイメージ Talkawayサイトのレスポンシブイメージ

オンライン英会話のサイト

URL

https://bit.ly/3kvtjOi

担当

企画 / デザイン / コーディング

サイトの目的

オンライン英会話教室の新規顧客獲得の為のサイトリニューアル

コンバージョン

キャンペーンバナークリック数、新規入会数

ターゲット

20代〜40代の男女で普段から自分のライフスタイルに合わせてオンラインやサブスクリプションサービスを利用している層

デザインについて

主に新規客に向けてのサイトなのでLPのように1ページで全体像が把握できるように構成し、メインビジュアルには動画を置いてファーストビューでレッスンの様子が伝わるようにしています。
リンク部分は立体感を出し、無料体験のボタンはホバー感を強めクリックへ導入しやすくしました。形に曲線を入れて親しみやすさを演出し、目立たせる部分ではコーポレートカラーのオレンジを使用して印象付けをしています。
サイトに使用したロゴマーク、バナー、実績企業ロゴはIllustratorで作成、画像加工とレッスン画面やPC画面の編集はPhotoshopを使用しました。

コーディングについて

メディアクエリでレスポンシブ対応にしています。(480px)
jQueryの実装でページトップへボタンとハンバーガーメニュー、プラグイン”slick”を2箇所のスライダー部分で使用、インフォグラフィックスはCSSアニメーションと合わせて動きを演出しました。

使用スキル

Illustrator / Photoshop / HTML / CSS / jQuery

制作期間

40時間 ( 企画:4時間 / デザイン・画像加工:13時間 / コーディング:23時間 )

対応機種

PC / SP(480px)