姪浜みらいこどもクリニック｜小児科クリニックサイト制作事例

概要

福岡市西区姪浜の小児科を想定した、架空のクリニックサイトです。
TOP・クリニック紹介・診療案内・予防接種/乳幼児健診・初めての方へ・アクセス・お知らせを含む7ページ構成で制作しました。

想定ターゲット：小さなお子さまを持つ保護者、初めて受診するご家族、予防接種や健診を検討している方
目的：クリニックへの安心感づくり、診療内容の理解、オンライン予約・電話・アクセスへのスムーズな導線設計

制作意図

医療機関としての信頼感を保ちながら、小児科らしいやさしさと親しみやすさが伝わるデザインを目指しました。
水彩風のイラスト、淡いグリーン・ブルー・オレンジを使い、保護者が不安な気持ちで見ても読み進めやすい雰囲気に整えています。

導線・使いやすさの設計ポイント

• ファーストビュー直下に「オンライン予約」「初めての方へ」「予防接種・健診」の主要導線を配置
• 診療時間、予防接種、初診の流れなど、保護者が知りたい情報へすぐ進める構成
• スマホ閲覧を重視し、文章の改行、カード幅、固定予約ボタン、メニューのタップ領域を調整
• 医療広告として誤解を招かないよう、ポートフォリオ用デモであることを明記
• Google Mapや予約機能は実運用と混同されないよう、デモ表示・デモモーダルとして実装

ページ構成

TOP / クリニック紹介 / 診療案内 / 予防接種・乳幼児健診 / 初めての方へ / アクセス / お知らせ

実装・品質確認

• 全ページ共通のヘッダー・フッター・スマホ固定予約ボタン・予約デモモーダルを実装
• PC / スマホでのテキスト改行、カード幅、診療時間表、ページ内ナビの見え方を調整
• ページタイトル、説明文、OGP、ファビコン、画像説明など基本的な公開前設定を追加
• お知らせ一覧はWordPress組み込みを想定し、投稿カード・カテゴリ・ページネーションの見た目を作成
• リンク、画像、横スクロール、コンソールエラーをPC / スマホで確認

担当範囲・使用技術

• 構成設計・画面デザイン・コーディング・レスポンシブ調整
• HTML / CSS（セマンティック設計）
• JavaScript（スマホメニュー、予約デモモーダル、スクロールアニメーション）
• PC / スマホ表示確認、アクセシビリティを意識したラベル・画像説明設定

ポートフォリオ用デモについて

本サイトは、架空の小児科クリニックを想定して制作したポートフォリオ用デモサイトです。実在の医療機関ではなく、実際の診療・予約は行われません。