Growth Hackで得た知見やWeb制作の備忘録をまとめています。

This is standard

ABテスト

placeholderにアニメーションとlocalStorageでアクションを制御

投稿日:

See the Pen placeholder by This is standard (@koutafunahashi) on CodePen.

formのplaceholderにアニメーションをつけることで注意が向き、入力率が高まるのではないかと思います。

サンプルでは、inputにfocusしたらspanに書いた入力例をinputの上に移動するアニメーションを追加しました。

見た目は面白いですが、このままでは実用性が低いので、ブラウザバックやエラー表示、戻るボタンを押した後などを想定し、値が入っているときはplaceholderを固定することも実装しています。

方法はinputにfocusしたらlocalStorageをセットし、inputに値が入っていたらplaceholderを固定することをやっています。

少しでも入力率があがるといいですね。

-ABテスト

Copyright© This is standard , 2019 All Rights Reserved Powered by STINGER.