HTML／CSSでRabbit English Schoolのメインページを作成しました。
コーディング
サイトの目的
英語教室の特徴やレッスン内容、講師の魅力を分かりやすく伝え、安心して入会や体験レッスンの申し込みをしてもらうことが目的です。
ターゲット
過去に英語の勉強で挫折された方、学生の頃に勉強しただけで今はもう思い出せない方。
デザインについて
子ども向け英語教室の安心感と親しみやすさが伝わるよう、ベージュを基調としたやさしい配色でデザインしました。赤色をアクセントカラーとして使用し、全体に統一感を持たせています。キャッチコピーと授業風景の写真を大きく配置することで教室の雰囲気が伝わる構成にし、アイコン付きのカードレイアウトで情報を整理することで、保護者の方が必要な情報を見つけやすいよう工夫しました。余白を活かした読みやすいレイアウトと、ドットラインなどの装飾を取り入れ、温かみのある親しみやすいデザインに仕上げました。
コーディングについて
HTML5とCSS3を使用し、見やすく分かりやすいレイアウトになるよう意識してコーディングしました。ヘッダー・ナビゲーション・メインコンテンツ・フッターなどをセマンティックタグで構成し、サイト全体の構造が分かりやすくなるようにしています。また、余白や文字サイズ、画像の配置をCSSで細かく調整し、親しみやすく温かみのあるデザインを再現しました。ナビゲーションメニューやお知らせのボックスは統一感が出るようにスタイルを共通化し、メンテナンスしやすいコードを意識しています。さらに、レスポンシブ対応を行い、パソコンだけでなくタブレットやスマートフォンでも見やすいレイアウトになるよう、メディアクエリを用いて画面サイズに応じて表示が切り替わるよう実装しました。コードの可読性にも配慮し、適切なインデントやコメントを入れながら、後から修正しやすいコーディングを心掛けました。