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

関連記事

  1. Web関連

    レスポンシブデザインのサイトをわずか3日で仕上げる驚異的な方法

    最近の私の中での流行りは「故事成語」です。>故事成語/故事成句…

  2. Web関連

    SNSを活用せよ。SNSを使った成功事例

    皆さんの会社ではSNSは使っていますでしょうか。昔はただ友人や知り合い…

  3. SNS関連

    SNSでシェアされやすい記事とは?

    Facebookの企業サイト、チェックしていますか?個人で利用して…

  4. Web関連

    【必見!】時短に便利なブックマークレットまとめ

    みなさん、「ブックマークレット」をご存じですか?❛❛ブックマークレッ…

  5. Web関連

    本当はPerfumeの方が好きだけど話題のSTAR WARSについて紹介します。

    いよいよ来たる12月18日。STAR WARS エピソード7の全世界…

  6. Web関連

    【Web制作】ビッグデータって結局なに?身近なビッグデータを考える

    ビッグデータ関連書籍が数多書店に並び、テレビでも新聞でも騒がれて久しい…

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

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    ちょっとした工夫で変わる?!webサイト制作でも役立つ室内撮影時のライティング方…
  2. Web関連

    身近なWebビジネスを考えてみた。~飲食店のタッチパネル注文~
  3. Web関連

    顧客満足度向上ってどうすればいいの?仕事をとおして学んだこと
  4. Web関連

    ホームページ制作会社が解説する「Webシームレス化」
  5. Web関連

    Web広告のバナーは「つかみ」のキャッチコピーで決まる!?
PAGE TOP