ユーザーの視線の流れ

一般的に、webサイトをユーザーが見る時に視線の流れというものがあります。
その流れに沿ったレイアウト、サイト情報を配置することで、ユーザーにも分かりやすくなります。
視線の流れには主に2種類あります、
・視線の流れ（Z軸）
・視線の流れ（F・E軸）
Z軸というのは、文字通りアルファベットのZのように視線が左から右、段落があったらまた左から右といった感じです。
F・E軸も同じくアルファベットの形通りに視線が動くことです。
Z軸と違うのは視線が右に行き、一旦休憩ポイントがあるということです。
ユーザーの目線は右で一旦止まることが多いので、右側に目立たせたい情報やバナーなどを配置すると効果的です。

黄金比

これはデザインをするのも考えるのも難しいですが、概念だけでも知っておくと役に立ちます。
デザインには黄金比と呼ばれるものがあり、写真などの黄金比率は「1:1.618」といわれています。
これは短辺を1としたとき、長辺を1.618という比率です。
有名なのはモナ・リザの顔やappleのロゴです。

ジャンプ率

ジャンプ率とは、画像やテキストなどの大きさの比率のことです。
普段あまり考えないと思いますが、見出しや画像がでかでかと大きく、その他のテキストなどが小さいサイトなどは無意識に活発な印象を持つはずです。
逆に画像やテキストなどの要素のサイズが近いと落ち着いている雰囲気を感じるはずです。
このように、無意識にユーザーの印象を変えることができるので、目指すユーザーに合わせてジャンプ率も変えていきましょう。

文字詰めや行間

テキストの文字詰めや行間もサイトの雰囲気を変える要素になります。
文字詰めとは文章の間の余白のことです。
通常あまり変えることはないと思いますが、例えばこの幅でこれだけの文章を表示したいなど出てくると思います。
そういったときに文字の間隔を狭くしたり広くすることで調整します。
一般的に狭すぎても広すぎても読みにくい、見ずらい文章になるので注意が必要です。
文章を読ませたいなら適度な間隔をあけるべきですが、あえて意図があるなら文字詰めも行ってかまいません。
ただ、それだけ空間センスが問われてくるのでするときはよく考えましょう。
同じく、文章の行間についても狭めたり広くすることができます。
狭すぎると同じく読みにくくなってしまうし、行間を開けすぎると、同じ要素の文章として読みにくくなるなど不都合があります。

第7回まとめ　ユーザー視点に立とう

webデザインでは単に自分が満足するだけでなく、ユーザーをメインに考えてデザインしましょう。読みにくかったり見にくいサイトはいいサイトとは言えません。
結果的にユーザーが離れ、アクセスも落ちるといった悪循環に陥ることもあるので、常に客観的にデザインしていきましょう。

次回8回目は11月6日更新予定です。

Webデザイン 基本～上級編を学ぶ 第6回
Webデザイン 基本～上級編を学ぶ 第5回
Webデザイン 基本～上級編を学ぶ 第4回
Webデザイン 基本～上級編を学ぶ 第3回
Webデザイン 基本～上級編を学ぶ 第2回
Webデザイン 基本～上級編を学ぶ 第1回