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

関連記事

  1. Web関連

    パスワードはなくなる!?噂のFIDOとは

    みなさんはパソコンや携帯端末に、パスワードなどセキュリティ対策をしっか…

  2. Web関連

    健康管理アプリ「あすけん」を一か月使用してみたので、感想を書きます。

    本格的に夏がやって来て、冷たいものが美味しい季節になってきましたね。…

  3. Web関連

    注意!悪意あるwebサイト改ざんに気づく方法

     昨今、ニュースに上がっている「Webサイト改ざん」をご存知ですか?…

  4. Web関連

    Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

    Webデザインの95%はフォントで決まる?!Webデザイナーなら知って…

  5. Web関連

    シームレス化が進む!1つのWordPressで複数のサイトを更新する方法とは?

    ネット活用のシームレス化を考えるに辺り、運用者側も同一の管理画面を利用…

  6. AI関連

    【必見】デキる人は使ってる!WBSを活用してスマートなタスク管理をしてみませんか?

    どうも、自粛太りに焦り、最近筋トレを始めたAIコンサルの淺井です。…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    【もう知ってる?】マイナンバーのメリット・デメリット
  2. AI関連

    AIは人に寄り添う!? 人工知能=冷たいという考えは古い!
  3. Web関連

    服は買うから借りるの時代??ファッションレンタルサイト
  4. Web関連

    米政府からの依頼!?「ペンタゴンをハックせよ」
  5. AI関連

    新型コロナウイルスで日本の働き方改革が起こる
PAGE TOP