Web関連

スマートフォンサイトにオススメ!使い勝手を良くするためのjquaryまとめ!

Web制作をする上で、リッチなウェブサイトを作るには、面白い動きを取り入れたりと工夫を加える必要がありますよね。
特にスマートフォンサイトは直感的な動きを要求されるので、PCサイト以上に使いやすさを良く考えることが必要とされることもあります。
私もスマートフォンサイトを制作をする過程で良くjquaryを調べたりするのですが、今回はスマートフォンで導入する際にオススメのjquaryを紹介したいと思います!

jquaryとは?

オススメを紹介する前に、まずjquaryについて説明いたします。jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。プログラムが分からないようなデザイナーでも理解しやすく作られているため、簡単に導入、更新を行うことができちゃうのです!
また、いままでイラストや写真を動的に動かすための方法として主流だったflashは、スマートフォンでは機種によって(特にiOS)動かないことがあったのですが、jquaryでは基本的に古いバージョンでなければどのスマートフォンでも動かすことができるので、flashの代わりとなる動的なコンテンツとして使われるようになってきています。

オススメのjquary紹介(メニュー編)

ito_03_second_01.png

MeanMenu

「情報は載せたい・・・けどページが長くなるのは嫌だ」といった要望がある際にオススメしたいのがこのアコーディオン型メニューの「MeanMenu」です。階層を2階層、3階層・・・と増やせるため、大規模型のサイトなどでも活躍が期待できそうです。

ito_03_second_02.png

Sidr

いわゆるfacebook型ナビゲーションです。ドロワー型ナビゲーションとも言います。メニュー部分は、項目が表示領域を超えるとスクロールがでるようになっているので、リンク数が多くなっても気にする必要はありません!

オススメのjquary紹介(スライダー編)

ito_03_second_03.pngSly

矢印タッチでスライドさせるもよし、スワイプでスライドさせるもよし、のスライダー「sly」です。
立体的に画像をスライドさせる他、ページ内縦スクロール、ページ内要素の全画面表示、無限スクロール、パララックス効果といったオプション機能があるそうです。

ito_03_second_04.png

Parallax Content Slider with CSS3 and jQuery

「普通にスライドさせるだけじゃ面白くない!」という方にはこちら。このスライダーは背景にある画像と、その上に置いているテキストを別々のタイミングでスライドさせることができるので、他には無いオリジナリティあふれるスライダーとなっています。

まとめ

Web制作をしていて年々新しい技術が導入されていく様を見るのは楽しいですね!ただ忘れてはいけないのは常に「ユーザー目線」を持ち続けることです。いかに面白いものだとしても、本当にそのサイトに合っているのか?導入しても使いにくかったら本末転倒です。色々試行錯誤を繰り返し、誰が使っても良い体験が得られるサイトを目指しましょう! 
それではまた^^ノシ

レスポンシブWEBデザイン(RWD)の効果的な見せ方前のページ

デジタルマーケティングのインターネット広告について次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    Webデザイナーなら知っておくべき!誰でも実践できる写真構図のポイント

    最近寒くなってきましたね。そんななか、11月末に箱根までバイク…

  2. Web関連

    SiriとOK Googleはどっちが優秀か、ティファナでやってみた。(OK Google編)

    今回は「SiriとOK Googleはどっちが優秀か、ティファナでやっ…

  3. Web関連

    動画を長く見てもらうために、例をもとに考える。

    最近、スマートフォンを買い換えようと思い、auの製品ラインナップのペー…

  4. Web関連

    セキュリティ対策はクラウドストレージでも必須!!

    データの保存や共有などにとても便利なクラウドストレージ。中でも無料で使…

  5. Web関連

    システムのシームレス化!SOA導入で作業効率大幅アップ

    シームレスとは日本語に訳すと「繋ぎ目のない」「一つの構造」という意味で…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    ブラウザの種類と脅威!
  2. Web関連

    今、メルマガが抱える問題点。開封率と到達率!?
  3. Web関連

    パンフレット・カタログ制作とホームページ制作を別会社に依頼するリスクは?
  4. Web関連

    顧客に物を買わせる第一歩!
  5. サービス・新技術

    IoTがさらに重要な世の中になる!?
PAGE TOP