インタラクティブなカラー選択 UI を作ろう！🚀

こんにちは、現役エンジニアの@YushiYamamotoです。
今回は、HTML、CSS、JavaScript を用いて、ユーザーが色を選択するとそのボタンがアニメーションし、背景色が変化するインタラクティブな UI を作成する方法を解説します。
これから紹介するサンプルコードは、実際に動作するものなので、すぐにお手元の環境で試してみてください！

See the Pen Bouncy Multiple Choice by Yushi Yamamoto (@yamamotoyushi) on CodePen.

---

目次

はじめに
HTML の基本構造
CSS でのスタイリングとアニメーション
JavaScript で動的な操作を実現
まとめ

はじめに

Web 開発において、ページの「構造」は HTML、見た目や動作は CSS、そして「動的な処理」は JavaScript により実装するのが基本です。
今回のプロジェクトでは、色選択用のボタンを作成し、各ボタンにアニメーションやスタイル変更を加えることで、ユーザーに直感的なフィードバックを提供します。

下記は、全体の流れを示すシンプルなフローチャートです：

┌───────────┐
│   HTML    │
└───────────┘
       │
       ▼
┌───────────┐
│    CSS    │
└───────────┘
       │
       ▼
┌───────────────┐
│  JavaScript   │
└───────────────┘

HTML の基本構造

HTML では、Web ページの要素（コンテナ、見出し、ボタンなど）の配置を定義します。
以下のサンプルコードでは、ページ中央にタイトルと色選択のためのボタン群を配置しています。また、将来的に使えるマージされた円の要素も用意してあります。

<div class="container">
  <h1>Choose a Color</h1>
  <div class="choices">
    <button class="choice" data-color="Red">Red</button>
    <button class="choice" data-color="Blue">Blue</button>
    <button class="choice" data-color="Green">Green</button>
    <button class="choice" data-color="Yellow">Yellow</button>
    <button class="choice" data-color="Orange">Orange</button>
  </div>
  <!-- 複数の色が選択された時に表示される要素 -->
  <div id="merged" class="merged" style="display: none;"></div>
</div>

.container
ページの中央寄せと余白の調整に使用。
<h1>
視認性の高い見出しを表示。
.choices 内の <button> 要素
各ボタンは data-color 属性で固有の色情報を持ち、後述の CSS でスタイルが変更されます。

CSS でのスタイリングとアニメーション

CSS は、見た目の美しさや応答性を高めるために重要です。ここでは、主に以下のポイントを解説します。

1. 基本リセットとレイアウト

リセットと背景設定
余白をゼロにし、背景色やフォント、Flexbox で中央揃えにしています。

body {
  margin: 0;
  padding: 0;
  background: #f0f0f0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

2. コンテナとボタンの配置

コンテナとヘッダー
.container と <h1> で全体の配置と見出しのスタイルを設定。
フレックスレイアウト
.choices クラスで、ボタン同士の間隔や並び順を調整しています。

.container {
  text-align: center;
  padding: 20px;
}

h1 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #333;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

3. 色選択ボタンのスタイルとアニメーション

基本ボタンスタイル
丸い形状、白い背景、しっかりとした枠線を設定。
アニメーション効果
クリック時には、縮小・拡大するアニメーション（pop）を適用。疑似要素 ::after にて、選択時に色名がフェードインする効果も実現しています。

.choice {
  position: relative;
  background: #fff;
  border: 3px solid #333;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  font-size: 1em;
  color: #333;
  cursor: pointer;
  outline: none;
  transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
  touch-action: manipulation;
}

.choice:active {
  transform: scale(0.95);
}

.choice.selected {
  animation: pop 0.5s ease-out;
  border-color: transparent;
  color: transparent;
}

.choice.selected::after {
  content: attr(data-color);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  font-size: 1em;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* アニメーションの定義 */
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

さらに、メディアクエリによってモバイル画面でのサイズ調整も行っています：

@media (max-width: 600px) {
  .choice {
    width: 60px;
    height: 60px;
    font-size: 0.9em;
  }
  h1 {
    font-size: 1.5em;
  }
}

JavaScript で動的な操作を実現

JavaScript は、HTML 要素への動的な操作を可能にします。ここでは、クリックイベントの処理を中心にご説明します。

DOMContentLoaded
ページの全要素が読み込まれてからスクリプトが実行されるように設定。
イベントリスナーの登録
各色ボタンに対してクリックイベントリスナーを設定し、クリックされたボタンにのみ .selected クラスを付与することで、スタイルの変化とアニメーションを発動させます。

document.addEventListener("DOMContentLoaded", function () {
  const choices = document.querySelectorAll(".choice");

  choices.forEach((choice) => {
    choice.addEventListener("click", function () {
      // すべてのボタンから .selected クラスを削除
      choices.forEach((btn) => btn.classList.remove("selected"));

      // クリックされたボタンに .selected クラスを追加
      this.classList.add("selected");
    });
  });
});

このシンプルな仕組みにより、「どのボタンがクリックされたか」を視覚的にフィードバックできるようになり、直感的なユーザー操作が可能となります。💡

まとめ

本記事では、以下の流れでインタラクティブなカラー選択 UI の実装方法を解説しました。

HTML
ページの基本構造を定義し、選択ボタンを配置
CSS
レイアウトの調整、ボタンのデザイン、アニメーション効果、そしてレスポンシブ対応を実現
JavaScript
イベントリスナーにより、クリック操作をトリガーとして必要なクラス操作を実行

このサンプルはシンプルながら、Web 開発の基本的な技術がどのように組み合わさるかを学ぶ絶好の例となっています。ぜひ自分のプロジェクトにも取り入れ、さらに高度なインタラクションの実装に挑戦してみてください！✨

Happy coding!

See the Pen Bouncy Multiple Choice by Yushi Yamamoto (@yamamotoyushi) on CodePen.

最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 ポートフォリオ