🚀【実践解説】AirPodsランディングページの実装方法🎧 – HTML/CSS/JavaScriptで魅せるWebデザイン

Posted at 2025-02-18

【実践解説】AirPods Landing Pageの実装 – HTML/CSS/JavaScript完全ガイド

こんにちは👋
現役エンジニアの@YushiYamamotoです。今回は、シンプルながら洗練された【AirPods Landing Page】の実装例を取り上げ、そのHTML・CSS・JavaScriptコードについて詳しく解説していきます。初学者の方も実践エンジニアの方も、ページの構造設計やアニメーション、レスポンシブデザインの実装方法について理解を深められる内容になっていますので、ぜひ最後までご覧ください。

See the Pen Airpods Landing Page Example by Yushi Yamamoto (@yamamotoyushi) on CodePen.

全体概要

今回のAirPods Landing Pageは、以下の3つの主要なパートに分かれています。

HTML – ページの骨組みと構造を定義
CSS – ページのデザイン、レイアウト、アニメーションを実現
JavaScript – ユーザーインタラクション、アニメーションのトリガー、スクロール連動の動きを実装

各技術が連携することで、ユーザーにとって滑らかで魅力的な体験を創出しています。

HTML部分の解説

HTMLはページ全体の「骨格」を構築します。以下のポイントを押さえましょう。

主な構造

ヘッダー：
- <header> タグ内でナビゲーションバーが実装されています。
- ロゴ、ナビゲーションメニュー（Description、Specifications）、そして「Buy」ボタンが配置されています。
- モバイル向けにハンバーガーメニューとしてのトグルボタンも実装されています。
メインコンテンツ：
- <main> タグ内は2つのセクションに分かれています。
  - ホームセクション：製品タイトルや説明、AirPodsの画像が表示され、さらにスクロールを促すインジケーターが用意されています。
  - 詳細セクション：製品の仕様情報をグリッドレイアウトで表示し、バッテリー持続時間や充電ケースの特徴をビジュアルに説明しています。

サンプルコード

以下はHTML部分の抜粋です。全体の構成が一目で理解できます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AirPods Landing Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="l-header">
    <nav class="nav bd-grid">
      <a href="#" class="nav-logo">AirPods</a>
      <div class="nav-menu" id="nav-menu">
        <ul class="nav-list">
          <li class="nav-item"><a href="#l-main" class="nav-link">Description</a></li>
          <li class="nav-item"><a href="#l-section" class="nav-link">Specifications</a></li>
        </ul>
      </div>
      <div class="nav-actions">
        <div class="nav-toggle" id="nav-toggle">
          <img src="https://i.postimg.cc/zGFxhLRv/bx-chevron-down.png" alt="Toggle Menu">
        </div>
        <a href="#" class="nav-btn">Buy</a>
      </div>
    </nav>
  </header>

  <!-- メインコンテンツ -->
  <main class="l-main bd-grid">
    <section class="home">
      <!-- ホームセクション -->
      <div class="home-data">
        <h1 class="home-title">AirPods</h1>
        <p class="home-description">AirPods give you an unrivaled wireless experience, now offering more hours of talk time and a new<br>wireless charging case</p>
      </div>
      <div class="home-img">
        <img src="https://i.postimg.cc/TwLjthhr/airpod1.png" alt="image" class="airpod1">
        <img src="https://i.postimg.cc/d1b2pvTg/airpod2.png" alt="image" class="airpod2">
      </div>
      <div class="home-scroll">
        <span class="home-scroll-text">Scroll down for more</span>
        <a href="#l-section"><img src="https://i.postimg.cc/brPG1vnY/bx-mouse.png" alt="icon" class="home-scroll-icon"></a>
      </div>
    </section>

    <section class="l-section" id="l-section">
      <!-- 詳細セクション -->
      <div class="details">
        <div class="details-content">
          <!-- 各仕様ボックス -->
          <div class="details-box">
            <span class="details-initial">More than</span>
            <h3 class="details-title">24 <span>h</span></h3>
            <p class="details-description">battery with<br>the charging case</p>
          </div>
          <!-- ... 他の仕様ボックス ... -->
        </div>
        <div class="details-img">
          <img src="https://i.postimg.cc/ht0bZHst/airpods.png" alt="AirPods image" class="airpods">
        </div>
      </div>
    </section>
  </main>
  
  <!-- 外部JavaScriptライブラリ -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
  
  <script src="main.js"></script>
</body>
</html>

CSSのポイント

CSSは、ページの見た目やレスポンシブ対応、そしてアニメーションの動きを担います。以下の点が特徴です。

1. カスタムプロパティとリセット

:rootでの変数定義
主要なカラーやフォントサイズが定義されており、全体のデザインに統一感があります。例えば：

:root {
    --first-color: #1d1d1f;
    --second-color: #0071e3;
    --white-color: #fff;
    --body-font: 'Roboto', sans-serif;
    /* 以下、フォントサイズやZ-indexの設定も... */
}

リセットCSS
*, ::before, ::after により、ブラウザデフォルトのスタイルをリセット。これにより、ブラウザ間の違いを吸収しています。

2. グリッドレイアウトとレスポンシブデザイン

.bd-grid クラスで最大幅を設定し、中央揃えのレイアウトを実現。
メディアクエリによって、画面幅に合わせたフォントサイズやレイアウトの調整がされています。

例えば、モバイル用のスタイルは以下のようになります。

@media screen and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: -100%;
        left: 0;
        background-color: var(--white-color);
        width: 100%;
        height: 20%;
        padding: 2rem 1rem;
        z-index: var(--z-fixed);
        border-bottom: 1px solid gray;
        transition: .5s;
    }

    .show { top: 3rem; }
}

3. アニメーションの定義

キーフレームアニメーション
画像要素（例：.airpod1、.airpod2、.airpods）に対して、上下に動くアニメーションが設定されています。
```
@keyframes airpod1 {
    50% { transform: translateY(-6%); }
}
.airpod1 { animation: airpod1 3s infinite; }
```
これにより、ページ全体が動的で視覚的に楽しい印象となります😊

JavaScriptとアニメーションの実装

JavaScriptは、ユーザーインタラクションとアニメーションの演出を担当しています。ここでは2つの主要な機能を紹介します。

1. モバイルメニューのトグル機能

スマホ表示の際、ハンバーガーメニューのアイコンをクリックするとナビゲーションの表示/非表示が切り替わります。以下の関数がその実装です。

const showMenu = (toggleId, navId) => {
    const toggle = document.getElementById(toggleId);
    const nav = document.getElementById(navId);

    if (toggle && nav) {
        toggle.addEventListener('click', () => {
            // "show" クラスの追加/削除によりメニューの表示状態を切替
            nav.classList.toggle('show');
        });
    }
}

showMenu('nav-toggle', 'nav-menu');

2. GSAPとScrollMagicによるアニメーション

GSAPによるロード時アニメーション

ページ読み込み時に、タイトルや画像、ナビゲーション項目がフェードインしながら上方向にスライドするアニメーションを実装しています。

gsap.from('.home-title', { opacity: 0, duration: 1.5, delay: 0.5, y: 50 });
gsap.from('.home-description', { opacity: 0, duration: 1.5, delay: 0.8, y: 50 });
gsap.from('.airpod1', { opacity: 0, duration: 2, delay: 1.2, y: 40 });
gsap.from('.airpod2', { opacity: 0, duration: 2, delay: 1.4, y: 40 });

ScrollMagicとの連携

ユーザーがスクロールする位置に合わせ、詳細セクションの画像やテキストがアニメーションするように設定しています。
下記のコードは、スクロール位置をトリガーとしてGSAPのタイムラインアニメーションを再生する実装例です。

var animate = new TimelineMax({ onUpdate: updatePercentage });
var controller = new ScrollMagic.Controller();

animate
  .from('.details-img', { opacity: 0, y: 25 })
  .from('.details-box', { opacity: 0, y: 25, duration: 1, ease: 'expo.out', stagger: 0.4 });

var scene = new ScrollMagic.Scene({
    triggerElement: ".details-box"
})
.setTween(animate)
.addTo(controller);

function updatePercentage(){
    animate.progress();
}

フローチャートで見るモバイルメニューの動作

以下の簡単なフローチャートは、トグルボタンをクリックしたときの流れを示しています。

このように、シンプルなコードでインタラクティブな挙動を実現できるのが魅力です💡

まとめ

今回解説したAirPods Landing Pageの実装例では、以下の点を学びました。

HTML でページの構造を明確に定義し、セクションごとに役割を持たせる方法
CSS でカスタムプロパティ・グリッドレイアウト・メディアクエリを活用し、レスポンシブで美しいデザインを実現する手法
JavaScript を用いて、ユーザー操作に応じた動的なメニュー表示や、GSAP/ScrollMagicによる魅力的なアニメーションの実装

これらを組み合わせることで、ユーザーにとって直感的で魅力的なWebページを作成することができます。ぜひ皆さんも、自身のプロジェクトに取り入れてみてください😊

【参考リンク】

今回の解説が皆さんの開発のヒントになれば幸いです！
Happy Coding🚀