塗装会社のトップページ
Webサイトの基本情報
- 制作時間：
- 1日
- 担当工程：
- コーディング
- 使用技術：
- HTML CSS（SASS）Jquery
Work
お問い合わせ
contact
お問い合わせフォームより、お問い合わせください。 また、メールでのお問い合わせでも可能です。
お問い合わせフォームへ
また、CSS設計にはFLOCSSを採用し、保守性と拡張性を意識した構成にしています。特にお知らせセクションは下層ページでも再利用できることを想定してコンポーネント化しました。
さらに、メニュー画像にはaspect-ratioを用いることで、画面サイズが変わっても比率が崩れないように設計しています。
SEOや表示速度、ユーザー体験（Core Web Vitals）を意識したコーディングを行いました。
・画像には適切なalt属性を設定し、アクセシビリティとSEOを考慮。
・ファーストビュー画像にはfetchpriority="high"を指定し、CSSで高さを確保することでCLS（Cumulative Layout Shift）の発生を抑制。
・すべての画像にwidth・height属性を指定し、レイアウトシフトを防止。
・ファーストビュー以外の画像にはloading="lazy"を設定し、初期表示の負荷を軽減。
・画像は圧縮ツールを使用して軽量化し、ページの表示速度向上を図りました。
また、Google ChromeのLighthouseを用いて品質を確認し、以下のスコアを達成しています。
・Accessibility：93
・Best Practices：100
・SEO：92
Performanceについては72点となりましたが、fvに関しては、background imageを使用しないということをまず今後していきます。また、現在はLCP（Largest Contentful Paint）の改善手法を学習しており、今後さらなる表示速度の最適化に取り組んでいきます。