こんにちは。
ユーザー視点からのUIを気にかけられる web制作の宇垣です。
2日間東京へ行っていまして、
・JIS規格の変更点のセミナー
・WEBマーケティングエキスポ
・チーム研修
を行って大変充実した2日間でした。
レポートをしたいのは山々ですが
今月は私のプラグインやjQueryライブラリのカスタマイズ月間となります。
スマートフォン閲覧のユーザビリティ
ユーザビリティという言葉をお聞きしたことはありますでしょうか？
簡潔に表すならば「使いやすさ」「便利さ」といった点ではないでしょうか。
似たような言葉としてアクセシビリティという言葉もありますがこちらは、ステータスに関わらず誰でも「使えるかどうか」です。
今回着目するのはスマートフォンユーザーに対するユーザビリティです。
レスポンシブデザインにおいて、PCと同じコンテンツを使用すると画面幅の狭いスマートフォンだと縦に長くなってスクロールするのが大変、という事案も多くあると思います。
その際によく用いられるのがアコーディオンメニューです。
普段は隠しておいて、特定のボタンを押すとコンテンツを表示するというもの。
しかし、スマートフォンだとマウスホバーのエフェクトが出来ないためクリックできることを伝えなければいけない。
ということで、このアコーディオンメニューのカスタマイズを行いました。
開ける矢印と、閉じるボタン
アコーディオンメニューの端に下向きの矢印を置くこともよく用いられる手段です。
こんな感じで、こちらはCSSで簡単に実装できますね。
今回はFAQマネージャーというプラグインのアコーディオンメニューにおいて、
もう一度クリックすると閉じれるということを伝える
というカスタマイズを行いました。
最終目的地はこちら。
普段は下向きの矢印、クリックしたら✕に変化する、というもの。
カスタマイズしたjsのソースコードやCSSなどはこちらからご確認いただけます。
ぜひお試し下さい！
