医療クリニックWebサイトデモ（Clinic Website Demo）

概要

内科クリニック向けホームページの提案用デモサイト。架空の「あおば内科クリニック」を題材に、実際の開院を想定したデザイン・情報設計・レスポンシブ対応までを一貫して制作した。HTML/CSS/JavaScriptのみで構築し、クライアントが「このまま使えそう」と感じられる完成度を目指した。

対象ユーザー

• 開業を検討中の医師に対して、ホームページのイメージを提案する場面
• Web制作案件の受注時に、完成イメージをクライアントに見せるプロトタイプとして
• フロントエンドのコーディング力を示すポートフォリオ作品として

Demo / GitHub

🔗 Demo を試す

スクリーンショット

開発背景

医療クリニックのWebサイトは「清潔感・信頼感・視認性」が求められるジャンルであり、特に診療時間表やアクセス情報など、患者が実際に使う情報設計のスキルが問われる。実際のクリニックサイトを参考に、情報設計・導線・配色・レイアウトを分析し、患者が安心して利用できるUIを意識してデモサイトを制作した。

解決した課題

• 開院前でも完成イメージを具体的に共有できる提案用デモを実現
• 診療時間やアクセスなど患者が必要とする情報を見やすく整理
• スマートフォン利用を前提に予約・電話導線を最適化
• 経歴や資格をアコーディオン化し、情報量と可読性を両立

主な機能

• 固定ヘッダー: ロゴ＋電話番号＋WEB予約ボタン / スマホではハンバーガーメニュー
• ヒーロー: クリニック名＋キャッチコピー＋CTAボタン2つ（予約/診療案内）
• 当院の特徴: 4カラムアイコンカード（駅近/生活習慣病対応/WEB予約/駐車場）
• 診療案内: メイン項目（一般内科）を大カードで強調 + サブ4項目を小カードで横並び
• 医師紹介: メッセージ中心の構成 + 経歴・資格をアコーディオン展開
• 診療時間表: ●（診療）/△（午前のみ）/×（休診）の曜日別テーブル
• お知らせ: 日付＋タイトルのリスト形式
• アクセス: テキスト情報＋Google Maps Embed
• WEB予約CTA: ライトミント背景＋大型ボタンで予約導線を強調
• フッター: 3カラム（住所・診療時間・地図）＋ナビリンク
• スマホ固定フッターバー: 電話発信＋WEB予約の2ボタン常時表示
• スクロールアニメーション: IntersectionObserverによるフェードイン
• トップへ戻るボタン: 一定量スクロール後に出現

使用技術

• フロントエンド: HTML5 / CSS3 / vanilla JavaScript（フレームワーク不使用）
• レスポンシブ: CSS Grid / Flexbox / メディアクエリ（767px / 768px〜1199px / 1200px以上の3段階）
• アイコン: SVGインライン
• アニメーション: CSS transition + IntersectionObserver API
• 地図: Google Maps Embed
• 公開方法: Claude Artifact（共有リンクで閲覧可能）

設計上の工夫

• 患者視点の情報設計: 初めて来院する患者が必要とする情報（診療内容・診療時間・アクセス・予約）へ迷わず到達できるよう、導線を設計した
• CTA設計: WEB予約ボタンをアクセントカラー（コーラル）で統一し、ヘッダー・Hero・予約セクション・スマホ固定ボタンの4箇所に配置。どのスクロール位置からでも予約へ遷移できるようにした
• レスポンシブ: PC・タブレット・スマートフォンの3段階でレイアウトを最適化し、診療時間表は横スクロール対応とすることで可読性を維持した
• セクション順序の最適化: お知らせを後方に移動（「ホームページを開設しました」が最初に来ると価値が薄く見えるため）、当院の特徴をHero直下に配置
• 全データ架空: 「あおば内科クリニック」「山田太郎」など全て架空のデータで構成。実在の医院や人物とは無関係

デザインコンセプト

「清潔感」「安心感」「親しみやすさ」の3点を重視し、白を基調に青緑色をアクセントカラーとして採用した。

装飾を抑え、患者が必要な情報へ短時間でアクセスできる情報設計を意識した。

また、予約ボタンや電話導線を各所へ配置することで、高齢者を含む幅広い利用者でも迷わず操作できるUIを目指した。

開発周期

1日

担当範囲

参考サイト分析 / デザイン仕様策定 / HTML/CSS/JSコーディング / レスポンシブ対応

成果・実現したこと

• フレームワーク不使用で、PC・タブレット・スマホに対応する完成度の高い医療サイトデモを単一HTMLで実現
• 参考サイト分析→デザイン仕様→実装の一貫した制作フローを実践
• 提案段階から完成イメージを共有できるデモとして活用可能な状態を実現

想定導入効果

• クリニック開業時のWebサイト制作提案の説得力向上
• クライアントが完成イメージを具体的に把握でき、要件確認の効率化
• レスポンシブ・アクセシビリティの基本を押さえた設計による患者のユーザー体験向上

開発で直面した課題と解決方法

• CDN不使用制約: Artifact環境ではCSPにより外部CDNが使えないため、フォント・アイコンをすべてシステムフォントとSVGインラインで代替。制約の中でデザイン品質を維持した
• 診療時間表のスマホ対応: テーブルをそのまま縮小すると読めないため、overflow-x: autoコンテナで横スクロール可能にし、視認性を確保
• 情報量と可読性の両立: 医師紹介や診療案内は情報量が多くなりやすいため、カードレイアウトやアコーディオンを採用し、必要な情報だけを段階的に表示する構成とした

このプロジェクトで学んだこと

• 医療サイトではデザイン性よりも「安心感」「視認性」「情報への到達しやすさ」が重要であり、情報設計そのものがUXを左右することを学んだ
• 参考サイトを構造的に分析し、要素ごとに「なぜこうしているか」を理解することで、デモに取り入れる際の判断基準が明確になる
• フレームワークを使わなくても、HTML・CSS・JavaScriptを適切に設計することで、保守性と操作性を両立したWebサイトを構築できることを確認した