WEB活用〜vol.4「Fライン」

人の目線の動きには、ある程度法則があります。

右開きの本、例えば国語の教科書、文字は縦組みですね。
右上から下に下がり、また上がって左に移動して下がる、
その目線移動の形になぞらえ「N」ラインと言います。

左開きの本、例えば英語の教科書、文字は横組み。
左上から右に流れ、また左に戻って下がり、また右へ。
これは「Z」ラインと言います。


WEBサイトで言われるのはそのどちらでもなく、
「Fライン」なんです。

左上から見て、上部にある情報を右までガン見し、
左に戻った後は、下部の情報は流すようにスクロール。

ゴルゴコンサルティング WEB活用 Fライン










あくまでも傾向でデザインの意図にもよりますが、
自店サイトやランディングページを作る際には、
少しだけ意識してレイアウトすると情報が入りやすいと思います。


さてゴルゴコンサルティングのサイトはどうでしょう。

「F」にした場合、右側と下部情報への意識が薄くなることを憂慮し、
上部では左右の方向を感じさせない、街のパノラマ背景。
真ん中からまっすぐ下がり、また左右どちらでもいける並列バナー。

2度、横向きのラインを作りたかったので、
これを意識した「エ」ラインで組んでおります(^^)

いきなりカタカナwですが、
いずれにせよヨコとタテをどこで注視してほしいか、
Fもエも同じ意味合いかもしれませんね。