Snap Onomichi
- URL
- https://onomichi.too-code.com/
- サイト概要
- 尾道観光をテーマにしたInstagram投稿キャンペーンのランディングページ。キャンペーン概要、応募方法、特典紹介、おすすめスポット、FAQ、お問い合わせを1ページに整理し、参加導線がわかりやすい構成を意識したサイトです。
- 担当範囲
- コーディング / アニメーション実装
- 使用技術
- HTML / CSS（Sass） / JavaScript （Swiper.js ） / Figma
- 実装内容
-
・スムーススクロール
・Googleマップ埋め込み
・アコーディオン
・ハンバーガーメニュー
・モーダル
・Swiperを用いたスライダー
・Swiperを用いた無限ループスライダー
・バリデーション付きお問い合わせフォーム
・Flexboxを用いたレイアウト調整
・ホバーアニメーション - 工夫した点
-
① 情報量を整理した見やすい導線設計
情報量の多いLPでも閲覧しやすくなるよう、スムーススクロールやハンバーガーメニューを取り入れ、目的の情報へ移動しやすい導線を意識しました。また、アコーディオンやモーダルを使って情報を整理し、必要な内容を確認しやすい構成にしています。
② 動きのあるUIによる回遊性の向上
スライダーや無限ループスライダー、ホバーアニメーションを取り入れ、サイトに動きを持たせることで、単調にならない画面づくりを意識しました。見た目の楽しさだけでなく、視線誘導や回遊性にもつながるよう工夫しています。
③ 使いやすさを意識した機能設計
Googleマップの埋め込みによりアクセス情報をわかりやすくし、お問い合わせフォームにはバリデーションを設けることで、入力時の負担軽減と送信しやすさに配慮しました。 - 制作期間
- 3週間
- 値段
- ￥60,000（税抜）
