NWA Coding Lab
C04🏢企業・コーポレート系中級

Aoyama Clinic

医療クリニック

想定時間14h
技術HTML / CSS
完成形を見るソースコードを見る

Client Brief

青

青山 悠介院長

Aoyama Clinic

件名: リニューアルのご依頼

青山の内科・皮膚科クリニック。既存サイトが古く、診療時間の確認で電話が殺到している。Web上で情報完結させたい。

ご要望

  • 1診療時間テーブルが一目で分かる
  • 2医師紹介で安心感を演出
  • 3ネット予約への導線
  • 4清潔感のあるデザイン

予算

¥280,000

納期

1ヶ月

種別

リニューアル

クライアントの人柄

穏やか、患者目線、医療の質にこだわる

避けてほしいこと

派手な色使い圧迫感のあるデザイン情報過多

成功指標

電話問い合わせを30%削減し、Web予約を月100件以上に

追加メモ

"患者さんが不安にならない、優しい印象のサイトにしたい。余白を多めに。"

Preview

フル画面で開く →
/demo/C04-aoyama-clinic/index.html

Learning Points

1

診療時間テーブル

2

医師プロフィール

3

予約CTA

4

清潔感デザイン

How to Build

01

Step 1: 診療時間テーブル設計

40分

曜日×時間帯のテーブル構造と○/×/△のマークシステムを設計。

成果物: テーブル設計図

02

Step 2: HTML構造

90分

ヒーロー→About→診療科目→診療時間→医師紹介→アクセス→フッター。tableタグ。

成果物: 完全なHTML

03

Step 3: 清潔配色＋タイポ

90分

白×薄水色×深緑の配色。Cormorant Garamond見出し。rounded-fullのCTA。

成果物: ビジュアルベース

04

Step 4: テーブル＋プロフィール

120分

診療時間テーブルの交互色と状態マーク。円形写真の医師カード。

成果物: ほぼ完成形

05

Step 5: レスポンシブ＋仕上げ

60分

テーブルの横スクロール対応。CTAの配置調整。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>青山メディカルクリニック | 安心と信頼の医療を</title>
  <meta name="description" content="青山メディカルクリニック。内科・皮膚科・小児科・アレルギー科。患者さまに寄り添う丁寧な診療を心がけています。">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- ========== Header ========== -->
  <header class="header">
    <div class="header__inner">
      <a href="#" class="header__logo">
        <span class="header__logo-icon">✚</span>
        <span class="header__logo-text">青山メディカル<br><span class="header__logo-sub">Aoyama Medical Clinic</span></span>
      </a>
      <nav class="header__nav" aria-label="メインナビゲーション">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#about" class="header__nav-link">当院について</a></li>
          <li class="header__nav-item"><a href="#services" class="header__nav-link">診療科目</a></li>
          <li class="header__nav-item"><a href="#schedule" class="header__nav-link">診療時間</a></li>
          <li class="header__nav-item"><a href="#doctors" class="header__nav-link">医師紹介</a></li>
          <li class="header__nav-item"><a href="#access" class="header__nav-link">アクセス</a></li>
        </ul>
      </nav>
      <a href="#contact" class="header__cta">ご予約・お問い合わせ</a>
      <button class="header__hamburger" aria-label="メニューを開く" aria-expanded="false">
        <span class="header__hamburger-line"></span>
        <span class="header__hamburger-line"></span>
        <span class="header__hamburger-line"></span>
      </button>
    </div>
  </header>
  <!-- ========== Hero ========== -->
  <section class="hero">
    <div class="hero__overlay"></div>
    <img
      src="https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?w=2000&q=80"
      alt="明るく清潔感のあるクリニック内観"
      class="hero__image"
    >
    <div class="hero__content">
      <p class="hero__lead">あなたの健康に、安心を。</p>
      <h1 class="hero__title">患者さまに寄り添う<br>丁寧な医療を</h1>
      <p class="hero__description">
        青山メディカルクリニックは、内科・皮膚科・小児科・アレルギー科の<br class="hero__br--pc">
        総合診療を行うクリニックです。お気軽にご相談ください。
      </p>
      <div class="hero__actions">
        <a href="#contact" class="hero__btn hero__btn--primary">Web予約はこちら</a>
        <a href="#schedule" class="hero__btn hero__btn--secondary">診療時間を確認</a>
      </div>
    </div>
  </section>
  <!-- ========== About ========== -->
  <section id="about" class="about">
    <div class="about__inner">
      <div class="about__text">
        <p class="about__label">About Us</p>
        <h2 class="about__title">当院の理念</h2>
        <p class="about__philosophy">
          青山メディカルクリニックは、「すべての患者さまに安心と信頼を」をモットーに、
          地域のかかりつけ医として皆さまの健康をサポートいたします。
        </p>
        <p class="about__description">
          最新の医療機器と経験豊富な医師による丁寧な診察で、
          一人ひとりの症状に合わせた最適な治療をご提案いたします。
          お子さまからご高齢の方まで、どなたでもお気軽にご来院ください。
        </p>
        <ul class="about__features">
          <li class="about__feature">
            <span class="about__feature-icon">🏥</span>
            <span class="about__feature-text">最新の医療設備を完備</span>
          </li>
          <li class="about__feature">
            <span class="about__feature-icon">👨‍⚕️</span>
            <span class="about__feature-text">経験豊富な専門医が在籍</span>
          </li>
          <li class="about__feature">
            <span class="about__feature-icon">💊</span>
            <span class="about__feature-text">院内処方で待ち時間を短縮</span>
          </li>
        </ul>
      </div>
      <div class="about__image-wrap">
        <img
          src="https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=800&q=80"
          alt="清潔で明るいクリニックの待合室"
          class="about__image"
        >
      </div>
    </div>
  </section>
  <!-- ========== Services ========== -->
  <section id="services" class="services">
    <div class="services__inner">
      <p class="services__label">Services</p>
      <h2 class="services__title">診療科目</h2>
      <p class="services__subtitle">幅広い診療科目で、ご家族みなさまの健康をサポートいたします。</p>
      <div class="services__grid">
        <article class="services__card">
          <div class="services__card-icon">🩺</div>
          <h3 class="services__card-title">内科</h3>
          <p class="services__card-text">風邪・インフルエンザ・生活習慣病（高血圧・糖尿病・脂質異常症）など、幅広い内科疾患に対応いたします。健康診断・予防接種も実施しています。</p>
        </article>
        <article class="services__card">
          <div class="services__card-icon">🧴</div>
          <h3 class="services__card-title">皮膚科</h3>
          <p class="services__card-text">湿疹・アトピー性皮膚炎・ニキビ・水虫・じんましんなど、あらゆる皮膚トラブルを診察いたします。美容皮膚科も対応可能です。</p>
        </article>
        <article class="services__card">
          <div class="services__card-icon">👶</div>
          <h3 class="services__card-title">小児科</h3>
          <p class="services__card-text">お子さまの発熱・咳・腹痛などの急性症状から、乳幼児健診・予防接種まで、成長に合わせた診療を行います。</p>
        </article>
        <article class="services__card">
          <div class="services__card-icon">🌿</div>
          <h3 class="services__card-title">アレルギー科</h3>
          <p class="services__card-text">花粉症・食物アレルギー・喘息・アレルギー性鼻炎など、アレルギー専門医による的確な診断と治療を提供いたします。</p>
        </article>
      </div>
    </div>
  </section>
  <!-- ========== Schedule ========== -->
  <section id="schedule" class="schedule">
    <div class="schedule__inner">
      <p class="schedule__label">Schedule</p>
      <h2 class="schedule__title">診療時間</h2>
      <p class="schedule__subtitle">ご来院の際は、保険証をお忘れなくお持ちください。</p>
      <div class="schedule__table-wrap">
        <table class="schedule__table">
          <thead>
            <tr>
              <th class="schedule__th schedule__th--time">診療時間</th>
              <th class="schedule__th">月</th>
              <th class="schedule__th">火</th>
              <th class="schedule__th">水</th>
              <th class="schedule__th">木</th>
              <th class="schedule__th">金</th>
              <th class="schedule__th">土</th>
              <th class="schedule__th schedule__th--sun">日</th>
            </tr>
          </thead>
          <tbody>
            <tr class="schedule__row">
              <td class="schedule__td schedule__td--time">9:00〜12:30</td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--open">○</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--open">○</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--open">○</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--closed">×</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--open">○</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--open">○</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--closed">×</span></td>
            </tr>
            <tr class="schedule__row">
              <td class="schedule__td schedule__td--time">14:30〜18:00</td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--open">○</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--open">○</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--half">△</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--closed">×</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--open">○</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--half">△</span></td>
              <td class="schedule__td"><span class="schedule__mark schedule__mark--closed">×</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="schedule__legend">
        <span class="schedule__legend-item">
          <span class="schedule__mark schedule__mark--open">○</span> 診療
        </span>
        <span class="schedule__legend-item">
          <span class="schedule__mark schedule__mark--half">△</span> 午前のみ／15:00まで
        </span>
        <span class="schedule__legend-item">
          <span class="schedule__mark schedule__mark--closed">×</span> 休診
        </span>
      </div>
      <p class="schedule__note">※ 祝日は休診となります。急患の方はお電話にてご相談ください。</p>
    </div>
  </section>
  <!-- ========== Doctors ========== -->
  <section id="doctors" class="doctors">
    <div class="doctors__inner">
      <p class="doctors__label">Doctors</p>
      <h2 class="doctors__title">医師紹介</h2>
      <p class="doctors__subtitle">経験豊富な専門医が、患者さまの健康をサポートいたします。</p>
      <div class="doctors__grid">
        <article class="doctors__card">
          <div class="doctors__photo-wrap">
            <img
              src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=400&q=80"
              alt="院長 青山 健太郎 医師のポートレート"
              class="doctors__photo"
            >
          </div>
          <div class="doctors__info">
            <span class="doctors__role">院長</span>
            <h3 class="doctors__name">青山 健太郎<span class="doctors__name-en">Kentaro Aoyama</span></h3>
            <p class="doctors__specialty">内科・アレルギー科</p>
            <p class="doctors__bio">
              東京大学医学部卒業。大学病院での15年間の臨床経験を経て、
              2018年に当院を開院。患者さま一人ひとりに向き合う丁寧な診療を大切にしています。
            </p>
            <ul class="doctors__qualifications">
              <li>日本内科学会認定 総合内科専門医</li>
              <li>日本アレルギー学会認定 アレルギー専門医</li>
            </ul>
          </div>
        </article>
        <article class="doctors__card">
          <div class="doctors__photo-wrap">
            <img
              src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=400&q=80"
              alt="副院長 山田 美咲 医師のポートレート"
              class="doctors__photo"
            >
          </div>
          <div class="doctors__info">
            <span class="doctors__role">副院長</span>
            <h3 class="doctors__name">山田 美咲<span class="doctors__name-en">Misaki Yamada</span></h3>
            <p class="doctors__specialty">皮膚科・小児科</p>
            <p class="doctors__bio">
              慶應義塾大学医学部卒業。小児科・皮膚科の専門医として、
              お子さまから大人まで幅広い年齢層の診療を担当。
              特にアトピー性皮膚炎の治療を得意としています。
            </p>
            <ul class="doctors__qualifications">
              <li>日本皮膚科学会認定 皮膚科専門医</li>
              <li>日本小児科学会認定 小児科専門医</li>
            </ul>
          </div>
        </article>
      </div>
    </div>
  </section>
  <!-- ========== Access ========== -->
  <section id="access" class="access">
    <div class="access__inner">
      <p class="access__label">Access</p>
      <h2 class="access__title">アクセス</h2>
      <div class="access__content">
        <div class="access__info">
          <dl class="access__list">
            <div class="access__list-item">
              <dt class="access__list-label">医院名</dt>
              <dd class="access__list-value">青山メディカルクリニック</dd>
            </div>
            <div class="access__list-item">
              <dt class="access__list-label">所在地</dt>
              <dd class="access__list-value">〒107-0062<br>東京都港区南青山3-8-15 青山ビル2F</dd>
            </div>
            <div class="access__list-item">
              <dt class="access__list-label">電話番号</dt>
              <dd class="access__list-value"><a href="tel:03-1234-5678" class="access__tel">03-1234-5678</a></dd>
            </div>
            <div class="access__list-item">
              <dt class="access__list-label">最寄り駅</dt>
              <dd class="access__list-value">東京メトロ銀座線「外苑前駅」徒歩3分<br>東京メトロ半蔵門線「表参道駅」徒歩7分</dd>
            </div>
            <div class="access__list-item">
              <dt class="access__list-label">駐車場</dt>
              <dd class="access__list-value">提携駐車場あり（1時間無料）</dd>
            </div>
          </dl>
        </div>
        <div class="access__map">
          <div class="access__map-placeholder" aria-label="クリニックの地図（準備中）">
            <span class="access__map-icon">📍</span>
            <p class="access__map-text">Google Map</p>
            <p class="access__map-note">※ 実際のサイトではここにGoogle Mapを埋め込みます</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ========== Contact CTA ========== -->
  <section id="contact" class="contact">
    <div class="contact__inner">
      <h2 class="contact__title">ご予約・お問い合わせ</h2>
      <p class="contact__description">
        お電話またはWebからご予約を承っております。<br>
        お気軽にお問い合わせください。
      </p>
      <div class="contact__actions">
        <a href="tel:03-1234-5678" class="contact__btn contact__btn--tel">
          <span class="contact__btn-icon">📞</span>
          <span class="contact__btn-text">
            <span class="contact__btn-label">お電話でのご予約</span>
            <span class="contact__btn-number">03-1234-5678</span>
          </span>
        </a>
        <a href="#" class="contact__btn contact__btn--web">
          <span class="contact__btn-icon">📅</span>
          <span class="contact__btn-text">
            <span class="contact__btn-label">Webでのご予約</span>
            <span class="contact__btn-number">24時間受付中</span>
          </span>
        </a>
      </div>
      <p class="contact__hours">受付時間: 9:00〜18:00（木・日・祝日を除く）</p>
    </div>
  </section>

  <!-- ========== Footer ========== -->
  <footer class="footer">
    <div class="footer__inner">
      <div class="footer__top">
        <div class="footer__brand">
          <span class="footer__logo-icon">✚</span>
          <span class="footer__logo-text">青山メディカルクリニック</span>
          <p class="footer__address">〒107-0062 東京都港区南青山3-8-15 青山ビル2F</p>
        </div>
        <nav class="footer__nav" aria-label="フッターナビゲーション">
          <ul class="footer__nav-list">
            <li><a href="#about" class="footer__nav-link">当院について</a></li>
            <li><a href="#services" class="footer__nav-link">診療科目</a></li>
            <li><a href="#schedule" class="footer__nav-link">診療時間</a></li>
            <li><a href="#doctors" class="footer__nav-link">医師紹介</a></li>
            <li><a href="#access" class="footer__nav-link">アクセス</a></li>
            <li><a href="#contact" class="footer__nav-link">ご予約</a></li>
          </ul>
        </nav>
      </div>
      <div class="footer__bottom">
        <p class="footer__copyright">&copy; 2024 青山メディカルクリニック All Rights Reserved.</p>
        <p class="footer__note">※ これは学習用のデモサイトです。実在の医療機関ではありません。</p>
      </div>
    </div>
  </footer>
</body>
</html>

Self Check

0 / 9

Submit

Discord #提出-corporate チャンネルに以下を投稿

  1. 1デプロイURL
  2. 2GitHubリポジトリURL
  3. 3工夫した点3つ
  4. 4クライアントへの提案メッセージ案

Freelance Value

クリニック・歯科医院のサイト制作。相場：150,000〜350,000円

企業・コーポレート系の他の課題を見る