みなさんはインターネットで調べごとをするとき、パソコンで調べますか? それともスマホ?もしくはタブレットですか?
私はスマホで調べごとをすることが多いのですが、昨今スマホでもJavaScriptを使った動きのあるWebサイトが増えています。
今回は、私が面白いなと思った動きのあるスマホサイトを3つ紹介したいと思います!
1.KUROKAWA WONDERLAND
1つ目に紹介するのは、JavaScriptの「ジャイロセンサー」を使ったスマホサイトです。
背景がスマホの傾けた方向に連動して動くようになっています。
http://kurokawawonderland.jp/
このサイトは、スマホの傾きに連動して背景が移動するようになっています。
これによってユーザービリティが上がるわけではありませんが、ユーザーの興味を惹かせるという意味では、面白い仕掛けだと思います。
2.Interdimensional
2つ目は、JavaScriptの「傾きセンサー」を使ったスマホサイトです。
左下のボタンをタップすると、スマホの傾きに合わせてスクロールしてくれるようになっています。
http://vodkabears.github.io/interdimensional/
フリックしなくても、スマホを傾けるだけでページの内容を読み進めることができるので便利!…だと思ったのですが、うまく傾きを調整しないとスクロールの速さにストレスを感じてしまうため、使いドコロが難しいと思います…
このページでは、左下のボタンをタップすると傾きセンサーのオン・オフを切り替えることができるため、ユーザーが利用シーンに合わせて切り替えができるところがよいと思いました。
移動しながらの仕様は困難なため、家でゆっくりと文章を読みたい時などにあると便利な機能だと思います。
3.ぷるぷるSPARKLINGゼリー
3つ目も、JavaScriptの「傾きセンサー」を使ったスマホサイトです。
スマホの振ると、その動きに合わせてジュースの缶がシェイクされるようになっています。
http://hakutsuru.co.jp/purupuru/
スマホのタップしたりスクロールしたりする操作性を活かした、面白いサイトだと思いました!
それに加えて、商品のイメージと動きがマッチしていて、面白いサイトだと思います。
他にも、振った後にシュワっとした炭酸の泡が出てきたり、ボタンをクリックするとゼリーのようにぷるぷると動くようになっていたりするなど、色々なところに遊びの要素が取り入れられています。
商品のイメージが伝わる、大人も子供も楽しめるサイトです。
最後に
最近では、デザインだけでなく動きにもバリエーションが増えているため、ユーザーを惹きつける手法が多彩になってきていると思います。
しかし、「面白そう」「やってみたい」だけで機能を追加してしまうと、ユーザーにとって不便なWebサイトになってしまう可能性があります。
適切な情報がユーザーに伝わるように、ユーザー視点に立って制作を行うことがとても大切だと思いました。
以上、デザイナーの栄がお届けしました!