Web関連

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

0

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

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

    こんにちは、自社発信でメルマガができないかと、色々調べまわっている尾…

  2. Web関連

    苦情対応はその場だけではない!苦情対応のポイント

    「苦情」というものは、教育現場から企業活動など様々な場面で発生いたしま…

  3. Web関連

    Webサイト売上げアップに使える”行動心理学” その4

    みなさんは、個人が個人に物を売るECサイトがあることを知っていますか?…

  4. Web関連

    作りっぱなしにNO!PDCAを回して、効果的なWEBサイトにしよう   第1回:そもそも、PDCAを…

    そのWEBサイト、作りっぱなしになっていませんか?Webサイトを立ち…

  5. Web関連

    電子書籍が良い理由

    最近ではよく見かけるようになった電子書籍。ですが、「電子書籍を始めるに…

  6. Web関連

    人を惹き付けるキャッチコピーを作る3つのコツ

    Webサイトで一番最初に目がいく部分、それは大きなメインビジュアルとキ…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    AIチャットボットって一体どこがAIなの?
  2. Web関連

    スポーツから考える、機械による自動化について
  3. Web関連

    【Web制作】WordPressを使ったCMS構築の料金はいくらになるのか計算し…
  4. SEO関連

    【Web制作関連コラム】ユーザービリティーとSEO対策の関係性
  5. SNS関連

    【オラクルSRM】SNSを活用して自社の売上アップ
PAGE TOP