M03📰メディア・ブログ系上級
TECH PRESS

ITニュースメディア
想定時間18h
技術HTML / CSS / JS
完成形を見るソースコードを見る
Client Brief

中
中村太一編集長
株式会社テックプレス
件名: リニューアルのご依頼
月間100万PVのITニュースメディア。既存サイトがWordPressテンプレで差別化できていない。The VergeやWiredのような先進的なデザインに刷新したい。
ご要望

1特集記事の大きなフィーチャード表示
2カテゴリ別の記事グリッド
3人気記事ランキング
4新着/人気の切替タブ
5ニュースティッカー
6メルマガ登録
予算
¥350,000
納期
2ヶ月
種別
リニューアル
クライアントの人柄

スピード重視、最新テック情報への嗅覚が鋭い、デザインにもうるさい
避けてほしいこと

古いニュースサイト感広告だらけの印象読みにくいレイアウト
成功指標

リニューアル後3ヶ月でPV150万達成、滞在時間20%向上
追加メモ
"The Vergeの記事一覧ページのような、情報密度が高いけど読みやすいレイアウトが理想。赤アクセントは最小限に。"
Preview

フル画面で開く →
/demo/M03-tech-press/index.html
Learning Points

多カラムグリッド
特集セクション
ランキング表示
新着・人気切替
How to Build

Step 1: グリッド設計

60分
フィーチャード＋カテゴリ記事＋ランキングサイドバーの多カラム配置を設計。
成果物: グリッド設計図
Step 2: HTML構造

120分
ティッカー→フィーチャード→タブ切替→カテゴリ記事→ランキング→メルマガ→フッター。
成果物: 完全なHTML
Step 3: 新聞風CSS

120分
PT Serif見出し、IBM Plex Sans本文。多カラムGrid。ティッカーアニメーション。
成果物: ビジュアル完成
Step 4: タブ切替JS

60分
新着/人気タブの表示切替。ハンバーガーメニュー。検索UI。
成果物: インタラクション完成
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>TECH PRESS — IT News Media</title>
  <meta name="description" content="TECH PRESS — 最新のテクノロジーニュース、AI、Web開発、スタートアップ情報をお届けするITニュースメディア">
  <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=IBM+Plex+Sans:wght@300;400;500;600&family=PT+Serif:ital,wght@0,400;0,700;1,400&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-text">TECH</span>
        <span class="header__logo-accent">PRESS</span>
      </a>

      <nav class="header__nav" id="js-nav">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#" class="header__nav-link header__nav-link--active">AI</a></li>
          <li class="header__nav-item"><a href="#" class="header__nav-link">Web</a></li>
          <li class="header__nav-item"><a href="#" class="header__nav-link">Startup</a></li>
          <li class="header__nav-item"><a href="#" class="header__nav-link">Gadget</a></li>
          <li class="header__nav-item"><a href="#" class="header__nav-link">Opinion</a></li>
        </ul>
      </nav>

      <div class="header__actions">
        <button class="header__search-btn" id="js-search-toggle" aria-label="検索を開く">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </button>
        <button class="header__hamburger" id="js-hamburger" aria-label="メニューを開く">
          <span class="header__hamburger-line"></span>
          <span class="header__hamburger-line"></span>
          <span class="header__hamburger-line"></span>
        </button>
      </div>
    </div>

    <!-- Search overlay -->
    <div class="header__search-overlay" id="js-search-overlay">
      <div class="header__search-container">
        <input type="search" class="header__search-input" placeholder="記事を検索..." aria-label="検索">
        <button class="header__search-close" id="js-search-close" aria-label="検索を閉じる">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>
  </header>

  <!-- ============================
       BREAKING / TICKER
  ============================= -->
  <div class="ticker">
    <div class="ticker__label">BREAKING</div>
    <div class="ticker__track">
      <div class="ticker__content">
        <span class="ticker__item">OpenAI announces GPT-5 with unprecedented reasoning capabilities — Stock surges 12% in pre-market trading</span>
        <span class="ticker__separator">|</span>
        <span class="ticker__item">Google DeepMind、新たな汎用AIモデル「Gemini Ultra 2」を発表</span>
        <span class="ticker__separator">|</span>
        <span class="ticker__item">Apple Vision Pro 2 leak reveals major price reduction and improved display technology</span>
        <span class="ticker__separator">|</span>
        <span class="ticker__item">日本政府、AI規制法案の骨子を公表 — 2026年施行を目指す</span>
        <span class="ticker__separator">|</span>
        <span class="ticker__item">OpenAI announces GPT-5 with unprecedented reasoning capabilities — Stock surges 12% in pre-market trading</span>
        <span class="ticker__separator">|</span>
        <span class="ticker__item">Google DeepMind、新たな汎用AIモデル「Gemini Ultra 2」を発表</span>
        <span class="ticker__separator">|</span>
      </div>
    </div>
  </div>

  <main class="main">

    <!-- ============================
         FEATURED SECTION
    ============================= -->
    <section class="featured">
      <div class="featured__inner">
        <article class="featured__hero">
          <a href="#" class="featured__hero-link">
            <div class="featured__hero-image-wrap">
              <img
                src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=1200&q=80"
                alt="テクノロジー回路基板"
                class="featured__hero-image"
                loading="eager"
              >
              <span class="featured__hero-tag">AI</span>
            </div>
            <div class="featured__hero-body">
              <h2 class="featured__hero-title">次世代AIが変える産業構造 — 2026年、企業が取るべき戦略とは</h2>
              <p class="featured__hero-excerpt">
                生成AIの急速な進化により、あらゆる産業で構造変革が加速している。マッキンゼーの最新レポートによると、2026年までにAI導入企業の生産性は平均40%向上すると予測。先進企業の取り組みと、今後の戦略を徹底解説する。
              </p>
              <div class="featured__hero-meta">
                <span class="featured__hero-author">田中 太郎</span>
                <time class="featured__hero-time" datetime="2026-04-08">2026.04.08</time>
                <span class="featured__hero-read">8 min read</span>
              </div>
            </div>
          </a>
        </article>

        <div class="featured__sub">
          <article class="featured__sub-item">
            <a href="#" class="featured__sub-link">
              <div class="featured__sub-image-wrap">
                <img
                  src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=600&q=80"
                  alt="プログラミングコード"
                  class="featured__sub-image"
                  loading="eager"
                >
                <span class="featured__sub-tag">Web</span>
              </div>
              <div class="featured__sub-body">
                <h3 class="featured__sub-title">React 20がリリース — サーバーコンポーネントの完全統合と新しいコンパイラ</h3>
                <div class="featured__sub-meta">
                  <span class="featured__sub-author">鈴木 一郎</span>
                  <time class="featured__sub-time" datetime="2026-04-08">2026.04.08</time>
                </div>
              </div>
            </a>
          </article>

          <article class="featured__sub-item">
            <a href="#" class="featured__sub-link">
              <div class="featured__sub-image-wrap">
                <img
                  src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=600&q=80"
                  alt="ノートパソコン"
                  class="featured__sub-image"
                  loading="eager"
                >
                <span class="featured__sub-tag">Startup</span>
              </div>
              <div class="featured__sub-body">
                <h3 class="featured__sub-title">日本発AIスタートアップが$100M調達 — グローバル展開を加速</h3>
                <div class="featured__sub-meta">
                  <span class="featured__sub-author">佐藤 美咲</span>
                  <time class="featured__sub-time" datetime="2026-04-07">2026.04.07</time>
                </div>
              </div>
            </a>
          </article>
        </div>
      </div>
    </section>

    <!-- ============================
         CONTENT + SIDEBAR LAYOUT
    ============================= -->
    <div class="content-layout">
      <div class="content-layout__inner">
        <div class="content-layout__main">

          <!-- TABS: 新着 / 人気 -->
          <div class="tabs">
            <div class="tabs__header">
              <button class="tabs__btn tabs__btn--active" data-tab="latest">新着</button>
              <button class="tabs__btn" data-tab="popular">人気</button>
            </div>
            <div class="tabs__indicator"></div>
          </div>

          <!-- AI & Machine Learning -->
          <section class="category-section" id="tab-latest">
            <div class="category-section__header">
              <h2 class="category-section__title">AI &amp; Machine Learning</h2>
              <a href="#" class="category-section__more">すべて見る →</a>
            </div>

            <div class="category-section__grid">
              <article class="article-card">
                <a href="#" class="article-card__link">
                  <div class="article-card__image-wrap">
                    <img
                      src="https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&q=80"
                      alt="AIイメージ"
                      class="article-card__image"
                      loading="lazy"
                    >
                  </div>
                  <div class="article-card__body">
                    <span class="article-card__tag">AI</span>
                    <h3 class="article-card__title">マルチモーダルAIの最前線 — テキスト・画像・動画を統合する新アーキテクチャ</h3>
                    <p class="article-card__excerpt">Transformerを超える新しいアーキテクチャが登場。複数のモダリティをシームレスに処理する技術の詳細を解説。</p>
                    <div class="article-card__meta">
                      <span class="article-card__author">山田 健太</span>
                      <time class="article-card__time" datetime="2026-04-07">2026.04.07</time>
                    </div>
                  </div>
                </a>
              </article>

              <article class="article-card">
                <a href="#" class="article-card__link">
                  <div class="article-card__image-wrap">
                    <img
                      src="https://images.unsplash.com/photo-1555255707-c07966088b7b?w=400&q=80"
                      alt="ロボット"
                      class="article-card__image"
                      loading="lazy"
                    >
                  </div>
                  <div class="article-card__body">
                    <span class="article-card__tag">AI</span>
                    <h3 class="article-card__title">ロボティクスとAIの融合 — 自律型ロボットが工場を変える</h3>
                    <p class="article-card__excerpt">AI搭載ロボットの導入が製造業で急拡大。人手不足解消と品質向上を同時に実現する最新事例。</p>
                    <div class="article-card__meta">
                      <span class="article-card__author">中村 優子</span>
                      <time class="article-card__time" datetime="2026-04-06">2026.04.06</time>
                    </div>
                  </div>
                </a>
              </article>

              <article class="article-card">
                <a href="#" class="article-card__link">
                  <div class="article-card__image-wrap">
                    <img
                      src="https://images.unsplash.com/photo-1516110833967-0b5716ca1387?w=400&q=80"
                      alt="半導体チップ"
                      class="article-card__image"
                      loading="lazy"
                    >
                  </div>
                  <div class="article-card__body">
                    <span class="article-card__tag">AI</span>
                    <h3 class="article-card__title">NVIDIA次世代GPU発表 — AI学習速度が3倍に、価格は据え置き</h3>
                    <p class="article-card__excerpt">NVIDIAが新世代GPUアーキテクチャを発表。AI開発者にとってのインパクトと競合他社の動向を分析。</p>
                    <div class="article-card__meta">
                      <span class="article-card__author">高橋 誠</span>
                      <time class="article-card__time" datetime="2026-04-05">2026.04.05</time>
                    </div>
                  </div>
                </a>
              </article>
            </div>
          </section>

          <!-- Web Development -->
          <section class="category-section" id="tab-popular" style="display: none;">
            <div class="category-section__header">
              <h2 class="category-section__title">Web Development</h2>
              <a href="#" class="category-section__more">すべて見る →</a>
            </div>

            <div class="category-section__grid">
              <article class="article-card">
                <a href="#" class="article-card__link">
                  <div class="article-card__image-wrap">
                    <img
                      src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=400&q=80"
                      alt="コーディング画面"
                      class="article-card__image"
                      loading="lazy"
                    >
                  </div>
                  <div class="article-card__body">
                    <span class="article-card__tag">Web</span>
                    <h3 class="article-card__title">Deno 4.0登場 — Node.jsとの完全互換性とネイティブTypeScript</h3>
                    <p class="article-card__excerpt">Deno 4.0がリリース。npm互換性の大幅改善とビルトインTypeScriptコンパイラにより、開発体験が劇的に向上。</p>
                    <div class="article-card__meta">
                      <span class="article-card__author">伊藤 大輔</span>
                      <time class="article-card__time" datetime="2026-04-07">2026.04.07</time>
                    </div>
                  </div>
                </a>
              </article>

              <article class="article-card">
                <a href="#" class="article-card__link">
                  <div class="article-card__image-wrap">
                    <img
                      src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400&q=80"
                      alt="開発風景"
                      class="article-card__image"
                      loading="lazy"
                    >
                  </div>
                  <div class="article-card__body">
                    <span class="article-card__tag">Web</span>
                    <h3 class="article-card__title">CSS Container Queriesが変えるレスポンシブデザインの未来</h3>
                    <p class="article-card__excerpt">全主要ブラウザでサポートされたContainer Queries。コンポーネントベースのレスポンシブデザイン実践ガイド。</p>
                    <div class="article-card__meta">
                      <span class="article-card__author">松本 理恵</span>
                      <time class="article-card__time" datetime="2026-04-06">2026.04.06</time>
                    </div>
                  </div>
                </a>
              </article>

              <article class="article-card">
                <a href="#" class="article-card__link">
                  <div class="article-card__image-wrap">
                    <img
                      src="https://images.unsplash.com/photo-1504639725590-34d0984388bd?w=400&q=80"
                      alt="コーディング"
                      class="article-card__image"
                      loading="lazy"
                    >
                  </div>
                  <div class="article-card__body">
                    <span class="article-card__tag">Web</span>
                    <h3 class="article-card__title">WebAssembly 3.0 — ブラウザの限界を超えるパフォーマンス革命</h3>
                    <p class="article-card__excerpt">Wasm 3.0のGC統合とスレッド対応により、ブラウザアプリのパフォーマンスがネイティブアプリに迫る。</p>
                    <div class="article-card__meta">
                      <span class="article-card__author">渡辺 翔太</span>
                      <time class="article-card__time" datetime="2026-04-05">2026.04.05</time>
                    </div>
                  </div>
                </a>
              </article>
            </div>
          </section>

        </div>

        <!-- ============================
             RANKING SIDEBAR
        ============================= -->
        <aside class="ranking-sidebar">
          <h2 class="ranking-sidebar__title">人気記事 TOP 5</h2>
          <ol class="ranking-sidebar__list">
            <li class="ranking-sidebar__item">
              <span class="ranking-sidebar__number">1</span>
              <a href="#" class="ranking-sidebar__link">
                <img
                  src="https://images.unsplash.com/photo-1677442136019-21780ecad995?w=100&q=80"
                  alt="AIイメージ"
                  class="ranking-sidebar__thumb"
                  loading="lazy"
                >
                <div class="ranking-sidebar__info">
                  <span class="ranking-sidebar__tag">AI</span>
                  <h3 class="ranking-sidebar__item-title">次世代AIが変える産業構造 — 企業が取るべき戦略</h3>
                </div>
              </a>
            </li>
            <li class="ranking-sidebar__item">
              <span class="ranking-sidebar__number">2</span>
              <a href="#" class="ranking-sidebar__link">
                <img
                  src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=100&q=80"
                  alt="コード"
                  class="ranking-sidebar__thumb"
                  loading="lazy"
                >
                <div class="ranking-sidebar__info">
                  <span class="ranking-sidebar__tag">Web</span>
                  <h3 class="ranking-sidebar__item-title">React 20リリース — サーバーコンポーネント完全統合</h3>
                </div>
              </a>
            </li>
            <li class="ranking-sidebar__item">
              <span class="ranking-sidebar__number">3</span>
              <a href="#" class="ranking-sidebar__link">
                <img
                  src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=100&q=80"
                  alt="ノートパソコン"
                  class="ranking-sidebar__thumb"
                  loading="lazy"
                >
                <div class="ranking-sidebar__info">
                  <span class="ranking-sidebar__tag">Startup</span>
                  <h3 class="ranking-sidebar__item-title">日本発AIスタートアップが$100M調達</h3>
                </div>
              </a>
            </li>
            <li class="ranking-sidebar__item">
              <span class="ranking-sidebar__number">4</span>
              <a href="#" class="ranking-sidebar__link">
                <img
                  src="https://images.unsplash.com/photo-1555255707-c07966088b7b?w=100&q=80"
                  alt="ロボット"
                  class="ranking-sidebar__thumb"
                  loading="lazy"
                >
                <div class="ranking-sidebar__info">
                  <span class="ranking-sidebar__tag">AI</span>
                  <h3 class="ranking-sidebar__item-title">ロボティクスとAIの融合が工場を変える</h3>
                </div>
              </a>
            </li>
            <li class="ranking-sidebar__item">
              <span class="ranking-sidebar__number">5</span>
              <a href="#" class="ranking-sidebar__link">
                <img
                  src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=100&q=80"
                  alt="コーディング"
                  class="ranking-sidebar__thumb"
                  loading="lazy"
                >
                <div class="ranking-sidebar__info">
                  <span class="ranking-sidebar__tag">Web</span>
                  <h3 class="ranking-sidebar__item-title">Deno 4.0 — Node.jsとの完全互換性</h3>
                </div>
              </a>
            </li>
          </ol>
        </aside>

      </div>
    </div>

    <!-- ============================
         NEWSLETTER
    ============================= -->
    <section class="newsletter">
      <div class="newsletter__inner">
        <div class="newsletter__content">
          <h2 class="newsletter__title">最新テックニュースをお届け</h2>
          <p class="newsletter__description">毎朝7時、厳選されたテクノロジーニュースをあなたの受信箱に。無料で購読できます。</p>
        </div>
        <form class="newsletter__form" action="#" method="post">
          <div class="newsletter__input-group">
            <input
              type="email"
              class="newsletter__input"
              placeholder="メールアドレスを入力"
              aria-label="メールアドレス"
              required
            >
            <button type="submit" class="newsletter__btn">購読する</button>
          </div>
          <p class="newsletter__note">※ いつでも配信停止できます。<a href="#">プライバシーポリシー</a></p>
        </form>
      </div>
    </section>

  </main>

  <!-- ============================
       FOOTER
  ============================= -->
  <footer class="footer">
    <div class="footer__inner">
      <div class="footer__grid">
        <div class="footer__col">
          <h3 class="footer__col-title">カテゴリ</h3>
          <ul class="footer__list">
            <li><a href="#" class="footer__link">AI & Machine Learning</a></li>
            <li><a href="#" class="footer__link">Web Development</a></li>
            <li><a href="#" class="footer__link">Startup</a></li>
            <li><a href="#" class="footer__link">Gadget</a></li>
            <li><a href="#" class="footer__link">Opinion</a></li>
          </ul>
        </div>

        <div class="footer__col">
          <h3 class="footer__col-title">会社情報</h3>
          <ul class="footer__list">
            <li><a href="#" class="footer__link">会社概要</a></li>
            <li><a href="#" class="footer__link">編集方針</a></li>
            <li><a href="#" class="footer__link">採用情報</a></li>
            <li><a href="#" class="footer__link">お問い合わせ</a></li>
            <li><a href="#" class="footer__link">広告掲載</a></li>
          </ul>
        </div>

        <div class="footer__col">
          <h3 class="footer__col-title">SNS</h3>
          <ul class="footer__list">
            <li><a href="#" class="footer__link">X (Twitter)</a></li>
            <li><a href="#" class="footer__link">Facebook</a></li>
            <li><a href="#" class="footer__link">YouTube</a></li>
            <li><a href="#" class="footer__link">RSS Feed</a></li>
          </ul>
        </div>

        <div class="footer__col">
          <h3 class="footer__col-title">法的情報</h3>
          <ul class="footer__list">
            <li><a href="#" class="footer__link">利用規約</a></li>
            <li><a href="#" class="footer__link">プライバシーポリシー</a></li>
            <li><a href="#" class="footer__link">特定商取引法に基づく表記</a></li>
            <li><a href="#" class="footer__link">Cookie設定</a></li>
          </ul>
        </div>
      </div>

      <div class="footer__bottom">
        <div class="footer__logo">
          <span class="footer__logo-text">TECH</span>
          <span class="footer__logo-accent">PRESS</span>
        </div>
        <p class="footer__copyright">&copy; 2026 TECH PRESS. All rights reserved.</p>
      </div>
    </div>
  </footer>

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

0 / 10
Submit

Discord #提出-media チャンネルに投稿
1デプロイURL
2GitHubリポジトリURL
3工夫した点3つ
4クライアントへの提案メッセージ案
Freelance Value

ニュースメディア・キュレーションサイト。相場：200,000〜400,000円
メディア・ブログ系の他の課題を見る