歯医者のトップページ
Webサイトの基本情報
- 制作時間：
- 1日
- 担当工程：
- コーディング
- 使用技術：
- HTML5 CSS(SCSS) Jquery
Work
お問い合わせ
contact
お問い合わせフォームより、お問い合わせください。 また、メールでのお問い合わせでも可能です。
お問い合わせフォームへ
共通パーツはコンポーネント化し、再利用しやすい構造としています。
命名規則にはBEMを採用し、クラスの役割が明確になるよう設計しました。
ユーザビリティ向上のため、ヘッダーを固定し、背景に色を付けることで常に視認しやすい状態を維持しています。
また、診療メニューは重要度が高いコンテンツと考え、タブレットサイズでは2列×2行のレイアウトを採用しました。
PCでは4列、スマートフォンでは1列表示とし、各デバイスに応じて最も見やすい構成になるよう調整しています。
SEOや表示速度、ユーザー体験（Core Web Vitals）を意識したコーディングを行いました。
・画像には適切なalt属性を設定し、アクセシビリティとSEOを考慮。
・ファーストビュー画像にはfetchpriority="high"を指定し、CSSで高さを確保することでCLS（Cumulative Layout Shift）の発生を抑制。
・すべての画像にwidth・height属性を指定し、レイアウトシフトを防止。
・ファーストビュー以外の画像にはloading="lazy"を設定し、初期表示の負荷を軽減。
・画像は圧縮ツールを使用して軽量化し、ページの表示速度向上を図りました。
また、Google ChromeのLighthouseを用いて品質を確認し、以下のスコアを達成しています。
・Accessibility：91
・Best Practices：96
・SEO：92
・performance : 90