縦書きは右から左へ。横書きは左から右へ。
新聞に代表されますが、日本語には縦書きの伝統があります。縦書きであれば視線の移動は右から左がルール。これを逆から読む方はまずいないでしょう。
ではWEBサイトではどうか？
基本的に海外を含めて横書きがメインであり、日本語のサイトも横書きがほとんど。日本のサイトに限定しても一般的だと言えます。そして、横書きは左から右へと読むことがルールです。
以上の点から考えると。
WEBサイトでは文章の流れに添って、左から右へと読み進めるのが基本となります。
左に壁をつくり右に流す
視線の始点となる左サイドに壁を作り、右に流す方法が通常のサイトでは良くあるかと思います。具体的には、左にサイドナビゲーションのある状態です。
左にサイドナビゲーションがあると、ナビゲーションをさらっと流してすぐに右の方へ視線が流れていきます。なぜなら、視線が移動する右方向に「ひっかかり」が無いからです。
もしも右に行く途中に何らかの引っかかりがあれば別ですが、始点部分にいくら引っかかりを置いても視線は動いてしまいます。感覚的には、「左端には留まりたくない」「右に動きたい」といったむずむず感を感じるといえるかもしれません。
右に壁を作らない方法では、意外と強い視線の移動効果を生みます。サイドナビゲーションを邪魔に感じないようにしたり、右端に重要な要素を置くことでより効果的に視線を惹き付けることができます。
左に戻りにくい
難点は、右に行きっぱなしになりやすい点です。
視線が右に動く力が強いと、左に戻す際には抵抗を感じます。意識的にこの抵抗を実感することは無いでしょうが、ページ内で右から左へと視線を動かすのと、左から右へと視線を動かすのでは微妙な差が生まれているはずです。
もちろん、これは文章の方向性にも影響されています。右方向に流れがある横書きの文字があれば、自然と右向きの力が強くなるからです。
右に壁を作り左に戻す
始点となる左には目立つ要素を置かず、右に壁を作る方法もあります。主にブログで見られる右サイドバーの構成がこの方法に当たります。一般的には再度ナビゲーションとメインコンテンツの間にはラインを引くことが多く、そのラインが壁としても機能します。
また、ブログであれば右サイドにビジュアル的にインパクトのある要素が多くあります。例えば、写真のバナーやソーシャル関連のアイコンなど。これらも右に配置することで壁の補強になります。
視線の動く先の右端に壁があると、視線は左に跳ね返されます。すると、右に壁がない場合よりも左に戻りやすくなります。スムーズにメインコンテンツの隅々をユーザーに見せたい場合には、この壁の効果は良い結果をもたらす可能性があります。
窮屈に感じる
眼前にコンクリ−トの壁があれば、大抵の方は圧迫感と窮屈な感覚を覚えます。視点を移動する際にも同様で、行き先である右に壁があれば窮屈さを感じてしまいます。
窮屈さを感じる場合、壁となる要素の色や幅を調節して強い壁にしない方が良いです。10pxで黒い線よりも、5pxでグレー線の方が壁に対する感覚は軽いはず。跳ね返る力も弱くなりますが、窮屈な印象も弱くなるでしょう。
右端に釘付け
壁の部分に目を惹くバナーを置いた場合、右に行ったまま視線が戻りにくくなります。いわば釘付け。
目を惹く要素の例としては、彩度の高いカラフルな要素やユーザーの関心を引く写真なり文章なりがかかれた要素です。具体的に言えばアフィリエイトやアドセンスなどがあてはまるでしょう。
メインコンテンツを読ませるという意味ではデメリットですが、アフィリエイト目的であれば当然あり得る配置です。
全てにあてはまらない
ここまで、文章の方向性からWEBサイトでの視線の動きを考えてみました。が、何よりも強いという要因ではありません。意志の力や関心により打ち消されてまいます。
内容に惹かれて読み始めたなら両サイドに何があろうと視点はメインコンテンツに集中しますし、右にバナーがあるからと言って必ずクリック率が上がるわけでもありません。
また、サイトは単一の要素で構成されることは少なく、複合的な要因が存在するのが当然です。複数ある要因の一つを整えたからといって、効果が出るはずもありません。
とはいえ「視点は文字方向に従う」という要因は確かに存在します。意図しておくべき事柄です。
結び
ナビゲーションを左にするか右にするか。
バナーを右にするか左にするか。
メインコンテンツを縦に区切る線を太くするか細くするか、色を濃くするか薄くするか。
これらで迷った際には視点の移動を基準に考えることも有効です。結果として読みやすさやページの目的を達成できる形になれば、要素の配置に成功したと言えます。
0 コメント:
コメントを投稿