【依頼内容】 「Fammママ専用スクールのLP」を参考にした上で、改善案を盛り込んだコーディング。 【ターゲット】 育児中のママさんです。 ストレスなく読めるよう余白の調整にこだわりました。 また、スクールの世界観を崩さないカラー選びをしています。 画像とテキストの並び、３カラムの講座紹介など、多くの場所でdisplay:flex;を使用しました。メリットとしまして、コンテンツの量が変わっても、中央寄せや高さが自動で調整されるように設計し、特にテキスト量にかかわらず「詳細はこちら」のボタンの位置を揃えるなどの微調整を行いました。 画像の歪み防止とアスペクト比の維持をし、異なるサイズの画像が挿入されても、デザインを崩さず、画像が引き延ばされる事を防ぎました。 テキストレイアウトに関しても、「文章は左揃えにするが、文章の箱自体は中央にする」手法を取り入れました。ユーザーの目線がばらばらにならず、長い説明文でもストレスなく読み進められるように配慮しています。 また、「無料説明会」セクションなど、重要事項には枠線や背景色を使いつつ、Font Awesomeのアイコンを適切に配置したことで目に留まり、情報の重要性を直感的に伝えられるようにしました。 ボタン配置は途中離脱を防ぐ目的で、各セクションを読み終わった際のユーザーの理解や納得が深まるタイミング、関心が高まったタイミングで迷いなくスムーズに申し込みができるよう、複数個所にCTAボタンを設置しました。