C02🏢企業・コーポレート系初級

匠工務店

建設・工務店

想定時間10h

技術HTML / CSS

完成形を見るソースコードを見る

Client Brief

田

田村匠代表

匠工務店

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

親子3代続く地域密着の工務店。現サイトが10年前のまま。施工事例を見せて新規顧客を獲得したい。

ご要望

1施工事例ギャラリーが充実している
2職人の技術力が伝わるデザイン
3信頼感のある和の雰囲気

予算

¥180,000

納期

1ヶ月

種別

リニューアル

クライアントの人柄

実直、仕事に誇りを持つ、言葉より行動で示すタイプ

避けてほしいこと

チープな印象派手すぎるデザイン洋風すぎる雰囲気

成功指標

施工事例ページからの問い合わせ月5件以上

追加メモ

"うちは木の温もりを大事にしてる。サイトにもその質感を出してほしい。"

Preview

フル画面で開く →

/demo/C02-takumi-koumuten/index.html

Learning Points

施工事例カード

before/after表示

強い色使い

信頼感の演出

How to Build

Step 1: 和の設計

30分

檜色・藍色の和風配色と明朝体の組み合わせを計画。

成果物: カラー・フォントメモ

Step 2: HTML骨組み

60分

ヒーロー→About→施工事例→サービス→会社概要→フッター。

成果物: プレーンHTML

Step 3: 和風配色＋タイポ

90分

Shippori Mincho見出し、Zen Kaku Gothic New本文。太罫線の和テイスト。

成果物: 配色完成

Step 4: ギャラリー＋カード

120分

施工事例のGridギャラリー、サービスカード、会社概要dl/dt/dd。

成果物: ほぼ完成形

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

60分

ギャラリーの列数調整、ホバーエフェクト。

成果物: 完成版

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=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@300;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-sub">工務店</span></a>
      <nav class="header__nav">
        <a href="#about" class="header__link">私たちについて</a>
        <a href="#works" class="header__link">施工事例</a>
        <a href="#services" class="header__link">事業内容</a>
        <a href="#access" class="header__link">会社概要</a>
        <a href="#access" class="header__link header__link--cta">お問い合わせ</a>
      </nav>
    </div>
  </header>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <div class="hero__overlay"></div>
    <img class="hero__bg" src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=2000&q=80" alt="日本の伝統建築と木造住宅の外観">
    <div class="hero__inner">
      <p class="hero__eyebrow">— 創業四十年 —</p>
      <h1 class="hero__title">木と暮らす。<br>匠の技で、<br>未来を建てる。</h1>
      <p class="hero__lead">
        日本の伝統建築技術と現代の快適さを融合。<br>
        一棟一棟、心を込めた家づくり。
      </p>
      <a href="#works" class="hero__btn">施工事例を見る</a>
    </div>
  </section>

  <!-- ============ ABOUT ============ -->
  <section id="about" class="about">
    <div class="about__inner">
      <div class="about__image">
        <img src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=800&q=80" alt="職人による木材加工の様子">
      </div>
      <div class="about__text">
        <p class="section-label">私たちについて</p>
        <h2 class="section-heading">木のぬくもりを、<br>暮らしのまんなかに。</h2>
        <p class="about__body">
          匠工務店は1986年の創業以来、日本の伝統建築技術を継承しながら、現代の暮らしに寄り添う住まいづくりを続けてまいりました。
        </p>
        <p class="about__body">
          無垢材の選定から構造設計、仕上げの一手間まで、すべてに職人の誇りを込めています。「百年住める家」を合言葉に、お客様の想いをかたちにします。
        </p>
        <div class="about__stats">
          <div class="about__stat">
            <span class="about__stat-number">40</span>
            <span class="about__stat-label">年の歴史</span>
          </div>
          <div class="about__stat">
            <span class="about__stat-number">500+</span>
            <span class="about__stat-label">施工実績</span>
          </div>
          <div class="about__stat">
            <span class="about__stat-number">12</span>
            <span class="about__stat-label">名の職人</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ WORKS ============ -->
  <section id="works" class="works">
    <div class="works__inner">
      <p class="section-label">施工事例</p>
      <h2 class="section-heading">匠の仕事</h2>
      <div class="works__grid">
        <article class="work-card">
          <div class="work-card__image">
            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=800&q=80" alt="モダン和風住宅の外観">
            <span class="work-card__overlay">詳しく見る</span>
          </div>
          <div class="work-card__info">
            <span class="work-card__tag">新築</span>
            <h3 class="work-card__title">世田谷の家</h3>
            <p class="work-card__desc">無垢ヒノキと漆喰で仕上げた和モダン住宅。延床面積120㎡。</p>
          </div>
        </article>
        <article class="work-card">
          <div class="work-card__image">
            <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&q=80" alt="伝統的な日本家屋の外観">
            <span class="work-card__overlay">詳しく見る</span>
          </div>
          <div class="work-card__info">
            <span class="work-card__tag">リフォーム</span>
            <h3 class="work-card__title">鎌倉の古民家再生</h3>
            <p class="work-card__desc">築80年の古民家を断熱改修。伝統構法を活かしつつ現代の快適性を実現。</p>
          </div>
        </article>
        <article class="work-card">
          <div class="work-card__image">
            <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&q=80" alt="木の質感が美しい室内空間">
            <span class="work-card__overlay">詳しく見る</span>
          </div>
          <div class="work-card__info">
            <span class="work-card__tag">店舗</span>
            <h3 class="work-card__title">青山の茶室カフェ</h3>
            <p class="work-card__desc">数寄屋造りの技法を取り入れた茶室風カフェの内装設計・施工。</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ SERVICES ============ -->
  <section id="services" class="services">
    <div class="services__inner">
      <p class="section-label">事業内容</p>
      <h2 class="section-heading">三つの柱</h2>
      <div class="services__grid">
        <article class="service-card">
          <span class="service-card__icon">壱</span>
          <h3 class="service-card__title">注文住宅</h3>
          <p class="service-card__desc">
            お客様の暮らし方をじっくりお聞きし、土地の特性を活かした設計・施工を行います。無垢材・自然素材にこだわった、世界にひとつの住まいをご提案。
          </p>
        </article>
        <article class="service-card">
          <span class="service-card__icon">弐</span>
          <h3 class="service-card__title">リフォーム・リノベーション</h3>
          <p class="service-card__desc">
            古民家再生から水回り改修まで、建物の状態を丁寧に診断。既存の良さを活かしながら、現代の断熱・耐震基準に対応した改修をご提案します。
          </p>
        </article>
        <article class="service-card">
          <span class="service-card__icon">参</span>
          <h3 class="service-card__title">店舗・商業施設</h3>
          <p class="service-card__desc">
            飲食店・物販店舗の内装設計・施工。和の空間演出からモダンデザインまで、お店のコンセプトに合わせた空間をつくります。
          </p>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ ACCESS ============ -->
  <section id="access" class="access">
    <div class="access__inner">
      <p class="section-label">会社概要</p>
      <h2 class="section-heading">匠工務店</h2>
      <dl class="access__info">
        <dt>社名</dt>
        <dd>株式会社 匠工務店</dd>
        <dt>代表</dt>
        <dd>棟梁 山本 匠</dd>
        <dt>創業</dt>
        <dd>1986年（昭和61年）</dd>
        <dt>所在地</dt>
        <dd>〒154-0023 東京都世田谷区若林3-12-8</dd>
        <dt>電話番号</dt>
        <dd>03-1234-5678</dd>
        <dt>営業時間</dt>
        <dd>9:00〜18:00（日曜・祝日定休）</dd>
        <dt>事業内容</dt>
        <dd>注文住宅の設計・施工 / リフォーム・リノベーション / 店舗内装工事</dd>
        <dt>資格</dt>
        <dd>一級建築士事務所（東京都知事登録）/ 建設業許可（東京都知事許可）</dd>
      </dl>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <div class="footer__inner">
      <span class="footer__logo">匠工務店</span>
      <div class="footer__links">
        <a href="#">Instagram</a>
        <a href="#">Facebook</a>
        <a href="#">ブログ</a>
      </div>
      <span class="footer__copy">&copy; 2026 株式会社 匠工務店</span>
    </div>
  </footer>

</body>
</html>

Self Check

0 / 8

Submit

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

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

Freelance Value

地域工務店のサイトリニューアル。相場：100,000〜250,000円

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