MOROZOFF
モロゾフ 歴代推し復活総選挙
歴代商品の復活企画を展開した期間限定キャンペーンサイトです。投票システムとは担当を分け、歴代商品を閲覧する画面、レスポンシブ対応、ティザー・開催中・結果発表に合わせた画面更新などを担当しました。
公開サイトを見る ↗担当範囲
投票機能を除くフロントエンド制作・改修商品表示公開フェーズ切替OGP・計測タグ対応※投票の認証・保存・回数制御・集計・リセットは担当範囲外です。
公開サイトの画面
実装のポイント
年代別に探せるデータ駆動の商品表示
7つの年代にまたがる16商品をJSONで管理し、タブ操作に応じて該当する商品グループを切り替える構成にしました。表示だけでなく、選択状態、非表示状態、フォーカス、スクロール位置も合わせて制御し、閲覧位置を見失いにくくしています。
短期間の更新に対応する公開フェーズ切替
共通テンプレートを保ちながら、設定値によって通常表示と結果発表表示を切り替えられる構成にしました。キャンペーンの進行に伴う更新を限定された箇所へ集約しています。
再利用できる表示部品と公開対応
PC・スマートフォン画像の出し分けや、注意事項のアコーディオンを共通部品として実装しました。公開段階に応じたOGPや計測タグの整備にも対応しています。