尾道レトロ
キャンペーンサイト（デモ）
静的サイト / キャンペーンサイト
Overview - 制作概要
- 制作期間
- 72時間（約1ヶ月）
- 制作タイプ
- 静的キャンペーンサイト
- 担当範囲
-
HTML / Sass コーディング
JavaScript 実装（Swiper・モーダル・アコーディオン）
レスポンシブ対応
OGP設定 - URL
- デモサイトを見る ユーザー名：test パスワード：0000
Concept - コンセプト
尾道レトロキャンペーンサイトのデザインを忠実に再現することを目的に、
コーディング・レスポンシブ対応・JavaScriptによるUI実装を担当しました。
静的サイトとして HTML / Sass / JavaScript を用いて構築し、
Swiperによるスライダー、モーダルウィンドウ、アコーディオンUIなど、
キャンペーンサイトに必要な動きを一通り実装しています。
デザインの細かい装飾（背景画像の扱い、角丸、余白調整）を忠実に再現し、
スマートフォンでも崩れないように丁寧にレスポンシブ対応を行いました。
Gallery - 制作画面
Tech - 使用技術
- HTML / CSS（Sass）
- JavaScript（Swiper / IntersectionObserver）
- モーダルウィンドウ
- アコーディオンUI
- OGP設定
- 画像最適化
- レスポンシブ対応
Points - 工夫したポイント
- Swiperでカード表示を調整し、アニメーションを実装
- How to の装飾ライン調整など、細部までデザインを再現
- モーダルやFAQアコーディオンで直観的なUIを実装
- SP / PC のレイアウト差を最適化し、読みやすい構成に整理
- OGP / Twitterカード設定でSNSシェアにも対応
このようなキャンペーンサイト制作も対応可能です。
まずはお気軽にご相談ください。