読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

ユーザービリティを求めてアコーディオンメニューの開閉時の画像を変える。

f:id:yamato-ugaki:20160512203430j:plain

こんにちは。
ユーザー視点からのUIを気にかけられる web制作の宇垣です。

2日間東京へ行っていまして、
・JIS規格の変更点のセミナー
・WEBマーケティングエキスポ
・チーム研修

を行って大変充実した2日間でした。


レポートをしたいのは山々ですが
今月は私のプラグインやjQueryライブラリのカスタマイズ月間となります。

スマートフォン閲覧のユーザビリティ

ユーザビリティという言葉をお聞きしたことはありますでしょうか?
簡潔に表すならば「使いやすさ」「便利さ」といった点ではないでしょうか。
似たような言葉としてアクセシビリティという言葉もありますがこちらは、ステータスに関わらず誰でも「使えるかどうか」です。

今回着目するのはスマートフォンユーザーに対するユーザビリティです。

レスポンシブデザインにおいて、PCと同じコンテンツを使用すると画面幅の狭いスマートフォンだと縦に長くなってスクロールするのが大変、という事案も多くあると思います。
その際によく用いられるのがアコーディオンメニューです。

普段は隠しておいて、特定のボタンを押すとコンテンツを表示するというもの。


しかし、スマートフォンだとマウスホバーのエフェクトが出来ないためクリックできることを伝えなければいけない。


ということで、このアコーディオンメニューのカスタマイズを行いました。

開ける矢印と、閉じるボタン

アコーディオンメニューの端に下向きの矢印を置くこともよく用いられる手段です。

f:id:yamato-ugaki:20160512205117j:plain
こんな感じで、こちらはCSSで簡単に実装できますね。

今回はFAQマネージャーというプラグインのアコーディオンメニューにおいて、

もう一度クリックすると閉じれるということを伝える

というカスタマイズを行いました。


最終目的地はこちら。

f:id:yamato-ugaki:20160512204807p:plain


普段は下向きの矢印、クリックしたら✕に変化する、というもの。


カスタマイズしたjsのソースコードやCSSなどはこちらからご確認いただけます。
ぜひお試し下さい!


wp-notebook.com

ページトップ