AIでスライドショーのボタン・インジケータをデザインする【CSS＋JS生成】

スライドショーの左右ボタンやドットインジケータは、デザインにこだわりたいパーツのひとつ。AIに指示すれば、見た目のカスタマイズも含めてまとめて生成できます。

方法①：既存のHTMLからCSS・JSを生成する

すでにスライドショーのHTML構造がある場合の依頼方法です。

AIへのプロンプト例

以下のスライドショーHTMLに対して、
・左右の矢印ボタン（prev/next）のCSS
・ドットインジケータのCSS
・スライド切り替えのJavaScript
を書いてください。ボタンは丸型で、ホバー時に色が変わるデザインにしてください。

<div class="slideshow">
  <div class="slides">
    <div class="slide">スライド1</div>
    <div class="slide">スライド2</div>
    <div class="slide">スライド3</div>
  </div>
  <button class="prev">❮</button>
  <button class="next">❯</button>
  <div class="indicators"></div>
</div>

生成されたCSS例

.slideshow {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.slides {
  display: flex;
  transition: transform 0.4s ease;
}
.slide {
  min-width: 100%;
  padding: 40px;
  background: #f5f5f5;
  text-align: center;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(62, 134, 133, 0.85);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 10;
}
.prev { left: 12px; }
.next { right: 12px; }
.prev:hover, .next:hover {
  background: #326f6e;
}
.indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.2s;
}
.dot.active {
  background: #3e8685;
}

生成されたJS例

const slides = document.querySelectorAll('.slide');
const indicatorsEl = document.querySelector('.indicators');
let current = 0;

// ドットを生成
slides.forEach((_, i) => {
  const dot = document.createElement('span');
  dot.className = 'dot' + (i === 0 ? ' active' : '');
  dot.addEventListener('click', () => goTo(i));
  indicatorsEl.appendChild(dot);
});

function goTo(n) {
  slides[current].parentElement.style.transform = `translateX(-${n * 100}%)`;
  document.querySelectorAll('.dot')[current].classList.remove('active');
  current = n;
  document.querySelectorAll('.dot')[current].classList.add('active');
}

document.querySelector('.prev').addEventListener('click', () => {
  goTo((current - 1 + slides.length) % slides.length);
});
document.querySelector('.next').addEventListener('click', () => {
  goTo((current + 1) % slides.length);
});

方法②：HTMLとセットで生成する

AIへのプロンプト例

スライドショーをHTML・CSS・JavaScriptでゼロから作ってください。
要件：
- 左右の矢印ボタンと、下部にドットインジケータ
- スライドは3枚。各スライドに画像（img要素）とキャプションテキスト
- ボタンはシンプルな丸型、ドットはティール色でアクティブ表示
- スムーズなスライドアニメーション

生成されたHTML例

<div class="slideshow-wrap">
  <div class="slides-track">
    <figure class="slide-item">
      <img src="slide1.jpg" alt="スライド1">
      <figcaption>キャプション1</figcaption>
    </figure>
    <figure class="slide-item">
      <img src="slide2.jpg" alt="スライド2">
      <figcaption>キャプション2</figcaption>
    </figure>
    <figure class="slide-item">
      <img src="slide3.jpg" alt="スライド3">
      <figcaption>キャプション3</figcaption>
    </figure>
  </div>
  <button class="slide-prev" aria-label="前へ">❮</button>
  <button class="slide-next" aria-label="次へ">❯</button>
  <div class="slide-dots"></div>
</div>

ポイント

• 「ボタンの形・色・大きさ」を具体的に伝えると思い通りのデザインになります
• 「自動再生も欲しい」など機能追加も一緒にリクエスト可能です
• 生成されたコードはそのままコピーして動作確認してみましょう