ウェルカム画面 Welcome Screen

アプリの初回起動時に表示されるスワイプ可能な紹介画面。機能や特徴を段階的に説明。

使用場面: アプリのインストール直後やアカウント作成後に、主要機能を紹介する場面 採用例: Duolingo, Notion

ライブデモ

🚀

はじめましょう

シンプルで直感的なインターフェースで、すぐに使い始められます。

🛠

カスタマイズ

テーマやレイアウトを自由にカスタマイズして、自分だけの環境を作れます。

🤝

チームで共有

リアルタイムでチームメンバーと共同作業できます。

ソースコード

<div class="demo-welcome">
  <div class="demo-welcome-slides">
    <div class="demo-welcome-slide active">
      <div class="demo-welcome-icon">&#128640;</div>
      <h3 class="demo-welcome-title">はじめましょう</h3>
      <p class="demo-welcome-desc">シンプルで直感的なインターフェースで、すぐに使い始められます。</p>
    </div>
    <div class="demo-welcome-slide">
      <div class="demo-welcome-icon">&#128736;</div>
      <h3 class="demo-welcome-title">カスタマイズ</h3>
      <p class="demo-welcome-desc">テーマやレイアウトを自由にカスタマイズして、自分だけの環境を作れます。</p>
    </div>
    <div class="demo-welcome-slide">
      <div class="demo-welcome-icon">&#129309;</div>
      <h3 class="demo-welcome-title">チームで共有</h3>
      <p class="demo-welcome-desc">リアルタイムでチームメンバーと共同作業できます。</p>
    </div>
  </div>
  <div class="demo-welcome-dots">
    <button class="demo-welcome-dot active" data-slide="0"></button>
    <button class="demo-welcome-dot" data-slide="1"></button>
    <button class="demo-welcome-dot" data-slide="2"></button>
  </div>
  <div class="demo-welcome-footer">
    <button class="demo-welcome-skip">スキップ</button>
    <button class="demo-welcome-next-btn">次へ</button>
  </div>
</div>

.demo-welcome { overflow: hidden;
  border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
  background: #fff; height: 320px; display: flex; flex-direction: column;
}
.demo-welcome-slides { flex: 1; position: relative; overflow: hidden; }
.demo-welcome-slide { width: 100%; box-sizing: border-box; max-width: 100%; overflow: hidden; box-sizing: border-box;
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 30px;
  opacity: 0; transition: opacity 0.4s, transform 0.4s;
  transform: translateX(40px);
}
.demo-welcome-slide.active { opacity: 1; transform: translateX(0); }
.demo-welcome-slide.exit { opacity: 0; transform: translateX(-40px); }
.demo-welcome-icon { font-size: 48px; margin-bottom: 16px; }
.demo-welcome-title { margin: 0 0 8px; font-size: 20px; color: #111; }
.demo-welcome-desc { margin: 0; font-size: 14px; color: #666; text-align: center; line-height: 1.6; max-width: 280px; }
.demo-welcome-dots { display: flex; justify-content: center; gap: 8px; padding: 12px; }
.demo-welcome-dot {
  width: 8px; height: 8px; border-radius: 4px; border: none;
  background: #d1d5db; cursor: pointer; padding: 0;
  transition: all 0.3s;
}
.demo-welcome-dot.active {
  background: var(--ui-primary); width: 24px;
}
.demo-welcome-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-top: 1px solid #f3f4f6;
}
.demo-welcome-skip {
  border: none; background: none; color: #999; font-size: 14px;
  cursor: pointer; padding: 6px 12px;
}
.demo-welcome-skip:hover { color: #666; }
.demo-welcome-next-btn {
  padding: 10px 28px; border: none; border-radius: 8px;
  background: var(--ui-primary); color: #fff; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.demo-welcome-next-btn:hover { opacity: 0.85; }

(function(){
  var slides = document.querySelectorAll('.demo-welcome-slide');
  var dots = document.querySelectorAll('.demo-welcome-dot');
  var nextBtn = document.querySelector('.demo-welcome-next-btn');
  var skipBtn = document.querySelector('.demo-welcome-skip');
  var current = 0;
  function goTo(idx){
    slides[current].classList.add('exit');
    slides[current].classList.remove('active');
    setTimeout(function(){ slides[current === idx ? current : (idx > 0 ? idx - 1 : slides.length - 1)].classList.remove('exit'); }, 400);
    dots[current].classList.remove('active');
    current = idx;
    slides[current].classList.add('active');
    dots[current].classList.add('active');
    nextBtn.textContent = current === slides.length - 1 ? '始める' : '次へ';
  }
  nextBtn.addEventListener('click', function(){
    if(current < slides.length - 1) goTo(current + 1);
    else goTo(0);
  });
  skipBtn.addEventListener('click', function(){ goTo(slides.length - 1); });
  dots.forEach(function(dot){
    dot.addEventListener('click', function(){ goTo(parseInt(this.dataset.slide)); });
  });
})();

AIプロンプト

ウェルカム画面をHTML/CSS/JSで作ってください。3枚のスライドで機能を紹介し、ドットインジケーターと次へボタンで操作します。

以下の仕様でウェルカム画面を実装してください。
- 3枚のスライド（アイコン、タイトル、説明文）
- ドットインジケーター（アクティブは幅が広がる）
- スライドのフェード/スライドトランジション
- スキップ/次へボタン
- 最後のスライドで「始める」ボタンに変更
- プライマリカラー: #2563eb

高品質なウェルカム画面を実装してください。
- スワイプジェスチャー対応
- パララックスアニメーション（各要素が異なる速度で移動）
- Lottieアニメーション統合
- 自動再生（一定時間でスライド進行）
- 「二度と表示しない」チェックボックス（localStorage保存）
- A/Bテスト対応（スライド順序のバリエーション）
- アクセシビリティ（role="tablist", aria-label, キーボード操作）
- prefers-reduced-motion対応

← カタログに戻る