地域密着型の架空の歯科医院「白上歯科クリニック」のトップページをデザイン〜コーディングまで一貫して制作しました。ファミリー層、とくに小さなお子さんを持つ親御さんが「ここなら安心して通えそう」と感じられることをゴールに、温かさと清潔感の両立を意識しています。
公開URL:白上歯科クリニック
デザインコンセプト
大きなヒーロー画像で「診療の様子」を見せつつ、左下に子どもたちが歯みがきをしている写真を重ねることで、「家族ぐるみで通える歯科医院」というイメージを視覚的に伝えました。
右下には診療時間表のカードを配置し、「何時にやっている医院なのか」をファーストビューだけで把握できる構成にしています。
カラーパレットは歯科らしい清潔感をベースに、メインカラーをグリーン系で統一し、「安心感・やさしさ・健康」の印象を強めています。
実装・レイアウトの工夫
ヒーロー背景には全面の写真を使用し、その上にテキスト・子ども写真・診療時間表をレイヤーとして重ねる構造にしています。position: absolute と clamp() や vw を組み合わせて、フルHD〜ラップトップ幅までの画面でレイアウトが崩れないように調整しました。
子どもたちの歯みがき写真はカード風に見えるよう、角丸・シャドウを付けて、背景写真とのコントラストを出しつつも雰囲気を壊さないデザインにしています。
スマートフォンでは情報量が多くなりすぎないよう、ヒーロー内のサブ要素（診療時間表・子ども写真）は非表示にし、メインコピーに集中できるシンプルなレイアウトに切り替えています。
全体のレイアウトには flex と grid を使い、特徴・診療内容・院長紹介・アクセスなど、セクションごとにカード型のUIを用意することで、どのブロックも見出しと内容が一目で分かるように構成しました。
使用技術
HTML / CSS（フルスクラッチ）
CSS変数によるカラー・フォント管理
Flexbox / CSS Grid レイアウト
レスポンシブデザイン（PC / タブレット / スマホ）