視線にあわせてコンテンツを配置しよう|ホームページ・チラシ活用

視線の動きを意識して読みやすいレイアウトへ

ウェブサイトやチラシをみる人の視線の動きには一定のパターンがあります。

あなたの治療院・サロンサイトを訪れた人や、チラシを見た人の視線の動きにあわせコンテンツを配置することで、読みやすさがぐっと向上します。

それにより訴求したいメッセージを効果的に伝えることができますよ。

●視線の動きのパターン

視線の動きには「Z型」「F型」「N型」と呼ばれるパターンがあります。

聞いたことがある方もいるのではないでしょうか。

それでは1つずつみていきましょう。

●Z型

Z型はいわゆる斜め読みのことです。

視線は左上から始まって、右上に移動し、左下に斜めに移動して右下に動くパターンです。

チラシなど横組みで紙面の領域が決められている場合、まずは全体をみようとするためこのような視線の動きになります。

アルファベットの「Z」のように動きます。

視点の動きZ型

●F型

F型ははじめに左上から右上に水平に移動します。その後、少し下に移動し、再度右に水平移動します。最後に上からし下へ視線を移動します。

主にウェブサイトをみるときにF型の動きをします。つまり、治療院・サロンのホームページはこのF型を意識してレイアウトを組むと良いでしょう。

F型ではサイトの上部に読んでもらいたい要素を盛り込む必要があります。

視線の動きF型

●N型

N型は新聞や書籍など縦組みのもののときの視線の動きます。右上から右下に移動し、次に左上から左下に動くパターンです。

アルファベットの「N」のような動きをします。

視線の動きN型

●「大」から「小」へ

次に視線の動きの”パターン”ではなく”構成する要素”によって変化させる方法をみていきましょう。

はじめに以下をみてください。

視線誘導大から小へ

EDCBAと読んだのではないでしょうか。

左からABCDEと書かれており、かつ、アルファベットの正の並び順でもあるにも関わらず、文字の大きい順であるEDCBAを先に読んでしまいます。

単純に面積が多い文字や画像から先に目に入るからです。

このように要素のサイズを調整することで、視線を誘導することができます。

●同色、同形へ

情報が並列におかれたとき、人は無意識に同形、同色・同形を探し視線を移動させます。

視線誘導 同色と同形

類似するコンテンツの数が多いとき「同形」「同色」で並べることで視線誘導ができます。

●まとめ

視線の動きのパターン、さらに大きさや形・色で視線を誘導することもできます。

人の視線の動きパターンを考えながら、訴求したいコンテンツを配置しましょう。

ホームページだけでなく、チラシや貼り紙にも活用できますよ。

トップページ施術者PR
視線の動きを意識して読みやすいレイアウトへ