ChisaWorks

【課題】英会話教室のLP

概要

2022.05 シーライクスのWebデザインコースの実技試験の課題として、 架空の英会話教室のLPを制作しました。

制作期間

2022年3月上旬から5月上旬の間、実工数としては1.5ヶ月 ※架空教室案の検討時間含む

サイト概要(制作テーマ)

英会話教室(Fun English Club)のLP ※架空案件

このテーマを選んだ理由

3年ほど英会話教室に通っており、独立して教室を開講(コロナ禍で閉鎖)した先生もいたことから、 サービス内容も検討しやすい身近なテーマだったため。

架空の英会話教室の概要

・日常英会話を気軽に学びたい・英語に慣れたい、大人向けの教室
・カジュアルでフリードリンクもある、カフェのような雰囲気の英会話教室
・都内に2教室あり、先生は全員資格のあるネイティブスピーカー

サイト制作の目的

英会話教室について知ってもらい、無料体験レッスンに来てもらう
(最終目標は受講者を増やす)

ターゲット

・駅名・英会話で検索してきた近隣に住む・近隣で働いている大人
・英語を気軽に学びたい人(厳しくなくて、楽しそうなスクールで学びたい人)

デザインイメージ

・明るく楽しそうでカジュアルなイメージ
・カフェのような雰囲気で英語を学ぶ

工夫した点

・気軽に学んでもらうというターゲットを意識したテーマから「カフェのような雰囲気で英語を学ぶ(ドリンク飲みながらラフに話す)」というイメージに辿り着きました。
そのため、写真はカフェのような場所で先生と楽しそうに話しているものをメインにし、 カラーや背景もカフェの雰囲気が出るよう意識しました。代わりにアクセントカラーは茶系に寄り過ぎないよう青にしました。
・スクールのLPということで、情報の見やすさ・伝わりやすさも意識しました。 フォントサイズ・ジャンプ率・余白などは特に気をつけた点です。
・レスポンシブについては、課題の条件に合わせてスマートフォンサイズを作成していますが、 PCサイズ・スマートフォンサイズ共にどの画面幅でも崩れないようコーディングの記述を工夫しました。

使用ツール・スキル

・コーディングについてはHTML・CSS・jQueryを使っており、jQuery使用箇所はモーダルウィンドウ・PAGE TOP・ハンバーガーメニューです。
・デザインカンプはスクールの指定でPhotoshopで作成しています。
・Pointのフラグ・英字の飾り文字についてはIllustoratorで作成しています。

使用素材

・写真素材はPIXTAの素材をメインに、Adobe Stock・Photo ACからも利用しています。
・背景素材はAdobe Stockから取得したものを色加工しています。
・ICONはicooon-monoとicon-pitから取得したものを色加工しています。