「Making of Bead」ウェブサイト-ユーザビリティへの企画書
●ウェブサイトの内容
・自分の仕事の日常から、アクセサリー作りに関する素材と工具を紹介する。
・リピータ確保のため、日誌と参考製作例を随時更新する。
●目標(到達目標)
今回のターゲットのなるのは主に女性となり、
PCの操作に熟練していない訪問者が多いと考える。
したがって以下のことをユーザビリティの配慮として、
全ページの制作に取り組む。
サイトの構造上の配慮
・全体が無理なく移動できる程度の階層とし、行き止まりのページを作らない。
・訪問者が迷わないように、メインコンテンツを多く作り過ぎないようにする。
トップページへの配慮
・一目で何のサイトであるのかがわかるように、キャッチコピーを置き
コンテンツメニューと共に、制作に関する画像を用意してアイキャッチとする。
・コンテンツメニューには英文を使わずに、日本語表記とする。
・コンテンツメニューには、コンテンツ内容がわかるような名前を付ける。
・サイトマップをテキストリンクにて設置して、欲しい情報のページへ
素早く移動できるようにする。
各ページ共通の配慮
・共通のメインナビゲーションを設置することで、どのページに移動しても
一度学習した同じ操作ができるようにする。
・また同じ画像を使用することで、どのページに移動してもキャッシュにより
表示速度を速くするようにする。
・メインナビゲーションに使用する画像リンクにはJavaScript
テキストリンクにはCSSを採用して、マウスポイントを合わせると
色が変わるようにして初心者にわかりやすいようにする。
・テキストリンクには必ず下線を使用する。
・現在地がわかるように、パン屑方式のナビゲーションを置き
現在表示されているページには、ナビゲーションのリンクを外しておく。
・左上にサイトのIDとなる画像を置く
・altタグを使用することで、画像表示前にリンク先、内容がわかるようにする。
・jpg画像が多くなるので、サムネールを使用することも一つの方法だが
初心者には別ウィンドウは操作しにくいものと考えるので
重たいデータにならないように、適度に圧縮をする。
・どのページも同じレイアウトにすることで、操作が共通するようにする。
・スクロール安全圏内に画像を置いて、そのページの内容がするにわかるようにする。
サイト内移動に関する配慮
・情報提供ページを含む内容なので、リピーターが必要なページに移動できるよう
全てのページにメインナビゲーションを設置。
・全体にスクロールを長くしないように配慮するが、スクロールした先のフッター
部分にも各ページに移動できるナビゲーションを設置する。
・テキストリンクは訪問済みを別色にして、同じページに戻らないようにする。
コンテンツ内容への配慮
・内容は制作者の主観によるもので、非営利な個人的なウェブサイトであることを
サイトポリシーとして明確に表示する。
・問い合わせ等ができるように、連絡先を全てのページに置く。
・テキストが読みやすいような配色にして、各項目には見出しを付けて
内容を把握しやすいようにする。
●目標(達成目標)
ナローバンドからのアクセスでもストレスを感じない速度で、各ページにスムーズ
に移動ができ、無理なく全てのページに目を通せる程度の内容でまとめたい。その
為にはテキストにも読みやすい語り口にるすなどの工夫が必要であろう。トップペ
ージには時系列に沿った更新情報を表示して、制作例、日誌ををこまめに更新し、
常に生きているウェブサイト(放置していない)であることを訪問者にアピールし、
リピーター確保ができるようにしたい。また、CSS,Java Scriptの使用を最低限にし
て、余分な装飾をせずに、ブラウザの違いによる表示の違いをなるべく少なくする
ように努めたい。画像は可能な限り色抜きをして圧縮し、10KB前後を中心にして、
最高でも20KB前後にするようにしたい。
●このテーマを選んだ背景
ピーズワークスを楽しむのは、圧倒的に女性である。自分の作品を紹介した様々な
既存のウェブページに見られるデザインはおしゃれだが、意味のなさないスプラッシュ
ページや、CSSの多用によって制作者のローカル環境でしか動作しない効果も多いよう
に感じた。
私が閲覧する先では、突然自分の環境からまったく見えなくなってしまったサイ
トも存在し、毎日訪問することを楽しみにしていた者として、とても残念に思う。
マウスポイントの形状を変えたり、ステータスに文字を流すことよりも、
まずは訪問者に優しいサイトであって欲しいという願いをこめて、このテーマで自
分が勉強したことを可能な限り反映させた、ウェブサイトの制作をすることを決め
た。
動作環境
ADSL8MB
MacOS9.2(MSIE5.1)
MacOS10.1.5(MSIE5.1.4 NN7.02)
WindowsXP(Firefox0.10.1)