女性向けのLPサイト
Webサイトの基本情報
- 制作時間：
- 3日
- 担当工程：
- コーディング WORDPRESS（contact form 7）
- デザインカンプ：
- ここをクリック
- 使用技術：
- HTML5 CSS（SASS）Jquery WORDPRESS
Work
お問い合わせ
contact
お問い合わせフォームより、お問い合わせください。 また、メールでのお問い合わせでも可能です。
お問い合わせフォームへ
また、ファーストビューの画像とピンクの背景はaspect-ratioを用いて比率を固定し、どのデバイスでもレイアウトの変化が起きないようにしています。あわせてフォントサイズや要素の優先度も崩れないよう調整し、全体として一貫したUI体験になるよう設計しました。
SEOや表示速度、ユーザー体験（Core Web Vitals）を意識したコーディングを行いました。
・画像には適切なalt属性を設定し、アクセシビリティとSEOを考慮。
・ファーストビュー画像にはfetchpriority="high"を指定し、CSSで高さを確保することでCLS（Cumulative Layout Shift）の発生を抑制。
・すべての画像にwidth・height属性を指定し、レイアウトシフトを防止。
・ファーストビュー以外の画像にはloading="lazy"を設定し、初期表示の負荷を軽減。
・画像は圧縮ツールを使用して軽量化し、ページの表示速度向上を図りました。
また、Google ChromeのLighthouseを用いて品質を確認し、以下のスコアを達成しています。
・Accessibility：92
・Best Practices：92
・SEO：92
Performanceについては77点となりましたが、現在はLCP（Largest Contentful Paint）の改善手法を学習しており、今後さらなる表示速度の最適化に取り組んでいきます。