NWA Coding Lab
C06🏢企業・コーポレート系上級

株式会社モノづくり

製造業

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

Client Brief

工

工藤 正明広報部長

株式会社モノづくり

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

創業1968年の精密機器メーカー。グローバル展開を加速するにあたり、英語対応のコーポレートサイトが必要。IR情報と採用ページも強化したい。

ご要望

  • 1多階層メガメニューで全コンテンツにアクセス可能
  • 2企業沿革をタイムラインで表示
  • 3IR情報セクション
  • 4採用ページ
  • 5英語切替UI（プレースホルダー）

予算

¥600,000

納期

3ヶ月

種別

リニューアル

クライアントの人柄

堅実、品質至上主義、グローバル志向、長期視点

避けてほしいこと

スタートアップ感カジュアルすぎるトーン軽い印象

成功指標

海外取引先からの問い合わせ増加と、新卒採用応募数20%増

追加メモ

"BMWやBoschのような、ドイツ的なインダストリアルデザインが理想。精密さと信頼感を。"

Preview

フル画面で開く →
/demo/C06-monozukuri-corp/index.html

Learning Points

1

多階層メガメニュー

2

IR・採用情報

3

言語切替

4

企業沿革タイムライン

How to Build

01

Step 1: メガメニュー設計

60分

5つのトップレベルカテゴリとサブメニュー構造を設計。CSSのみでの実装方針を策定。

成果物: メニュー構造図

02

Step 2: HTML構造

120分

メガメニュー→ヒーロー→About（キーナンバー）→事業内容→沿革→IR→採用→アクセス→メガフッター。

成果物: 完全なHTML

03

Step 3: インダストリアルCSS

150分

鋼鉄グレー配色、DM Serif Display見出し、グリッド線背景。メガメニューの:hover実装。

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

04

Step 4: タイムライン＋JS

120分

縦タイムライン（左右交互）、モバイルハンバーガー、言語切替ボタン。

成果物: ほぼ完成形

05

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

90分

メガメニューのモバイル変換、タイムラインの1カラム化、キーナンバーの調整。

成果物: 完成版

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=DM+Serif+Display&family=IBM+Plex+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" id="header">
    <div class="header__inner">
      <a href="#" class="header__logo">
        <span class="header__logo-mark">M</span>
        <span class="header__logo-text">MONOZUKURI<small>株式会社モノづくり</small></span>
      </a>

      <nav class="header__nav" id="globalNav">
        <ul class="mega-menu">
          <li class="mega-menu__item mega-menu__item--has-children">
            <a href="#business" class="mega-menu__link">事業内容</a>
            <div class="mega-menu__dropdown">
              <div class="mega-menu__dropdown-inner">
                <div class="mega-menu__column">
                  <h4 class="mega-menu__column-title">製造事業</h4>
                  <ul class="mega-menu__sub-list">
                    <li><a href="#business">精密部品加工</a></li>
                    <li><a href="#business">金属プレス加工</a></li>
                    <li><a href="#business">表面処理技術</a></li>
                  </ul>
                </div>
                <div class="mega-menu__column">
                  <h4 class="mega-menu__column-title">設計・開発</h4>
                  <ul class="mega-menu__sub-list">
                    <li><a href="#business">産業機械設計</a></li>
                    <li><a href="#business">CAD/CAMエンジニアリング</a></li>
                    <li><a href="#business">試作・プロトタイピング</a></li>
                  </ul>
                </div>
                <div class="mega-menu__column">
                  <h4 class="mega-menu__column-title">ソリューション</h4>
                  <ul class="mega-menu__sub-list">
                    <li><a href="#business">品質管理コンサルティング</a></li>
                    <li><a href="#business">生産ライン最適化</a></li>
                    <li><a href="#business">IoT/DX支援</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li class="mega-menu__item mega-menu__item--has-children">
            <a href="#" class="mega-menu__link">製品情報</a>
            <div class="mega-menu__dropdown">
              <div class="mega-menu__dropdown-inner">
                <div class="mega-menu__column">
                  <h4 class="mega-menu__column-title">製品カテゴリ</h4>
                  <ul class="mega-menu__sub-list">
                    <li><a href="#">精密部品</a></li>
                    <li><a href="#">産業機械</a></li>
                    <li><a href="#">検査装置</a></li>
                  </ul>
                </div>
                <div class="mega-menu__column">
                  <h4 class="mega-menu__column-title">対応業界</h4>
                  <ul class="mega-menu__sub-list">
                    <li><a href="#">自動車</a></li>
                    <li><a href="#">半導体</a></li>
                    <li><a href="#">医療機器</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li class="mega-menu__item mega-menu__item--has-children">
            <a href="#ir" class="mega-menu__link">IR情報</a>
            <div class="mega-menu__dropdown">
              <div class="mega-menu__dropdown-inner">
                <div class="mega-menu__column">
                  <h4 class="mega-menu__column-title">投資家情報</h4>
                  <ul class="mega-menu__sub-list">
                    <li><a href="#ir">業績ハイライト</a></li>
                    <li><a href="#ir">決算短信</a></li>
                    <li><a href="#ir">株主総会</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li class="mega-menu__item">
            <a href="#recruit" class="mega-menu__link">採用</a>
          </li>
          <li class="mega-menu__item">
            <a href="#contact" class="mega-menu__link mega-menu__link--cta">お問い合わせ</a>
          </li>
        </ul>
      </nav>

      <div class="header__actions">
        <button class="lang-toggle" id="langToggle" type="button" aria-label="言語切替">
          <span class="lang-toggle__option lang-toggle__option--active" data-lang="ja">JP</span>
          <span class="lang-toggle__divider">/</span>
          <span class="lang-toggle__option" data-lang="en">EN</span>
        </button>
        <button class="header__hamburger" id="hamburgerBtn" type="button" 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>
    </div>
  </header>

  <!-- HERO -->
  <section class="hero" id="top">
    <div class="hero__bg" style="background-image: url('https://images.unsplash.com/photo-1565043666747-69f6646db940?w=2000&q=80');"></div>
    <div class="hero__overlay"></div>
    <div class="hero__content">
      <p class="hero__subtitle">Engineering Precision Since 1968</p>
      <h1 class="hero__title">精密から、<br>未来を削り出す。</h1>
      <p class="hero__description">半世紀を超える技術の蓄積と、絶え間ない革新。<br>株式会社モノづくりは、日本の製造業の未来を切り拓きます。</p>
      <div class="hero__actions">
        <a href="#business" class="btn btn--primary">事業内容を見る</a>
        <a href="#contact" class="btn btn--outline">お問い合わせ</a>
      </div>
    </div>
    <div class="hero__scroll-indicator">
      <span>Scroll</span>
      <div class="hero__scroll-line"></div>
    </div>
  </section>
  <!-- ABOUT -->
  <section class="about" id="about">
    <div class="container">
      <div class="section-header">
        <span class="section-header__label">About Us</span>
        <h2 class="section-header__title">企業概要</h2>
      </div>
      <div class="about__grid">
        <div class="about__text">
          <p class="about__lead">1968年の創業以来、私たちは「精密」と「品質」を軸に、日本のモノづくりの発展に貢献してまいりました。</p>
          <p>自動車部品から半導体製造装置、医療機器まで、幅広い産業分野で高精度な部品加工と産業機械の設計・製造を手がけています。ドイツ工学の精密思想と日本の職人技を融合し、ミクロン単位の精度で世界品質を実現します。</p>
          <p>国内3拠点、海外2拠点の生産ネットワークを活かし、お客様のグローバルなサプライチェーンを支えます。</p>
        </div>
        <div class="about__numbers">
          <div class="about__number-item">
            <span class="about__number-value">1968</span>
            <span class="about__number-label">創業</span>
          </div>
          <div class="about__number-item">
            <span class="about__number-value">285<small>億円</small></span>
            <span class="about__number-label">売上高（2025年度）</span>
          </div>
          <div class="about__number-item">
            <span class="about__number-value">1,240<small>名</small></span>
            <span class="about__number-label">社員数（連結）</span>
          </div>
          <div class="about__number-item">
            <span class="about__number-value">5<small>拠点</small></span>
            <span class="about__number-label">国内外拠点数</span>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- BUSINESS -->
  <section class="business" id="business">
    <div class="container">
      <div class="section-header section-header--light">
        <span class="section-header__label">Business</span>
        <h2 class="section-header__title">事業内容</h2>
      </div>
      <div class="business__grid">
        <article class="business__card">
          <div class="business__card-icon">
            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
              <circle cx="24" cy="24" r="18"/>
              <path d="M24 12v24M12 24h24M17 17l14 14M31 17L17 31"/>
            </svg>
          </div>
          <div class="business__card-image" style="background-image: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=600&q=80');"></div>
          <div class="business__card-body">
            <h3 class="business__card-title">精密部品加工</h3>
            <p class="business__card-text">CNC旋盤・マシニングセンタによるミクロン単位の精密加工。自動車・半導体・医療分野の厳格な品質基準に対応。</p>
            <a href="#" class="business__card-link">詳しく見る &rarr;</a>
          </div>
        </article>
        <article class="business__card">
          <div class="business__card-icon">
            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
              <rect x="8" y="8" width="32" height="32" rx="2"/>
              <path d="M16 24h16M24 16v16"/>
            </svg>
          </div>
          <div class="business__card-image" style="background-image: url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=600&q=80');"></div>
          <div class="business__card-body">
            <h3 class="business__card-title">産業機械設計</h3>
            <p class="business__card-text">3D CAD/CAMを駆使した産業機械の設計・開発。自動化ライン構築からカスタム装置まで対応。</p>
            <a href="#" class="business__card-link">詳しく見る &rarr;</a>
          </div>
        </article>
        <article class="business__card">
          <div class="business__card-icon">
            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
              <path d="M8 40V20l16-12 16 12v20H8z"/>
              <path d="M20 40V28h8v12"/>
            </svg>
          </div>
          <div class="business__card-image" style="background-image: url('https://images.unsplash.com/photo-1565043666747-69f6646db940?w=800&q=80');"></div>
          <div class="business__card-body">
            <h3 class="business__card-title">品質管理・検査</h3>
            <p class="business__card-text">三次元測定機・画像検査装置による全数検査体制。ISO 9001 / IATF 16949認証取得工場で万全の品質保証。</p>
            <a href="#" class="business__card-link">詳しく見る &rarr;</a>
          </div>
        </article>
        <article class="business__card">
          <div class="business__card-icon">
            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
              <circle cx="24" cy="16" r="8"/>
              <path d="M8 42c0-8.837 7.163-16 16-16s16 7.163 16 16"/>
            </svg>
          </div>
          <div class="business__card-image" style="background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&q=80');"></div>
          <div class="business__card-body">
            <h3 class="business__card-title">DX・IoTソリューション</h3>
            <p class="business__card-text">製造現場のデジタル化を推進。IoTセンサー導入からデータ分析基盤構築、生産管理システム開発まで。</p>
            <a href="#" class="business__card-link">詳しく見る &rarr;</a>
          </div>
        </article>
      </div>
    </div>
  </section>
  <!-- HISTORY TIMELINE -->
  <section class="history" id="history">
    <div class="container">
      <div class="section-header">
        <span class="section-header__label">History</span>
        <h2 class="section-header__title">沿革</h2>
      </div>
      <div class="timeline">
        <div class="timeline__line"></div>

        <div class="timeline__item timeline__item--left">
          <div class="timeline__dot"></div>
          <div class="timeline__content">
            <span class="timeline__year">1968</span>
            <h3 class="timeline__title">創業</h3>
            <p>大阪府東大阪市にてモノづくり製作所として創業。金属プレス加工を開始。</p>
          </div>
        </div>
        <div class="timeline__item timeline__item--right">
          <div class="timeline__dot"></div>
          <div class="timeline__content">
            <span class="timeline__year">1975</span>
            <h3 class="timeline__title">法人化</h3>
            <p>株式会社モノづくりに改組。NC旋盤を導入し精密加工事業を本格化。</p>
          </div>
        </div>
        <div class="timeline__item timeline__item--left">
          <div class="timeline__dot"></div>
          <div class="timeline__content">
            <span class="timeline__year">1983</span>
            <h3 class="timeline__title">第一工場竣工</h3>
            <p>愛知県豊田市に第一工場を新設。自動車部品の量産体制を確立。</p>
          </div>
        </div>
        <div class="timeline__item timeline__item--right">
          <div class="timeline__dot"></div>
          <div class="timeline__content">
            <span class="timeline__year">1992</span>
            <h3 class="timeline__title">ISO 9001取得</h3>
            <p>品質マネジメントシステムISO 9001認証を取得。品質管理体制を強化。</p>
          </div>
        </div>
        <div class="timeline__item timeline__item--left">
          <div class="timeline__dot"></div>
          <div class="timeline__content">
            <span class="timeline__year">2005</span>
            <h3 class="timeline__title">海外展開・半導体参入</h3>
            <p>クリーンルーム対応設備を導入し半導体分野へ参入。タイに現地法人設立。</p>
          </div>
        </div>
        <div class="timeline__item timeline__item--right">
          <div class="timeline__dot"></div>
          <div class="timeline__content">
            <span class="timeline__year">2015</span>
            <h3 class="timeline__title">第二工場竣工</h3>
            <p>静岡県浜松市に第二工場を新設。医療機器向け精密部品の生産拠点として稼働。</p>
          </div>
        </div>
        <div class="timeline__item timeline__item--right">
          <div class="timeline__dot"></div>
          <div class="timeline__content">
            <span class="timeline__year">2020</span>
            <h3 class="timeline__title">DX推進室設置</h3>
            <p>製造現場のDX推進を本格化。IoTセンサー・AIによる品質予測システムを導入。</p>
          </div>
        </div>
        <div class="timeline__item timeline__item--left">
          <div class="timeline__dot"></div>
          <div class="timeline__content">
            <span class="timeline__year">2024</span>
            <h3 class="timeline__title">ドイツ法人設立</h3>
            <p>ドイツ・シュトゥットガルトに欧州拠点を設立。欧州自動車メーカーとの直接取引を開始。</p>
          </div>
        </div>
        <div class="timeline__item timeline__item--right">
          <div class="timeline__dot"></div>
          <div class="timeline__content">
            <span class="timeline__year">2026</span>
            <h3 class="timeline__title">次世代工場構想</h3>
            <p>AI・ロボティクスを活用した次世代スマートファクトリーの建設プロジェクトを始動。</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- IR -->
  <section class="ir" id="ir">
    <div class="container">
      <div class="section-header section-header--light">
        <span class="section-header__label">Investor Relations</span>
        <h2 class="section-header__title">IR情報</h2>
      </div>
      <div class="ir__grid">
        <a href="#" class="ir__card">
          <span class="ir__card-icon">&#9656;</span>
          <h3 class="ir__card-title">業績ハイライト</h3>
          <p class="ir__card-text">売上高・営業利益・経常利益の推移をご覧いただけます。</p>
        </a>
        <a href="#" class="ir__card">
          <span class="ir__card-icon">&#9656;</span>
          <h3 class="ir__card-title">決算短信・有価証券報告書</h3>
          <p class="ir__card-text">最新の決算情報および有価証券報告書をダウンロード。</p>
        </a>
        <a href="#" class="ir__card">
          <span class="ir__card-icon">&#9656;</span>
          <h3 class="ir__card-title">株主総会</h3>
          <p class="ir__card-text">株主総会の招集通知・決議事項をご確認いただけます。</p>
        </a>
        <a href="#" class="ir__card">
          <span class="ir__card-icon">&#9656;</span>
          <h3 class="ir__card-title">コーポレートガバナンス</h3>
          <p class="ir__card-text">経営体制・内部統制に関する情報を公開しています。</p>
        </a>
      </div>
    </div>
  </section>
  <!-- RECRUIT -->
  <section class="recruit" id="recruit">
    <div class="container">
      <div class="section-header">
        <span class="section-header__label">Recruit</span>
        <h2 class="section-header__title">採用情報</h2>
      </div>
      <div class="recruit__content">
        <div class="recruit__message">
          <h3 class="recruit__heading">精密の、その先へ。</h3>
          <p class="recruit__lead">
            モノづくりの未来を、あなたと共に。<br>
            技術と情熱で、世界品質を追求する仲間を求めています。
          </p>
          <a href="#" class="btn btn--primary">採用サイトへ</a>
        </div>
        <div class="recruit__benefits">
          <div class="recruit__benefit">
            <span class="recruit__benefit-number">01</span>
            <h4 class="recruit__benefit-title">充実の研修制度</h4>
            <p>入社後6ヶ月間の技術研修プログラム。ドイツ研修制度あり。</p>
          </div>
          <div class="recruit__benefit">
            <span class="recruit__benefit-number">02</span>
            <h4 class="recruit__benefit-title">ワークライフバランス</h4>
            <p>年間休日125日。フレックスタイム制・リモートワーク制度完備。</p>
          </div>
          <div class="recruit__benefit">
            <span class="recruit__benefit-number">03</span>
            <h4 class="recruit__benefit-title">グローバル環境</h4>
            <p>海外拠点への転勤機会。語学研修・海外留学支援制度。</p>
          </div>
          <div class="recruit__benefit">
            <span class="recruit__benefit-number">04</span>
            <h4 class="recruit__benefit-title">技術者としての成長</h4>
            <p>最先端設備での業務経験。資格取得支援・学会参加補助。</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ACCESS -->
  <section class="access" id="access">
    <div class="container">
      <div class="section-header section-header--light">
        <span class="section-header__label">Access</span>
        <h2 class="section-header__title">アクセス</h2>
      </div>
      <div class="access__grid">
        <div class="access__location">
          <span class="access__badge">本社</span>
          <h3 class="access__name">大阪本社</h3>
          <address class="access__address">
            〒577-0000<br>
            大阪府東大阪市長田中1-2-3<br>
            モノづくりビル
          </address>
          <p class="access__transport">近鉄けいはんな線「長田」駅 徒歩5分</p>
          <p class="access__tel">TEL: 06-1234-5678</p>
        </div>
        <div class="access__location">
          <span class="access__badge">工場</span>
          <h3 class="access__name">愛知第一工場</h3>
          <address class="access__address">
            〒471-0000<br>
            愛知県豊田市トヨタ町4-5-6
          </address>
          <p class="access__transport">名鉄三河線「豊田市」駅 車15分</p>
          <p class="access__tel">TEL: 0565-12-3456</p>
        </div>
        <div class="access__location">
          <span class="access__badge">工場</span>
          <h3 class="access__name">静岡第二工場</h3>
          <address class="access__address">
            〒430-0000<br>
            静岡県浜松市中区板屋町7-8-9
          </address>
          <p class="access__transport">JR東海道線「浜松」駅 車20分</p>
          <p class="access__tel">TEL: 053-456-7890</p>
        </div>
      </div>
    </div>
  </section>
  <!-- CONTACT CTA -->
  <section class="contact-cta" id="contact">
    <div class="container">
      <h2 class="contact-cta__title">お問い合わせ</h2>
      <p class="contact-cta__text">
        製品・サービスに関するご相談、お見積りのご依頼など、<br>
        お気軽にお問い合わせください。
      </p>
      <div class="contact-cta__actions">
        <a href="#" class="btn btn--primary btn--large">お問い合わせフォーム</a>
        <a href="tel:0612345678" class="btn btn--outline btn--large">06-1234-5678</a>
      </div>
    </div>
  </section>
  <!-- FOOTER -->
  <footer class="footer">
    <div class="container">
      <div class="footer__grid">
        <div class="footer__brand">
          <a href="#" class="footer__logo">
            <span class="footer__logo-mark">M</span>
            <span class="footer__logo-text">MONOZUKURI</span>
          </a>
          <p class="footer__description">
            精密部品製造・産業機械設計を通じて<br>
            日本のモノづくりを支える総合製造企業
          </p>
        </div>
        <div class="footer__nav">
          <div class="footer__nav-group">
            <h4 class="footer__nav-title">事業内容</h4>
            <ul class="footer__nav-list">
              <li><a href="#business">精密部品加工</a></li>
              <li><a href="#business">産業機械設計</a></li>
              <li><a href="#business">品質管理・検査</a></li>
              <li><a href="#business">DX・IoTソリューション</a></li>
            </ul>
          </div>
          <div class="footer__nav-group">
            <h4 class="footer__nav-title">企業情報</h4>
            <ul class="footer__nav-list">
              <li><a href="#about">企業概要</a></li>
              <li><a href="#history">沿革</a></li>
              <li><a href="#access">アクセス</a></li>
              <li><a href="#">CSR・環境</a></li>
            </ul>
          </div>
          <div class="footer__nav-group">
            <h4 class="footer__nav-title">IR・採用</h4>
            <ul class="footer__nav-list">
              <li><a href="#ir">IR情報</a></li>
              <li><a href="#recruit">採用情報</a></li>
              <li><a href="#contact">お問い合わせ</a></li>
              <li><a href="#">プライバシーポリシー</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer__bottom">
        <p class="footer__copyright">&copy; 2026 株式会社モノづくり All Rights Reserved.</p>
      </div>
    </div>
  </footer>

  <script src="js/script.js"></script>
</body>
</html>

Self Check

0 / 11

Submit

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

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

Freelance Value

中堅製造業・BtoB企業サイト。相場：300,000〜600,000円

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