2010年10月11日

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

テーマ:技術メモ

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

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



アフィリエイターからドロップシッパーに!


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


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


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


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


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


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

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


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

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

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

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

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



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


ペタしてね



役に立ったらクリックお願いします。ランキング参加中!人気ブログランキングへ


AD
いいね!した人  |  コメント(0)  |  リブログ(0)

としさんさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

コメント

[コメントをする]

コメント投稿

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。