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

関連記事

  1. Web関連

    E-Sportsは日本で普及するのか

    突然ですが、皆さんは子どものころに将来の夢はありましたか?ミレニア…

  2. Web関連

    メディアミックスとMA(マーケティングオートメーション)の 可能性を考えよう

    皆様は、メディアミックスというワードはご存知でしょうか?ビジネス形…

  3. Web関連

    Web制作会社における「スマートオフィス」

    ITを活用 してつくる環境配慮型省力化オフィス「スマートオフィス」。…

  4. Web関連

    ゲームから学ぶプログラミング

    みなさんはプログラミングと聞くと、どんなイメージを持たれますか?難しい…

  5. Web関連

    ブログにコーポレートサイトにどうぞ!WordPressテンプレートの紹介

    こんにちは!ブログを始めてみたものの3日で書くネタに詰まったデザイナー…

  6. Web関連

    そうそうコレコレ!複数人でちゃんとデザインの方向性を認識統一できる「ムードボード」 の使い方

    プロジェクトで制作したデザインが「なんかイメージと違う...」とな…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Webエンジニアだからこそ知りたい!巷で人気の3Dホログラム技術!
  2. Web関連

    花粉症の味方サイトとアプリを探してきました!
  3. Web関連

    乗り換えるか迷う!「格安SIM」「格安スマホ」の基礎知識
  4. Web関連

    脱・マンネリ化!仕事が楽しくなる3つのスイッチ
  5. AI関連

    5Gの特徴
PAGE TOP