2. カルーセルナビゲーション

カルーセルの基本概念

カルーセルは、限られたスペースで複数のコンテンツを効果的に表示できる UIコンポーネントです。製品ギャラリーやポートフォリオなど、視覚的な要素を動的に表示する際に特に有効です。

スライド 1

スライド 2

スライド 3

💡 デザインのポイント: ユーザーの操作性を考慮し、スワイプやドラッグなどの直感的な操作方法を実装することで、より良い体験を提供できます。

前後の移動ボタンやページネーションドットなど、ユーザーが現在の位置を把握しやすい要素を適切に配置します。特にモバイル環境では、タッチ操作を考慮したUIが重要です。

スライド切り替え時のアニメーションは、スムーズで自然な動きを心がけます。過度な演出は避け、コンテンツの視認性を優先します。

画面サイズに応じて表示するスライド数を調整し、常に最適な表示を維持します。特にモバイル端末では、シンプルな1枚表示が効果的です。

「商品ギャラリー用のカルーセルを作成してください。
以下の要件を満たすようにしてください：
- スワイプ操作に対応
- ページネーションドットを表示
- 自動再生機能付き
- レスポンシブ対応（モバイルでは1枚表示）」