サイトの作り方
ユーザビリティを意識する
この記事は執筆されてから16年が経過しています。
ユーザビリティとは「使いやすさ」を意味します。
WEBサイトはヘッダー、フッター、メインとなるナビゲーション、各ページにあるサブナビゲーション、内容を記載する部分などいくつかの要素に絞ることができます。もし、ページ毎にWEBサイトのデザインが変わりナビゲーションの位置が変わればユーザは快適な閲覧とは感じないでしょう。
まず、WEBサイトでは快適性を意識することが大切です。快適性とは色々な考え方がありますが、白い背景に黄色い色の文字にする、目的のページまでのクリック数を減らすなど様々な要素があります。そしてWEBサイトには暗黙のルールのようなものが存在することを忘れてはいけません。
例えばリンク部分にはマウスが触れると指の形に変形することでユーザにその部分がリンクであると明示します。もしあなたのWEBサイトのテキストリンク部分が赤色で下線がなければパッと見ただけでどこがリンクか分かるでしょうか。逆に目立たせたい部分に下線を入れたらどうなるでしょう。目立つことよりもリンクされている部分と感じるのではないでしょうか。
自分自身で作ったWEBサイトですから目立たせたい部分やリンクがどのような装飾になっているか分かるのは当然のことです。しかし、初めての訪問者がパッと見て判断できないような操作性が悪いのであれば意味がありません。
常にWEBサイトを見る人のことを意識した設計を心がけましょう。
実際に見かけた様々な事例
ナビゲーションとはWEBサイト内の移動をスムーズに移動するためのリンク設定のことです。
WEBサイトに合わせ縦型ナビゲーション、横型ナビゲーションなどいくつかのタイプを使い分けます。「簡単!Yahoo!オークション解説」、「誰にでも分かるHTML講座」のような解説を目的としたWEBサイトの場合にはページ数が膨大になり各ページ間の移動が難しくなるため、パンくずナビゲーションなども併用することで目的のページへの移動を容易になるよう意識することが大切です。
-
文字が小さい
これはダミーテキストです。
紙媒体と異なり文字サイズが変更できるWEB媒体では文字サイズの変更によってレイアウトがずれることを防ぐためにフォントサイズを固定(FirefoxではCSSの設定などでフォントサイズを固定されていても変更することができます)しているサイトが多く存在します。
-
文字と背景のコントラストが高い、低い
これはダミーテキストです。
これはダミーテキストです。
文字色と背景色が極端に色味が近い、補色などでによって文字が読みにくくなります。一般の方だけでなく色覚障害者や年齢による視力低下を考慮した配色設定が必要です。
-
リンク部分が分かりにくい
これはダミーテキストです。これもダミーテキストです。
パッと見てどちらがリンク箇所か分かりましたか?多くのWEBサイトではリンク部分は下線がついた状態になっています。それが暗黙のルールとなりユーザによっては下線のあるテキストはリンクだと思い込んでしまう可能性があります。
最新ランキング
- ル・レーブユリ科ユリ属のヤマユリ(山百合)、カノコユリ(鹿の子百合)などの原種を交配して、1975年に園芸品種としてアメリカで誕生した品種で、カサブランカ(Lilium...
- ユグドラシル名前は「恐ろしき者の馬」を意味する。 世界を支えているトネリコの樹。世界樹。 ユグドラシルからは3本の太い根が出ており、ニブルヘイムに湧いているフヴェルゲルミル...
- レギンレイヴ名前は「神々を受け継ぐ者」を意味する。 ヴァルキューレの1人ではあるが、準女神として位置づけられていることからブリュンヒルドと同じような待遇を受けている可能性が...
- ゴールデン・ジュビリー・ダイヤモンド1985年、デビアス社が所有するプレミア鉱山(2003年に開鉱100周年を記念し、カリナン鉱山に名称変更)で発見された褐色をした755カラット(151g)のダイ...
- アルゴ船イオルコスの王・イアソンがペリアスから突きつけられたコルキスの黄金の羊の毛皮を探す冒険のために、船大工・プリコスの息子・アルゴスによって建造された。 アルゴ船の...