NWA Coding Lab
C01🏢企業・コーポレート系初級

Bennet Tech

IT/Web制作会社 / 1ページ

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

Client Brief

佐

佐藤 拓也代表取締役

Bennet Tech株式会社

件名: 新規制作のご依頼

創業4年目のWeb制作スタジオ。これまで口コミで仕事を獲得してきたが、コーポレートサイトがなく信用面で不利。採用強化も見据えてサイトを作りたい。

ご要望

  • 1サービス内容が一目で分かる構成
  • 2実績を見せるポートフォリオセクション
  • 3お問い合わせ導線が明確

予算

¥120,000

納期

2週間

種別

新規制作

クライアントの人柄

テック志向、最新トレンドに敏感、デザインにこだわる

避けてほしいこと

古臭いコーポレート感テンプレ感過度な装飾

成功指標

サイト経由で月2件以上の新規問い合わせ

追加メモ

"VercelやStripeのサイトみたいな、黒基調でシャープな雰囲気にしたい。テック企業として信頼される見た目が必要。"

Preview

フル画面で開く →
/demo/C01-bennet-tech/index.html

Learning Points

1

セクション分割

2

サービスカード

3

実績グリッド

4

お問い合わせフォーム

How to Build

01

Step 1: 構成設計

30分

SaaS系サイトを参考に、セクション構成とカラーパレットを計画。

成果物: 構成メモ

02

Step 2: HTML骨組み

60分

ヒーロー→サービス→実績→About→コンタクト→フッターの順でマークアップ。

成果物: プレーンなHTML

03

Step 3: ダーク配色＋タイポ

90分

黒背景に電気青アクセント。Bricolage Grotesqueの巨大見出し。

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

04

Step 4: カード＋グリッド

120分

サービスカード（borderのみ）、実績Grid（span活用）、統計数字。

成果物: ほぼ完成形

05

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

60分

2カラム→1カラム切り替え。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>Bennet Tech — Web制作 / DX支援</title>
  <meta name="description" content="Bennet Tech はWebサイト制作・DX支援を手がけるデジタルスタジオ。東京・渋谷。">

  <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=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=Inter+Tight:wght@300;400;500;600;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">Bennet<span class="header__logo-dot">.</span></a>
      <nav class="header__nav">
        <a href="#services" class="header__link">Services</a>
        <a href="#works" class="header__link">Works</a>
        <a href="#about" class="header__link">About</a>
        <a href="#contact" class="header__link header__link--cta">Contact</a>
      </nav>
    </div>
  </header>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <div class="hero__inner">
      <p class="hero__eyebrow">Digital Studio — Shibuya, Tokyo</p>
      <h1 class="hero__title">
        We build<br>
        digital<br>
        products<span class="hero__title-dot">.</span>
      </h1>
      <p class="hero__lead">
        Webサイト制作からDX支援まで。<br>
        ビジネスの成長をテクノロジーで加速させます。
      </p>
      <a href="#contact" class="hero__btn">お問い合わせ</a>
    </div>
  </section>

  <!-- ============ SERVICES ============ -->
  <section id="services" class="services">
    <div class="services__inner">
      <p class="section-label">What we do</p>
      <h2 class="section-heading">Services</h2>
      <div class="services__grid">
        <article class="service-card">
          <span class="service-card__number">01</span>
          <h3 class="service-card__title">Web Design</h3>
          <p class="service-card__desc">ブランドの本質を捉えたUIデザイン。Figmaによるプロトタイプから納品まで。</p>
        </article>
        <article class="service-card">
          <span class="service-card__number">02</span>
          <h3 class="service-card__title">Development</h3>
          <p class="service-card__desc">Next.js / React / WordPress。パフォーマンスとアクセシビリティを重視した開発。</p>
        </article>
        <article class="service-card">
          <span class="service-card__number">03</span>
          <h3 class="service-card__title">DX Consulting</h3>
          <p class="service-card__desc">業務フローのデジタル化、SaaS導入支援、社内ツール開発。</p>
        </article>
        <article class="service-card">
          <span class="service-card__number">04</span>
          <h3 class="service-card__title">Branding</h3>
          <p class="service-card__desc">ロゴ・VI設計からブランドガイドラインの策定まで一貫してサポート。</p>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ WORKS ============ -->
  <section id="works" class="works">
    <div class="works__inner">
      <p class="section-label">Selected projects</p>
      <h2 class="section-heading">Works</h2>
      <div class="works__grid">
        <article class="work-card work-card--wide">
          <div class="work-card__image">
            <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&q=80" alt="ダッシュボードUI">
          </div>
          <div class="work-card__info">
            <span class="work-card__tag">SaaS</span>
            <h3 class="work-card__title">CloudFlow Dashboard</h3>
            <p class="work-card__desc">SaaSスタートアップのダッシュボードUI刷新</p>
          </div>
        </article>
        <article class="work-card">
          <div class="work-card__image">
            <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&q=80" alt="チームワーク">
          </div>
          <div class="work-card__info">
            <span class="work-card__tag">Corporate</span>
            <h3 class="work-card__title">HR Tech Corp.</h3>
            <p class="work-card__desc">人材テック企業のコーポレートサイト新規制作</p>
          </div>
        </article>
        <article class="work-card">
          <div class="work-card__image">
            <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&q=80" alt="開発チーム">
          </div>
          <div class="work-card__info">
            <span class="work-card__tag">EC</span>
            <h3 class="work-card__title">MONO Store</h3>
            <p class="work-card__desc">D2Cブランドの自社ECサイト構築</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ ABOUT ============ -->
  <section id="about" class="about">
    <div class="about__inner">
      <div class="about__text">
        <p class="section-label">Who we are</p>
        <h2 class="section-heading">About</h2>
        <p class="about__body">
          Bennet Techは2021年に渋谷で創業したデジタルスタジオです。「テクノロジーでビジネスを前に進める」をミッションに、Webサイト制作・アプリ開発・DX支援を提供しています。
        </p>
        <p class="about__body">
          少数精鋭のチームで、デザインからフロントエンド・バックエンドまで一貫して対応。スタートアップから上場企業まで、50社以上の実績があります。
        </p>
      </div>
      <div class="about__stats">
        <div class="about__stat">
          <span class="about__stat-number">50+</span>
          <span class="about__stat-label">Projects</span>
        </div>
        <div class="about__stat">
          <span class="about__stat-number">4</span>
          <span class="about__stat-label">Years</span>
        </div>
        <div class="about__stat">
          <span class="about__stat-number">8</span>
          <span class="about__stat-label">Members</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ CONTACT ============ -->
  <section id="contact" class="contact">
    <div class="contact__inner">
      <h2 class="contact__heading">Let's talk<span class="contact__dot">.</span></h2>
      <p class="contact__text">プロジェクトのご相談はお気軽にどうぞ。</p>
      <a href="mailto:hello@bennet-tech.jp" class="contact__email">hello@bennet-tech.jp</a>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <div class="footer__inner">
      <span class="footer__logo">Bennet.</span>
      <div class="footer__links">
        <a href="#">Twitter</a>
        <a href="#">GitHub</a>
        <a href="#">Note</a>
      </div>
      <span class="footer__copy">&copy; 2026 Bennet Tech Inc.</span>
    </div>
  </footer>

</body>
</html>

Self Check

0 / 8

Submit

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

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

Freelance Value

中小Web制作会社・スタートアップのLP。相場：80,000〜150,000円

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