ユーザビリティーをかんがえてみる。文字サイズ変更は意味あるか？とりあえず設置してみた。

こんにちわ、toshiです。訪問有り難うございます。ブログランキング参加中！、応援クリックを！

いつも有難うございます。43位から41位にアップ

こんにちわ。ウェブサイトを構築するのに大切なことの一つに、ユーザビリティーがあります。ユーザビリティーとはユーザにとって使いやすいか？みやすいか？と言った意味でウェブサイト上で使われる言葉です。


ネットショップであれば、購入までの流れが使いやすい、わかりやすい、商品の情報が見やすい等、多々チューニングする箇所があります。


画像の大きさであったり、文字の大きさ、色、サイトの導線、配色、配置のユーザビリティーを考えることで売り上げアップにもつながります。


よく使われる文字サイズの変更、大中小のボタンを設置してみました。通常ブラウザーで文字サイズ変更できますが、ユーザビリティーを考えてワンクリックで変更できるボタンです。


調べて見るとstyleswitcher.jsスプリクトを設置して切り替える方法が一般的のようです。参考になるサイト　>> CSSの切り替えで文字サイズを変更する方法


この方法でもよかったのですが、CSSを3つ用意する手間と、管理面からこの方法以外で実装してみました。

カスタマイズDSサイトでは、文字の大きさフォントサイズは「%」で統一しています。こうすることによって、どのブラウザーからでも文字の大きさを統一することができ、またJavaScript使って簡単に文字サイズの切り替えができます。


フォントサイズを大・中・小と変えるJavaScriptを使って実装しました。

XOOPS用になってますが、必要なファイルをアップロードすれば、他サイトでも使用できます。
ダウンロードして解凍しでてきたファイル群のなかの

・change_word_size.js
・cookiemanager.js
・imagesフォルダ

と別にprototype.jsをサーバーにアップします。

上記３つへのスプリクトパスを記述して、
ボタンを設置したい場所にイメージパスを記述すればOKです。
詳細はリンク先に記述ソースあります。



ホビー88ショップに設置しました、CSSとボタン画像はカスタマイズしています。

役に立ったらクリックお願いします。ランキング参加中！