課題制作
Instagram投稿型の観光キャンペーンを想定して制作したランディングページです。尾道のレトロな街並みや風景写真を活かし、写真の魅力がしっかり伝わるようにレイアウトを設計しました。ファーストビューでは、キャンペーン内容がひと目で理解できるようにビジュアルとキャッチコピーを大きく配置し、応募ボタンへ自然につながる流れを意識しています。ユーザーが迷わず参加できる構成を目指しました。
Basic認証
ID：demo PW：demo
Swiperを用いて無限ループスライダーを実装しました。 autoplayのdelayを0に設定し、途切れのない自動スクロールを実現しています。 slidesPerView: "auto" により複数スライドを表示し、レスポンシブ対応としてbreakpointsで余白調整を行っています。ユーザー操作による停止を防ぐため allowTouchMove を無効化し、常に一定速度で流れる設計としています。
ホバー時に拡大エフェクトを付与し、視認性を高めるUIを実装しました。クリック時にはdialog要素を用いたモーダルを表示し、data属性を活用して動的に表示内容を切り替えています。ページ遷移を伴わない設計により、ユーザー体験の向上を意識しています。
必須項目のバリデーションを実装し、未入力時にはエラーメッセージを表示する設計としています。ユーザーが入力ミスに気づきやすいよう、視覚的フィードバックを付与しました。
