グリコプッチンプリンの夏キャンペーンサイトを制作いたしました。
プッチンプリンを、冷凍庫で凍らせて食べる楽しみ方を伝えます。

凍らせプッチンの食感を表現した言葉を入力すると背景に流れる仕組みです。
フォームから「もちもち」、「ぷるぷる」などを入力すると
リアルタイムで背景に反映され流れます。

入力された内容は、サーバーのデータベースに蓄積され、
入力された回数が多い言葉は、画面上でサイズが大きくなります。

また、レスポンシブ対応しており、スマホでもご覧いただけます。
アニメーションの負荷を軽減するため、アニメーションは全てCSS3で実装。
webでは難しい、右から左にループするアニメーションを実現しています。
CSS3アニメーションなので動きが軽いのも特徴です。
流れるテキストはwebフォントを使用し、
プッチンプリンのイメージにあったフォントを使用しています。

入力フォームに関しましては、
バリデートチェックによって英数字を入力できなくしたり、
決定ボタンの状態を視覚的に変化させるなど、細かいユーザービリティにも配慮しています。

Planning + Produce + Direction:小堀明子(大広ONES) / Direction + Design:髙橋晋一朗(ピクルス)) / Technical Direction:山下美緒(ピクルス)、金ギョンテ(ピクルス) / Frontend Program + HTML:上岡都葉沙(ピクルス)