概要
歯科医院のコーポレートサイトを想定して制作したサンプルサイトです(仮想案件)。
担当はコーディングで、Figma
のデザインカンプをもとに忠実に実装しました。医院サイトに求められる「清潔感」「信頼感」をデザインどおりに崩さず再現しつつ、WordPress
による更新しやすい運用を両立させています。
制作会社さまの視点では、支給されたデザインを崩さず WordPress
化し、公開後の更新まで見据えた構築ができる点を確認いただける一例です。
課題
医院サイトでは「お知らせ」や「診療案内」を、院内のスタッフが手間なく更新できることが欠かせません。
一方で、デザインカンプの完成度をそのまま再現することも求められます。更新のしやすさとデザイン忠実性をどう両立させるかが、想定した課題でした。
解決アプローチ
更新性への配慮: WordPress による動的出力を採用し、カスタムフィールドを用いたカスタム投稿で診療案内などを構造化しました。専門知識がなくても管理画面から最新情報を保てるため、公開後の更新を院内で完結できます。お問い合わせには ContactForm7 を用いてメール送付機能を実装しました。
デザイン再現性への配慮: デザインカンプに忠実なコーディングを徹底し、レスポンシブでも崩れない適切な画像配置を行いました。PC からスマートフォンまで、医院の印象を損なわない見た目を保っています。
表示・検索への配慮: SEO を意識した HTML 構造で見出しや要素を適切にマークアップし、検索エンジンが内容を理解しやすい土台を整えました。
工夫したポイント / 想定効果
カスタムフィールドで診療情報を構造化したことで、更新の負荷を下げられる想定です。
SEO を意識した HTML
構造により、地域名や診療科目での検索流入も見込める設計としました。
デザインカンプを崩さず WordPress
化しているため、公開後も医院の世界観を保ったまま運用できることが期待できます。