External Partner Guide ・ External Partner Guide ・ External Partner Guide ・ 外注・業務委託
パートナーを
ご検討の方へ

Works

ホームALL Works尾道レトロキャンペーンLP

尾道レトロキャンペーンLP

尾道レトロキャンペーンLPサイトモックアップ
  • 担当範囲:

    コーディング

  • 使用言語:

    HTML / CSS(Sass) / JavaScript(jQuery)

  • CSS設計:

    BEM設計

  • 制作期間:

    14日間

  • 実装機能(要件に基づく実装):
    • レスポンシブ対応(SP/PC両方でデザイン再現)
    • 自動再生スライダー
    • ページネーション付きカードスライダー(SPではスワイプ操作に対応し、UXを最適化)
    • お問い合わせフォーム:リアルタイムの入力チェック、バリデーション、未入力時は送信不可
    • Google Maps埋め込み(カスタマイズ表示)
  • 実装機能(独自に追加した機能):
    • wow.jsを使用したタイトルのフェードインアニメーションにより、訴求力のあるビジュアル演出を追加
    • 装飾要素が多いデザインだったため、デバイス幅に応じた細かなレスポンシブ調整を行い、表示崩れを防止
    • フォームのUI/UXにこだわり、入力中のラベル色変化・エラー表示・形式チェックなどをリアルタイムで実装し、離脱防止につなげました
  • 制作のポイント:
    • LPとして重要な「視線誘導」「コンバージョン率向上」を意識し、スライダーやフェードアニメーションで情報に動きをつけ、ユーザーの滞在時間を向上。