HexaHiveレイアウト｜蜂の巣デザインで魅せるCSSアニメーション

🎯 HexaHiveレイアウトとは？

HexaHiveレイアウトは、六角形の要素を蜂の巣のように配置するデザイン手法です。CSSのclip-pathやtransformを活用し、洗練されたアニメーションを加えることで、視覚的に魅力的なデザインが実現できます。

この記事では、HexaHiveレイアウトの作り方とホバーエフェクトの実装方法をわかりやすく解説します。

🖥️ デモ

🔗 CodePenでHexaHiveレイアウトをチェック

See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.

🛠️ HexaHiveレイアウトの作り方

1️⃣ HTMLの記述

HTMLでは、各六角形に画像を入れ込む構造を作成します。

<div class="gallery">
    <div class="hexagon"><div class="hexagon-inner"></div></div>
    <div class="hexagon"><div class="hexagon-inner"></div></div>
    <div class="hexagon"><div class="hexagon-inner"></div></div>
    <div class="hexagon"><div class="hexagon-inner"></div></div>
    <div class="hexagon"><div class="hexagon-inner"></div></div>
    <div class="hexagon"><div class="hexagon-inner"></div></div>
</div>

2️⃣ CSSの記述

CSSでは、以下のポイントを意識して実装します。

✅ clip-pathで六角形の形状を作成
✅ transformでHexaHiveデザインのレイアウトを再現
✅ transitionでスムーズなホバーエフェクトを追加

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直方向の中央寄せ */
  background: linear-gradient(to bottom, #000c17, #4B0082); /* 上紺 (#001F3F)、下紫 (#4B0082) */
  overflow-x: hidden;
  min-height: 150vh;
  padding: 20px 0;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: calc(200px * 5);
  height: 413px;
  transform: translateX(2.7%);
}

.hexagon {
  width: 160px;
  height: 188px;
  position: relative;
  margin-bottom: -50px;
  overflow: hidden;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

/* ホバーエフェクト対象の画像部分 */
.hexagon-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease; 
}

/* 画像の割り当て */
.gallery .hexagon:nth-child(1) .hexagon-inner { background-image: url('https://picsum.photos/id/76/600/600'); }
.gallery .hexagon:nth-child(2) .hexagon-inner { background-image: url('https://picsum.photos/id/111/600/600'); }
.gallery .hexagon:nth-child(3) .hexagon-inner { background-image: url('https://picsum.photos/id/64/600/600'); }
.gallery .hexagon:nth-child(4) .hexagon-inner { background-image: url('https://picsum.photos/id/65/600/600'); }
.gallery .hexagon:nth-child(5) .hexagon-inner { background-image: url('https://picsum.photos/id/50/600/600'); }
.gallery .hexagon:nth-child(6) .hexagon-inner { background-image: url('https://picsum.photos/id/60/600/600'); }
.gallery .hexagon:nth-child(7) .hexagon-inner { background-image: url('https://picsum.photos/id/155/600/600'); }
.gallery .hexagon:nth-child(8) .hexagon-inner { background-image: url('https://picsum.photos/id/175/600/600'); }
.gallery .hexagon:nth-child(9) .hexagon-inner { background-image: url('https://picsum.photos/id/192/600/600'); }
.gallery .hexagon:nth-child(10) .hexagon-inner { background-image: url('https://picsum.photos/id/177/600/600'); }
.gallery .hexagon:nth-child(11) .hexagon-inner { background-image: url('https://picsum.photos/id/110/600/600'); }
.gallery .hexagon:nth-child(12) .hexagon-inner { background-image: url('https://picsum.photos/id/120/600/600'); }
.gallery .hexagon:nth-child(13) .hexagon-inner { background-image: url('https://picsum.photos/id/342/600/600'); }
.gallery .hexagon:nth-child(14) .hexagon-inner { background-image: url('https://picsum.photos/id/345/600/600'); }
.gallery .hexagon:nth-child(15) .hexagon-inner { background-image: url('https://picsum.photos/id/399/600/600'); }

/* ホバーエフェクト */
.hexagon:hover .hexagon-inner {
  transform: scale(1.4); /* ホバー時に画像を1.4倍に拡大 */
}

/* 2列目の六角形を右にずらして蜂の巣状に */
.gallery .hexagon:nth-child(n + 6):nth-child(-n + 10) {
  transform: translateX(85px);
}

/* レスポンシブ対応 */
/* 1列交互 */
@media (max-width: 900px) {
  .gallery {
    width: calc(200px * 2); /* 2列 */
  }

  .gallery .hexagon:nth-child(odd) {
    transform: translateX(130px) !important; /* 1列目の右ズレ */
  }
  
  .gallery .hexagon:nth-child(even) {
    transform: translateX(30px) !important; /* 2列目の右ズレ */
  }
}

3️⃣ JavaScript（任意）

JavaScriptを活用して、動的に要素を追加したり、クリック時のアニメーションを追加するのも効果的です。

🎨 HexaHiveレイアウトの活用例

✅ ポートフォリオサイトのギャラリー
✅ サービスや商品の一覧ページ
✅ モダンなデザインのランディングページ

🚀 まとめ

HexaHiveレイアウトは、洗練されたデザインとインタラクティブなアニメーションを同時に実現できます。
今回のコードをベースに、色や画像、アニメーション効果をアレンジして、オリジナルのHexaHiveデザインを作り上げてください！