シーライクスのWebデザインコースの実技試験の課題で作成しました
制作期間:2022/3 〜 5 (実工数は1.5ヶ月)
サイト概要:英会話教室(Fun English Club)のLP ※架空案件
サイトの目的:英会話教室について知ってもらい、無料体験レッスンに来てもらう(最終目標は受講者を増やす)
架空の英会話教室について:
・日常英会話を気軽に学びたい・英語に慣れたい、大人向けの教室
・カジュアルでフリードリンクもある、カフェのような雰囲気の英会話教室
・都内に2教室あり、先生は全員資格のあるネイティブスピーカー
ターゲット:
・駅名・英会話で検索してきた近隣に住む・近隣で働いている大人
・英語を気軽に学びたい人(厳しくなくて、楽しそうなスクールで学びたい人)
デザインイメージ:
・明るく楽しそうでカジュアルなイメージ
・カフェのような雰囲気で英語を学ぶ
デザインカンプ
こだわりポイント:
・気軽に学んでもらうというターゲットを意識したテーマから「カフェのような雰囲気で英語を学ぶ(ドリンク飲みながらラフに話す)」というイメージに辿り着きました。
そのため、写真はカフェのような場所で先生と楽しそうに話しているものをメインにし、カラーや背景もカフェの雰囲気が出るよう意識しました。
代わりにアクセントカラーは茶系に寄り過ぎないよう青にしました。
・スクールのLPということで、情報の見やすさ・伝わりやすさも意識しました。フォントサイズ・ジャンプ率・余白などは特に気をつけた点です。
・レスポンシブについては、課題の条件に合わせてスマートフォンサイズを作成していますが、PCサイズ・スマートフォンサイズ共にどの画面幅でも崩れないようコーディングの記述を工夫しました。
使用スキル・ツール:
・コーディングについてはHTML・CSSと、一部jQueryを使っています
jQuery使用箇所→モーダルウィンドウ・PAGE TOP・ハンバーガーメニュー
・デザインカンプはスクールの指定でPhotoshopで作成しています
・Pointのフラグ・英字の飾り文字についてはIllustoratorで作成しています
素材:
・写真素材はPIXTAの素材をメインに、Adobe Stock・Photo ACからも利用しています。
・背景素材はAdobe Stockから取得したものを色加工しています。
・ICONはicooon-monoとicon-pitから取得したものを色加工しています。