Web関連

面白いスマホサイトとは?動きが面白いスマホサイトまとめ

+1

みなさんはインターネットで調べごとをするとき、パソコンで調べますか? それともスマホ?もしくはタブレットですか?

私はスマホで調べごとをすることが多いのですが、昨今スマホでもJavaScriptを使った動きのあるWebサイトが増えています。

今回は、私が面白いなと思った動きのあるスマホサイトを3つ紹介したいと思います!

1.KUROKAWA WONDERLAND

1つ目に紹介するのは、JavaScriptの「ジャイロセンサー」を使ったスマホサイトです。

背景がスマホの傾けた方向に連動して動くようになっています。

sakae_sumaho_01.jpg

http://kurokawawonderland.jp/

このサイトは、スマホの傾きに連動して背景が移動するようになっています。

これによってユーザービリティが上がるわけではありませんが、ユーザーの興味を惹かせるという意味では、面白い仕掛けだと思います。

2.Interdimensional

2つ目は、JavaScriptの「傾きセンサー」を使ったスマホサイトです。

左下のボタンをタップすると、スマホの傾きに合わせてスクロールしてくれるようになっています。

sakae_sumaho_02.jpg

http://vodkabears.github.io/interdimensional/

フリックしなくても、スマホを傾けるだけでページの内容を読み進めることができるので便利!…だと思ったのですが、うまく傾きを調整しないとスクロールの速さにストレスを感じてしまうため、使いドコロが難しいと思います…

このページでは、左下のボタンをタップすると傾きセンサーのオン・オフを切り替えることができるため、ユーザーが利用シーンに合わせて切り替えができるところがよいと思いました。

移動しながらの仕様は困難なため、家でゆっくりと文章を読みたい時などにあると便利な機能だと思います。

3.ぷるぷるSPARKLINGゼリー

3つ目も、JavaScriptの「傾きセンサー」を使ったスマホサイトです。

スマホの振ると、その動きに合わせてジュースの缶がシェイクされるようになっています。

sakae_sumaho_03.jpg

http://hakutsuru.co.jp/purupuru/

スマホのタップしたりスクロールしたりする操作性を活かした、面白いサイトだと思いました!

それに加えて、商品のイメージと動きがマッチしていて、面白いサイトだと思います。

他にも、振った後にシュワっとした炭酸の泡が出てきたり、ボタンをクリックするとゼリーのようにぷるぷると動くようになっていたりするなど、色々なところに遊びの要素が取り入れられています。

商品のイメージが伝わる、大人も子供も楽しめるサイトです。

最後に

最近では、デザインだけでなく動きにもバリエーションが増えているため、ユーザーを惹きつける手法が多彩になってきていると思います。

しかし、「面白そう」「やってみたい」だけで機能を追加してしまうと、ユーザーにとって不便なWebサイトになってしまう可能性があります。

適切な情報がユーザーに伝わるように、ユーザー視点に立って制作を行うことがとても大切だと思いました。

以上、デザイナーの栄がお届けしました!

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

スマートフォンサイト制作

関連コラム

javascriptの流行りの紹介

スマホサイトを作るときに気を付けるべきこと

+1

作りっぱなしにNO!PDCAを回して、効果的なWEBサイトにしよう 第2回:PDCAの失敗例と解決策前のページ

ア ナ タ ハ ソ コ ニ イ マ ス カ? ネット上にさまよう死者のアカウント次のページ

ピックアップ記事

  1. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  2. 新しい販売形態であるDtoCについて考えてみる
  3. AIに求められているものは、実は意外な物だった
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    マーケターの常識!?プライベートDMPとオープンDMPの違い

    マーケティングに関わるようになり、「プライベートDMP」、「オープンD…

  2. Web関連

    就職活動解禁直前!知っておくとライバルに差をつけられるメールマナー

    こんにちは、採用担当の真野です。最近では、内定者への連絡や次年度へ向け…

  3. Web関連

    【ホームページ制作】GUIの歴史を辿ってみた

    みなさんはGUIという言葉はご存じでしょうか?ぐいぐい~。GU…

  4. Web関連

    富士山から習うサイトのモバイル対応の必要性

    電車での移動時間、お昼の休憩時間、ちょっとしたスキマ時間に使用するスマ…

  5. Web関連

    ポケモンGOはなぜヒットした?

    ついにポケモンGOが日本でもリリースされましたね!(執筆時は7/22)…

  6. Web関連

    ちょっとした工夫で劇的に変わる!ユーザーにウケるブログの書き方

    どうも、今回のコラムを担当することになりましたデザイナーの尾崎です。前…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    リクルートサイトと採用ポータルサイトの役割
  2. Web関連

    大人でも陥ってしまうガチャ問題をプログラマー視点で考えてみた
  3. Web関連

    ブランドの力ってスゴイ ~百味ビーンズに見る、ハリー・ポッターのブランド力
  4. Web関連

    eSportsって何がすごいの?
  5. Web関連

    楽しくて便利!おすすめの写真加工スマートフォンアプリ
PAGE TOP